Responsivo/Alterações
This commit is contained in:
parent
53cd1e6c69
commit
03c61b39d3
BIN
assets/img/mobile.jpg
Normal file
BIN
assets/img/mobile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
@ -35,15 +35,11 @@
|
||||
margin: 73px;
|
||||
}
|
||||
|
||||
.image-computer {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font: weight 400px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -75,6 +71,8 @@ p {
|
||||
}
|
||||
|
||||
.container-3 {
|
||||
margin-top: 6rem;
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
flex-wrap: wrap;
|
||||
@ -83,16 +81,24 @@ p {
|
||||
|
||||
/*----------------Section-3--------------------------*/
|
||||
.container-notebooks {
|
||||
background-color: #e0e0e0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
background-color: #E0E0E0;
|
||||
gap: 0,1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.notebook{
|
||||
width: 100%;
|
||||
translate: 0px 64px;
|
||||
margin-top: -62px;
|
||||
}
|
||||
|
||||
/*----------------Section-4--------------------------*/
|
||||
.container-4 {
|
||||
margin-top: 108px;
|
||||
margin-top: 62px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -110,7 +116,9 @@ p {
|
||||
|
||||
.text-p {
|
||||
align-items: center;
|
||||
width: 29%;
|
||||
width: 550px;
|
||||
height: 120px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
@ -120,7 +128,9 @@ p {
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.retangle {
|
||||
@ -139,8 +149,55 @@ footer {
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
|
||||
.text-footer {
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2500px){
|
||||
p{
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:1024px){
|
||||
.container-4{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.section-4{
|
||||
order: 2;
|
||||
}
|
||||
.image-final{
|
||||
order: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.image-container{
|
||||
width: 414px;
|
||||
height: 414px;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.retangle{
|
||||
width: 100%;
|
||||
object-fit: fill;
|
||||
transform: scale(-3,1);
|
||||
zoom: normal;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:700px){
|
||||
.text-p{
|
||||
width: 350px;
|
||||
height: 152px;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:1024px){
|
||||
.container-notebooks{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
30
index.html
30
index.html
@ -18,7 +18,7 @@
|
||||
<figure class="header-logo">
|
||||
<img class="logo" src="./assets/img/Logo-M3Academy 1.png" alt="Logo-M3Academy" />
|
||||
</figure>
|
||||
<figure>
|
||||
<figure class="banner">
|
||||
<img class="header-computer" src="./assets/img/Rectangle 9.jpg" alt="Capa-notebook" />
|
||||
</figure>
|
||||
</header>
|
||||
@ -72,14 +72,14 @@
|
||||
|
||||
<!--------------Section-3------------------>
|
||||
<div class="container-notebooks">
|
||||
<figure class="notebook">
|
||||
<img src="./assets/img/Rectangle 13.jpg" alt="notebook">
|
||||
<figure class="container-notebooks ima1">
|
||||
<img class="notebook" src="./assets/img/Rectangle 13.jpg" alt="notebook">
|
||||
</figure>
|
||||
<figure class="notebook">
|
||||
<img src="./assets/img/Rectangle 16.png" alt="notebook">
|
||||
<figure class="container-notebooks imag2">
|
||||
<img class="notebook"src="./assets/img/Rectangle 16.png" alt="notebook">
|
||||
</figure>
|
||||
<figure class="notebook">
|
||||
<img src="./assets/img/Rectangle 17.png" alt="notebook">
|
||||
<figure class="container-notebooks image3">
|
||||
<img class="notebook" src="./assets/img/Rectangle 17.png" alt="notebook">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
|
||||
<!--------------Section-4------------------>
|
||||
<section class="container-4">
|
||||
<div>
|
||||
<div class="section-4">
|
||||
<h3 class="title">Lorem ipsum dolor sit amet</h3>
|
||||
<div class="text-container">
|
||||
<p class="text-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non
|
||||
@ -125,12 +125,13 @@
|
||||
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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-final">
|
||||
<figure class="image-container">
|
||||
<img class="rectangle" src="./assets/img/Rectangle 15.jpg" alt="">
|
||||
<img class="retangle" src="./assets/img/Rectangle 15.jpg" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@ -138,9 +139,12 @@
|
||||
<!--------------Footer------------------>
|
||||
<footer>
|
||||
<div class="image-footer">
|
||||
<img src="./assets/img/instagram.svg" />
|
||||
<img src="./assets/img/facebook.svg" />
|
||||
<img src="./assets/img/youtube.svg" />
|
||||
<a href="/">
|
||||
<img class="contato" src="./assets/img/instagram.svg" alt="instagram" /></a>
|
||||
<a href="/">
|
||||
<img class="contato" src="./assets/img/facebook.svg" alt="facebook" /></a>
|
||||
<a href="/">
|
||||
<img class="contato" src="./assets/img/youtube.svg" alt="youtube" /></a>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-footer">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user