diff --git a/assets/styles/main.css b/assets/styles/main.css
index bc14502..d748c14 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -12,12 +12,15 @@ body{
.page-header{
display: flex;
justify-content: center;
- padding: 28px 0;
+ padding: 29px 0;
background: #000;
}
.logo-header{
- display: block;
+ display: contents;
+}
+
+.m3{
width: 12%;
}
@@ -95,7 +98,7 @@ body{
.card-icon{
width: 29%;
- margin-bottom: 30px;
+ margin-bottom: 27px;
}
.notebooks{
@@ -104,52 +107,47 @@ body{
margin-top: 80px;
display: flex;
justify-content: center;
- gap: 29px;
+ gap: 39px;
+}
+
+.figures{
+ display: contents;
}
.notebook1, .notebook2, .notebook3{
- width: 29.50%;
+ width: 29.47%;
bottom: -62px;
position: relative;
}
-.notebook1{
- order: 1;
-}
-
-.notebook2{
- order: 2;
-}
-
-.notebook3{
- order: 3;
-}
-
.cards-bottom{
display: flex;
justify-content: center;
align-items: center;
- margin-top: 190px;
+ margin-top: 191px;
gap: 16px;
}
.card-bottom{
- width: 22.35%;
+ width: 22.50%;
text-align: center;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
- padding: 40px 26px 65px 32px;
+ padding: 35px 32px 65px 33px;
}
.card-bottom-text{
font-size: 16px;
line-height: 24px;
- width: 95%;
- display: inline-block;
}
-.card-bottom-icon{
+.card-bottom-icon1, .card-bottom-icon3, .card-bottom-icon4{
width: 29%;
- margin-bottom: 17px;
+ margin-bottom: 15px;
+}
+
+.card-bottom-icon2{
+ width: 29%;
+ margin-bottom: 14px;
}
.smartphone{
@@ -207,7 +205,6 @@ body{
}
.footer-content{
- width: 20.67%;
margin-bottom: 38px;
margin-top: 38px;
}
@@ -215,7 +212,7 @@ body{
.social-medias{
display: flex;
flex-direction: row;
- gap: 18px;
+ gap: 21px;
justify-content: center;
}
@@ -224,7 +221,7 @@ body{
}
.icon-social-media{
- width: 7%;
+ width: 6%;
}
.footer-text{
@@ -285,8 +282,8 @@ body{
/*MOBILE*/
@media screen and (max-width: 1024px) {
- .logo-header{
- width: 55%;
+ .m3{
+ width: 54,62%;
}
.banner-main-desktop{
@@ -333,28 +330,30 @@ body{
}
.notebooks{
- display: block;
- text-align: center;
- row-gap: 14px;
+ display: grid;
+ grid-template-areas: "notebook2 notebook1"
+ "notebook3 notebook3";
+ grid-template-columns: 42.75% 42.75%;
+ row-gap: 24px;
+ column-gap: 14px;
}
.notebook1{
- margin-top: 25px;
- width: 43.52%;
- bottom: -7px;
- margin-left: 7px;
+ grid-area: notebook1;
+ width: 100%;
+ bottom: -32px;
}
.notebook2{
- margin-top: 25px;
- width: 43.52%;
- bottom: -7px;
- margin-right: 7px;
+ grid-area: notebook2;
+ width: 100%;
+ bottom: -32px;
}
.notebook3{
- width: 90.80%;
- bottom: -32px;
+ grid-area: notebook3;
+ width: 100%;
+ bottom: -32px;
}
.cards-bottom{
@@ -364,6 +363,11 @@ body{
.card-bottom{
width: 88.88%;
+ padding-right: 33px;
+ }
+
+ .card-bottom-icon1{
+ margin-bottom: 10px;
}
.card-bottom-text{
@@ -390,7 +394,6 @@ body{
.article-title{
font-size: 24px;
line-height: 29px;
- margin-bottom: 9px;
}
.article-description{
@@ -399,10 +402,13 @@ body{
}
.footer-content{
- width: 63%;
margin-bottom: 32px;
margin-top: 32px;
}
+
+ .icon-social-media{
+ width: 9.19%;
+ }
}
@@ -415,4 +421,9 @@ body{
.article-figure-mobile{
display: none;
}
+
+ .break{
+ display: none;
+ }
+
}
diff --git a/index.html b/index.html
index 66b1302..681783c 100644
--- a/index.html
+++ b/index.html
@@ -18,16 +18,18 @@
-
+
-
+
-
+
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
-
-
-
-
-
-
-
-
-
-
-
+
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
-
-
+
+
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
-
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
-
-
+
+
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
-
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
-
+
Lorem ipsum dolor sit amet
@@ -113,31 +125,33 @@
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
-
+
-
+