Alena/Figma_1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adaptive_1

Browse Source
This commit is contained in:
Alena Trushcheva
2025-09-21 00:38:38 +03:00
parent 59d32a35c5
commit 70ef712f94
2 changed files with 260 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
style.css
View File

@@ -97,6 +97,25 @@ body {
line-height: 1.3;
}
.overlay {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.349);
z-index: 50;
visibility: hidden;
opacity: 0;
transition: all .3s;
}
.overlay--show {
opacity: 1;
visibility: visible;
}
/* ------------------------------HEADER TOP----------------------------------------------------------- */
.header {
@@ -221,7 +240,7 @@ body {
display: flex;
}
.header_content_btn {
margin-right: 24px;
margin-right: 24px;
}
.header_content_btn:last-child {
margin-right: 0px;
@@ -329,6 +348,7 @@ body {
.about_numbers {
margin-left: 30px;
align-self: center;
white-space: nowrap;
}
.about_number span {
font-size: 48px;
@@ -364,10 +384,12 @@ body {
}
.directions_filter_box {
display: flex;
margin-bottom: 56px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.directions_filter_item {
margin-right: 45px;
margin-bottom: 15px;
}
.directions_filter_item:last-child {
margin-right: 0;
@@ -382,6 +404,7 @@ body {
border-radius: 4px;
padding: 5px 8px;
background: transparent;
white-space: nowrap;
}
.directions_filter_btn--active {
background: linear-gradient(56deg, #ff3f3a 0%, #f75e05 100%);
@@ -525,6 +548,7 @@ body {
}
.cert_logos-item {
margin-right: 40px;
}
.cert_logos-item:last-child {
margin-right: 0;
@@ -535,6 +559,11 @@ body {
0 30px 24px -10px rgba(154, 156, 165, 0.10),
0 12px 10px -6px rgba(154, 156, 165, 0.08),
0 4px 4px -4px rgba(30, 33, 44, 0.05);
object-fit: contain;
}
.cert_image-box img {
width: 100%;
height: 100%;
}
/* ------------------------------MAIN SLIDER----------------------------------- */
@@ -580,6 +609,7 @@ body {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.team_socials {
position: absolute;
@@ -947,6 +977,7 @@ body {
.blog_btn {
}
.button {
white-space: nowrap;
}
.blog_row {
display: flex;
@@ -1441,7 +1472,47 @@ body {
display: none;
}
/* ----------------------------------------MEDIA--------------------------------------------------- */
/* ----------------------------------------------------900--------------------------------------------------------- */
@media (max-width: 900px) {
.header_img {
display: none;
}
.header_row {
display: none;
}
.about_img {
display: none;
}
.directions_filter_box {
justify-content: space-between;
}
.directions_filter_item {
margin-right: 10px;
}
.directions_list {
gap: 30px 10px;
}
.directions_link_content {
padding: 24px 5px;
}
}
/* ----------------------------------------------------1200--------------------------------------------------------- */
@media (max-width: 1200px) {
.header_title {
font-weight: 900;
font-size: 52px;
min-width: 376px;
}
.header_img {
max-width: 450px;
}
}
/* --------------------------------------------------1100------------------------------------------------------- */
@media (max-width: 1100px) {
.burger {
@@ -1529,8 +1600,155 @@ body {
.header_user-nav {
margin-bottom: 30px;
}
.heading_title {
font-size: 37px;
}
.about_img {
max-width: 400px;
}
.cerf_inner {
flex-direction: column;
align-items: center;
}
.cert_content {
margin: 0px 0px 30px 0px;
align-self: center;
}
.cert_heading {
text-align: center;
}
.cert_logos {
justify-content: space-between;
}
.cert_text {
text-align: center;
}
}
/* --------------------------------------------------------700--------------------------------------------------------------------------- */
@media (max-width:700px) {
.about_createx {
margin-bottom: 60px;
}
.about_values {
flex-direction: column;
}
.about_image_box {
display: none;
}
.about_numbers {
margin: 0;
align-self: flex-start;
}
.directions_list {
grid-template: repeat(3, auto) / repeat(2, 1fr);
}
.testimonials_slider_wrapper {
padding: 0;
}
.testimonials_arrow {
display: none;
}
.testimonials_slide {
padding: 30px 15px;
}
}
/* -------------------------------------------------------550------------------------------------------------------------------------ */
@media (max-width: 550px) {
.heading {
margin-bottom: 30px;
}
.heading_title {
font-size: 25px;
}
.about_text {
margin-bottom: 30px;
}
.heading_subtitle {
font-size: 14px;
margin: 0;
}
.about_paragraph {
font-size: inherit;
margin-bottom: 10px;
}
.about_btn_box {
flex-direction: column;
align-items: flex-start;
}
.about_btn {
margin-bottom: 30px;
}
.directions_list {
grid-template: none;
}
.directions_list_item--empty {
display: none;
}
.directions_filter_box {
margin-bottom: 15px;
justify-content: left;
}
.team_image_box {
max-width: 300px;
margin: 0 auto 16px;
}
.testimonials_slider_wrapper {
margin-bottom: 15px;
}
.testimonials_slide_inner {
padding-left: 30px;
}
.testimonials_quote {
font-size: inherit;
line-height: inherit;
}
.testimonials_quote::before {
left: -30px;
width: 20px;
}
.testimonials_dots button{
width: 20px;
}
}
/* ------------------------------------------------------450------------------------------------------------------------- */
@media (max-width: 450px) {
.header_top {
min-width: none;
width: 100%;
}
.header_title {
max-width: 376px;
font-size: 40px;
}
.header_content-buttons {
flex-direction: column;
align-items: flex-start;
}
.header_content_btn {
margin-right: 0;
margin-bottom: 30px;
text-align: center;
}
.directions_filter_box {
margin-bottom: 15px;
}
.cert_logos {
flex-direction: column;
align-items: center;
}
.cert_logos-item {
margin: 0px 0px 30px 0px;
}
.cert_logos-item:last-child {
margin: 0px 0px 0px 0px;
}
}
}