diff --git a/assets/Imgs/Ate-fim.jpg b/assets/Imgs/Ate-fim.jpg new file mode 100644 index 0000000..f82c6b2 Binary files /dev/null and b/assets/Imgs/Ate-fim.jpg differ diff --git a/assets/Imgs/Olhos-oceano.jpg b/assets/Imgs/Olhos-oceano.jpg new file mode 100644 index 0000000..184e97b Binary files /dev/null and b/assets/Imgs/Olhos-oceano.jpg differ diff --git a/assets/Imgs/Procura-homem-perfeito.jpg b/assets/Imgs/Procura-homem-perfeito.jpg new file mode 100644 index 0000000..0252c8f Binary files /dev/null and b/assets/Imgs/Procura-homem-perfeito.jpg differ diff --git a/assets/Imgs/Verdade-Missipi.jpg b/assets/Imgs/Verdade-Missipi.jpg new file mode 100644 index 0000000..9952164 Binary files /dev/null and b/assets/Imgs/Verdade-Missipi.jpg differ diff --git a/assets/Imgs/andrey-grau.jpeg b/assets/Imgs/andrey-grau.jpeg new file mode 100644 index 0000000..15fe4ba Binary files /dev/null and b/assets/Imgs/andrey-grau.jpeg differ diff --git a/assets/Imgs/corvo-icon.jpeg b/assets/Imgs/corvo-icon.jpeg new file mode 100644 index 0000000..0267093 Binary files /dev/null and b/assets/Imgs/corvo-icon.jpeg differ diff --git a/assets/Imgs/corvo-negro.jpeg b/assets/Imgs/corvo-negro.jpeg new file mode 100644 index 0000000..cf946b1 Binary files /dev/null and b/assets/Imgs/corvo-negro.jpeg differ diff --git a/assets/Imgs/corvo.jpg b/assets/Imgs/corvo.jpg new file mode 100644 index 0000000..ec49b19 Binary files /dev/null and b/assets/Imgs/corvo.jpg differ diff --git a/assets/Imgs/duende-verde.jpeg b/assets/Imgs/duende-verde.jpeg new file mode 100644 index 0000000..3d79268 Binary files /dev/null and b/assets/Imgs/duende-verde.jpeg differ diff --git a/assets/Imgs/fada-gotica.jpeg b/assets/Imgs/fada-gotica.jpeg new file mode 100644 index 0000000..e72c470 Binary files /dev/null and b/assets/Imgs/fada-gotica.jpeg differ diff --git a/assets/Imgs/img- rodape (copy 1).png b/assets/Imgs/img- rodape (copy 1).png new file mode 100644 index 0000000..04240bd Binary files /dev/null and b/assets/Imgs/img- rodape (copy 1).png differ diff --git a/assets/Imgs/liva.avif b/assets/Imgs/liva.avif new file mode 100644 index 0000000..297c44b Binary files /dev/null and b/assets/Imgs/liva.avif differ diff --git a/assets/Imgs/livros.jpeg b/assets/Imgs/livros.jpeg new file mode 100644 index 0000000..d120135 Binary files /dev/null and b/assets/Imgs/livros.jpeg differ diff --git a/assets/Imgs/mari-guera.png b/assets/Imgs/mari-guera.png new file mode 100644 index 0000000..744c2f0 Binary files /dev/null and b/assets/Imgs/mari-guera.png differ diff --git a/assets/Imgs/mr.oliver.jpeg b/assets/Imgs/mr.oliver.jpeg new file mode 100644 index 0000000..c5f6f40 Binary files /dev/null and b/assets/Imgs/mr.oliver.jpeg differ diff --git a/assets/Imgs/mundo-kira.jpg b/assets/Imgs/mundo-kira.jpg new file mode 100644 index 0000000..bc4c71a Binary files /dev/null and b/assets/Imgs/mundo-kira.jpg differ diff --git a/assets/Imgs/verdades-ocultas.jpg b/assets/Imgs/verdades-ocultas.jpg new file mode 100644 index 0000000..4488d4a Binary files /dev/null and b/assets/Imgs/verdades-ocultas.jpg differ diff --git a/assets/app.js b/assets/app.js new file mode 100644 index 0000000..0de3c4d --- /dev/null +++ b/assets/app.js @@ -0,0 +1,13 @@ +const botoesCoracao = document.querySelectorAll(".bi-heart"); + +botoesCoracao.forEach((botaoCoracao) => { + botaoCoracao.addEventListener("click", () => { + if (botaoCoracao.classList.contains("bi-heart")) { + botaoCoracao.classList.remove("bi-heart"); + botaoCoracao.classList.add("bi-heart-fill"); + } else { + botaoCoracao.classList.add("bi-heart"); + botaoCoracao.classList.remove("bi-heart-fill"); + } + }); +}); diff --git a/assets/colun2-mitologia-lenda.jpg b/assets/colun2-mitologia-lenda.jpg deleted file mode 100644 index 8e58697..0000000 Binary files a/assets/colun2-mitologia-lenda.jpg and /dev/null differ diff --git a/assets/coluna2-games.jpg b/assets/coluna2-games.jpg deleted file mode 100644 index 1c08ff7..0000000 Binary files a/assets/coluna2-games.jpg and /dev/null differ diff --git a/assets/coluna2-livros.jpg b/assets/coluna2-livros.jpg deleted file mode 100644 index 5b0ad1c..0000000 Binary files a/assets/coluna2-livros.jpg and /dev/null differ diff --git a/assets/corvo.jpg b/assets/corvo.jpg new file mode 100644 index 0000000..ec49b19 Binary files /dev/null and b/assets/corvo.jpg differ diff --git a/assets/coulna2-quadrinhos.jpg b/assets/coulna2-quadrinhos.jpg deleted file mode 100644 index 0b73995..0000000 Binary files a/assets/coulna2-quadrinhos.jpg and /dev/null differ diff --git a/assets/img- rodape.png b/assets/img- rodape.png deleted file mode 100644 index 38b2ada..0000000 Binary files a/assets/img- rodape.png and /dev/null differ diff --git a/assets/img1 -historias-originais.jpg b/assets/img1 -historias-originais.jpg deleted file mode 100644 index a7cdee6..0000000 Binary files a/assets/img1 -historias-originais.jpg and /dev/null differ diff --git a/assets/img2-animes-mangas.jpg b/assets/img2-animes-mangas.jpg deleted file mode 100644 index 0134e9d..0000000 Binary files a/assets/img2-animes-mangas.jpg and /dev/null differ diff --git a/assets/img3-filmes.jpg b/assets/img3-filmes.jpg deleted file mode 100644 index 124a2a9..0000000 Binary files a/assets/img3-filmes.jpg and /dev/null differ diff --git a/assets/img4-bandas-musicos.jpg b/assets/img4-bandas-musicos.jpg deleted file mode 100644 index 03d9eda..0000000 Binary files a/assets/img4-bandas-musicos.jpg and /dev/null differ diff --git a/assets/pexels.jpg b/assets/pexels.jpg new file mode 100644 index 0000000..9360c9a Binary files /dev/null and b/assets/pexels.jpg differ diff --git a/assets/style.css b/assets/style.css index e84c9fd..f5f3af7 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,199 +1,253 @@ -@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Sarala:wght@400;700&display=swap'); +@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); * { - margin: 0; - padding: 0; box-sizing: border-box; - text-decoration: none; + margin: 0%; + padding: 0%; } body { - font-size: 100%; - background: linear-gradient(31.15deg,#025266 46.62%,#025266.21%); + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } - -.cabecalho { +.menu-cabecalho { display: flex; flex-direction: row; - align-items: center; - justify-content: space-around; - padding: 24px; - display : flex; - align-items: center; + row-gap: 10px; + padding: 20px; } -.cabecalho-imagem { - height: 72px; - +.cor-personalizada { + background-image: url(corvo.jpg); } -.cabecalho-menu { +#menu ul { + list-style: none; + text-align: center; + float: left; + width: 100%; + color: white; display: flex; - gap: 32px; + flex-direction: row; + gap: 20px; + padding: 20px 15px 10px 50px; + font-weight: 700; } +#id-menu { + color: white; +} -.cabecalho-menu-item { - font-family: 'Sarala', sans-serif; - color: #FFF2E7; - font-weight: 400; - font-size: 18px; +#id-menu:hover { + border-bottom: 3px solid white; + background-color: #a5a5a567; +} +li { + cursor: pointer; +} +.imagem-menu { + width: 60px; +} +.botao { + width: 100px; + height: 40px; + background-color: white; + color: #025266; + font-weight: bold; + border-radius: 10px; + border: none; + margin-right: 20px; } -.conteudo { - margin-bottom: 48px; - border-top: 0.4px solid #FFF2E7; +.botao:hover { + background-color: #595a5c; + color: #ffffff; + cursor: pointer; +} +.meus-botoes { + margin-left: 750px; } .conteudo-principal { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-around; + text-align: center; + align-self: center; + color: aliceblue; } -.conteudo-principal-escrito { +.conteudo-secundario { + text-align: center; + padding-right: 15px; + padding: 40px; display: flex; - flex-direction: column; - margin: 50px; - gap: 32px; -} - -.conteudo-principal-escrito-titulo { - font-family: 'Righteous', cursive; - font-weight: 400; - font-size: 64px; - color: #FFF2E7; + gap: 25px; + justify-content: center; + color: black; + background-color: #e7ecf1; + white-space: nowrap; + flex-wrap: wrap; +} +h1 { + font-size: 50px; + padding-top: 25px; +} + +p { + font-size: larger; + padding-top: 10px; + padding-bottom: 20px; + font-weight: 500; + font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; +} + +.cadastro { + width: 200px; + height: 40px; + background-color: white; + border-radius: 10px; + color: #025266; + border: none; + margin-bottom: 20px; } -.conteudo-principal-escrito-subtitulo { - font-family: 'Sarala', sans-serif; - font-weight: 400; - font-size: 24px; - color: #ECD6C4; +.cadastro:hover { + background-color: #595a5c; + color: #ffffff; + cursor: pointer; } -.conteudo-principal-escrito-botao { - - background-color: #666666; - width: 180px; - height: 60px; - border-radius: 15px; - font-family: 'Sarala', sans-serif; +a { + color: black; + text-decoration: none; font-size: 18px; - color: #ffffff; - margin-top: 30px; - border: none; - margin: 10px; - box-align: 56%; - transition: 3s case in; - } -#minha-div.{ - display : flex; - align-items: center; - - +a:hover { + color: blue; + cursor: pointer; } -.conteudo-principal-escrito-botao:hover { - background-color: rgba(236, 214, 196, 0.53); +.conteudo-terciario { + background-image: url("pexels.jpg"); + background-repeat: no-repeat; + background-size: cover; + padding: 100px; + color: #e7ecf1; + text-align: left; } -.conteudo-principal-imagem { - height: 400px; - margin-left: auto; +.apresentacao-pagina { + background-color: #e7ecf1; + display: grid; + grid-template-columns: repeat(2, 0.5fr); + grid-template-rows: repeat(3, 0.5fr); +} +.primeira-sessao { + display: flex; + flex-direction: row; + width: 650px; + height: 320px; + background-color: #ffffff; + padding: 10px 10px 10px 10px; + margin: 15px 15px 15px 15px; +} +.img-1 { + width: 200px; + padding: 10px 10px 10px 10px; } -.conteudo-secundario { +.container { display: flex; flex-direction: column; - align-items: center; - gap: 24px; - margin-top: 48px; + color: #33393d; } -.conteudo-secundario-titulo { - border-top: 0.4px solid #FFF2E7; - padding-top: 48px; - font-family: 'Righteous', cursive; - font-weight: 400; - font-size: 24px; - color: #FFF2EF; - margin-bottom: 16px; +.assunto { + text-align: justify; + font-size: 15px; + margin-bottom: 20px; } -.conteudo-secundario-paragrafo { - font-family: 'Sarala', sans-serif; - font-weight: 300; - font-size: 18px; - color: #ECD6C4; +.roboto-condensed { + font-family: "Roboto Condensed", sans-serif; + font-optical-sizing: auto; + font-weight: 200; + font-style: normal; } - -.coluna-1{ - float: left; - width: 20%; - max-width: 20%; - margin: 17px; - padding: 15px; - text-align: center; - font-family: 'Sarala', sans-serif; - color: #ECD6C4; - margin-bottom: 5px; - +.categoria { + display: flex; + flex-direction: row; + height: 50px; } -.coluna-2{ - float: left; - width: 20%; - max-width: 20%; - margin: 17px; - padding: 15px; - text-align: center; - font-family: 'Sarala', sans-serif; - color: #ECD6C4; - margin-bottom: 5px; +#tags { + padding: 5px; + font-size: x-small; + color: #5e5858; } +.icones { + border-top: 1px solid rgb(233, 230, 230); + display: flex; + padding: 10px; + justify-content: space-between; + gap: 10px; + margin-top: 5px; +} -a{ -color: #ECD6C4; - +#usuario { + border-radius: 50px; } -.row::after { - content: ""; - clear: both; - display: table-column; - color: #ECD6C4; + +.nome-usuario { + font-size: 10px; } -h3{ - margin: 26; - font-family: 'Sarala', sans-serif; - color: #ECD6C4; - margin-bottom: 2px; - margin: 15px; - padding: 10px; - } +.sobre-usuario { + display: flex; + align-items: center; + column-gap: 10px; +} +.botoes-interacao { + display: flex; + align-items: center; + column-gap: 10px; +} +#paragrafo { + font-size: x-small; +} +.categoria-botao { + width: 35px; + height: 22px; + border-radius: 14px; + border: none; + background-color: #d8e0e4; + color: #969899; + margin-right: 5px; + margin-left: 4px; + font-weight: 550; + margin-bottom: 10px; +} .rodape { - padding: 32px; - border-top: 0.4px solid #FFF2E7; + background-color: #000; + border-top: 1px solid white; + color: white; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } -.rodape-imagem { - height: 110px; - display: block; - margin: 0 auto; +.img-rodape { + width: 120px; + height: 120px; } -p{ - color: #ECD6C4; - - } +.bi-heart-fill { + color: red; +} diff --git a/index.html b/index.html index 5d3c775..43dbda2 100644 --- a/index.html +++ b/index.html @@ -1,119 +1,249 @@ - - - - - - BirdNest - Cadastre-se também - - - - - -
- - - - - -
- -
-
-
-

