Skip to content

Commit

Permalink
pequenas correções css import section
Browse files Browse the repository at this point in the history
  • Loading branch information
@kelvingomes13
kelvingomes13 committed Jul 20, 2024
1 parent 9b14c67 commit f0dbe8a
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 154 deletions.
306 changes: 162 additions & 144 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,157 +1,175 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>

<link rel="stylesheet" href="styles/index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet" />
<title>Portal de Noticias</title>
</head>

<title>Portal de Noticias</title>
</head>

<body>
<header>
<nav id="primary" class="grid grid-flow-col">
<div>
<img src="assets/icons/List.svg" alt="icone de menu" />
<strong>Menu</strong>
</div>
<div>
<img src="assets/Tech News.svg" alt="TechNews logo" />
</div>
<div>
<strong>Buscar</strong>
<img src="assets/icons/MagnifyingGlass.svg" alt="icone de lupa" />
</div>
</nav>
<nav id="secondary" class="grid grid-flow-col">
<a href="#">Inteligência Artificial</a>
<a href="#">Blockchain</a>
<a href="#">Hologramas</a>
<a href="#">Internet</a>
<a href="#">Vestíveis</a>
<a href="#">Realidade Aumentada</a>
<a href="#">Realidade Virtual</a>
</nav>
</header>
<main class="grid container">
<section id="featured" class="gird grid-flow-col gap-16">
<figure class="card">
<img src="assets/images/Image 01.png"
alt="Robôs domésticos começam a ser adotados para tarefas diárias, prometendo mais conforto e eficiência nas residências." />
<figcaption>
<span class="content-tag">ROBÓTICA</span>
<h2 class="text-2xl">
Robôs domésticos começam a ser adotados para tarefas diárias,
prometendo mais conforto e eficiência nas residências.
</h2>
</figcaption>
</figure>
<div class="grid grid-cols-2 gap-16">
<body>
<header class="container">
<nav id="primary" class="grid grid-flow-col">
<div>
<img src="assets/icons/List.svg" alt="icone de menu" />
<strong>Menu</strong>
</div>
<div>
<img src="assets/Tech News.svg" alt="TechNews logo" />
</div>
<div>
<strong>Buscar</strong>
<img src="assets/icons/MagnifyingGlass.svg" alt="icone de lupa" />
</div>
</nav>
<nav id="secondary" class="grid grid-flow-col">
<a href="#">Inteligência Artificial</a>
<a href="#">Blockchain</a>
<a href="#">Hologramas</a>
<a href="#">Internet</a>
<a href="#">Vestíveis</a>
<a href="#">Realidade Aumentada</a>
<a href="#">Realidade Virtual</a>
</nav>
</header>
<main class="grid container">
<section id="featured" class="grid grid-flow-col gap-16">
<figure class="card">
<img src="assets/images/Image 02.png"
alt="Novo Smartphone Projetor 3D chega ao mercado, transformando a forma como vemos nossas telas!" />
<img
src="assets/images/Image 01.png"
alt="Robôs domésticos começam a ser adotados para tarefas diárias, prometendo mais conforto e eficiência nas residências."
/>
<figcaption>
<span class="content-tag">Hologramas</span>
<h2 class="text-lg">
Novo Smartphone Projetor 3D chega ao mercado, transformando a
forma como vemos nossas telas!
<span class="content-tag">ROBÓTICA</span>
<h2 class="text-2xl">
Robôs domésticos começam a ser adotados para tarefas diárias,
prometendo mais conforto e eficiência nas residências.
</h2>
</figcaption>
</figure>
<div class="grid grid-cols-2 gap-16">
<figure class="card">
<img
src="assets/images/Image 02.png"
alt="Novo Smartphone Projetor 3D chega ao mercado, transformando a forma como vemos nossas telas!"
/>
<figcaption>
<span class="content-tag">Hologramas</span>
<h2 class="text-lg">
Novo Smartphone Projetor 3D chega ao mercado, transformando a
forma como vemos nossas telas!
</h2>
</figcaption>
</figure>

