initial commit

TheCarvalho · Jun 17, 2024 · 11b56c4 · 11b56c4
1 parent 90dacae
commit 11b56c4
Show file tree

Hide file tree

Showing 14 changed files with 309 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
-# visite-manaus
-This project is a static website, one of my first using only HTML and CSS. It invites visitors to discover Manaus, located in the heart of the Amazon.
+# Visite Manaus
+This project is a static website, one of my first using only HTML and CSS. It invites visitors to discover Manaus, located in the heart of the Amazon. The site covers the city's history and culture, from its founding to its modernization with the Free Trade Zone. It highlights the main tourist attractions and features a photo gallery showcasing the beauty and diversity of Manaus.
diff --git a/img/arena.jpeg b/img/arena.jpeg
diff --git a/img/arena2.jpg b/img/arena2.jpg
diff --git a/img/banner.jpg b/img/banner.jpg
diff --git a/img/encontro-das-aguas.jpg b/img/encontro-das-aguas.jpg
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/img/logo-nav.png b/img/logo-nav.png
diff --git a/img/manaus.jpg b/img/manaus.jpg
diff --git a/img/mercado.jpg b/img/mercado.jpg
diff --git a/img/ponta-negra.jpg b/img/ponta-negra.jpg
diff --git a/img/ponte.jpg b/img/ponte.jpg
diff --git a/img/teatro.jpeg b/img/teatro.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>Visite Manaus</title>
+  </head>
+  <body>
+    <header>
+      <div class="container header-flex">
+        <a href="index.html">
+          <img src="img/logo-nav.png" alt="Logo" />
+        </a>
+        <nav>
+          <a href="#sobre">Sobre</a>
+          <a href="#pontos">Pontos turísticos</a>
+          <a href="#galeria">Galeria</a>
+        </nav>
+      </div>
+    </header>
+    <main>
+      <section class="secao-capa">
+        <div>
+          <h1>Manaus</h1>
+          <h2>Venha visitar</h2>
+        </div>
+      </section>
+      <section id="sobre" class="container">
+        <div class="bold">
+          <h3>Sobre a cidade</h3>
+
+          <img
+            class="arredondar"
+            src="img/manaus.jpg"
+            alt="Foto da cidade de manaus vista por cima"
+          />
+
+          <p>
+            Manaus é uma cidade rica em história e cultura, situada no coração
+            da Amazônia. Fundada em 1669 com a construção do Forte de São José
+            do Rio Negro, Manaus começou como um pequeno povoado chamado Lugar
+            da Barra do Rio Negro, destinado a proteger a região contra invasões
+            estrangeiras e conflitos com indígenas. A cidade cresceu lentamente
+            até o final do século XIX, quando a economia do látex transformou
+            Manaus em um próspero centro urbano.
+          </p>
+
+          <p>
+            Durante o ciclo da borracha, entre 1879 e 1912, Manaus viveu seu
+            auge econômico. A extração e exportação do látex trouxeram riqueza e
+            desenvolvimento, resultando na construção de edifícios suntuosos,
+            como o Teatro Amazonas, o Palácio Rio Negro e o Mercado Municipal
+            Adolpho Lisboa, todos exemplos da opulência da época. Manaus se
+            tornou uma cidade cosmopolita, com infraestrutura moderna e intensa
+            atividade cultural.
+          </p>
+
+          <p>
+            Com o declínio do ciclo da borracha no início do século XX, Manaus
+            enfrentou um período de estagnação econômica. No entanto, a criação
+            da Zona Franca de Manaus em 1967 revitalizou a cidade, promovendo a
+            industrialização e atraindo investimentos nacionais e
+            internacionais. Hoje, a Zona Franca é um polo econômico crucial,
+            diversificando a economia local com indústrias de eletroeletrônicos,
+            motocicletas e bens de consumo.
+          </p>
+          <p>
+            Manaus também se destaca por sua biodiversidade e cultura única,
+            sendo um ponto de partida para explorar a Floresta Amazônica. A
+            cidade é conhecida por seus rios majestosos, como o Rio Negro e o
+            Rio Solimões, que se encontram formando o famoso Encontro das Águas.
+            Além disso, a culinária regional, rica em sabores amazônicos, e a
+            vibrante cena cultural, com festivais como o Festival de Parintins,
+            são grandes atrativos.
+          </p>
+          <p>
+            A cidade continua a crescer como um importante centro de turismo
+            ecológico e cultural. O ecoturismo prospera, com visitantes do mundo
+            inteiro atraídos pelas belezas naturais e pela oportunidade de
+            vivenciar a rica herança cultural amazônica. Manaus é um testemunho
+            vivo de como uma cidade pode se reinventar e prosperar, mantendo-se
+            fiel às suas raízes históricas e culturais.
+          </p>
+          <p>
+            Venha descobrir Manaus, uma cidade que mistura modernidade e
+            natureza exuberante, oferecendo uma experiência única e inesquecível
+            no coração da Amazônia.
+          </p>
+        </div>
+      </section>
+      <section id="pontos" class="secao-destaque">
+        <div class="container">
+          <h3>Pontos turísticos</h3>
+
+          <img src="img/arena.jpeg" alt="Foto de dentro da arena de futebol" />
+          <p>
+            Descubra alguns dos pontos mais atrativos de Manaus para visitar:
+          </p>
+
+          <ul>
+            <li>Teatro Amazonas</li>
+            <li>Encontro das Águas</li>
+            <li>Mercado Municipal Adolpho Lisboa</li>
+            <li>Arena da Amazônia</li>
+            <li>Ponte Rio Negro</li>
+          </ul>
+        </div>
+      </section>
+      <section id="galeria" class="container">
+        <div>
+          <h3>Galeria de fotos</h3>
+
+          <p>Confira algumas belíssimas imagens da cidade na galeria abaixo:</p>
+
+          <div class="galeria">
+            <img src="img/teatro.jpeg" alt="Foto do teatro amazonas" />
+            <img
+              src="img/encontro-das-aguas.jpg"
+              alt="Foto do encontro da aguas"
+            />
+            <img src="img/mercado.jpg" alt="Foto do mercado Adolpho Lisboa" />
+            <img src="img/arena2.jpg" alt="Foto da arena da Amazonia" />
+            <img src="img/ponte.jpg" alt="Foto da ponte Rio Negro" />
+            <img src="img/ponta-negra.jpg" alt="Foto da ponta negra" />
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div>
+        Desenvolvido por
+        <a
+          href="https://github.com/TheCarvalho/"
+          target="_blank"
+          and
+          rel="noopener noreferrer"
+          >Abdon Carvalho</a
+        >
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,157 @@
+:root {
+  --color-black: #000;
+  --color-text: #1f1f1fe4;
+  --color-grey: rgba(10, 109, 122, 0.318);
+  --color-white: #fff;
+  --color-manaus: #00a5ae;
+  --color-title: #004649;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  font-family: "Poppins", sans-serif;
+}
+.container {
+  max-width: 1024px;
+  width: 100%;
+  margin: 0 auto;
+}
+header {
+  position: fixed;
+  top: 0;
+  z-index: 2;
+  width: 100%;
+  background-color: var(--color-manaus);
+}
+a {
+  color: black;
+}
+header a {
+  line-height: 0;
+}
+header img {
+  height: 100%;
+  width: 100px;
+}
+.header-flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 0 30px;
+}
+nav {
+  display: flex;
+  gap: 15px;
+}
+nav > a {
+  color: var(--color-white);
+}
+nav > a:hover {
+  color: var(--color-title);
+}
+main {
+  margin-top: 56px;
+}
+
+.secao-capa {
+  overflow: none;
+  background-image: url(img/banner.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  margin: 0 0;
+  width: 100%;
+  height: 500px;
+  position: relative;
+}
+.secao-capa::before {
+  content: "";
+  background-color: var(--color-black);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  opacity: 0.5;
+  top: 0;
+  left: 0;
+}
+.secao-capa div {
+  text-align: center;
+  color: var(--color-white);
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  text-transform: uppercase;
+  text-shadow: var(--color-black) 0 0 10px;
+}
+.secao-capa h1 {
+  font-size: 4rem;
+}
+.secao-capa h2 {
+  font-size: 2rem;
+}
+section {
+  padding: 60px 20px;
+}
+section h3 {
+  font-size: 3yrem;
+  text-align: center;
+  margin-bottom: 40px;
+  color: var(--color-title);
+}
+section img {
+  width: 100%;
+}
+p {
+  margin: 16px 0;
+  line-height: 32px;
+}
+.bold p::first-letter {
+  font-weight: bolder;
+  font-size: 2rem;
+}
+.secao-destaque {
+  background-color: var(--color-grey);
+}
+li {
+  color: var(--color-text);
+  line-height: 2rem;
+  margin-left: 3rem;
+}
+
+.galeria {
+  width: 100%;
+}
+
+.galeria img {
+  width: calc((100% / 3) - 3px);
+  opacity: 0.6;
+}
+
+.galeria img:hover {
+  opacity: 1;
+}
+
+img {
+  border-radius: 10px;
+}
+
+section p {
+  margin-top: 2rem;
+  color: var(--color-text);
+}
+footer div{
+  background-color: var(--color-manaus);
+  padding: 16px 0;
+  text-align: center;
+}