Full Responsive Personal Portfolio Website Using With HTML CSS And JavaScript

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>Responsive Portfolio Website</title>
    <!-- Link To CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- Navbar -->
    <header>
        <a href="#home" class="logo">Miley</a>
        <div id="menu-icon" class="fas fa-bars"></div>

        <ul class="navbar">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

    <!-- Home -->
    <section class="home" id="home">
        <div class="home-text">
            <h1>Hi, I'm <span>Miley Cyrus</span></h1>
            <h2>Freelance Web Developer</h2>
            <p>Lorem ipsum dolor sit amet consectetur elit. And Dolorem natus repellat ipsum voluptatibus. Iusto, atque.</p>
            <a href="#" class="btn">Contact Me</a>
        </div>
    </section>
    
    <!-- About -->
    <section class="about" id="about">
        <div class="about-img">
            <img src="images/about.png" alt="">
        </div>
        <div class="about-text">
            <h2>About Us</h2>
            <h1>Miley Cyrus</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam placeat velit quis optio praesentium distinctio reprehenderit excepturi error, facere, aliquid voluptatem! Nemo necessitatibus, quae error quibusdam sunt voluptatibus, iure atque quas quo nostrum libero nam.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam placeat velit quis optio praesentium distinctio reprehenderit excepturi error, facere, aliquid voluptatem! Nemo necessitatibus, quae error quibusdam sunt voluptatibus, iure atque quas quo nostrum libero nam.</p>
            <a href="#" class="btn">Download Cv</a>
        </div>
    </section>

    <!-- Skills -->
    <section class="skills" id="skills">
        <div class="heading">
            <h1>Skills</h1>
        </div>
        <!-- Content -->
        <div class="skills-content">
            <div class="skills-bars">
                <div class="skills-text">
                    <h2>My Skills</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A iusto aspernatur quibusdam veniam ipsam. Voluptate.</p>

                </div>
                <div class="skills-box">
                    <i class="fab fa-html5"><h3>HTML</h3></i>
                    <span>94%</span>
                    <div class="percent-bar html-bar"></div>
                </div>
                <div class="skills-box">
                    <i class="fab fa-css3"><h3>CSS</h3></i>
                    <span>84%</span>
                    <div class="percent-bar css-bar"></div>
                </div>
                <div class="skills-box">
                    <i class="fab fa-js"><h3>JavaScript</h3></i>
                    <span>65%</span>
                    <div class="percent-bar js-bar"></div>
                </div>
                <div class="skills-box">
                    <i class="fas fa-palette"><h3>UI/UX</h3></i>
                    <span>80%</span>
                    <div class="percent-bar ux-bar"></div>
                </div>
            </div>
            <div class="skills-img">
                <img src="images/skills.jpg" alt="">
            </div>
        </div>
    </section>

    <!-- Portfolio -->
    <section class="portfolio" id="portfolio">
        
        <div class="heading">
            <h1>Portfolio</h1>
        </div>

        <!-- Content -->
        <div class="portfolio-content">
            <div class="p-box">
                <div class="p-img">
                    <img src="images/p1.jpg" alt="">
                    
                </div>
                <h2>Web Developer</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat perferendis consectetur illo, consequuntur culpa delectus?</p>
            </div>
            <div class="p-box">
                <div class="p-img">
                    <img src="images/p2.jpg" alt="">
                    
                </div>
                <h2>Web Designing</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat perferendis consectetur illo, consequuntur culpa delectus?</p>
            </div>
            <div class="p-box">
                <div class="p-img">
                    <img src="images/p3.jpg" alt="">
                    
                </div>
                <h2>Recent Work</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat perferendis consectetur illo, consequuntur culpa delectus?</p>
            </div>
        </div>
    </section>

    <!-- Contact -->
    <section class="contact" id="contact">
        <div class="heading">
            <h1>Contact</h1>
        </div>
        <!-- Content -->
        <div class="contact-content">
            <div class="contact-info">
                <div class="info-box">
                    <i class="fas fa-phone-alt"></i>
                    <p>+1 444 444 4444</p>
                </div>
                <div class="info-box">
                    <i class="fas fa-envelope-open"></i>
                    <p>example@email.com</p>
                </div>
                <div class="info-box">
                    <i class="fas fa-map-marker-alt"></i>
                    <p>44 Street NYC, USA</p>
                </div>
                <div class="info-box social">
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-github"></i></a>
                    
                </div>
            </div>
            <!-- Contact Form -->
            <div class="contact-form">
                <form action="">
                    <input type="text" placeholder="Your Name">
                    <input type="email" placeholder="Enter Your Email">
                    <textarea name="" id="" cols="30" rows="10" placeholder="Write your message here..."></textarea>
                    <input type="button" value="Send" class="contact-button">
                </form>
            </div>
        </div>
    </section>

    <!-- Copyright -->
    <div class="copyright">
        <p>&#169; CarpoolVenom ♥ All Right Reserved</p>
    </div>
    
    <!-- Link To JS -->
    <script src="main.js"></script>