<figure class="card">
<img src="assets/images/Image 03.png"
alt="Tecnologia 6G chega às metrópoles brasileiras, prometendo revolucionar a forma como vivemos e nos comunicamos." />
<figcaption>
<span class="content-tag">Internet</span>
<h2 class="text-lg">
Tecnologia 6G chega às metrópoles brasileiras, prometendo
revolucionar a forma como vivemos e nos comunicamos.
</h2>
</figcaption>
</figure>
<figure class="card">
<img
src="assets/images/Image 03.png"
alt="Tecnologia 6G chega às metrópoles brasileiras, prometendo revolucionar a forma como vivemos e nos comunicamos."
/>
<figcaption>
<span class="content-tag">Internet</span>
<h2 class="text-lg">
Tecnologia 6G chega às metrópoles brasileiras, prometendo
revolucionar a forma como vivemos e nos comunicamos.
</h2>
</figcaption>
</figure>

<figure class="card">
<img src="assets/images/Image 04.png"
alt="Empresa lança relógio inteligente capaz de monitorar a saúde mental, oferecendo insights valiosos para o bem-estar pessoal." />
<figcaption>
<span class="content-tag">Vestíveis</span>
<h2 class="text-lg">
Empresa lança relógio inteligente capaz de monitorar a saúde
mental, oferecendo insights valiosos para o bem-estar pessoal.
</h2>
</figcaption>
</figure>

<figure class="card">
<img src="assets/images/Image 05.png"
alt="Escolas adotam a tecnologia VR para proporcionar experiências imersivas, transformando a aprendizagem tradicional." />
<figcaption>
<span class="content-tag">Realidade Virtual</span>
<h2 class="text-lg">
Escolas adotam a tecnologia VR para proporcionar experiências
imersivas, transformando a aprendizagem tradicional.
</h2>
</figcaption>
</figure>
</div>
</section>
<section id="weekly">
<header class="grid-flow-col">
<h3>Mais lidas da semana</h3>
<a href="#" class="grid grid-flow-col">
<strong>Ver tudo</strong>
<span></span>
</a>
</header>
<div class="grid gap-16">
<figure>
<span class="content-tag">veiculos</span>
<img src="assets/images/Image 06.png"
alt="Protótipo de veículo voador é apresentado, marcando o início da era dos transportes aéreos pessoais." />
<p>
Protótipo de veículo voador é apresentado, marcando o início da
era dos transportes aéreos pessoais.
</p>
</figure>
<figure>
<span class="content-tag">hologramas</span>
<img src="assets/images/Image 07.png"
alt="Plataforma de videoconferência apresenta nova função de hologramas, tornando as chamadas virtuais mais realistas e envolventes.." />
<p>
Plataforma de videoconferência apresenta nova função de
hologramas, tornando as chamadas virtuais mais realistas e
envolventes.
</p>
</figure>
<figure>
<span class="content-tag">realidade virtual</span>
<img src="assets/images/Image 08.png"
alt="Nova geração de consoles de videogame é lançada, trazendo gráficos ultra-realistas e experiências de jogo totalmente envolventes." />
<p>
Nova geração de consoles de videogame é lançada, trazendo gráficos
ultra-realistas e experiências de jogo totalmente envolventes.
</p>
</figure>
<figure>
<span class="content-tag">internet</span>
<img src="assets/images/Image 09.png"
alt="Projeto busca oferecer internet de alta velocidade em áreas remotas através de satélites." />
<p>
Projeto busca oferecer internet de alta velocidade em áreas
remotas através de satélites.
</p>
</figure>
</div>
</section>
</main>
<footer>teste</footer>
</body>
<figure class="card">
<img
src="assets/images/Image 04.png"
alt="Empresa lança relógio inteligente capaz de monitorar a saúde mental, oferecendo insights valiosos para o bem-estar pessoal."
/>
<figcaption>
<span class="content-tag">Vestíveis</span>
<h2 class="text-lg">
Empresa lança relógio inteligente capaz de monitorar a saúde
mental, oferecendo insights valiosos para o bem-estar pessoal.
</h2>
</figcaption>
</figure>

