How To Create Personal Portfolio Website In HTML And CSS

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>Portfolio Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 
  <section>
    <nav>
      <a href="" class="logo">Portfolio</a>
      <ul>
        <li><a href="" class="active">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">My Work </a></li>
        <li><a href="">Contact</a></li>
      </ul>
      <div class="text">
        <h1>Hi,</h1>
        <h2>I'm <span>Marques</span></h2>
        <p>Web Developer</p>
        <button class="hire-button">Hire Me</button>
      </div>
 
      <img src="man.png" class="man-img">
 
      <ul class="social">
        <li><img src="facebook.png"></li>
        <li><img src="twitter.png"></li>
        <li><img src="instagram.png"></li>
      </ul>
 
 
 
    </nav>
 
 
  </section>
  <div class="about">
    <img src="about.png">
 
  <div class="about-txt">
    <h1>About</h1>
    <h2>Marques</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint numquam excepturi delectus cumque, autem suscipit necessitatibus rem voluptate tenetur commodi perspiciatis fuga repellendus veritatis neque iste saepe molestiae, pariatur dolores et quae corrupti corporis impedit!</p>
    <button>Download CV</button>
  </div>
</div>
 
<div class="my-work">
  <h1>My Work</h1>
 
  <div class="work-img">
    <img src="work1.jpg">
    <img src="work2.jpg">
    <img src="work3.jpg">
  </div>
</div>
<footer>
  <h1>Marques</h1>
  <button>Contact Us</button>
 
  <div class="footer-social">
    <li><img src="facebook.png"></li>
    <li><img src="twitter.png"></li>
    <li><img src="instagram.png"></li>
    
  </div>
  <p>© 2021 Copyright CarpoolVenom</p>
</footer>
 
 
</body>
</html>
Fonts 
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,600&display=swap");
 
* {
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif;
}
Basic Section CSS Code 
section {
  width: 100%;
  height: 100vh;
  position: relative;
  background-image: url("background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
Nav Bar CSS Code 
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  background-color: #fff;
  box-shadow: 1px 2px 10px #0e2431;
  padding: 0px 4%;
}
 
nav ul {
  display: flex;
  list-style: none;
}
 
nav ul li a {
  text-decoration: none;
  margin: 25px;
  color: #0e2431;
  font-size: 15px;
  font-weight: bold;
}
 
nav ul li a:hover {
  border-bottom: 2px solid #5043f5;
}
 
.active {
  border-bottom: 2px solid #5043f5;
}
Logo CSS Code 
.logo {
  color: #0e2431;
  font-size: 18px;
  cursor: pointer;
  margin-left: 40px;
  font-weight: bold;
  text-decoration: none;
}
Main Text CSS Code 
.text {
  position: absolute;
  margin-left: 84px;
  margin-top: 680px;
}
 
.text h1 {
  font-size: 3em;
  color: #0e2431;
}
 
.text h2 {
  font-size: 4em;
  color: #0e2431;
}
 
span {
  color: #5043f5;
}
 
.text p {
  font-size: 2em;
  color: #0e2431;
  font-weight: 600;
}
Hire Me Button And Main Image CSS Code 
.hire-button {
  border: none;
  color: #fff;
}
 
.text button:hover {
  background-color: #7d76d8;
}
 
.man-img {
  height: 415px;
  position: absolute;
  margin-left: 545px;
  margin-top: 655px;
}
Social Buttons CSS Code 
.social {
  position: absolute;
  bottom: 20px;
  left: 115px;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.social li {
  list-style: none;
}
 
.social li img {
  display: inline-block;
  margin-right: 20px;
  transform: scale(0.5);
  transition: 0.5s ease;
}
 
.social li img:hover {
  transform: scale(0.5) translateY(-15px);
}
About Section CSS Code 
.about {
  width: 100%;
  height: 600px;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  position: relative;
  justify-content: space-evenly;
  align-items: center;
}
 
.about img {
  height: 270px;
  margin-left: 10%;
}
 
.about-txt {
  width: 500px;
}
 
.about-txt h1 {
  font-size: 2em;
  color: #0e2431;
}
 
.about-txt h2 {
  font-size: 1.5em;
  color: #0e2431;
  margin-top: 12px;
}
 
.about-txt p {
  font-weight: 400;
  color: #0e2431;
  margin-top: 12px;
}
 
.about-txt button {
  height: 46px;
  width: 140px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 16px;
  outline: none;
  background: #5043f5;
  margin-top: 18px;
  border: none;
  color: #fff;
}
.about-txt button:hover {
  background-color: #7d76d8;
}
My Work Section CSS Code 
.my-work {
  width: 100%;
  height: 600px;
  background-color: #fff;
  box-sizing: border-box;
  display: grid;
  place-items: center;
}
 
.work-img img {
  height: 215px;
  transition: 0.5s ease;
}
 
.work-img img:hover {
  border-radius: 12px;
  transform: translateY(-12px);
  transform: scale(1.5);
}
Footer Section CSS Code 
footer {
  width: 100%;
  height: 235px;
  background-color: #0e2431;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 
footer button {
  height: 46px;
  width: 140px;
  margin-top: 15px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 16px;
  outline: none;
  background: #5043f5;
  margin-top: 18px;
  border: none;
  color: #fff;
}
 
footer h1 {
  color: #fff;
}
footer p {
  color: #fff;
  margin-top: 18px;
}
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
}
.footer-social li {
  list-style: none;
}
 
.footer-social img {
  height: 45px;
  filter: invert(1);
  display: inline-block;
  margin-right: 10px;
  transform: scale(0.5);
}
Post a Comment
Labels,

Comments

Emotions
Copy and paste emojis inside comment box