Rijal25
commented
11 months ago <!DOCTYPE html>
Apa itu
DAR Sport?
DAR Sport adalah toko store yang menjual berbagai macam kebutuhan peralatan olahraga,dijamin semua yang dijual disini komplit,DAR Sport berlokasi di jl. Garuda Raya No 17 Rewwin Warru Sidoarjo
Contact
085815068168© Projecttim
- { margin: 0; padding: 0; font-family: "Poppins", sans-serif; box-sizing: border-box; scroll-behavior: smooth; scroll-padding-top: 2 rem; list-style: none; text-decoration: none;
}
*::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; } }
PiC: Firdaus