search

moersito / courseproject-simpleonlinestore

Sample project using pure or vanila Javascript for simple online store
0 stars 0 forks source link

Code menu utama diantaranya Home, About, Products, Contact #5

Open moersito opened 10 months ago

moersito commented 10 months ago

PiC: Aslan

Rijal25 commented 10 months ago

<!DOCTYPE html>

DAR Sport

DAR Sport

Toko Perlengkapan Olahraga
Terkomplit




Sosmed

Follow Instagram
  • @dar_sport

    • Menu Links

  • Home
  • About
  • Product
  • Contact

    • Contact

    085815068168

    © Projecttim

    CSS

    }

    *::selection { background: var(--main-color); color: zrgb(99, 57, 4); }

    :root { --main-color: #dfb150; --text-color: #ecde14; --bg-color: rgb(110, 667, 10)

    --big-font: 4rem;
--h2-font: 2.24rem;
--p-font: 0.9rem;

    }

    section { padding: 5px 10%; }

    body.active { --bg-color: #1e1c2a; --text-color: #fff; }

    body { color: var(--text-color); background-color: var(--bg-color); }

    darkmode {

    font-size: 25px;
cursor: pointer;

    }

    header { position: fixed; width: 100%; top: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; background: var(--bg-color); padding: 20px 100px; box-shadow: 0 0.5rem 50rem rgba(0,0,0,0.1); background-color: rgb(53, 53, 223); }

    .logo { font-size: 1.2rem; font-weight: 600; color: white; }

    .navbar { display: flex;

    } .navbar a { font-size: 1rem; padding: 10px 20px; color: white; font-weight: 500; } .navbar a :hover { color: var(--main-color); }

    menu-icon {

    font-size: 2rem;
cursor: pointer;
display: none;

    } .home { width: 100%; min-height: 100vh; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 1.5rem; } .home-img img { width: 100%; } .home-text h1 { font-size: 50px; color: blue; } .home-text h2 { font-size: var(--h2-font); margin: 1rem 0 1rem; color: #1e1c2a; } .btn { display: inline-block; background: var(--main-color); padding: 10px 20px; border-radius: 0.5rem; color: #fff; } .btn:hover { background: #ffa400; } .about { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: center; } .about-img img { width: max-content; border-radius: 0.5rem; margin-top: 100px; width: 40rem; margin-bottom: 100px; } .about-text span { color: var(--main-color); font-weight: 500; } .about-text h2 { font-size: var(--h2-font); color: blue; } .about-text p { margin: 0.8rem 0 1.8rem; color: #1e1c2a; } .heading { text-align: center; } .heading-span { color: var(--main-color); font-weight: 500; } .heading h2 { font-size: var(--h2-font); color: blue; } .menu-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, auto)); gap: 1.5rem; align-items: center; } .product-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, auto)); gap: 1.5rem; align-items: center; } .box { position: relative; margin-top: 2rem; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0.5rem; box-shadow: 0 2px 4px #1e1c2a; padding: 10px; background-color: blue; } .box-img { width: 200px; height: 200px; } .box-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .box h2 { font-size: 1.2rem; color: black; } .box h3 { font-size: 1rem; font-weight: 400; margin: 4px 0 10px; } .box span { font-size: var(--p-font); font-weight: 500; color: white; } .box .bx { position: absolute; right: 0; border-top-color: 0; font-size: 20px; background: var(--main-color); border-radius: 0 0.5rem 0 0.5rem; padding: 5px 8px; } .box .bx:hover { background: #ffa400; }

    .contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, auto)); gap: 1.5rem; background-color: #1e1c2a; margin-top: 5px; }

    .contact-box h3 { margin-bottom: 1rem; color: blue; } .social { display: flex; margin-top: 1.5rem; } .social i { font-size: 20px; margin-right: 1rem; color: var(--text-color); } .social i:hover { color: var(--main-color); } .contact-box li a { color: white; } .contact-box li a:hover { color: var(--main-color); } .address { display: flex; flex-direction: column; } .address i { margin-bottom: 0.5rem; font-size: 1rem; } .address span { margin-left: 1rem; } .copyright { padding: 20px; text-align: center; background-color: blue; color: white; } @media (max-width: 921px) { header { padding: 14px 41px; } :root { --big-font: 3rem; --h2-font: 1.7rem; } }