World's Best MERN Stack Course

Welcome, we will look into homepage styling in our latest tutorial! From creating a dynamic hero section to mastering CSS styling, buttons, analytics, and more, it's an exciting journey. Explore free source code and a challenge awaits you at the end! 👩‍💻

Here is the complete Home.jsx code

import { Analytics } from "../components/Analytics";

export const Home = () => {
  return (
    <>
      <main>
        <section className="section-hero">
          <div className="container grid grid-two-cols">
            <div className="hero-content">
              <p>We are the World Best IT Company</p>
              <h1>Welcome to Thapa Technical</h1>
              <p>
                Are you ready to take your business to the next level with
                cutting-edge IT solutions? Look no further! At Thapa Technical,
                we specialize in providing innovative IT services and solutions
                tailored to meet your unique needs.
              </p>
              <div className="btn btn-group">
                <a href="/contact">
                  <button className="btn">connect now</button>
                </a>
                <a href="/services">
                  <button className="btn secondary-btn">learn more</button>
                </a>
              </div>
            </div>

            {/* hero images  */}
            <div className="hero-image">
              <img
                src="/images/home.png"
                alt="coding together"
                width="400"
                height="500"
              />
            </div>
          </div>
        </section>
      </main>

      {/* 2nd section  */}
      <Analytics />

      {/* 3rd section  */}
      <section className="section-hero">
        <div className="container grid grid-two-cols">
          {/* hero images  */}
          <div className="hero-image">
            <img
              src="/images/design.png"
              alt="coding together"
              width="400"
              height="500"
            />
          </div>

          <div className="hero-content">
            <p>We are here to help you</p>
            <h1>Get Started Today</h1>
            <p>
              Ready to take the first step towards a more efficient and secure
              IT infrastructure? Contact us today for a free consultation and
              let's discuss how Thapa Technical can help your business thrive in
              the digital age.
            </p>
            <div className="btn btn-group">
              <a href="/contact">
                <button className="btn">connect now</button>
              </a>
              <a href="/services">
                <button className="btn secondary-btn">learn more</button>
              </a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

Here is the CSS code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Urbanist, system-ui, Avenir, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
}

:root {
  --bg-color: #f4f3ff;
  --btn-color: #646cff;
  --dark-color: #242424;
  --helper-color: #99b9ff;
}

html {
  font-size: 62.5%;
}

/*? base style */

body {
  margin: 0;
  /* display: flex;
  place-items: center; */
  /* min-width: 32rem; */
  min-height: 100vh;
}

 /*?  Help me reach 1 Million subs 👉 https://youtube.com/thapatechnical */

h1 {
  font-size: 5.4rem;
  line-height: 1.1;
  font-weight: bold;
}

p,
li,
label,
input,
textarea {
  font-size: 1.8rem;
  line-height: 1.56;
  letter-spacing: 0.1rem;
  word-spacing: 0.06rem;
}

a {
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  color: var(--btn-color);
  text-decoration: inherit;
}

li {
  list-style: none;
}

/*? layout Rule  */

.container {
  max-width: 140rem;
  padding: 4rem 2.4rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  gap: 6.4rem;
}

.grid-two-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid-four-cols {
  grid-template-columns: repeat(4, 1fr);
}

/*? Module Rules / Reusable */
button {
  text-transform: capitalize;
  padding: 1rem 2.2rem;
  font-size: 1.7rem;
  font-weight: 500;
  background-color: var(--btn-color);
  border-radius: 0.8rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  -ms-border-radius: 0.8rem;
  -o-border-radius: 0.8rem;
  border: 0.1rem solid transparent;
  cursor: pointer;
  letter-spacing: 0.1rem;
  transition: border-color 0.3s;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  -ms-transition: border-color 0.3s;
  -o-transition: border-color 0.3s;
}

.secondary-btn {
  background-color: transparent;
  box-shadow: inset 0 0 0 0.2rem var(--btn-color);
  margin-left: 3.2rem;
}

/***** Hero Section *****/

.section-hero {
  & .grid {
    align-items: center;
  }

  .hero-content {
    & p {
      margin: 2.4rem 0 4.8rem 0;
      &:first-child {
        margin: 0 0 1.2rem 0;
      }
    }
  }

  .hero-image {
    display: flex;
    justify-content: center;
    & img {
      width: 70%;
      height: auto;
    }
  }
}

/***** End Hero  *****/

/***** analytics Section *****/

.section-analytics {
  margin: 9.6rem 0;

  & .container {
    background-color: var(--bg-color);
    border-radius: 1rem;
  }

  & .grid {
    color: var(--dark-color);

    & .div1 {
      text-align: center;
      border-right: 0.2rem solid var(--dark-color);

      &:last-child {
        border: none;
      }
      & h2 {
        font-size: 4.8rem;
      }
      & p {
        text-transform: capitalize;
      }
    }
  }
}

/***** End analytics Section *****/