How To Create HTML CSS Bootstrap About Us With Free Source Code By Indian Coding Wala

Omnath Dubey 5/17/2023 10:19: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="styles.css" />
    <title>Indian Coding Wala Personal Portfolio Page</title>
  </head>
  <body>
    
    <section class="about">
      <div class="section__container about__container">
        <div class="about__image">
          <img src="https://images.pexels.com/photos/936075/pexels-photo-936075.jpeg?auto=compress&cs=tinysrgb&w=600" alt="about" />
        </div>
        <div class="about__content">
          <h2 class="section__title">About <span>Me</span></h2>
          <p class="section__subtitle">Indian Coding Wala By Omnath Dubey</p>
          <p class="about__details">
            Popular travel websites include Expedia, Booking.com, TripAdvisor, Kayak, Airbnb, and many others. These platforms aim to simplify the travel planning process, offer competitive prices, and provide travelers with comprehensive information to make informed decisions.Popular travel websites include Expedia, Booking.com, TripAdvisor, Kayak, Airbnb, and many others. These platforms aim to simplify the travel planning process, offer competitive prices, and provide travelers with comprehensive information to make informed decisions.
          </p>
          <button class="btn">Read More</button>
        </div>
      </div>
    </section>

    
  </body>
</html>


CSS Source Code :- 

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #000000;
  --secondary-color: #ffd606;
  --secondary-color-dark: #03410a;
  --text-dark: #022819;
  --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: rgb(2, 56, 79);
  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;
}

.about,
.project {
  background-color: var(--text-dark);
}

.about__container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about__image,
.about__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.about__image img {
  max-width: 350px;
}

.about__details {
  padding: 2rem 0;
  color: var(--text-light);
  text-align: center;
}
/* Media queries */

@media (min-width: 640px) {


  .about__container {
    flex-direction: row;
  }

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

  .about__details {
    text-align: left;
  }
}


 

Omnath Dubey

Posted by Omnath Dubey