BirdNest

-

O BirdNest é um espaço para escrever seu livro, seja no formato de Histórias Originais ou de Fanfics, além de poder acessar outras narrativas.

- - - -
- - -
- - - -
- -
-

Deixe que sua imaginação crie asas

-

Leia histórias ou escreva a sua, compartilhe ideias e faça amigos, personalize seu perfil.

- - -
- -

Categorias:

-
- - - -
Histórias Originais
 +
+ + +
-
- -
Animes e Mangás
 + +
+

BirdNest

+

O BirdNest é um espaço para escrever seu livro, seja no formato de Histórias Originais ou de Fanfics, além de
permitir acessar outras narrativas.

+ +
+
+ +
+ + Animes / Mangás + Bandas / Músicos + Celebridades + Cartoons + Filmes + Histórias Originais + Jogos + Livros + Mitologias / Lendas + Poesia + Quadrinhos + Seriados / Novelas / Doramas -
-
- -
Filmes e Séries
 + +
+ +
+

Dê asas a sua imaginação

+ +

Encontre histórias de diversos gêneros, troque ideias, faça
amigos,personalize seu perfil e compartilhe com o mundo
sua criatividade!

+
+ +
+ +
+ Verdades Ocultas +
+

Verdades Ocultas

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining e unchanged."At vero eos et accusamus um deleniti atque. +

