diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..59ca66c --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,413 @@ +/* Import das fontes do google */ +@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap"); + +/* Variáveis */ +:root { + --primary-color: #cf0f0f; + --primary-color-contrast: #ffffff; + --field-background-color: #000; +} + +/* Temas do Site */ +.light-theme { + --page-background: linear-gradient(180deg, #ffffff 0%, #ffffff 65%, rgba(255, 255, 255, 0.75) 100%); + --header-background-color: #e3e3e3; + --highlight-color: #000000; + --featured-font-family: "Archivo", sans-serif; + --character-top-image-src: url("../images/characters/kids-on-the-bike.svg"); + --character-top-image-color: #ffffff; + --character-bottom-image-src: url("../images/characters/inverted-world-monster.svg"); + --character-bottom-image-color: #b5bbbf; + --background-lamp-image: url("../images/backgrounds/lamps.png"); + --footer-background-color: #b5bbbf; +} + +.dark-theme { + --page-background: linear-gradient(180deg, #050000 0%, #130404 65%, rgba(19, 1, 1, 0.75) 100%); + --header-background-color: #220f0f; + --highlight-color: #ffffff; + --featured-font-family: "Rubik Glitch", sans-serif; + --character-bottom-image-src: url("../images/characters/kids-on-the-bike.svg"); + --character-bottom-image-color: rgba(255, 255, 255, 0.1); + --character-top-image-src: url("../images/characters/inverted-world-monster.svg"); + --character-top-image-color: #000; + --background-lamp-image: url("../images/backgrounds/lamps-inverted.png"); + --footer-background-color: #000; +} + +.dark-theme button, +.dark-theme h1, +.dark-theme h2, +.dark-theme h3 { + letter-spacing: 5px; + font-weight: normal; +} + +.dark-theme .invert-element { + transform: rotateZ(180deg) scaleX(-1); +} + +/* Estilos Genéricos */ + +* { + margin: 0; + box-sizing: border-box; + transition: 1s; /* tempo de transição entre os temas da página */ +} + +h1, +h2, +h3 { + font-family: var(--featured-font-family); + font-size: 3rem; + color: var(--primary-color); + text-transform: uppercase; /* deixa todo o texto em caixa alta */ + margin-bottom: 40px; +} + +p { + color: var(--highlight-color); +} + +p, +input, +textarea, +label { + font-family: "Libre Baskerville", sans-serif; +} + +button { + padding: 16px 32px; + border: none; + border-radius: 5px; + background-color: transparent; + font-weight: 900; + font-family: var(--featured-font-family); + font-size: 1.25rem; + text-transform: uppercase; + cursor: pointer; + transition: background 1s; +} + +main { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + position: relative; +} + +main::before { + /* + Pseudo elemento para aplicar a imagem da floresta no + background do conteúdo principal da página + */ + content: ""; + width: 100%; + height: 100%; + position: absolute; + background: var(--page-background) no-repeat, url("../images/backgrounds/florest.png") no-repeat; + background-size: cover; + z-index: -1; +} + +input, +textarea { + border: 2px solid var(--primary-color-contrast); + background-color: var(--field-background-color); + color: var(--primary-color-contrast); + margin-bottom: 24px; + padding: 8px; +} + +label { + margin-bottom: 8px; +} + +input:focus-visible, +textarea:focus-visible { + /* Propriedade de estilo de campos de formulário em foco */ + outline: none; + border-color: black; +} + +/* Estilo do Header */ + +header { + background-color: var(--header-background-color); + min-height: 850px; + display: flex; + flex-direction: column; + align-items: center; + position: relative; +} + +header::before { + /* + Pseudo elemento para aplicar a imagem da floresta de + pinheiros no background do header + */ + content: ""; + width: 100%; + height: 100%; + position: absolute; + background-image: url("../images/banner/florest.webp"); + background-repeat: no-repeat; + background-size: cover; + background-position: center 90%; + filter: saturate(0); + opacity: 0.2; +} + +.header-content { + max-width: 700px; + padding: 80px 20px; + text-align: center; + z-index: 2; +} + +.header-content img { + width: 80%; +} + +.header-content p { + margin: 30px 0 50px; +} + +.header-content button { + border: 3px solid var(--primary-color); + color: var(--primary-color); +} + +.header-content button:hover { + background-color: var(--primary-color); + color: var(--primary-color-contrast); +} + +/* Estilo das div's com imagens dos mundos */ +.world-characters { + width: 100%; + max-width: 900px; + position: absolute; +} + +.world-characters#top-characters { + height: 100%; + background-color: var(--character-top-image-color); + bottom: -3px; + + mask: var(--character-top-image-src) bottom / 100% no-repeat; + -webkit-mask: var(--character-top-image-src) bottom / 100% no-repeat; /*aplicação ao chrome */ +} + +.world-characters#bottom-characters { + height: 500px; + background-color: var(--character-bottom-image-color); + top: 3px; + transform: rotateZ(180deg) scaleX(-1); + position: relative; + + mask: var(--character-bottom-image-src) bottom / 100% no-repeat; + -webkit-mask: var(--character-bottom-image-src) bottom / 100% no-repeat; /*aplicação ao chrome */ +} + +/* Estilo dos Sections */ +section { + display: flex; + justify-content: space-between; + margin-bottom: 95px; +} + +/* Section 01 - Mundo Invertido */ + +.container { + max-width: 1200px; +} + +#section-inverted-world { + align-items: center; +} + +#section-inverted-world .section-texts { + width: 50%; +} + +#section-inverted-world .section-texts h2 { + max-width: 300px; +} + +/* Section 02 - Stranger Things Trailer */ + +#section-stranger-things-trailer .section-texts { + width: 50%; + text-align: right; +} + +#section-stranger-things-trailer .section-texts h2 { + max-width: 425px; + display: inline-block; +} + +#section-stranger-things-trailer .video-frame { + /* Bloco vermelho por trás do iframe do vídeo */ + background-color: var(--primary-color); +} + +#section-stranger-things-trailer .video-frame iframe { + position: relative; + bottom: 24px; + left: 24px; + border: 2px solid; + border-image: linear-gradient(var(--primary-color), var(--primary-color-contrast)); + border-image-slice: 10; +} + +/* Section 03 - Galeria de imagens da série */ + +#section-stranger-things-gallery { + width: 100%; + background: var(--background-lamp-image) 120% / 50% no-repeat; + justify-content: center; +} + +#section-stranger-things-gallery .container { + width: 100%; +} + +#section-stranger-things-gallery .container h2 { + width: 800px; +} + +#section-stranger-things-gallery .gallery-container { + display: flex; + gap: 50px; + padding-left: 20px; +} + +#section-stranger-things-gallery .gallery-image { + width: 250px; + height: 250px; + outline: 20px solid var(--highlight-color); + border: 3px solid var(--primary-color); + box-sizing: initial; +} + +#section-stranger-things-gallery .gallery-image img { + width: 100%; + height: 100%; + object-fit: cover; + border: 10px solid var(--highlight-color); +} + +/* Section 04 - Formulário Hellfire Club */ + +#section-form { + flex-direction: column; + align-items: center; + gap: 40px; + text-align: center; +} + +#section-form h2 { + width: 600px; +} + +#section-form .form-content h3 { + color: var(--highlight-color); +} + +#section-form .form-content h3 span { + color: var(--primary-color); +} + +#section-form .form-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +#section-form .form-content h3 { + flex-basis: 30%; /* Propriedade equivalente ao width, quando utilizando flex-box */ + text-align: left; + margin: 0; +} + +#section-form .form-container { + flex-basis: 50%; /* Propriedade equivalente ao width, quando utilizando flex-box */ + position: relative; +} + +#section-form .form-container::after { + /* Bloco preto por trás do formulário */ + content: ""; + background-color: var(--highlight-color); + width: 100%; + height: 100%; + position: absolute; + top: 24px; + left: 24px; + z-index: -1; +} + +#section-form .form-container form { + display: flex; + flex-direction: column; + justify-content: center; + padding: 24px; + background-color: var(--primary-color); + color: var(--primary-color-contrast); + text-align: left; +} + +#section-form .form-container form button { + border: none; + background-color: var(--field-background-color); + color: var(--primary-color-contrast); + max-width: 300px; + align-self: center; +} + +#section-form .form-container form button:hover { + background-color: var(--primary-color-contrast); + color: var(--field-background-color); +} + +/* Estilos do Footer */ +footer { + padding: 60px 0; + background-color: var(--footer-background-color); + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + overflow: hidden; +} + +footer p { + max-width: 700px; + margin-bottom: 24px; +} + +footer::before, +footer::after { + content: ""; + width: 300px; + height: 200px; + background: url("../images/footer/tape.svg") no-repeat; + background-size: contain; + position: absolute; + bottom: -30px; +} + +footer::before { + left: -50px; + transform: rotateZ(-10deg); +} + +footer::after { + right: -50px; + transform: rotateZ(10deg); +} diff --git a/assets/images/backgrounds/florest.png b/assets/images/backgrounds/florest.png new file mode 100644 index 0000000..3376228 Binary files /dev/null and b/assets/images/backgrounds/florest.png differ diff --git a/assets/images/backgrounds/lamps-inverted.png b/assets/images/backgrounds/lamps-inverted.png new file mode 100644 index 0000000..417dacc Binary files /dev/null and b/assets/images/backgrounds/lamps-inverted.png differ diff --git a/assets/images/backgrounds/lamps.png b/assets/images/backgrounds/lamps.png new file mode 100644 index 0000000..21849ff Binary files /dev/null and b/assets/images/backgrounds/lamps.png differ diff --git a/assets/images/banner/florest.webp b/assets/images/banner/florest.webp new file mode 100644 index 0000000..e79ab69 Binary files /dev/null and b/assets/images/banner/florest.webp differ diff --git a/assets/images/banner/logo.svg b/assets/images/banner/logo.svg new file mode 100644 index 0000000..d2aee07 --- /dev/null +++ b/assets/images/banner/logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/assets/images/characters/inverted-world-monster.svg b/assets/images/characters/inverted-world-monster.svg new file mode 100644 index 0000000..ce45ec5 --- /dev/null +++ b/assets/images/characters/inverted-world-monster.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/characters/kids-on-the-bike.svg b/assets/images/characters/kids-on-the-bike.svg new file mode 100644 index 0000000..6ee219c --- /dev/null +++ b/assets/images/characters/kids-on-the-bike.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/content/inverted-world.png b/assets/images/content/inverted-world.png new file mode 100644 index 0000000..e2c6982 Binary files /dev/null and b/assets/images/content/inverted-world.png differ diff --git a/assets/images/content/serie-image-01.png b/assets/images/content/serie-image-01.png new file mode 100644 index 0000000..3d88c11 Binary files /dev/null and b/assets/images/content/serie-image-01.png differ diff --git a/assets/images/content/serie-image-02.png b/assets/images/content/serie-image-02.png new file mode 100644 index 0000000..c66eb68 Binary files /dev/null and b/assets/images/content/serie-image-02.png differ diff --git a/assets/images/content/serie-image-03.png b/assets/images/content/serie-image-03.png new file mode 100644 index 0000000..ff7dd8a Binary files /dev/null and b/assets/images/content/serie-image-03.png differ diff --git a/assets/images/footer/logo.svg b/assets/images/footer/logo.svg new file mode 100644 index 0000000..e88c83b --- /dev/null +++ b/assets/images/footer/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/footer/tape.svg b/assets/images/footer/tape.svg new file mode 100644 index 0000000..09cd33c --- /dev/null +++ b/assets/images/footer/tape.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..e69de29 diff --git a/assets/musics/inverted-world.mpeg b/assets/musics/inverted-world.mpeg new file mode 100644 index 0000000..0c38a33 Binary files /dev/null and b/assets/musics/inverted-world.mpeg differ diff --git a/assets/musics/normal-world.mpeg b/assets/musics/normal-world.mpeg new file mode 100644 index 0000000..28091a7 Binary files /dev/null and b/assets/musics/normal-world.mpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6dafa99 --- /dev/null +++ b/index.html @@ -0,0 +1,164 @@ + + + + + + + + Semana Front-end DIO + + + + + +
+ + +
+ Floresta do Mundo Invertido. + +

