I'm working on a web project and I'm having trouble positioning H2 headings ("Esportes" and "Economia") to serve as titles for their respective sections. I've tried put the h2's inside of each class (Sports and Economy) , but I'm not getting the desired results. Please can you guys help me?
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu portal de notícias</title>
<!--<link rel="stylesheet" href="./main.css" />-->
<style>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Meu código abaixo*/
header {
display: flex;
justify-content: space-between;
padding: 15px;
}
header h1 {
font-size: 2rem;
font-weight: 500;
color: steelblue;
}
header nav ul {
display: flex;
margin-right: 100px;
}
header nav ul li a {
margin-right: 10px;
text-decoration: none;
font-size: 1.5rem;
padding: 5px;
border: 2.5px solid steelblue;
color: steelblue;
}
header nav ul li a:hover {
background-color: steelblue;
color: white;
}
section {
display: flex;
justify-content: space-evenly;
}
article {
margin-left: 15px;
}
.sport {
display: flex;
margin-bottom: 10px;
position: relative;
}
.economy {
display: flex;
margin-bottom: 10px;
position: relative;
margin-top: 50px;
}
.sport img {
position: relative;
height: 150px;
}
.economy img {
position: relative;
height: 150px;
}
h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
}
h2 {
height: 20px;
margin-right: 10px;
font-size: 2rem;
color: green;
font-weight: 400;
}
.sport-hdr,
.econ-hdr {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<header>
<h1>Meu portal de notícias</h1>
<nav>
<ul>
<li>
<a href="#sports" title="Ir para a seção de esportes">Esportes</a>
</li>
<li>
<a href="#economy" title="Ir para a seção de notícias">Economia</a>
</li>
</ul>
</nav>
</header>
<section>
<div class="sport">
<h2>Esportes</h2>
<article>
<img src="./imagens/futebol.jpg" alt="Bola de futebol no gramado" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Grande clássico na noite de hoje</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/futebol-americano.jpg"
alt="Jogador de futebol americano correndo com a bola na mão" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Noite do Superbowl</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/basquete.jpg" title="Vista aérea de uma quadra de basquete" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Notícia sobre a NBA</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/basquete.jpg" title="Vista aérea de uma quadra de basquete" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Notícia sobre a NBA</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
</div>
</section>
<section>
<h2>Economia</h2>
<div class="economy">
<article>
<img src="./imagens/dolares.jpg" alt="Muitos dólares" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Dólar em alta de 0.50%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
</div>
</section>
</body>
</html>
Header Styling:
Created a header with a flex container, displaying the website title on the left and a navigation menu on the right. Styled the navigation menu items with appropriate spacing and hover effects. Section Styling:
Used flexbox to create a layout for the sections. Styled individual articles within each section with an image, date, heading, and a "Read more" link. Specific Section Styling:
Styled the "Esportes" section with a class .sport. Styled the "Economia" section with a class .economy. Positioned images and headers within each section. H2 Headings:
Used H2 headings for "Esportes" and "Economia."
If you add a flex-flow of column for the sections, you'll be able to utilize a column layout which will put the h2's above the posts.
I also added some formatting to the div's you made which hold the posts. Below are the three changes I made to your styling:
section {
flex-flow: column nowrap;
}
.sport {
margin-top: 20px;
}
.economy {
margin-top: 20px;
}
Here's a snippet to see the layout change:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Meu código abaixo*/
header {
display: flex;
justify-content: space-between;
padding: 15px;
}
header h1 {
font-size: 2rem;
font-weight: 500;
color: steelblue;
}
header nav ul {
display: flex;
margin-right: 100px;
}
header nav ul li a {
margin-right: 10px;
text-decoration: none;
font-size: 1.5rem;
padding: 5px;
border: 2.5px solid steelblue;
color: steelblue;
}
header nav ul li a:hover {
background-color: steelblue;
color: white;
}
section {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
article {
margin-left: 15px;
}
.sport {
display: flex;
margin-bottom: 10px;
position: relative;
margin-top: 20px;
}
.economy {
display: flex;
margin-bottom: 10px;
position: relative;
margin-top: 20px;
}
.sport img {
position: relative;
height: 150px;
}
.economy img {
position: relative;
height: 150px;
}
h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
}
h2 {
margin-right: 10px;
font-size: 2rem;
color: green;
font-weight: 400;
}
.sport-hdr,
.econ-hdr {
display: flex;
justify-content: center;
}<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu portal de notícias</title>
</head>
<body>
<header>
<h1>Meu portal de notícias</h1>
<nav>
<ul>
<li>
<a href="#sports" title="Ir para a seção de esportes">Esportes</a>
</li>
<li>
<a href="#economy" title="Ir para a seção de notícias">Economia</a>
</li>
</ul>
</nav>
</header>
<section>
<h2>Esportes</h2>
<div class="sport">
<article>
<img src="./imagens/futebol.jpg" alt="Bola de futebol no gramado" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Grande clássico na noite de hoje</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/futebol-americano.jpg" alt="Jogador de futebol americano correndo com a bola na mão" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Noite do Superbowl</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/basquete.jpg" title="Vista aérea de uma quadra de basquete" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Notícia sobre a NBA</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/basquete.jpg" title="Vista aérea de uma quadra de basquete" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Notícia sobre a NBA</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
</div>
</section>
<section>
<h2>Economia</h2>
<div class="economy">
<article>
<img src="./imagens/dolares.jpg" alt="Muitos dólares" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Dólar em alta de 0.50%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
</div>
</section>
</body>
</html>