html{
scroll-behavior:smooth;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
body{
background:#09090b;
color:white;
}
.container{
width:90%;
max-width:1200px;
margin:auto;
}
.header{
background:#111114;
padding:20px 0;
position:sticky;
top:0;
z-index:10;
}
.navbar{
display:flex;
align-items:center;
justify-content:space-between;
}
.logo{
font-size:25px;
font-weight:bold;
}
.logo span{
color:#00e5ff;
}
nav a{
color:white;
text-decoration:none;
margin:0 12px;
font-size:15px;
}
.nav-action button{
background:#00e5ff;
border:0;
padding:10px 15px;
border-radius:8px;
}
.hero{
padding:70px 0;
}
.hero-content{
display:flex;
align-items:center;
gap:40px;
}
.hero-text{
flex:1;
}
.hero-text h1{
font-size:55px;
line-height:1.1;
}
.hero-text p{
margin:25px 0;
color:#aaa;
}
.hero-image{
flex:1;
}
.hero-image img{
width:100%;
border-radius:20px;
}
.btn-primary{
display:inline-block;
background:#00e5ff;
color:#000;
padding:14px 25px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
}
section{
padding:60px 0;
}
h2{
text-align:center;
margin-bottom:40px;
font-size:32px;
}
.category-grid,
.product-grid,
.review-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.category-card,
.product-card,
.review-card{
background:#151518;
padding:25px;
border-radius:15px;
}
.product-card img{
width:100%;
border-radius:10px;
}
.price{
color:#00e5ff;
font-size:20px;
margin:15px 0;
}
.product-card a{
color:white;
}
.promo{
background:#111114;
text-align:center;
}
footer{
background:#050505;
padding:50px 0;
}
.footer{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.footer a{
display:block;
color:#aaa;
margin-top:10px;
}
.copyright{
text-align:center;
margin-top:30px;
color:#777;
}
@media(max-width:768px){
.navbar,
.hero-content{
flex-direction:column;
}
.category-grid,
.product-grid,
.review-grid,
.footer{
grid-template-columns:1fr;
}
.hero-text h1{
font-size:38px;
}
nav{
display:none;
}
}
/* PRODUCT PAGE */
.page-title{
text-align:center;
font-size:45px;
margin-bottom:40px;
}
.filter-box{
display:flex;
justify-content:center;
gap:15px;
margin-bottom:40px;
flex-wrap:wrap;
}
.filter-box button{
background:#151518;
color:white;
border:1px solid #333;
padding:12px 20px;
border-radius:30px;
cursor:pointer;
}
.filter-box button:hover{
background:#00e5ff;
color:black;
}
.product-card{
transition:.3s;
}
.product-card:hover{
transform:translateY(-8px);
}
.product-card .btn-primary{
margin-top:15px;
}
.detail-product{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}
.detail-image img{
width:100%;
border-radius:20px;
}
.detail-info h1{
font-size:40px;
margin-bottom:20px;
}
.detail-info ul{
margin-top:20px;
}
.detail-info li{
margin:10px 0;
color:#aaa;
}
@media(max-width:768px){
.detail-product{
grid-template-columns:1fr;
}
}
.contact-form{
max-width:600px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}
.contact-form input,
.contact-form textarea{
background:#151518;
border:1px solid #333;
padding:15px;
border-radius:10px;
color:white;
}
.contact-form textarea{
height:150px;
}
.faq-item{
background:#151518;
padding:25px;
border-radius:15px;
margin-bottom:20px;
}
.faq-item p{
color:#aaa;
margin-top:10px;
}
.about-box{
background:#151518;
padding:40px;
border-radius:20px;
margin-bottom:40px;
}
/* ECOMMERCE */
.cart-box,
.checkout-box,
.auth-box,
.success-box{
background:#151518;
padding:40px;
border-radius:20px;
max-width:700px;
margin:auto;
}
.cart-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:30px;
}
.cart-item img{
width:100px;
border-radius:10px;
}
.cart-summary{
border-top:1px solid #333;
padding-top:25px;
}
.checkout-box input,
.checkout-box textarea,
.auth-box input{
width:100%;
padding:15px;
margin:10px 0;
background:#09090b;
border:1px solid #333;
color:white;
border-radius:10px;
}
.checkout-box textarea{
height:120px;
}
.auth-box{
text-align:center;
}
.invoice{
background:#09090b;
padding:25px;
margin:30px 0;
border-radius:15px;
}
.success-box{
text-align:center;
}
.topbar{
background:#00e5ff;
color:#000;
font-size:14px;
padding:10px 0;
}
.topbar-content{
display:flex;
justify-content:space-between;
align-items:center;
}
.topbar a{
margin-left:20px;
color:#000;
text-decoration:none;
font-weight:bold;
}
.brand-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
}
.brand-grid div{
background:#151518;
padding:35px;
text-align:center;
border-radius:15px;
font-weight:bold;
}
.stats{
background:#111114;
}
.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;
gap:20px;
}
.stats h2{
font-size:45px;
color:#00e5ff;
}
.newsletter{
text-align:center;
}
.newsletter-form{
display:flex;
justify-content:center;
gap:15px;
margin-top:25px;
}
.newsletter-form input{
width:350px;
padding:15px;
border-radius:10px;
border:1px solid #333;
background:#151518;
color:white;
}
.floating-buttons{
position:fixed;
right:20px;
bottom:20px;
display:flex;
flex-direction:column;
gap:15px;
}
.floating-btn{
width:55px;
height:55px;
display:flex;
justify-content:center;
align-items:center;
background:#00e5ff;
border-radius:50%;
color:#000;
font-size:24px;
text-decoration:none;
}
.breadcrumb{
padding:20px 0;
background:#101014;
}
.breadcrumb a{
color:#00e5ff;
text-decoration:none;
}
.breadcrumb span{
margin:0 10px;
color:#777;
}
.search-box{
margin:35px 0;
}
.search-box input{
width:100%;
padding:16px;
background:#151518;
border:1px solid #333;
border-radius:10px;
color:white;
font-size:16px;
}
.product-card{
position:relative;
}
.badge{
position:absolute;
top:15px;
left:15px;
padding:6px 12px;
border-radius:30px;
font-size:12px;
font-weight:bold;
}
.new{
background:#00e676;
color:black;
}
.sale{
background:#ff1744;
color:white;
}
.wishlist{
position:absolute;
right:15px;
top:15px;
width:38px;
height:38px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:#222;
cursor:pointer;
font-size:22px;
}
.product-tools{
margin-top:10px;
}
.product-tools button{
width:100%;
padding:10px;
background:#111;
border:1px solid #333;
color:white;
border-radius:8px;
cursor:pointer;
}
.modal{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
justify-content:center;
align-items:center;
z-index:999;
}
.modal-content{
background:#151518;
padding:35px;
border-radius:20px;
width:500px;
max-width:90%;
}
#closeModal{
float:right;
cursor:pointer;
font-size:28px;
}
.pagination{
display:flex;
justify-content:center;
gap:12px;
margin-top:40px;
}
.pagination button{
padding:12px 18px;
background:#151518;
border:1px solid #333;
color:white;
border-radius:8px;
cursor:pointer;
}
.pagination .active{
background:#00e5ff;
color:black;
}
.product-card{
transition:.35s;
}
.product-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 45px rgba(0,229,255,.15);
}
.toast{
position:fixed;
right:30px;
bottom:30px;
background:#00e5ff;
color:#000;
padding:15px 25px;
border-radius:10px;
font-weight:bold;
z-index:9999;
animation:fade .3s;
}
@keyframes fade{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
}
}
.cart-icon{
color:white;
text-decoration:none;
font-size:22px;
}
.hamburger{
display:none;
font-size:28px;
cursor:pointer;
}
@media(max-width:768px){
.hamburger{
display:block;
}
nav{
display:none;
}
nav.active{
display:flex;
flex-direction:column;
}
}
.mini-cart{
position:fixed;
right:-400px;
top:0;
width:350px;
height:100%;
background:#151518;
padding:25px;
z-index:9999;
transition:.4s;
box-shadow:-10px 0 30px rgba(0,0,0,.5);
}
.mini-cart.active{
right:0;
}
.mini-cart-header{
display:flex;
justify-content:space-between;
align-items:center;
}
#closeCart{
font-size:30px;
cursor:pointer;
}
.cart-item-mini{
background:#09090b;
padding:15px;
border-radius:10px;
margin-top:15px;
}
.rating{
color:#00e5ff;
margin:10px 0;
}
.rating span{
color:#aaa;
font-size:13px;
}
@media(max-width:768px){
nav{
position:absolute;
top:70px;
left:0;
width:100%;
background:#111114;
display:none;
padding:20px;
}
nav.active{
display:flex;
}
nav a{
display:block;
margin:15px 0;
}
.nav-action{
width:100%;
justify-content:center;
}
}
.page-loader{
position:fixed;
width:100%;
height:100%;
background:#09090b;
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}
.loader{
width:50px;
height:50px;
border:5px solid #333;
border-top-color:#00e5ff;
border-radius:50%;
animation:spin 1s linear infinite;
}
@keyframes spin{
100%{
transform:rotate(360deg);
}
}
.skeleton{
background:#222;
border-radius:10px;
animation:pulse 1.5s infinite;
}
@keyframes pulse{
50%{
opacity:.5;
}
}
.btn-primary{
transition:.3s;
}
.btn-primary:hover{
transform:translateY(-3px);
box-shadow:
0 10px 25px rgba(0,229,255,.3);
}
/* ===== FOOTER ENHANCEMENT (tambahan) ===== */
.footer-column a {
position: relative;
}
.footer-column a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0%;
height: 1px;
background: #fff;
transition: 0.3s;
}
.footer-column a:hover::after {
width: 100%;
}
footer { background: #111; color: #fff; padding: 50px 0 20px; } .footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .footer-column h3, .footer-column h4 { margin-bottom: 15px; } .footer-column p { color: #aaa; line-height: 1.6; } .footer-column a { display: block; color: #aaa; text-decoration: none; margin-bottom: 10px; transition: .3s; } .footer-column a:hover { color: #fff; } .copyright { text-align: center; border-top: 1px solid #333; margin-top: 40px; padding-top: 20px; color: #888; } /* Mobile */ @media(max-width:768px){ .footer { grid-template-columns: 1fr; text-align: center; } }
```css
.review {
padding: 70px 0;
}
.review h2 {
text-align: center;
margin-bottom: 10px;
}
.review-subtitle {
text-align: center;
color: #777;
margin-bottom: 40px;
}
/* REVIEW GRID CENTER */
.review-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
}
/* REVIEW CARD */
.review-card {
width: 320px;
background: #fff;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
text-align: left;
}
/* USER */
.review-user {
display:flex;
align-items:center;
gap:15px;
margin-bottom:15px;
}
.review-avatar {
width:45px;
height:45px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
font-size:18px;
}
.review-user strong {
display:block;
}
.review-user span {
display:block;
color:#888;
font-size:14px;
}
/* STAR */
.stars {
color:#f5b301;
font-size:18px;
margin-bottom:15px;
}
/* TEXT */
.review-card p {
color:#555;
line-height:1.6;
}
/* MOBILE */
@media(max-width:768px){
.review-grid {
flex-direction:column;
align-items:center;
}
.review-card {
width:100%;
max-width:350px;
}
}
/* MOBILE RESPONSIVE MODE */
@media screen and (max-width:768px){
body {
overflow-x:hidden;
}
/* Container */
.container {
width:100%;
padding:0 20px;
}
/* Header */
header {
padding:15px 0;
}
nav {
display:none;
}
/* Footer */
.footer {
grid-template-columns:1fr;
text-align:center;
}
/* Product */
.product-grid {
grid-template-columns:1fr;
}
/* Review */
.review-grid {
flex-direction:column;
align-items:center;
}
.review-card {
width:100%;
max-width:350px;
}
/* Button */
button,
.btn {
width:100%;
text-align:center;
}
/* Image */
img {
max-width:100%;
height:auto;
}
/* MOBILE VERSION */
@media (max-width:768px){
.container {
width:100%;
padding:0 15px;
}
.header {
display:block;
}
.product-grid {
display:grid;
grid-template-columns:1fr;
}
.review-grid {
display:flex;
flex-direction:column;
align-items:center;
}
.review-card {
width:100%;
max-width:350px;
}
.footer {
display:grid;
grid-template-columns:1fr;
text-align:center;
}
img {
max-width:100%;
height:auto;
}
}
/* =========================
MOBILE FIX
========================= */
@media(max-width:768px){
html, body {
width:100%;
overflow-x:hidden;
}
/* CONTAINER */
.container {
width:100%;
max-width:100%;
padding:0 15px;
margin:auto;
}
/* HEADER */
header {
width:100%;
}
.logo {
text-align:center;
width:100%;
}
/* HERO */
.hero {
display:flex;
flex-direction:column;
padding:40px 0;
}
.hero h1 {
font-size:28px;
line-height:1.1;
}
.hero p {
font-size:13px;
}
.hero img {
width:100%;
max-width:320px;
margin:30px auto 0;
display:block;
}
/* BRAND */
.brand-grid {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
}
.brand-card {
width:calc(50% - 12px);
text-align:center;
}
/* CATEGORY */
.category-grid {
display:grid;
grid-template-columns:1fr;
gap:15px;
}
.category-card {
width:100%;
}
/* REVIEW */
.review-grid {
display:flex;
flex-direction:column;
align-items:center;
}
.review-card {
width:100%;
max-width:350px;
}
/* FOOTER */
.footer {
grid-template-columns:1fr;
text-align:center;
}
}