</html>
<figure class="card">
<img
src="assets/images/Image 05.png"
alt="Escolas adotam a tecnologia VR para proporcionar experiências imersivas, transformando a aprendizagem tradicional."
/>
<figcaption>
<span class="content-tag">Realidade Virtual</span>
<h2 class="text-lg">
Escolas adotam a tecnologia VR para proporcionar experiências
imersivas, transformando a aprendizagem tradicional.
</h2>
</figcaption>
</figure>
</div>
</section>
<section id="weekly">
<header class="grid-flow-col">
<h3>Mais lidas da semana</h3>
<a href="#" class="grid grid-flow-col">
<strong>Ver tudo</strong>
<span>seta</span>
</a>
</header>
<div class="grid gap-16">
<figure class="card">
<span class="content-tag">veiculos</span>
<img
src="assets/images/Image 06.png"
alt="Protótipo de veículo voador é apresentado, marcando o início da era dos transportes aéreos pessoais."
/>
<p>
Protótipo de veículo voador é apresentado, marcando o início da
era dos transportes aéreos pessoais.
</p>
</figure>
<figure class="card">
<span class="content-tag">hologramas</span>
<img
src="assets/images/Image 07.png"
alt="Plataforma de videoconferência apresenta nova função de hologramas, tornando as chamadas virtuais mais realistas e envolventes.."
/>
<p>
Plataforma de videoconferência apresenta nova função de
hologramas, tornando as chamadas virtuais mais realistas e
envolventes.
</p>
</figure>
<figure class="card">
<span class="content-tag">realidade virtual</span>
<img
src="assets/images/Image 08.png"
alt="Nova geração de consoles de videogame é lançada, trazendo gráficos ultra-realistas e experiências de jogo totalmente envolventes."
/>
<p>
Nova geração de consoles de videogame é lançada, trazendo gráficos
ultra-realistas e experiências de jogo totalmente envolventes.
</p>
</figure>
<figure class="card">
<span class="content-tag">internet</span>
<img
src="assets/images/Image 09.png"
alt="Projeto busca oferecer internet de alta velocidade em áreas remotas através de satélites."
/>
<p>
Projeto busca oferecer internet de alta velocidade em áreas
remotas através de satélites.
</p>
</figure>
</div>
</section>
</main>
<footer>teste</footer>
</body>
</html>
4 changes: 2 additions & 2 deletions styles/header.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#primay {
#primary {
padding-block: 20px;

div {
Expand All @@ -21,7 +21,7 @@

#secondary {
padding-block: 14px;
border: solid 1px --stroke-color;
border: solid 1px var(--stroke-color);
border-inline: none;
justify-content: space-between;
}
3 changes: 2 additions & 1 deletion styles/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import url(global.css);
@import url(header.css);
@import url(utility.css);
@import url(utility.css);
@import url(sections.css);
18 changes: 11 additions & 7 deletions styles/sections.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,35 @@
img {
height: 100%;
object-fit: cover;
border-radius: 4px;

}
.card {
border-radius: 4px;
overflow: hidden;
position: relative;

&::berofe {
content: "";
position: absolute;
inset: 0;
top: 50%;
background: linear-gradient(
180deg, transparent 0%,
#020617 100%
);
)
}
figcaption {

figcaption {
position: absolute;
bottom: 0;

padding: 24px;
&:has(.text-lg) {
padding: 12px;
}


h2 {
margin-top: 8px;
}
}

}
}
section header {
Expand Down

0 comments on commit f0dbe8a

Please sign in to comment.