ueberjames/challenge-landing-page-ueber-james
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

texto card e imagem

Browse Source
This commit is contained in:
Ueber James Santos 2022-10-08 16:59:21 -03:00
parent b6633cb18b
commit 8ac75a2244
3 changed files with 70 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
index.html
View File

@ -4,25 +4,50 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/style/style.css"> <link rel="stylesheet" href="./src/style/style.css" />
<title>Landing Page M3</title> <title>Landing Page M3</title>
</head> </head>
<body> <body>
<header class="page-header"> <header class="page-header">
<figure > <figure>
<a href="/" <a href="/"
><img src="./src/img/Logo-M3Academy 1.svg" alt="Logo M3Academy" ><img src="./src/img/Logo-M3Academy 1.svg" alt="Logo M3Academy"
/></a> /></a>
</figure> </figure>
</header> </header>
<main> <main>
<div class="banner-principal-container"> <div class="banner-principal-container">
<figure> <figure>
<img class="descktop-banner" src="/src/img/main-banner-descktop.png" alt=""> <img
<img class="mobile-banner" src="/src/img/main-banner-mobile.png" alt=""> class="descktop-banner"
src="/src/img/main-banner-descktop.png"
alt=""
/>
<img
class="mobile-banner"
src="/src/img/main-banner-mobile.png"
alt=""
/>
</figure> </figure>
</div> </div>
</main>
<section class="descricao-container">
<div class="texto-inforcard">
<h2>Lorem ipsum</h2>
<h1>dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
</div>
<div class="imagem-infor-computadores">
<figure>
<img src="/src/img/imagem-infor-computadores.png" alt="">
</figure>
</div>
</section>
</main>
</body> </body>
</html> </html>

BIN
src/img/imagem-infor-computadores.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

47
src/style/style.css
View File

@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -14,7 +16,7 @@
/* */ /* */
/* Banner-principal */ /* Banner-principal */
.descricao-container,
.banner-principal-container, .banner-principal-container,
.mobile-banner img, .mobile-banner img,
.descktop-banner img, .descktop-banner img,
@ -23,23 +25,46 @@
width: 100%; width: 100%;
} }
/* inforcar principal */
.descricao-container,
.texto-inforcard {
font-family: "Inter", sans-serif;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
.texto-inforcard {
width: 40%;
margin: 73px 0;
}
.texto-inforcard h2 {
font-size: 32px;
font-weight: 400;
}
.texto-inforcard h1 {
font-size: 48px;
font-weight: 500;
}
.texto-inforcard p{
font-size: 16px;
font-weight: 400;
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.descktop-banner { .descktop-banner {
display: none; display: none;
} }
} }
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
.mobile-banner { .mobile-banner {
display: none; display: none;
} }
} }