कंप्यूटर स्टोर लैंडिंग पेज

1951 zegarkidawida

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

28 November 2024

रियल एस्टेट एजेंसी लैंडिंग पेज

17 December 2024

लॉगिन पेजों का पता

HTML

<body>
  <header>
    <div class="company-logo">APPLE</div>
    <nav class="navbar">
      <ul class="nav-items">
        <li class="nav-item"><a href="#" class="nav-link">HOME</a></li>
        <li class="nav-item"><a href="#" class="nav-link">OFFER</a></li>
        <li class="nav-item"><a href="#" class="nav-link">SHOP</a></li>
        <li class="nav-item"><a href="#" class="nav-link">CONTACT</a></li>
      </ul>
    </nav>
    <div class="menu-toggle">
      <i class="bx bx-menu"></i>
      <i class="bx bx-x"></i>
    </div>
  </header>
  <main>
    
    <section class="container section-1">
      <div class="slogan">
        <h1 class="company-title">DOWNTOWN TECH LIVER</h1>
        <h2 class="company-slogan">
          The biggest computer shop in the area where customers come first.
        </h2>
      </div>
      <div class="home-computer-container">
        <img class="home-computer" src="https://github.com/r-e-d-ant/Computer-store-website/blob/main/assets/images/home_img.png?raw=true" alt="a computer in dark with shadow" class="home-img">
      </div>
    </section>

<section class="container section-2">
      
      <div class="offer offer-1">
        <img src="https://github.com/r-e-d-ant/Computer-store-website/blob/main/assets/images/offer_1.png?raw=true" alt="a computer in dark with with white shadow" class="offer-img offer-1-img">
        <div class="offer-description offer-desc-1">
          <h2 class="offer-title">Macbook pro</h2>
          <p class="offer-hook">This a Macbook pro nulla vulputate magna vel odio sagittis bibendium...</p>
          <div class="cart-btn">ADD TO CART</div>
        </div>
      </div>
      
      <div class="offer offer-2">
        <img src="https://github.com/r-e-d-ant/Computer-store-website/blob/main/assets/images/offer_2.png?raw=true" alt="a opened computer" class="offer-img offer-2-img">
        <div class="offer-description offer-desc-2">
          <h2 class="offer-title">Lenovo</h2>
          <p class="offer-hook">This a Lenovo nulla vulputate magna vel odio sagittis bibendium...</p>
          <div class="cart-btn">ADD TO CART</div>
        </div>
      </div>
    </section>

<section class="container section-3">
      
      <div class="product product-1">
        <img src="https://github.com/r-e-d-ant/Computer-store-website/blob/main/assets/images/comp_1.png?raw=true" alt="computer to sell" class="product-img">
        <span class="product_add_cart">ADD TO CART</span>
      </div>
      
      <div class="product product-2">
        <img src="https://github.com/r-e-d-ant/Computer-store-website/blob/main/assets/images/comp_2.png?raw=true" alt="computer to sell" class="product-img">
        <span class="product_add_cart">ADD TO CART</span>
      </div>
      
      <div class="product product-3">
        <img src="https://github.com/r-e-d-ant/Computer-store-website/blob/main/assets/images/comp_3.png?raw=true" alt="computer to sell" class="product-img">
        <span class="product_add_cart">ADD TO CART</span>
      </div>
      
      <div class="product product-4">
        <img src="https://github.com/r-e-d-ant/Computer-store-website/blob/main/assets/images/comp_4.png?raw=true" alt="computer to sell" class="product-img">
        <span class="product_add_cart">ADD TO CART</span>
      </div>
    </section>

<section class="container section-4">
      
      <div class="sponsor sponsor-1"><img src="https://raw.githubusercontent.com/r-e-d-ant/Computer-store-website/b90ac65459206fef22e9b87313f587185554263b/assets/images/microsoft.svg" alt=""></div>
      <div class="sponsor sponsor-2"><img src="https://raw.githubusercontent.com/r-e-d-ant/Computer-store-website/b90ac65459206fef22e9b87313f587185554263b/assets/images/apple.svg" alt=""></div>

