Responsive Personal Portfolio Website Using HTML CSS And JavaScript

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">
    <!-- Box Icons -->
    <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

</head>
<body>
    <!-- Navbar -->
    <header>
        <a href="#" class="logo">Farin</a>

        <div class="bx bx-menu" id="menu-icon"></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="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
            <div class="bx bx-moon" id="darkmode"></div>
        </ul>
    </header>
    <!-- Home -->

    <section class="home" id="home">
        <div class="social">
            <a href="#"><i class='bx bxl-github'></i></a>
            <a href="#"><i class='bx bxl-dribbble' ></i></a>
            <a href="#"><i class='bx bxl-behance' ></i></a>
        </div>
        <div class="home-img">
            <img src="img/profile.png" alt="">
        </div>
        <div class="home-text">
            <span>Hello, I'm</span>
            <h1>Tasnia Farin</h1>
            <h2>Frontend Developer</h2>
            <p>Lorem ipsum dolor sit amet cons <br> adipisicing elit. Minima, consectetur <br> ullam?</p>
            <a href="#contact" class="btn">Contact Me</a>
        </div>

        <div class="scroll-down">
            <a href="#about">
                <i class='bx bx-mouse' ></i>
                <span>Scroll Down</span>
                <i class='bx bxs-down-arrow-alt' ></i>
            </a>
        </div>
    </section>
    <!-- About -->
    <section class="about" id="about">
        <div class="heading">
            <h2>About</h2>
            <span>Introduction</span>
        </div>
        <!-- About Content -->
        <div class="about-container">
            <div class="about-img">
                <img src="img/about.jpg" alt="">
            </div>
            <div class="about-text">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis beatae eius quae ab consequatur est perferendis dicta. Ad repellendus perferendis minus sunt error eos dicta enim accusantium ipsum veniam debitis quasi sint cum fugiat porro quam, blanditiis a ratione quod!</p>
                <div class="information">
                    <!-- Box 1 -->
                    <div class="info-box">
                        <i class='bx bxs-user' ></i>
                        <span>Tasnia Farin</span>
                    </div>
                    <!-- Box 2 -->
                    <div class="info-box">
                        <i class='bx bxs-phone' ></i>
                        <span>+1 444 444 4444</span>
                    </div>
                    <!-- Box 3 -->
                    <div class="info-box">
                        <i class='bx bxs-envelope' ></i>
                        <span>project@farin.com</span>
                    </div>
                </div>
                <a href="#" class="btn">Download Cv</a>
            </div>
        </div>
    </section>
    <!-- Skills -->
    <section class="skills" id="skills">
        <div class="heading">
            <h2>Skills</h2>
            <span>My Skills</span>
        </div>
        <!-- Skills Content -->
        <div class="skills-container">
            <div class="bars">
                <!-- Box 1 -->
                <div class="bars-box">
                    <h3>HTML</h3>
                    <span>94%</span>
                    <div class="light-bar"></div>
                    <div class="percent-bar html-bar"></div>
                </div>
                <!-- Box 2 -->
                <div class="bars-box">
                    <h3>CSS</h3>
                    <span>84%</span>
                    <div class="light-bar"></div>
                    <div class="percent-bar css-bar"></div>
                </div>
                <!-- Box 3 -->
                <div class="bars-box">
                    <h3>JavaScript</h3>
                    <span>74%</span>
                    <div class="light-bar"></div>
                    <div class="percent-bar js-bar"></div>
                </div>
                <!-- Box 4 -->
                <div class="bars-box">
                    <h3>React</h3>
                    <span>80%</span>
                    <div class="light-bar"></div>
                    <div class="percent-bar react-bar"></div>
                </div>
            </div>
            <div class="skills-img">
                <img src="img/skills.png" alt="">
            </div>
        </div>

    </section>
    <!-- Services -->
    <section class="services" id="services">
        <div class="heading">
            <h2>Services</h2>
            <span>Our Services</span>
        </div>
        <div class="services-content">
            <!-- Box 1 -->
            <div class="services-box">
                <i class='bx bx-code-alt' ></i>
                <h3>Web <br>Development</h3>
                <a href="#">Learn More</a>
            </div>
            <!-- Box 2 -->
            <div class="services-box">
                <i class='bx bx-server' ></i>
                <h3>Backend <br>Development</h3>
                <a href="#">Learn More</a>
            </div>
            <!-- Box 3 -->
            <div class="services-box">
                <i class='bx bx-brush' ></i>
                <h3>UI/UX <br>Design</h3>
                <a href="#">Learn More</a>
            </div>
        </div>
    </section>
    <!-- Portfolio -->
    <section class="portfolio" id="portfolio">
        <div class="heading">
            <h2>Portfolio</h2>
            <span>Our Recent Work</span>
        </div>
        <div class="portfolio-content">
            <div class="portfolio-img">
                <img src="img/p1.jpg" alt="">
            </div>
            <div class="portfolio-img">
                <img src="img/p2.jpg" alt="">
            </div>
            <div class="portfolio-img">
                <img src="img/p3.jpg" alt="">
            </div>
            <div class="portfolio-img">
                <img src="img/p4.jpg" alt="">
            </div>
            <div class="portfolio-img">
                <img src="img/p5.jpg" alt="">
            </div>
            <div class="portfolio-img">
                <img src="img/p6.jpg" alt="">
            </div>
            
        </div>
    </section>
    <!-- Contact -->
    <section class="contact" id="contact">
        <div class="heading">
            <h2>Contact</h2>
            <span>Connect With Us</span>
        </div>
        <div class="contact-form">
            <form action="">
                <input type="text" placeholder="Your Name">
                <input type="email" name="" id="" placeholder="Your Email">
                <textarea name="" id="" cols="30" rows="10" placeholder="Write Message Here..."></textarea>
                <input type="button" value="Send" class="contact-button">
            </form>
        </div>
    </section>
    <!-- Footer -->
    <div class="footer">
        <h2>Farin</h2>
        <div class="footer-social">
            <a href="#"><i class='bx bxl-facebook' ></i></a>
            <a href="#"><i class='bx bxl-twitter' ></i></a>
            <a href="#"><i class='bx bxl-instagram' ></i></a>
           
        </div>

    </div>
    <!-- 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;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  font-family: "Poppins", sans-serif;
}
:root {
  --main-color: #4a00e0;
  --bg-color: #fff;
  --text-color: #0f0c27;
  --hover: hsl(260, 100%, 51%);

  --big-font: 3.2rem;
  --medium-font: 1.8rem;
  --p-font: 0.941rem;
}
section {
  padding: 50px 10%;
}
body.active {
  --text-color: #fff;
  --bg-color: #0f0c27;
}
body {
  background: var(--bg-color);
  color: var(--text-color);
}
*::selection {
  color: var(--bg-color);
  background: var(--main-color);
}
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 10%;
  transition: 0.2s;
}
header.shadow {
  box-shadow: 0 0 4px rgb(14 55 54 / 15%);
}
.logo {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
}
.navbar {
  display: flex;
}
.navbar a {
  font-size: 1rem;
  padding: 10px 20px;
  color: var(--text-color);
  font-weight: 500;
}
.navbar a:hover {
  color: var(--hover);
}
#menu-icon {
  font-size: 24px;
  cursor: pointer;
  z-index: 10001;
  display: none;
}
#darkmode {
  font-size: 22px;
  cursor: pointer;
}
.home {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.2fr 1fr 1fr;
  align-items: center;
  gap: 1rem;
}
.home-img {
  order: 3;
}
.home-img img {
  width: 100%;
}
.home-text span {
  font-size: var(--medium-font);
  font-weight: 500;
}
.home-text h1 {
  font-size: var(--big-font);
}
.home-text h2 {
  font-size: 1.1rem;
  font-weight: 400;
}
.home-text p {
  font-size: var(--p-font);
  font-weight: 400;
  margin: 0.7rem 0 1rem;
}
.social {
  display: flex;
  flex-direction: column;
}
.social a {
  margin-bottom: 1rem;
  font-size: 22px;
  color: var(--text-color);
}
.social a:hover {
  color: var(--hover);
}
.btn {
  display: inline-block;
  background: var(--main-color);
  color: #fff;
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
}
.btn:hover {
  background: var(--hover);
}
.scroll-down {
  position: absolute;
  bottom: 4rem;
  left: 18.5%;
}
.scroll-down a {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: var(--text-color);
}
.scroll-down .bx {
  color: var(--main-color);
  font-size: 24px;
}
.heading {
  text-align: center;
}
.heading h2 {
  font-size: var(--medium-font);
}
.heading span {
  font-size: var(--p-font);
}
.about-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.about-img img {
  width: 80%;
  border-radius: 0.5rem;
}
.about-text p {
  font-size: var(--p-font);
  font-weight: 400;
  text-align: justify;
}
.information {
  margin: 1rem 0 1.4rem;
}
.information .info-box {
  display: flex;
  align-items: center;
  margin-bottom: 1.4rem;
}
.information .info-box .bx {
  font-size: 22px;
}
.information .info-box span {
  font-weight: 400;
  margin-left: 1rem;
}
.skills-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 2rem;
  margin-top: 4rem;
}
.skills-img img {
  width: 80%;
  padding-left: 4rem;
  object-position: center;
}
.bars-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 1rem;
}
.bars-box h3,
span {
  font-size: 1.1rem;
  font-weight: 500;
}
.light-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  background: hsla(260, 100%, 44%, 0.4);
  border-radius: 0.5rem;
}
.percent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.5rem;
  background: var(--main-color);
  border-radius: 0.5rem;
}
.html-bar {
  width: 94%;
}
.css-bar {
  width: 84%;
}
.js-bar {
  width: 74%;
}
.react-bar {
  width: 80%;
}
.services-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.services-box {
  padding: 20px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 0.5rem;
  border-bottom: 2px solid var(--main-color);
  box-shadow: 0 2px 7px rgb(14 55 54 / 15%);
}
.services-box h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.7rem 0 0.4rem;
}
.services-box .bx {
  padding-top: 2rem;
  font-size: 24px;
  color: var(--main-color);
}
.services-box a {
  color: var(--main-color);
  font-size: var(--p-font);
  font-weight: 500;
}
.portfolio-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, auto));
  gap: 1rem;
  margin-top: 2rem;
}
.portfolio-img {
  overflow: hidden;
  border-radius: 0.5rem;
}
.portfolio-img img {
  width: 100%;
  display: block;
}
.portfolio-img img:hover {
  transform: scale(1.1);
  transition: 1s;
}
.contact-form {
  display: grid;
  place-items: center;
  margin-top: 2rem;
}
.contact-form form {
  display: flex;
  flex-direction: column;
  width: 300px;
}
form input,
textarea {
  padding: 12px;
  border-radius: 0.5rem;
  width: 100%;
  border: none;
  outline: none;
  background: hsla(260, 100%, 44%, 0.1);
  margin-bottom: 1rem;
  color: var(--text-color);
}
form input::placeholder,
textarea::placeholder {
  color: var(--text-color);
}
form textarea {
  resize: none;
  height: 200px;
}
.contact-button {
  width: 80px;
  cursor: pointer;
  background: var(--main-color);
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.contact-button:hover {
  background: var(--hover);
}
.footer {
  display: grid;
  place-items: center;
  padding: 50px;
  background: var(--main-color);
  color: #fff;
}
.footer h2 {
  font-size: var(--medium-font);
  margin-bottom: 1.4rem;
}
.footer-social a {
  color: #fff;
  font-size: 22px;
  padding: 10px;
}
.copyright {
  padding: 20px;
  background: var(--main-color);
  text-align: center;
  color: #fff;
}
/* Making Responsive */
@media (max-width: 991px) {
  header {
    padding: 18px 4%;
  }
  section {
    padding: 50px 4%;
  }
}
@media (max-width: 881px) {
  :root {
    --big-font: 2.7rem;
    --medium-font: 1.4rem;
  }
}
@media (max-width: 768px) {
  :root {
    --big-font: 2.4rem;
    --medium-font: 1.2rem;
  }
  header {
    padding: 11px 4%;
  }
  #menu-icon {
    display: initial;
    color: var(--text-color);
  }
  header .navbar {
    position: absolute;
    top: -500px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
    transition: 0.2s ease;
    text-align: center;
  }
  .navbar.active {
    top: 100%;
  }
  .navbar a {
    padding: 1.5rem;
    display: block;
    background: var(--bg-color);
  }
  #darkmode {
    position: absolute;
    top: 1.4rem;
    right: 2rem;
  }
  .scroll-down {
    display: none;
  }
  .home {
    grid-template-columns: 0.5fr 3fr;
  }
  .home-text {
    grid-column: 1/3;
    padding-left: 1.4rem;
  }
  .home-img {
    order: initial;
  }
  .about-container {
    grid-template-columns: 1fr;
  }
  .about-img {
    display: flex;
    justify-content: center;
  }
  .skills-container {
    grid-template-columns: 1fr;
  }
  .skills-img img {
    padding-left: 0;
  }
  .skills-img {
    padding-top: 2rem;
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 340px) {
  :root {
    --big-font: 1.7rem;
    --medium-font: 1.1rem;
  }
  .home-text span {
    font-size: 1rem;
  }
  .home-text h2 {
    font-size: 0.9rem;
    font-weight: 500;
  }
  .information .info-box span {
    font-size: 1rem;
  }
  .portfolio-content {
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  }
  .contact-form form {
    width: auto;
  }
}

JavaScript Code

// Sticky Navbar
let header = document.querySelector('header');
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');


window.addEventListener('scroll', () => {
    header.classList.toggle('shadow', window.scrollY > 0);
});

menu.onclick = () => {
    navbar.classList.toggle('active');
}
window.onscroll = () => {
    navbar.classList.remove('active');
}

// Dark Mode
let darkmode = document.querySelector('#darkmode');

darkmode.onclick = () => {
    if(darkmode.classList.contains('bx-moon')){
        darkmode.classList.replace('bx-moon','bx-sun');
        document.body.classList.add('active');
    }else{
        darkmode.classList.replace('bx-sun','bx-moon');
        document.body.classList.remove('active');
    }
}

Download Files

SourceCode.rar

Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark And Light Mode

Comments

Search This Blog

Labels

Popular Posts

Labels

Pages

Labels

Contact Form