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

37
index.html
View File

@ -4,25 +4,50 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>
</head>
<body>
<header class="page-header">
<figure >
<figure>
<a href="/"
><img src="./src/img/Logo-M3Academy 1.svg" alt="Logo M3Academy"
/></a>
</figure>
</header>
<main>
<main>
<div class="banner-principal-container">
<figure>
<img class="descktop-banner" src="/src/img/main-banner-descktop.png" alt="">
<img class="mobile-banner" src="/src/img/main-banner-mobile.png" alt="">
<img
class="descktop-banner"
src="/src/img/main-banner-descktop.png"
alt=""
/>
<img
class="mobile-banner"
src="/src/img/main-banner-mobile.png"
alt=""
/>
</figure>
</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>
</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

35
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;
padding: 0;
@ -14,7 +16,7 @@
/* */
/* Banner-principal */
.descricao-container,
.banner-principal-container,
.mobile-banner img,
.descktop-banner img,
@ -23,23 +25,46 @@
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) {
.descktop-banner {
display: none;
}
}
@media screen and (min-width: 1025px) {
.mobile-banner {
display: none;
}
}