+ Uma jornada para quem não tem medo do desconhecido. O caminho para o + Mundo invertido é incerto, repleto de obstáculos e perigos. Porém, a + recompensa é grande: salvar Hawkings e o mundo todo das garras de + Vecna. Você está preparado? Então clique no botão abaixo para entrar + no Mundo Invertido! +

+ +
+ + +
+
+ +
+ +
+ +
+
+

O Mundo Invertido

+ +

+ O Mundo Invertido parece uma cópia do nosso mundo, mas com criaturas + horrendas, tempestades assustadoras, muita escuridão e entidades + malignas. Um reino controlado por Vecna, que tem planos de trazer + tudo isso ao nosso mundo. +

+
+ + Pôster da série ilustrando o mundo invertido +
+ +
+ + +
+

Stranger Things Vol. 4

+ +

+ Mais experientes, os heróis de Stranger Things também precisam + enfrentar desafios maiores do que nunca e fazer decisões que vão + mudar suas vidas para sempre. Confira ao lado o trailer da quarta + temporada. +

+
+
+ + + +
+

Hellfire Club

+ +

+ Para deter Vecna, os heróis de Stranger Things também precisam de + você. O Clube de D&D mais famoso de Hawkings está com vagas abertas + para sua próxima aventura. Se você é destemido, gosta de desafios e + não tem medo de rodar o D20, chegou a hora de se inscrever para fazer + parte da nova campanha. +

+ +
+

Entre para o clube de D&D e tenha experiências de outro mundo

+ +
+
+ + + + + + + + + + + + + +
+
+
+
+
+ + + + + + + \ No newline at end of file