1. loyiha ishining tаrkibi

CSS kodlari share.css



/* Global */


/* fonts */ @import
url("https://fonts.googleapis.com/css2?family=Ubuntu:wgh

t@300;400;500;700&display=swap");

* {

margin: 0;

padding: 0;
box-sizing: border-box;
font-family: "Ubuntu", sans-serif;

}
html {

height: 100%;

}

body {
height: 100%;

display: flex;

flex-direction: column;

position: relative; overflow-x: hidden;

}

.container {

max-width: 1200px; width: 100%; margin: auto;

}

.di-flex {

display: flex;

}
ul {

padding: 0%;

margin: 0%;
list-style: none;
}

a {

text-decoration: none;
}


/* site header */
.site-header {
background-color: #343232;

box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.596); position: fixed;

z-index: 10;
width: 100%;

height: 80px;

}

.site-logo { width: 80px; height: 80px;
}

.site-logo path { fill: white;

}
.header-box {
align-items: center;
justify-content: space-between;

}

/* monile menu icon */
.mobile-menu-icon { display: none;
}


/* mobile menu */
.mobile-menu-back { display: none; width: 100%;

height: 100vh;

position: fixed; top: 0;

left: 0;
z-index: 18;
background-color: #3432329d;
}

.mobile-menu-box {

/* display: none; */

width: 80%; height: 100vh; position: fixed; top: 0;

left: -80%;
z-index: 20;
background-color: #343232; transition: 0.4s;
}

.mobile-menu { height: inherit;

flex-direction: column; align-items: center; gap: 20px;
padding-top: 50px;

}

.mobile-menu-sie-tlogo-link svg path { fill: white;
}
.mobile-menu-list { align-items: center;
justify-content: center;

flex-direction: column; gap: 20px;

}
.mobile-menu-link { font-size: 18px; color: #f5f5f7;
}
/* navigation */
.navigation-list { column-gap: 20px; align-items: center;
}
.navigation-link {

font-size: 14px; color: #f5f5f7;

}


/* search */

.search-box { column-gap: 20px;

align-items: center;

}
.search-icon { width: 25px;

cursor: pointer;
}

.shpping-bag { width: 25px;

}
.login-link {

padding: 8px 20px; background-color: blue; color: white;

font-size: 14px; border-radius: 8px;
}

.login-link:hover {

color: white; opacity: 0.8;

}

.login-link:active {

opacity: 0.6;

}

/* header-shadow */
.header-shadow {
margin-bottom: 80px; width: 100%;
}


/* site main */
main {
flex-grow: 1;
width: 100%;

}
/* site footer */

.site-footer {
background-color: #f5f5f7; padding: 50px 0 20px 0;
}
.footer-div-title {

border-bottom: 1px solid black;

}

.footer-title-text { font-size: 12px;

}

.footer-logo-box {
justify-content: space-between; align-items: center;
padding-top: 20px;

}
.footer-social-icons-box {

gap: 10px;

align-items: center;

}
/* responsive design */ @media (max-width: 1200px) {

.container {

max-width: 992px; width: 100%; margin: auto;

}
}


@media (max-width: 992px) {
.container {

max-width: 768px; width: 100%; margin: auto;

}

.navigation {

display: none;

}

.search-box { display: none;

}
.mobile-menu-icon {

display: block;

}

}
@media (max-width: 768px) {

.container {
max-width: 576px;

width: 100%; margin: auto;

}

.site-header { height: auto;

}
}


@media (max-width: 576px) {
.container {
max-width: 100%;
width: 100%;

margin: auto;
}
.header-box { padding-top: 3px;
padding-bottom: 3px;
}
.site-logo { width: 40px; height: 40px;
}
.header-shadow { height: 40px;
}
}

Style.css

/* main hero */
.hero {
align-items: center;
justify-content: space-between; height: calc(100vh - 80px);
}

.hero-content-box {

width: 500px;

}

.hero-content { width: 400px; font-size: 72px; font-weight: 600;

}
.hero-img-box {

position: relative;

}

.hero-img { width: 600px;

height: 600px;
}

.split-div { position: absolute; bottom: 10%;

left: 44%; display: flex;
gap: 20px; z-index: 5;
}

.split {

display: block;

width: 15px; height: 15px; cursor: pointer; border-radius: 50%;

background-color: rgb(122, 121, 121);
}


/* purchased product box*/

#purchased-product-container { display: none;

padding-top: 80px; margin-bottom: 50px;
}
.purchased-product-box { padding-top: 50px; padding-bottom: 50px; gap: 50px;
}
.purchased-product-img-box img {

width: 500px;

}

.purchased-product-content-box { flex-direction: column;

justify-content: space-between;

}
.subtitle-box-info { font-size: 14px; color: #8b8b8f; height: 100px; overflow: auto;

}
.purchased-product-content {

font-size: 42px; font-weight: 600;

}

