diff --git a/assets/Ads.png b/assets/Ads.png new file mode 100644 index 0000000..f8ca1c4 Binary files /dev/null and b/assets/Ads.png differ diff --git a/assets/Logo.svg b/assets/Logo.svg new file mode 100644 index 0000000..204f9b8 --- /dev/null +++ b/assets/Logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/ArrowRight-hover.svg b/assets/icons/ArrowRight-hover.svg new file mode 100644 index 0000000..71bb241 --- /dev/null +++ b/assets/icons/ArrowRight-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/ArrowRight.svg b/assets/icons/ArrowRight.svg new file mode 100644 index 0000000..0c8b387 --- /dev/null +++ b/assets/icons/ArrowRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/List.svg b/assets/icons/List.svg new file mode 100644 index 0000000..8383269 --- /dev/null +++ b/assets/icons/List.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/MagnifyingGlass.svg b/assets/icons/MagnifyingGlass.svg new file mode 100644 index 0000000..a3e551c --- /dev/null +++ b/assets/icons/MagnifyingGlass.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/Image 01.png b/assets/images/Image 01.png new file mode 100644 index 0000000..260aec8 Binary files /dev/null and b/assets/images/Image 01.png differ diff --git a/assets/images/Image 02.png b/assets/images/Image 02.png new file mode 100644 index 0000000..694b911 Binary files /dev/null and b/assets/images/Image 02.png differ diff --git a/assets/images/Image 03.png b/assets/images/Image 03.png new file mode 100644 index 0000000..7aed388 Binary files /dev/null and b/assets/images/Image 03.png differ diff --git a/assets/images/Image 04.png b/assets/images/Image 04.png new file mode 100644 index 0000000..45cf638 Binary files /dev/null and b/assets/images/Image 04.png differ diff --git a/assets/images/Image 05.png b/assets/images/Image 05.png new file mode 100644 index 0000000..9625200 Binary files /dev/null and b/assets/images/Image 05.png differ diff --git a/assets/images/Image 06.png b/assets/images/Image 06.png new file mode 100644 index 0000000..8c0b3f1 Binary files /dev/null and b/assets/images/Image 06.png differ diff --git a/assets/images/Image 07.png b/assets/images/Image 07.png new file mode 100644 index 0000000..1ae35c4 Binary files /dev/null and b/assets/images/Image 07.png differ diff --git a/assets/images/Image 08.png b/assets/images/Image 08.png new file mode 100644 index 0000000..bd0eacc Binary files /dev/null and b/assets/images/Image 08.png differ diff --git a/assets/images/Image 09.png b/assets/images/Image 09.png new file mode 100644 index 0000000..f47dde8 Binary files /dev/null and b/assets/images/Image 09.png differ diff --git a/assets/images/Image 10.png b/assets/images/Image 10.png new file mode 100644 index 0000000..277ec5e Binary files /dev/null and b/assets/images/Image 10.png differ diff --git a/assets/images/Image 11.png b/assets/images/Image 11.png new file mode 100644 index 0000000..f03cdf1 Binary files /dev/null and b/assets/images/Image 11.png differ diff --git a/assets/images/Image 12.png b/assets/images/Image 12.png new file mode 100644 index 0000000..ba99552 Binary files /dev/null and b/assets/images/Image 12.png differ diff --git a/assets/images/Image 13.png b/assets/images/Image 13.png new file mode 100644 index 0000000..682a2c9 Binary files /dev/null and b/assets/images/Image 13.png differ diff --git a/assets/images/Image 14.png b/assets/images/Image 14.png new file mode 100644 index 0000000..1d0e81a Binary files /dev/null and b/assets/images/Image 14.png differ diff --git a/assets/images/Image 15.png b/assets/images/Image 15.png new file mode 100644 index 0000000..4326fde Binary files /dev/null and b/assets/images/Image 15.png differ diff --git a/assets/images/Image 16.png b/assets/images/Image 16.png new file mode 100644 index 0000000..f721a75 Binary files /dev/null and b/assets/images/Image 16.png differ diff --git a/assets/images/Image 17.png b/assets/images/Image 17.png new file mode 100644 index 0000000..2ebfe3c Binary files /dev/null and b/assets/images/Image 17.png differ diff --git a/assets/images/Image 18.png b/assets/images/Image 18.png new file mode 100644 index 0000000..1e4b1e5 Binary files /dev/null and b/assets/images/Image 18.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..bce2d20 --- /dev/null +++ b/index.html @@ -0,0 +1,259 @@ + + + + + + + + Portal de notícias + + + + +
+ + +
+
+ +
+
+

Mais lidas da semana

+ + ver tudo + + +
+
+
+ veículos + Protótipo de veículo voador é apresentado, marcando o início da era dos transportes aéreos pessoais. +

Protótipo de veículo voador é apresentado, marcando o início da era dos transportes aéreos pessoa...