</body>
</html>
CSS Code
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  text-transform: capitalize;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
}
body::-webkit-scrollbar {
  width: 0.25rem;
}
body::-webkit-scrollbar-track {
  background: #2c3e50;
}
body::-webkit-scrollbar-thumb {
  background: var(--primary);
}
:root {
  /* Colors */
  --bg-color: #e7eafb;
  --primary: #01a29c;
  --hover: #008170;

  /* Fonts */
  --h1-font: 2.2rem;
  --h2-font: 1.1rem;
  --p-font: 0.9rem;
  --spacing: 1px;
  /* Margins */
  --m-1: 0.4rem;
  --m-4: 2rem;
}
html {
  background: #1c2834;
  color: #fff;
}
section {
  padding: 50px 100px;
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-color);
  padding: 18px 100px;
  box-shadow: 0 0.5rem 50rem rgba(0, 0, 0, 0.1);
}
.logo {
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary);
}
.navbar {
  display: flex;
}
.navbar a {
  font-size: 1rem;
  padding: 10px 20px;
  color: #222435;
  font-weight: 500;
}
header .navbar a:hover {
  background: var(--primary);
  color: #fff;
}
#menu-icon {
  font-size: 2rem;
  cursor: pointer;
  display: none;
}
/* Home */
.home {
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: #222435;
  display: flex;
  align-items: center;
  background-color: var(--bg-color);
  background: url(images/background.png) no-repeat;
  background-size: cover;
  background-position: right center;
}
.home-text {
  max-width: 500px;
}
.home-text h1 {
  font-size: var(--h1-font);
  letter-spacing: var(--spacing);
}
.home-text span {
  color: var(--primary);
}
.home-text h2 {
  font-size: var(--h2-font);
  margin: var(--m-1) 0;
  letter-spacing: var(--spacing);
}
.home-text p {
  font-size: var(--p-font);
  margin-bottom: var(--m-4);
  line-height: 22px;
  max-width: 71%;
}
.btn {
  padding: 10px 22px;
  background: var(--primary);
  color: #fff;
}
.btn:hover {
  background: var(--hover);
}