<div class="sponsor sponsor-3"><img src="https://raw.githubusercontent.com/r-e-d-ant/Computer-store-website/b90ac65459206fef22e9b87313f587185554263b/assets/images/dell.svg" alt=""></div>
      <div class="sponsor sponsor-4"><img src="https://raw.githubusercontent.com/r-e-d-ant/Computer-store-website/b90ac65459206fef22e9b87313f587185554263b/assets/images/ibm.svg" alt=""></div>
    </section>

<section class="container section-5">
      <h2 class="subscribe-input-label">NEWSLETTER</h2>
      <div class="subscribe-container">
        <input type="text" id="email-subscribe" placeholder="Email address...">
        <input type="submit" value="SUBSCRIBE">
      </div>
    </section>
  </main>
  <footer>
    <div class="container top-footer">
      
      <div class="footer-item">
        <h2 class="footer-title">ADDRESS</h2>
        <div class="footer-items">
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing st18</h3>
        </div>
      </div>
      
      <div class="footer-item">
        <h2 class="footer-title">SERVICES</h2>
        <div class="footer-items">
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
        </div>
      </div>
      
      <div class="footer-item">
        <h2 class="footer-title">SUPPLIERS</h2>
        <div class="footer-items">
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
        </div>
      </div>
      
      <div class="footer-item">
        <h2 class="footer-title">INVESTMENT</h2>
        <div class="footer-items">
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
          <h3>Adipisicing elit.</h3>
        </div>
      </div>
    </div>
    <div class="container end-footer">
      <div class="copyright">copyright © 2021 - Present • <b>DOWNTOWN TECH LIVER</b></div>
      <a class="designer" href="#">Thierry M</a>
    </div>
  </footer>
</body>

CSS

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400");

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

/* ================= VARIABLE ================ */
:root {
  --primary-color: hsl(9, 94%, 61%);
  --primary-color-alt: hsl(28, 72%, 83%);
  --second-color: #3e537c;
  --second-color-alt: hsla(220, 33%, 36%, 65%);
  --third-color: hsl(220, 36%, 28%);
  --white-color: #fbfbfb;
  --white-color-alt: hsl(12, 14%, 93%);
  --dark-color: hsl(300, 100%, 0%);
}

/* ================= BASE ==================== */
li {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  width: 100%;
  height: auto;
}
.bx {
  font-size: 2.5rem;
}
.container {
  padding: 0 2rem;
}

/* -- BODY -- */
body {
  font-family: "Raleway", sans-serif;
  font-size: 1rem;
  background-color: var(--white-color);
}

