Azimkin
921cea9044
All checks were successful
Build and Push Docker Image / build (push) Successful in 24s
- Created `side-bar.html` and `item-list.html` fragments for catalog page layout - Updated `catalog/index.html` to include sidebar and item list templates - Added styles for catalog layout in `catalog.css` - Enabled `DEBUG=True` in settings for local development - Adjusted CSS in shipping and services for consistent spacing
157 lines
2.4 KiB
CSS
157 lines
2.4 KiB
CSS
.flex-split {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.regular-text {
|
|
font-weight: 450;
|
|
font-size: 22px;
|
|
line-height: 1.25rem;
|
|
text-align: left;
|
|
|
|
color: #36213e;
|
|
}
|
|
|
|
.flex-section {
|
|
width: 560px;
|
|
|
|
& > h3 {
|
|
margin-top: 35px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 29px;
|
|
text-align: left;
|
|
|
|
color: #36213e;
|
|
}
|
|
|
|
& > p {
|
|
margin-top: 35px;
|
|
}
|
|
}
|
|
|
|
.top-card {
|
|
height: 260px;
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 30px;
|
|
justify-content: space-around;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
background: #63768d;
|
|
|
|
& > div {
|
|
width: 115px;
|
|
height: 115px;
|
|
|
|
background: #ffffff;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
|
|
& > svg {
|
|
width: 60%;
|
|
height: 60%;
|
|
|
|
color: #63768d;
|
|
}
|
|
}
|
|
|
|
& > h2 {
|
|
font-weight: 400;
|
|
font-size: 44px;
|
|
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.bottom-list {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
|
|
.part {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 15px;
|
|
|
|
& > div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 100%;
|
|
background: #36213e;
|
|
padding-right: 2px;
|
|
|
|
& > svg {
|
|
width: 90%;
|
|
height: 90%;
|
|
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
& > p {
|
|
width: 510px;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.part-big {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.icon-big {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
margin-top: 10px;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 100%;
|
|
background: #36213e;
|
|
|
|
& > svg {
|
|
width: 70%;
|
|
height: 70%;
|
|
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.content-container {
|
|
width: 490px;
|
|
|
|
& > h3 {
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 29px;
|
|
text-align: left;
|
|
|
|
color: #36213e;
|
|
}
|
|
|
|
& > p {
|
|
margin-top: 2px;
|
|
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.shipping-content {
|
|
margin-bottom: 120px;
|
|
} |