+
+
+ veículos + Plataforma de videoconferência apresenta nova função de hologramas, tornando as chamadas virtuais mais realistas e envolventes. +

Plataforma de videoconferência apresenta nova função de hologramas, tornando as chamadas virtuais mais realistas e envolventes.

+
+
+ veículos + Nova geração de consoles de videogame é lançada, trazendo gráficos ultra-realistas e experiências de jogo totalmente envolventes. +

Nova geração de consoles de videogame é lançada, trazendo gráficos ultra-realistas e experiências de jogo totalmente envolventes.

+
+
+ veículos + Projeto busca oferecer internet de alta velocidade em áreas remotas através de satélites. +

Projeto busca oferecer internet de alta velocidade em áreas remotas através de satélites.

+
+
+
+
+
+

Destaques da Inteligência Artificial

+ + Ver tudo + + +
+
+
+
+ Inteligência Artificial +

+ Empresa surpreende o mundo ao anunciar um algoritmo capaz de prever eventos futuros com alta precisão. +

+

+ Em um avanço surpreendente da inteligência artificial, uma empresa anuncia o desenvolvimento de um algoritmo capaz de prever eventos futuros com notável precisão. Descubra como essa tecnologia está desafiando as fronteiras da previsão e quais são as implicações para diversas áreas, desde finanças até plan... +

+
+
+ Em um avanço surpreendente da inteligência artificial, uma empresa anuncia o desenvolvimento de um algoritmo capaz de prever eventos futuros com notável precisão. Descubra como essa tecnologia está desafiando as fronteiras da previsão e quais são as implicações para diversas áreas, desde finanças até planejamento estratégico. +
+
+
+
+ Inteligência Artificial +

+ Dispositivo portátil promete traduzir instantaneamente diferentes idiomas, facilitando a comunicação global. +

+

+ Em um mundo cada vez mais conectado, a comunicação sem fronteiras é essencial. Nesse contexto, um dispositivo portátil surge como um verdadeiro herói linguístico, prometendo quebrar as barreiras idiomáticas instantaneamente. Imagine poder se comunicar fluentemente em qualquer lugar do mundo, indepe... +

+
+
+ Em um mundo cada vez mais conectado, a comunicação sem fronteiras é essencial. Nesse contexto, um dispositivo portátil surge como um verdadeiro herói linguístico, prometendo quebrar as barreiras idiomáticas instantaneamente. Imagine poder se comunicar fluentemente em qualquer lugar do mundo, independentemente do idioma local. Este dispositivo não é mais uma visão futurista, mas uma realidade impressionante que está transformando a forma como nos conectamos globalmente. Nesta reportagem, mergulharemos nas funcionalidades deste dispositivo revolucionário e como ele está moldando uma nova era de compreensão global. +
+
+
+
+ Inteligência Artificial +

+ Criados para auxiliar idosos, robôs de companhia ganham popularidade, oferecendo suporte emocional e físico aos usu... +

+

+ A tecnologia não só avança, mas também busca tornar a vida mais significativa para todas as gerações. No cenário atual, os robôs sociais, projetados especialmente para oferecer apoio e companhia aos idosos, estão ganhando destaque. Mais do que meros assistentes, esses robôs são programados para f... +

+
+
+ A tecnologia não só avança, mas também busca tornar a vida mais significativa para todas as gerações. No cenário atual, os robôs sociais, projetados especialmente para oferecer apoio e companhia aos idosos, estão ganhando destaque. Mais do que meros assistentes, esses robôs são programados para fornecer suporte emocional e físico, preenchendo lacunas nas necessidades de cuidado. Nesta matéria, exploraremos como esses companheiros tecnológicos estão impactando positivamente a qualidade de vida da terceira idade e proporcionando uma nova perspectiva sobre o envelhecimento. +
+
+
+
+ Inteligência Artificial +

+ Aplicativo utiliza inteligência artificial para ajudar usuários a manterem o foco e aumentarem a produtividade no dia a dia. +

+

+ No turbilhão da vida moderna, onde distrações são abundantes, um aplicativo inovador surge como um aliado indispensável para quem busca maior concentração e eficiência no cotidiano. Utilizando avançados algoritmos de inteligência artificial, este aplicativo promete mais do que simplesmente gerenci... +