.buy-button {

border: none; border-radius: 5px; padding: 8px 24px;

background-color: rgb(16, 190, 16); color: white;
font-size: 20px; font-weight: 500;
}
.buy-button:hover {
background-color: rgb(10, 255, 84);
box-shadow: 0px 0px 40px 2px rgb(10, 255, 84);

}

.basket-save-button { border: none; border-radius: 5px; padding: 8px 24px;
background-color: #ff9a00; color: white;
font-size: 20px; font-weight: 500;
}
.basket-save-button:hover {
background-color: rgb(255, 176, 28);
box-shadow: 0px 0px 40px 2px rgb(255, 176, 28);

}

/* brand box and clothes section */
.brand-container,
.clothes-container { padding: 0;
margin-bottom: 60px;

}
.clothes-container .brand-box-content,

.clothes-container-title { margin-bottom: 30px;

flex-wrap: wrap;

}
.brand-box,

.clothes-box-list { display: flex; gap: 10px;
flex-wrap: wrap;

}
.card-products,

.clothes-box-item { background-color: #f6f6f6; width: 393px;

min-width: 200px;

border-radius: 10px; position: relative;

}

.card-title {

padding: 5px 17px 20px 17px;

}
.card-content {

font-size: 16px; color: black;

}

.card-text {

font-size: 16px;

line-height: 24px; color: black;

margin-bottom: 20px;
}

.card-products-img-father,

.clothes-box-img box {

position: relative;

}

.card-products-img-father::after,

.clothes-box-img box::after { content: "";
position: absolute;

top: 0;

left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.075); border-radius: 10px;
opacity: 0; visibility: hidden;
}

.card-products-img,

.clothes-box-img {

border-radius: 10px; width: 100%;

height: 393px; object-fit: contain;
}

.card-products-img-father:hover::after,

.clothes-box-img box:hover::after { opacity: 1;

visibility: visible;
}

.hover-effect { position: absolute;

top: 20px; right: 20px; z-index: 5;
opacity: 0; visibility: hidden;
}

.card-products-img-father:hover .hover-effect,

.clothes-box-img box:hover .hover-effect { opacity: 1;

visibility: visible;

}

/* clothes section */


@media (max-width: 1200px) {
.container {
max-width: 992px; width: 100%;
margin: auto;
}

}
@media (max-width: 992px) {

.container {
max-width: 768px;

width: 100%; margin: auto;

}

.hero {

flex-direction: column; text-align: center;
/* height: initial; */

}
.hero-content { width: 100%;

}

.hero-img-box img {

width: 300px; height: 300px;

}

.split-div { bottom: 5%;

left: 37%;

}
.header-shadow {

margin-bottom: 46px;

}

.purchased-product-box { flex-direction: column;

align-items: center; padding-top: 0; padding-bottom: 50px; gap: 0px;
}

.purchased-product-img-box img { width: 300px;

}
.subtitle-box-info { font-size: 10px; color: #8b8b8f;

height: 50px;

}
.brand-box-content,

.clothes-container-title { margin-bottom: 70px;
}
.brand-container,

.clothes-container { text-align: center;

margin-bottom: 50px;
}

.brand-box,

.clothes-box-list {

justify-content: center;

}
}


@media (max-width: 768px) {
.container {
max-width: 576px; width: 100%;
margin: auto;
}

.brand-container { margin-bottom: 50px;

}

.hero-content-box { width: 100%;
}
.hero-content { font-size: 50px; width: inherit;
}
.hero-img {

width: 400px;

}

.split-div { bottom: 5%;

left: 35.9%;
}
}


@media (max-width: 576px) {
.container {
max-width: 100%;
width: 100%;

margin: auto;

}

.header-shadow { margin-bottom: 50px;

}

.hero {
align-items: center; justify-content: flex-start; height: calc(100vh - 80px); gap: 1.5rem;
margin-bottom: 110px;

}
.split-div {

bottom: 8%;

left: 33.5%;
}

.subtitle-box-info {

font-size: 10px; color: #8b8b8f; height: 80px;

}

#purchased-product-container { padding-top: 0;

}

.purchased-product-box {

/* padding-bottom: 0; */

}
.purchased-product-img-box img {

width: 100%;

}
.purchased-product-content { display: block;

margin-bottom: 20px; font-size: 30px; font-weight: 600;
}
.subtitle-box-info {

margin-bottom: 20px;

}

.brand-container,

.clothes-container {

margin-bottom: 50px;

}

.brand-box { width: 100%;

}
.brand-box-content,
.clothes-container-title {

margin-bottom: 70px;

}

.card-products,

.clothes-box-item {

width: 100%;
}
.hero-img-box img { width: 250px;
}
}

2.