criar subtitulo e descrição de baixo

This commit is contained in:
HUMBERTO ANTONIO CORREIA FERRO 2022-10-11 17:31:04 -03:00
parent 4eb6e17622
commit b8a2b40008
3 changed files with 27 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 245 KiB

View File

@ -140,6 +140,26 @@ body{
line-height: 24px; line-height: 24px;
font-size: 16px; font-size: 16px;
} }
.bottom-text{
display: flex;
justify-content: center;
align-items: center;
}
.bottom-description{
max-width: 550px;
}
.bottom-subtitle{
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-align: center;
}
.bottom-descriptions{
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.main-banner-desktop { .main-banner-desktop {
display: none; display: none;
@ -148,6 +168,7 @@ body{
display: block; display: block;
width: 100%; width: 100%;
} }
} }
@media screen and (max-width:1024px) { @media screen and (max-width:1024px) {
.top-infocard{ .top-infocard{

View File

@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Page M3 Academy</title> <title>Page M3 Academy</title>
<link href="https: //fonts.googleapis.com/css2? família= Inter:wght@400;500 &family= Roboto+Mono:wght@100 & family= Shadows+Into+Light & display=swap" rel="stylesheet"> <link href="https: //fonts.googleapis.com/css2? família= Inter:wght@400;500 &family= Roboto+Mono:wght@100 & family= Shadows+Into+Light & display=swap" rel="stylesheet">
<link href="https: //fonts.googleapis.com/css2? família= Inter:wght@600 &family= Roboto+Mono:wght@100 & display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style/main.css"/> <link rel="stylesheet" href="assets/style/main.css"/>
</head> </head>
<body> <body>
@ -76,11 +77,12 @@
<p class="bottom-card-description">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. </p> <p class="bottom-card-description">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. </p>
</div> </div>
</section> </section>
<section> <section class="bottom-text">
<div> <div class="bottom-description">
<h2></h2> <h2 class="bottom-subtitle">Lorem ipsum dolor sit amet</h2>
<p></p> <p class="bottom-descriptions">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 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>
</section> </section>
</main> </main>