.about {
  width: 100%;
  min-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.about-img {
  width: 500px;
  height: 400px;
}
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.about-text {
  max-width: 500px;
}
.about-text h2 {
  font-size: var(--h2-font);
  color: var(--primary);
}
.about-text h1 {
  font-size: var(--h1-font);
  font-weight: 600;
}
.about-text p {
  font-size: var(--p-font);
  margin: 1rem 0 var(--m-4);
  text-align: justify;
  font-weight: 300;
}
.skills {
  width: 100%;
  min-height: 100vh;
}
.heading {
  display: flex;
  justify-content: center;
  padding: 1.4rem 0;
}
.heading h1 {
  font-size: var(--h1-font);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
}
.skills-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.skills-img {
  width: 500px;
  height: 400px;
  margin-top: 7.6rem;
}
.skills-img img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}
.skills-bars {
  display: flex;
  flex-direction: column;
  max-width: 500px;
}
.skills-text h2 {
  font-weight: 600;
}
.skills-text p {
  font-size: var(--p-font);
  margin: 1rem 0;
}
.skills-box {
  position: relative;
  background: #2c3e50;
  margin: 1rem 0;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 10px;
}
.skills-box i {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #01a29c;
}
.skills-box h3 {
  margin-left: 1rem;
  font-size: 1rem;
  font-weight: 600;
}
.percent-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--primary);
  height: 0.34rem;
  border-radius: 10px;
}
.html-bar {
  width: 94%;
}
.css-bar {
  width: 84%;
}
.js-bar {
  width: 65%;
}
.ux-bar {
  width: 80%;
}
.portfolio-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.p-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: auto;
  background: #2c3e50;
  margin: 20px;
  padding: 40px;
  text-align: center;
}
.p-box:hover {
  background: var(--primary);
  transition: 0.5s ease;
}
.p-img {
  width: 70px;
  height: 70px;
}
.p-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid var(--primary);
}
.p-box h2 {
  font-size: var(--h2-font);
  font-weight: 600;
  margin: 10px 0;
}
.p-box p {
  font-size: var(--p-font);
  font-weight: 400;
}
.contact-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.contact-info {
  max-width: 500px;
}
.info-box {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}
.info-box i {
  font-size: 20px;
  color: var(--primary);
}
.info-box p {
  margin-left: 1rem;
  font-weight: 400;
}
.social {
  display: flex;
  align-items: center;
}
.social a {
  margin-right: 1rem;
}
form {
  max-width: 360px;
  margin-top: 4rem;
}
form input,
form textarea {
  width: 100%;
  font-size: 14px;
  padding: 1rem;
  border-radius: 0.5rem;
  border: none;
  outline: none;
  margin-bottom: 12px;
  background: #2c3e50;
  color: var(--primary);
  border-bottom: 1px solid var(--primary);
}
form textarea {
  height: 200px;
  resize: none;
}
.contact-button {
  max-width: 100px;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
.copyright {
  padding: 20px;
  text-align: center;
  background: var(--primary);
}
/* Making Responsive */

@media (max-width: 991px) {
  header {
    padding: 15px 80px;
  }
  section {
    padding: 50px 80px;
  }
  .about-text {
    max-width: 444px;
  }
  .about-img {
    width: 300px;
    height: 300px;
  }
  .skills-bars {
    max-width: 420px;
  }
  .skills-img {
    width: 400px;
    height: 300px;
    margin-top: 6rem;
  }
}
@media (max-width: 820px) {
  :root {
    --h1-font: 2rem;
    --h2-font: 1rem;
    --m-4: 1.4rem;
  }
  header {
    padding: 13px 65px;
  }
  section {
    padding: 50px 65px;
  }
  .about {
    flex-direction: column;
  }
  .about-img {
    width: 240px;
    height: 300px;
  }
  .p-box {
    flex: 1;
  }
  .skills-content {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  #menu-icon {
    display: initial;
    color: #222435;
  }
  header .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: var(--bg-color);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: 0.5s ease;
  }
  header .navbar.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .navbar a {
    margin: 1rem;
    padding: 1.5rem;
    display: block;
    background: #fff;
    border-left: 4px solid #222435;
  }
  .home {
    background: #e7eafb;
    justify-content: center;
  }
  .home-text {
    max-width: 410px;
  }
  .contact-content {
    flex-direction: column;
  }
}
@media (max-width: 670px) {
  header {
    padding: 10px 34px;
  }
  section {
    padding: 50px 34px;
  }
  .skills-img {
    width: 320px;
  }
}
@media (max-width: 360px) {
  .home-text {
    max-width: 225px;
  }
  .skills-img {
    width: 280px;
  }
  .about-text {
    margin-top: 1rem;
  }
}
JavaScript Code
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menu.onclick = () =>{

    menu.classList.toggle('fa-times');
    navbar.classList.toggle('active');
}

window.onscroll = () =>{
    menu.classList.remove('fa-times');
    navbar.classList.remove('active');
}
Download Files 
Post a Comment
Labels, ,

Comments

Contact Form

Send