How To Create HTML CSS Bootstrap Personal Portfolio With Free Source Code By Indian Coding Wala

Omnath Dubey 5/17/2023 09:35:00 AM

HTML Source 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" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="styles.css" />
    <title>Personal Portfolio Website Indian Coding Wala </title>
  </head>
  <body>
    <nav>
      <div class="nav__logo"><a href="#">Indian <span>Coding</span> Wala.</a></div>
    </nav>
    <header>
      <div class="section__container header__container">

        <h1>ICW</h1>
        <h2 class="section__title">Indian Coding <span>Wala.</span></h2>
        <p>
          At a pressure of one atmosphere (atm), ice melts or water freezes (solidifies) at 0 °C (32 °F) and water boils or vapor condenses at 100 °C (212 °F). However, even below the boiling point, water can change to vapor at its surface by evaporation (vaporization throughout the liquid is known as boiling). Sublimation and deposition also occur on surfaces.
        </p>
        <div class="action__btns">
          <button class="btn">Welcome Indian Coding Wala.</button>
          <a href="#" class="video">
            <div class="play">
              <i class="bi bi-camera-reels"></i>
            </div>
            
          </a>
        </div>
      </div>
    </header>
   
  </body>
</html>


CSS Source Code :- 




* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  --primary-color: #000000;
  --secondary-color: #0973a4;
  --secondary-color-dark: #047780;
  --text-dark: #0d1319;
  --text-light: #9ca3af;
  --white: #ffffff;
  --max-width: 1200px;
}

.section__container {
  max-width: var(--max-width);
  margin: auto;
  padding: 5rem 1rem;
}

.section__title {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}

.section__title span {
  color: var(--secondary-color);
}

.section__subtitle {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
}

img {
  width: 100%;
}

.btn {
  padding: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  outline: none;
  border: none;
  border-radius: 5px;
  color: var(--white);
  background-color: var(--secondary-color);
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  background-color: var(--secondary-color-dark);
}

a {
  text-decoration: none;
  color: var(--white);
}

body {
  color: var(--white);
  font-family: "Poppins", sans-serif;
}

nav {
  position: absolute;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: var(--max-width);
  padding: 1rem;
}

nav .nav__logo a {
  font-size: 1.5rem;
  font-weight: 600;
}

nav .nav__logo a span {
  color: var(--secondary-color);
}

header {
  height: 100vh;
  background-image: url("https://images.pexels.com/photos/959284/pexels-photo-959284.jpeg?auto=compress&cs=tinysrgb&w=600");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.header__container p {
  color: var(--text-light);
  max-width: 400px;
  margin: 1rem 0;
}
.header__container p span {
  color: var(--white);
  padding: 0.5rem 1rem;
  background-color: var(--secondary-color);
  border-radius: 5px;
  margin-right: 1rem;
}
.header__container h1 {
  font-size: 3rem;
  line-height: 3rem;
}
.action__btns {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.action__btns .video {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

.action__btns .video .play {
  height: 50px;
  width: 50px;
  display: grid;
  place-content: center;
  font-size: 1.5rem;
  border-radius: 100%;
  background-color: var(--secondary-color);
  transition: 0.3s;
}

.action__btns .video span {
  font-size: 1rem;
  font-weight: 600;
}

.action__btns .video:hover .play {
  background-color: var(--secondary-color-dark);
}

@media (min-width: 640px) {
  .section__title {
    font-size: 2.5rem;
  }

  .header__container p {
    margin: 2rem 0;
  }

  .header__container h1 {
    font-size: 4rem;
    line-height: 4rem;
  }

  .action__btns {
    gap: 2rem;
  }

  .about__container {
    flex-direction: row;
  }

  .about__content {
    align-items: flex-start;
  }

  .about__details {
    text-align: left;
  }

  

Omnath Dubey

Posted by Omnath Dubey