+ + HISTÓRIAS ORIGINAIS + HORROR + SUSPENSE + AÇÃO +
+
+
+ + Mari Guerra
- -
- -
Bandas e Músicos
 - - - -
- -
-
- -
Livros
 +
+ + +
+ +
+
+
+ +
+ Olhos de oceano +
+

Olhos de Oceano (Levi Ackerman)

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining e unchanged."At vero eos et accusamus um deleniti atque. +

+ -
- -
Games
 - +
+
+ + Mr. Oliver +
+
+ + +
-
- -
Mitologias e Lendas
 - +
+
+
+ + +
+ A Procura do Homem Perfeito +
+

A Procura do Homem Perfeito

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining e unchanged."At vero eos et accusamus um deleniti atque.

+ - -
- -
Quadrinhos
 - - +
+
+ + Fada Gótica +
+
+ + + +
+
+
+
+ + +
+ Até o fim +
+

Até o fim

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining e unchanged."At vero eos et accusamus um deleniti atque.

+ +
+
+ + Duende verde +
+
+ + + +
+
+
+
+ + +
+ O mundo de Kira +
+

O Mundo de Kira (Death Note)

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining e unchanged."At vero eos et accusamus um deleniti atque.

+ +
+
+ + Andrey do Grau +
+
+ + + +
+
+
+
+ + +
+ A verdade sobre Missisipi +
+

A verdade Sobre Missisipi

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining e unchanged."At vero eos et accusamus um deleniti atque.

+
- -
-
- - -