/* ================= HEADER ================ */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--dark-color);
  padding: 1rem 2rem;
}
.company-logo {
  font-size: 2.5rem;
  background: -webkit-linear-gradient(
    120deg,
    var(--primary-color-alt),
    var(--primary-color)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-items {
  display: flex;
}
.nav-item {
  margin: 0 2rem;
}
.nav-link {
  font-size: 1.1rem;
  letter-spacing: 0.05rem;
  position: relative;
  background: -webkit-linear-gradient(
    var(--primary-color-alt),
    var(--primary-color)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-link::before {
  content: "";
  background: linear-gradient(var(--primary-color), var(--primary-color-alt));
  width: 100%;
  height: 0.05rem;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 150ms;
}
.nav-link:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.menu-toggle {
  display: none;
}
.bx-menu,
.bx-x {
  cursor: pointer;
  background: -webkit-linear-gradient(
    120deg,
    var(--primary-color-alt),
    var(--primary-color)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: none !important;
}

/* ================= MAIN ================ */

/* -------- HOME SECTION -------------- */
.section-1 {
  background-color: var(--dark-color);
  display: grid;
}
/* .home-computer-container {} */

.slogan .company-title {
  background: -webkit-linear-gradient(
    120deg,
    var(--primary-color-alt),
    var(--primary-color)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 2rem;
  font-size: 1.5rem;
  font-weight: 600;
}
.slogan .company-slogan {
  background: -webkit-linear-gradient(
    120deg,
    var(--primary-color-alt),
    var(--primary-color)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8rem;
}

/* -------- OFFER SECTION ------------- */
.section-2 {
  margin: 2rem 0;
}
.offer {
  background-color: var(--dark-color);
  margin: 1rem 0;
  display: grid;
}
.offer img {
  background-color: var(--dark-color);
  padding: 2rem 0;
}
.offer-1 img {
  background-color: var(--dark-color);
  padding: 3rem 0;
}
.offer-description {
  background-color: var(--white-color-alt);
  padding: 0 1rem;
}
.offer-description .offer-title {
  color: var(--second-color);
  font-size: 1.8rem;
  font-weight: 400;
  padding: 1.5rem 0 0.5rem 0;
}
.offer-description .offer-hook {
  color: var(--second-color-alt);
  font-size: 1.2rem;
}
.offer-description .cart-btn {
  cursor: pointer;
  color: var(--second-color-alt);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  margin: 2rem 0 1rem 0;
  width: 10rem;
  height: 3rem;
  background-image: linear-gradient(
    to top,
    var(--primary-color-alt),
    var(--primary-color)
  );
}
.offer-description .cart-btn:hover {
  background-image: linear-gradient(
    to bottom,
    var(--primary-color-alt),
    var(--primary-color)
  );
}

/* -------- PRODUCT SECTION ----------- */
.section-3 {
  display: grid;
  place-items: center;
  justify-content: space-around;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 400px));
}
.product {
  cursor: pointer;
  background-color: var(--white-color-alt);
  position: relative;
}
.product::before {
  content: "";
  background-image: linear-gradient(
    to bottom,
    hsla(29, 72%, 83%, 0.438),
    hsla(9, 94%, 61%, 0.507)
  );
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.product_add_cart {
  color: var(--white-color-alt);
  font-size: 1.2rem;
  background-color: hsl(9, 94%, 65%);
  padding: 1rem 0.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 300ms, color 300ms, box-shadow 300ms;
}
.product_add_cart:hover {
  color: var(--white-color);
  box-shadow: 0 1rem 0 -0.5rem hsl(17, 79%, 65%, 0.7),
    0 2rem 0 -1rem hsla(17, 79%, 65%, 0.65);
}

/* -------- SPONSOR SECTION ----------- */
.section-4 {
  margin: 4rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.sponsor img {
  cursor: pointer;
  width: 40px;
  height: 40px;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: opacity 300ms;
}
.sponsor img:hover {
  /* filter: grayscale(0); */
  opacity: 1;
}

/* ========= SUBSCRIBE SECTION ========== */
.section-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
}
.subscribe-input-label {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  color: var(--second-color);
}
input[type="text"] {
  padding: 0 0.5rem;
  font-size: 1.1rem;
  width: 100%;
  height: 3rem;
  border: none;
  background-color: hsl(220, 33%, 90%);
  color: var(--second-color-alt);
  transition: background-color 300ms;
}
input[type="text"]:focus {
  outline: none;
  background-color: hsl(220, 33%, 95%);
}
input[type="text"]::placeholder {
  color: var(--second-color-alt);
}
input[type="submit"] {
  cursor: pointer;
  background-image: linear-gradient(
    to top,
    var(--primary-color-alt),
    var(--primary-color)
  );
  color: var(--white-color-alt);
  margin: 1rem 0;
  border: none;
  width: 100%;
  height: 3rem;
  font-size: 1.2rem;
  transition: color 300ms;
}
input[type="submit"]:hover {
  background-image: linear-gradient(
    to bottom,
    var(--primary-color-alt),
    var(--primary-color)
  );
  color: var(--white-color);
}
/* =============== FOOTER =============== */
.top-footer {
  background-color: var(--second-color);
  display: flex;
  flex-direction: column;
}
.footer-title {
  font-weight: 500;
  font-size: 1.2rem;
  padding: 1rem 0;
  background-image: -webkit-linear-gradient(
    120deg,
    var(--primary-color-alt),
    var(--primary-color)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-items h3 {
  cursor: pointer;
  font-weight: 300;
  font-size: 1.1rem;
  padding: 0.1rem 0;
  color: var(--white-color-alt);
}
.footer-items h3:hover {
  text-decoration: underline;
}
.footer-items h3:last-child {
  padding-bottom: 2rem;
}

.end-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--third-color);
}
.copyright {
  color: var(--white-color-alt);
  padding: 1rem 0;
  font-size: 0.9rem;
}
.copyright b {
  font-weight: inherit;
  font-size: 0.9rem;
}
.designer {
  color: hsla(0, 0%, 98%, 0.541);
  padding-bottom: 0.5rem;
  font-size: 0.9rem;
}
.designer:hover {
  text-decoration: underline;
}

/* =============== MEDIA QUERIES ======= */

@media screen and (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
  /* ================= HEADER ================ */
  header {
    padding: 0.5rem 1rem;
  }
  .navbar {
    background-color: var(--dark-color);
    position: absolute;
    top: 3.5rem;
    right: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 500ms;
  }
  .show-navbar {
    display: flex;
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 300ms;
  }
  .nav-items {
    display: flex;
    flex-direction: column;
  }
  .nav-item {
    margin: 0.5rem 0;
  }
  .menu-toggle {
    display: block;
  }
  .bx-menu {
    display: block !important;
  }
  .show-bx {
    display: block !important;
  }
  .hide-bx {
    display: none !important;
  }
}
@media (min-width: 769px) {
  header {
    padding: 1rem 5rem;
  }
  /* ================= MAIN ================ */

/* -------- HOME SECTION -------------- */
  .section-1 {
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
    padding: 10rem 5rem 0 5rem;
  }
  .slogan .company-title {
    max-width: 30rem;
    font-size: 1.8rem;
    letter-spacing: 0.5rem;
  }
  .slogan .company-slogan {
    max-width: 20rem;
    font-size: 1.3rem;
  }
  /* -------- OFFER SECTION ------------- */
  .section-2 {
    margin: 2rem 5rem;
  }
  .offer {
    margin: 5rem 0;
    align-items: center;
    justify-content: space-between;
    grid-template-rows: auto auto;
  }
  .offer-1 {
    grid-template-areas: "offer-1-img offer-desc-1";
  }
  .offer-1 img {
    background-color: var(--dark-color);
    padding: 2rem 0;
  }
  .offer-2 {
    grid-template-areas: "offer-desc-2 offer-2-img";
  }
  .offer-1-img {
    grid-area: offer-1-img;
  }
  .offer-2-img {
    grid-area: offer-2-img;
  }
  .offer-desc-1 {
    grid-area: offer-desc-1;
  }
  .offer-desc-2 {
    grid-area: offer-desc-2;
  }
  .offer-description .offer-title {
    font-size: 1.9rem;
    padding: 1.5rem 0 0.5rem 0;
  }
  .offer-description .offer-hook {
    max-width: 30rem;
  }
  .offer-description {
    background-color: var(--white-color-alt);
    padding: 2rem 1rem;
  }
  .offer-description .offer-title {
    padding: 0.5rem 0 1rem 0;
  }
  .offer-description .cart-btn {
    margin: 2rem 0 0.5rem 0;
  }
  /* -------- PRODUCT SECTION ----------- */
  .section-3 {
    gap: 5rem;
  }
  .product::before {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 300ms;
  }
  .product:hover::before {
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 300ms;
  }
  .product_add_cart {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  .product:hover .product_add_cart {
    transform: translate(-50%, -50%) scaleY(1);
    transform-origin: top;
  }
  /* -------- SPONSOR SECTION ----------- */
  .section-4 {
    margin: 5rem 0;
  }
  /* ========= SUBSCRIBE SECTION ========== */
  .section-5 {
    padding: 1rem 0;
  }
  .section-5 .subscribe-container {
    display: flex;
    align-items: center;
  }
  input[type="text"] {
    padding: 0 1rem;
    width: 15rem;
  }
  input[type="submit"] {
    width: 10rem;
  }
  /* =============== FOOTER =============== */
  .top-footer {
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 8rem;
    padding-top: 2rem;
  }
  .footer-title {
    font-size: 1rem;
    padding: 1rem 0;
  }
  .footer-items h3 {
    font-size: 0.9rem;
  }

.end-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--third-color);
  }
  .copyright {
    color: hsla(0, 0%, 98%, 0.747);
    padding: 1rem 0;
    font-size: 0.8rem;
  }
  .copyright b {
    font-size: 0.7rem;
  }
  .designer {
    color: hsla(0, 0%, 98%, 0.322);
    font-size: 0.8rem;
  }
}

कंप्यूटर स्टोर लैंडिंग पेज

अनुशंसित

लैंडिंग पेज - हैकिंग

रियल एस्टेट एजेंसी लैंडिंग पेज

लॉगिन पेजों का पता

HTML

CSS

JS

अनुशंसित

लैंडिंग पेज - हैकिंग

रियल एस्टेट एजेंसी लैंडिंग पेज

लॉगिन पेजों का पता

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS