Awesome RESPONSIVE PORTFOLIO Website Using Just HTML CSS And JavaScript - Mobile Responsive

Share
byPosted at




 HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Responsive Portfolio Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <section class="main">
       <header>
           <a href="#" class="logo">KETTY</a>
           <div class="toggleMenu" onclick="menuToggle();"></div>
 
           <ul class="menu">
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Portfolio</a></li>
               <li><a href="#">Work</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </header>
       <div class="content">
           <h1>I'm KETTY PERRY</h1>
           <h2>Web Developer</h2>
           <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel, nesciunt!</p>
           <a href="#">Contact Me</a>
       </div>
       <div class="custom-shape-divider-bottom-1619063140">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
        </svg>
    </div>
    <img src="girl.png" class="model">
   </section>
   <script>
       function menuToggle(){
           const toggleMenu = document.querySelector('.toggleMenu');
           const menu = document.querySelector('.menu');
           toggleMenu.classList.toggle('active')
           menu.classList.toggle('active')
       }
   </script>
</body>
</html>
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(#4b79a1, #8bc1f1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 100px;
}
.custom-shape-divider-bottom-1619063140 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}
 
.custom-shape-divider-bottom-1619063140 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 106px;
}
 
.custom-shape-divider-bottom-1619063140 .shape-fill {
  fill: #ffffff;
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 2em;
  color: #fff;
  font-weight: 600;
}
.menu {
  position: relative;
  display: flex;
}
.menu li {
  list-style: none;
}
.menu li a {
  text-decoration: none;
  color: #fff;
  margin-left: 35px;
}
.menu li a:hover {
  color: #faacaf;
}
.content {
  position: relative;
  max-width: 600px;
  z-index: 1;
}
.content h1 {
  font-size: 3em;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.content h2 {
  font-size: 4em;
  color: #fff;
}
.content p {
  font-size: 1em;
  color: #fff;
  margin: 10px 0 20px;
}
.content a {
  padding: 12px 24px;
  text-decoration: none;
  background: #fff;
  color: #000000;
  display: inline-block;
}
.content a:hover {
  background: #faacaf;
  box-shadow: 4px 5px 15px rgba(0, 0, 0, 0.5);
  transition: 0.5s ease;
}
.model {
  position: absolute;
  bottom: 0;
  height: 90%;
  right: 100px;
}
@media (max-width: 991px) {
  header {
    padding: 20px 40px;
  }
  ul.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: #4588bd;
    display: none;
    z-index: 100;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  ul.menu.active {
    display: flex;
  }
  .menu li a {
    color: #fff;
    margin-left: 0;
    font-size: 30px;
    text-decoration: none;
  }
  .toggleMenu {
    position: relative;
    width: 30px;
    height: 30px;
    background: url("menu.png");
    background-size: 30px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-position: center;
    z-index: 1000;
  }
  .toggleMenu.active {
    position: fixed;
    right: 44px;
    background: url("close.png");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
  }
  .main {
    padding: 40px 40px 0;
    flex-direction: column;
    justify-content: center;
  }
  .content {
    max-width: 96%;
  }
  .model {
    position: relative;
    height: initial;
    right: initial;
    width: 80%;
    bottom: 0;
    margin-top: 18px;
  }
  .content {
    max-width: 96%;
  }
}
@media (max-width: 550px) {
  .content {
    margin-top: 40px;
  }
  .content h1 {
    font-size: 2em;
  }
  .content h2 {
    font-size: 2em;
  }
}
Download Files:
Post a Comment
Labels, ,

Comments

Emotions
Copy and paste emojis inside comment box