+
+
+ No turbilhão da vida moderna, onde distrações são abundantes, um aplicativo inovador surge como um aliado indispensável para quem busca maior concentração e eficiência no cotidiano. Utilizando avançados algoritmos de inteligência artificial, este aplicativo promete mais do que simplesmente gerenciar tarefas; ele está programado para compreender os padrões de trabalho de cada usuário, oferecendo sugestões personalizadas para otimizar o tempo e maximizar a produtividade. Nesta matéria, exploraremos como essa ferramenta tecnológica está se tornando a chave para manter o foco em um mundo cada vez mais cheio de distrações, transformando a maneira como encaramos nossas responsabilidades diárias. +
+
+
+
+ + +
+ + \ No newline at end of file diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 0000000..46eaec0 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,74 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --brand-color-light: #60A5FA; + --brand-color-dark: #1D4ED8; + --bg-color: #0F172A; + --stroke-color: #1E293B; + --text-color-primary: #F1F5F9; + --text-color-secondary: #CBD5E1; + --font-family: "Archivo", sans-serif; + --h1: 800 24px/135% var(--font-family); + --h2: 800 16px/140% var(--font-family); + --h3: 800 14px/140% var(--font-family); + --text-span: 600 14px/145% var(--font-family); + --text: 400 16px/140% var(--font-family); + --text-sm: 400 14px/160% var(--font-family); + +} + +body { + font: var(--text); + color: var(--text-color-primary); + background-color: var(--bg-color); +} + +a { + text-decoration: none; + color: inherit; +} + +a:hover { + color: var(--brand-color-light); +} + +h1, h2, h3 { + font: inherit; +} + +img { + max-width: 100%; +} + +.container { + max-width: 1280px; + padding-inline: 32px; + margin-inline: auto; +} + +main { + margin-block: 40px; + row-gap: 80px; + column-gap: 32px; + grid-template-columns: 2fr 1.4fr; + grid-template-areas: + "featured featured" + "weekly weekly" + "ai aside"; +} + +.content-tag { + display: inline-block; + background-color: var(--brand-color-dark); + padding: 4px 8px; + border-radius: 4px; + font: 500 10px/1.2 var(--font-family); + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--text-color-primary); + box-shadow: 0px 4px 16px #02061740; +} diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 0000000..6daf9f5 --- /dev/null +++ b/styles/header.css @@ -0,0 +1,22 @@ +#primary { + padding-block: 20px; + div { + display: flex; + align-items: center; + gap: 8px; + } + /* nesting css */ + div:nth-child(2) { + margin-inline: auto; + } + div:nth-child(3) { + justify-self: end; + } +} + +#secondary { + padding-block: 14px; + border: solid 1px var(--stroke-color); + border-inline: none; + justify-content: space-between; +} \ No newline at end of file diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..f365684 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,4 @@ +@import url(global.css); +@import url(utility.css); +@import url(header.css); +@import url(sections.css); \ No newline at end of file diff --git a/styles/sections.css b/styles/sections.css new file mode 100644 index 0000000..afca2d0 --- /dev/null +++ b/styles/sections.css @@ -0,0 +1,104 @@ +section header { + border-top: 1px solid var(--stroke-color); + padding-block: 12px 24px; + font: var(--text-span); + a { + justify-self: end; + align-items: center; + gap: 8px; + span { + background-image: url(../assets/icons/ArrowRight.svg); + width: 16px; + height: 16px; + } + &:hover span { + background-image: url(../assets/icons/ArrowRight-hover.svg); + } + } +} + +#featured { + grid-area: featured; + img { + height: 100%; + object-fit: cover; + } + .card { + border-radius: 4px; + overflow: hidden; + position: relative; + &::before { + content: ""; + position: absolute; + inset: 0; + top: 50%; + background: linear-gradient( + 180deg, + transparent 0%, + #020617 100% + ); + } + figcaption { + position: absolute; + bottom: 0; + padding: 24px; + &:has(.text-lg) { + padding: 12px; + } + h2 { + margin-top: 8px; + } + } + } +} + +#weekly { + grid-area: weekly; + &>div { + grid-template-columns: repeat(4, 292px); + } + img { + height: 160px; + } + figure { + position: relative; + .content-tag { + position: absolute; + top: 8px; + left: 8px; + } + p { + margin-top: 8px; + font-weight: 800; + } + } +} + +#ai { + grid-area: ai; + img { + width: 176px; + aspect-ratio: 1/1; + object-fit: cover; + } + h3 { + margin-block: 8px 4px; + + } +} + +aside { + grid-area: aside; +} + +#more { + margin-top: 32px; + h3 { + margin-top: 8px; + } + img { + width: 72px; + aspect-ratio: 1/1; + object-fit: cover; + } +} \ No newline at end of file diff --git a/styles/utility.css b/styles/utility.css new file mode 100644 index 0000000..244763b --- /dev/null +++ b/styles/utility.css @@ -0,0 +1,36 @@ +/* utility-first */ +.grid { + display: grid; +} + +.grid-flow-col { + grid-auto-flow: column; +} + +.grid-cols-2 { + grid-template-columns: 1fr 1fr; +} + +.gap-16 { + gap: 16px; +} + +.gap-32 { + gap: 32px; +} + +.text-2xl { + font: var(--h1); +} + +.text-xl { + font: var(--h2); +} + +.text-lg { + font: var(--h3); +} + +.text-sm { + font: var(--text-sm); +} \ No newline at end of file