update

antigo/Assets/css/style.css

@@ -0,0 +1,511 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap");
+
+:root {
+  --text: #170f1f;
+  --background: #e8e0f0;
+  --primary-button: #7d52a7;
+  --secondary-button: #ded3e9;
+  --accent: #8a62b2;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: "Outfit", sans-serif;
+  text-decoration: none;
+  list-style: none;
+
+  margin: 0;
+  padding: 0;
+
+  color: var(--text);
+}
+
+html {
+  scroll-behavior: smooth !important;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  background-color: var(--background);
+}
+
+.tcenter {
+  text-align: center;
+}
+
+.ttext1 {
+  font-size: 3rem;
+}
+
+.bborder {
+  border-bottom: solid 2px var(--accent);
+}
+
+.sbox {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  width: 95%;
+  border-radius: 12px;
+  padding: 1rem;
+}
+
+.button {
+  background-color: var(--primary-button);
+  color: var(--secondary-button);
+  font-size: 18px;
+  font-weight: 800;
+  font-style: normal;
+  text-decoration: none;
+  padding: 10px 10px;
+  border: 0px solid #000;
+  border-radius: 10px;
+  display: inline-block;
+  transition:
+    background-color 0.3s ease,
+    transform 0.3s ease;
+}
+.button:hover {
+  transform: scale(1.05);
+}
+.button:active {
+  transform: scale(0.95);
+}
+
+.select {
+  border: solid 2px var(--primary-button);
+  border-radius: 12px;
+  color: var(--text);
+  background-color: var(--secondary-button);
+  padding: 4px;
+  outline: none;
+}
+
+.img {
+  display: block;
+  height: 100%;
+}
+
+.img1 {
+  display: block;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: auto;
+  width: 100%;
+  border-radius: 12px;
+}
+
+/* ---------- header ---------- */
+header {
+  position: fixed;
+  width: 100%;
+  top: 0;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  padding: 10px;
+  background-color: var(--secondary-button);
+  border-radius: 0 0 12px 12px;
+  justify-content: space-between;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  color: var(--color-Accent);
+  gap: 0.5rem;
+}
+
+.Menu_options {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.Menu_options ul {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.Menu_options ul a {
+  font-weight: 500;
+}
+
+.Menu_options ul li:hover {
+  transform: scale(1.05);
+}
+.Menu_options ul li:active {
+  transform: scale(0.95);
+}
+
+/* ---------- Section 1 ---------- */
+
+section {
+  padding: 2rem 0 2rem 0;
+}
+
+.section_1 {
+  display: flex;
+  margin-top: 50px;
+  align-items: center;
+  justify-content: center;
+}
+
+.conteudo_1 {
+  display: flex;
+  height: auto;
+  gap: 2rem;
+  width: 90%;
+  align-items: center;
+  justify-content: center;
+}
+
+.conteudo_1 h1 {
+  font-size: 2rem;
+}
+
+.text_home {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.accent {
+  color: var(--accent);
+}
+
+.social_icons {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.conteudo_1 i {
+  display: flex;
+  font-size: 2rem;
+  background-color: var(--accent);
+  color: var(--secondary-button);
+  border-radius: 50%;
+  height: 50px;
+  width: 50px;
+  justify-content: center;
+  align-items: center;
+  transition: transform ease 0.2s;
+}
+
+.conteudo_1 i:hover {
+  transform: scale(1.05);
+}
+
+.conteudo_1 i:active {
+  transform: scale(0.95);
+}
+
+.img_inicio {
+  border-radius: 50%;
+  max-width: 50%;
+  border: solid 5px var(--accent);
+}
+
+/* ---------- Section 2 ---------- */
+
+.section_2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background-color: var(--secondary-button);
+}
+
+.section_2 h2 {
+  font-size: 3rem;
+}
+
+.conteudo_2 {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  width: 50%;
+}
+
+/* ---------- Section 3 ---------- */
+
+.section_3 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3rem;
+}
+
+.section_3 h2 {
+  font-size: 3rem;
+}
+
+.conteudo_3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  align-items: center;
+  justify-items: center;
+  width: 50%;
+  font-weight: 600;
+}
+
+.conteudo_3 i {
+  display: flex;
+  font-size: 3rem;
+  background-color: var(--accent);
+  color: var(--secondary-button);
+  border-radius: 50%;
+  height: 100px;
+  width: 100px;
+  justify-content: center;
+  align-items: center;
+  transition: transform ease 0.2s;
+}
+
+.skill_icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* ---------- Section 4 ---------- */
+
+.section_4 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  gap: 2rem;
+  margin: auto;
+  background-color: var(--secondary-button);
+  border-radius: 12px;
+}
+
+.section_4 h1 {
+  font-size: 3rem;
+}
+
+.conteudo_4 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  justify-items: center;
+  gap: 1rem;
+  width: 90%;
+}
+
+.slot {
+  background-color: var(--background);
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  padding: 2rem;
+  border-radius: 12px;
+  margin: 20px 0 20px 0;
+  gap: 1rem;
+}
+
+.tech {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.tech span {
+  background-color: var(--primary-button);
+  color: var(--secondary-button);
+  border-radius: 28px;
+  padding: 5px;
+  font-size: 12px;
+}
+
+/* ---------- Section 5 ---------- */
+
+.section_5 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.section_5 h1 {
+  font-size: 3rem;
+}
+
+.conteudo_5 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 2rem;
+  font-weight: 600;
+}
+
+.contatos_icons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 2rem;
+}
+
+.contatos_icons1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 300px;
+}
+
+.contatos_icons1 i {
+  display: flex;
+  font-size: 3rem;
+  background-color: var(--accent);
+  color: var(--secondary-button);
+  border-radius: 50%;
+  height: 100px;
+  width: 100px;
+  justify-content: center;
+  align-items: center;
+  transition: transform ease 0.2s;
+}
+
+.contatos_icons1 i:hover {
+  transform: scale(1.05);
+}
+
+.contatos_icons1 i:active {
+  transform: scale(0.95);
+}
+
+/* ---------- footer ---------- */
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 1rem;
+  border-radius: 12px 12px 0 0;
+  background-color: var(--secondary-button);
+}
+
+/* ---------- responsive ---------- */
+
+#menu_bar_button i {
+  color: var(--secondary-button);
+}
+
+.menu_bar_nav {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+  height: auto;
+  background-color: var(--secondary-button);
+  border-radius: 0 0 12px 12px;
+  padding: 2rem;
+}
+
+.Menu_bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.Menu_bar ul {
+  align-items: center;
+  justify-content: center;
+}
+
+.Menu_bar li {
+  width: 100%;
+  text-align: center;
+}
+
+.Menu_bar a {
+  width: 100%;
+}
+
+#menu_bar_button {
+  display: none;
+}
+
+@media screen and (min-width: 901px) {
+  #menu_bar_nav,
+  #menu_bar_button {
+    display: none;
+  }
+}
+@media screen and (max-width: 900px) {
+  .menu_bar_nav,
+  .Menu_options ul {
+    display: none;
+  }
+
+  #menu_bar_button {
+    display: flex;
+  }
+
+  .conteudo_1 {
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .social_icons {
+    justify-content: center;
+  }
+
+  .section_2 {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+  }
+
+  .conteudo_2 {
+    width: 80%;
+  }
+
+  .img_inicio {
+    width: 80%;
+    height: auto;
+  }
+
+  .section_3 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .conteudo_3 {
+    grid-template-columns: repeat(2, 1fr);
+    width: 90%;
+  }
+
+  .conteudo_4 {
+    grid-template-columns: 1fr;
+  }
+
+  .contatos_icons {
+    flex-direction: column;
+  }
+  .contatos_icons1 {
+    width: 90%;
+  }
+}

antigo/Assets/img/code-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>

antigo/Assets/js/index.js

@@ -0,0 +1,11 @@
+function toggleDiv() {
+  var div = document.getElementById("menu_bar_nav");
+  var header = document.getElementById("header_css");
+  if (div.style.display === "flex") {
+    div.style.display = "none";
+    header.style.borderRadius = "0 0 12px 12px";
+  } else {
+    div.style.display = "flex";
+    header.style.borderRadius = "0 0 0 0";
+  }
+}

antigo/index.html

@@ -0,0 +1,363 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="device-width, initial-scale=1.0, maximum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-compatible" content="ie=edge" />
+    <meta name="description" content="Meu primeiro portifolio" />
+    <meta name="copyright" content="©2022 Christian do Nascimento Falcao" />
+    <meta name="author" content="Christian do Nascimento Falcao" />
+    <title>Christian do Nascimento Falcao</title>
+    <link rel="icon" href="./Assets/img/code-solid.svg" />
+    <link rel="stylesheet" href="Assets/css/style.css" />
+    <script
+      src="https://kit.fontawesome.com/6ffe26f1f6.js"
+      crossorigin="anonymous"
+      defer
+    ></script>
+
+    <script src="./Assets/js/index.js" defer></script>
+
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=AW-11390833779"
+    ></script>
+
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "AW-11390833779");
+    </script>
+
+    <script>
+      gtag("event", "conversion", {
+        send_to: "AW-11390833779/7Nf9CKjd2_AYEPOoybcq",
+      });
+    </script>
+  </head>
+
+  <body>
+    <header id="header">
+      <div class="header" id="header_css">
+        <nav class="Menu_options">
+          <div class="logo">
+            <i class="fa-solid fa-code"></i>
+            <h2 class="stext">Christian</h2>
+          </div>
+          <ul>
+            <li><a href="#home">Home</a></li>
+            <li><a href="#about_me">Sobre Mim</a></li>
+            <li><a href="#skills">Habilidades</a></li>
+            <li><a href="#projects">Projetos</a></li>
+            <li><a href="#contact" class="button bcontact">Contato</a></li>
+          </ul>
+        </nav>
+        <button class="button" id="menu_bar_button" onclick="toggleDiv()">
+          <i class="fa-solid fa-bars"></i>
+        </button>
+      </div>
+      <nav class="menu_bar_nav" id="menu_bar_nav">
+        <ul class="Menu_bar">
+          <li><a onclick="toggleDiv()" class="button" href="#home">Home</a></li>
+          <li>
+            <a onclick="toggleDiv()" class="button" href="#about_me"
+              >Sobre Mim</a
+            >
+          </li>
+          <li>
+            <a onclick="toggleDiv()" class="button" href="#skills"
+              >Habilidades</a
+            >
+          </li>
+          <li>
+            <a onclick="toggleDiv()" class="button" href="#projects"
+              >Projetos</a
+            >
+          </li>
+          <li>
+            <a onclick="toggleDiv()" class="button" href="#contact">Contato</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <section class="section_1" id="home">
+        <div class="conteudo_1">
+          <div class="text_home">
+            <div>
+              <p>Oi, eu sou</p>
+              <h1>Christian do Nascimento Falcao</h1>
+              <p>Full-Stack Developer</p>
+            </div>
+            <div class="social_icons">
+              <a href="https://github.com/christiandonf" target="_blank">
+                <i class="fab fa-github icons" title="GitHub"></i>
+              </a>
+              <a
+                href="https://www.linkedin.com/in/christiannfalcao/"
+                target="_blank"
+              >
+                <i class="fab fa-linkedin icons" title="LinkedIn"></i>
+              </a>
+            </div>
+          </div>
+          <img src="./Assets/img/Perfil.jpg" alt="" class="img_inicio img" />
+        </div>
+      </section>
+
+      <section class="section_2" id="about_me">
+        <div class="conteudo_2">
+          <h2>Sobre mim</h2>
+          <p>
+            Olá, meu nome é Christian do Nascimento Falcão e sou um
+            desenvolvedor Full Stack. Seja bem vindo ao meu portfolio!
+          </p>
+          <p>
+            Tenho experiencia prática em desenvolvimento Web, desde a criação de
+            API REST com AspNet Core em C# até a criação do front-End com
+            Next.JS, meu foco é construir de forma rápida aplicações para
+            diversos tipos de serviços, desde uma LandPage até uma solução que
+            depende de escalabilidade como e-commerce e blogs, tenho
+            experiencias com integração a API REST para consumo de APIs e criar
+            regras de negócios para sistemas mais complexos.
+          </p>
+          <p>
+            Como freelancer, tenho o prazer de colaborar com empresas e
+            indivíduos para criar sites que refletem a identidade da marca.
+            Estou sempre empenhado em compreender as necessidades únicas de cada
+            projeto e entregar resultados personalizados e de alta qualidade.
+          </p>
+          <p>
+            Utilizo as ultimas tecnologias do mercado como JavaScript,
+            Tailwindcss, Next.JS utilziando o framework Node.js, C# com AspNet
+            Core e Unij para criação de testes unitário, Conteineres como Docker
+            e Podman usando docker-Compose para deploy de sistemas mais
+            complexos, sou capaz de criar sistemas sólidos e eficientes. Além
+            disso, tenho experiência em integração de Banco de dados como
+            Postgree, aplicação de práticas de segurança para proteger os dados
+            dos usuários.
+          </p>
+          <p>
+            Agradeço por visitar meu portfólio e estou ansioso para trabalhar
+            com você em seu próximo projeto.
+          </p>
+        </div>
+      </section>
+
+      <section class="section_3" id="skills">
+        <h2>Habilidades</h2>
+        <div class="conteudo_3">
+          <div class="skill_icon">
+            <i class="fa-brands fa-html5" title="html5"></i>
+            <p>HTML5</p>
+          </div>
+          <div class="skill_icon">
+            <i class="fa-brands fa-css3-alt" title="css3"></i>
+            <p>CSS3</p>
+          </div>
+          <div class="skill_icon">
+            <i class="fa-brands fa-js" title="javascript"></i>
+            <p>JAVASCRIPT</p>
+          </div>
+          <div class="skill_icon">
+            <i class="fa-brands fa-react" title="react"></i>
+            <p>REACT</p>
+          </div>
+          <div class="skill_icon">
+            <i class="fa-brands fa-node-js" title="node.js"></i>
+            <p>NODE.JS</p>
+          </div>
+          <div class="skill_icon">
+            <i class="fa-solid fa-file-code" title="tailwindcss"></i>
+            <p>TAILWINDCSS</p>
+          </div>
+          <div class="skill_icon">
+            <i class="fa-brands fa-bootstrap" title="bootstrap"></i>
+            <p>BOOTSTRAP</p>
+          </div>
+          <div class="skill_icon">
+            <i class="fa-brands fa-square-git" title="git"></i>
+            <p>GIT</p>
+          </div>
+          <div class="skill_icon">
+            <i class="fa-brands fa-github" title="github"></i>
+            <p>GITHUB</p>
+          </div>
+          <div class="skill_icon">
+            <i class="fa-solid fa-database" title="database"></i>
+            <p>SQL</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="section_4" id="projects">
+        <h1 class="titulosBrancos titulosCentro">Projetos</h1>
+
+        <div class="conteudo_4">
+          <div class="slot">
+            <img
+              src="https://www.fazendasaofranciscodeassis.com/favicon.ico"
+              alt=""
+              class="img1"
+            />
+            <h2>Fazenda São franciso de asis</h2>
+            <h3>Site Institucional</h3>
+            <p>
+              A Fazenda São Francisco de Assis foi fundada em 2015 nas terras
+              férteis do Paraná, Paranagi, com o propósito de se tornar uma
+              presença significativa no cenário agrícola local. Nos seus
+              primeiros anos, a fazenda enfrentou os desafios comuns de uma nova
+              empreitada, mas com dedicação e trabalho árduo, começou a
+              florescer.
+            </p>
+            <div class="tech">
+              <h3>Technologias:</h3>
+              <span>HTML</span>
+              <span>CSS</span>
+              <span>JavaScript</span>
+              <span>React</span>
+              <span>PostgresSQL</span>
+            </div>
+            <div class="slotbuttons">
+              <a
+                href="https://www.fazendasaofranciscodeassis.com/"
+                target="_blank"
+                class="button"
+                >Home</a
+              >
+              <a
+                href="https://www.fazendasaofranciscodeassis.com/sobre"
+                target="_blank"
+                class="button"
+                >Sobre Nós</a
+              >
+            </div>
+          </div>
+
+          <div class="slot">
+            <img
+              src="https://www.thecomedyhub.com.br/favicon.ico"
+              alt=""
+              class="img1"
+            />
+            <h2>The Comedy Hub</h2>
+            <h3>Rede Social</h3>
+            <p>
+              Tudo começou com um simples comentário em uma rede social que hoje
+              já não existe mais. Foi ali, naquele momento, que percebemos o
+              quanto sentíamos falta de um espaço nosso, um lugar onde
+              pudéssemos nos expressar, compartilhar risadas e criar conexões
+              genuínas. Foi assim que nasceu a ideia de criar o Comedy Hub, uma
+              rede social feita por pessoas que amam humor, para pessoas que
+              amam humor.
+            </p>
+            <div class="tech">
+              <h3>Technologias:</h3>
+              <span>HTML</span>
+              <span>CSS</span>
+              <span>TypeScript</span>
+              <span>Tawilwindcss</span>
+              <span>Next.JS</span>
+              <span>Java</span>
+              <span>SpringBoot</span>
+              <span>Python</span>
+              <span>Docker</span>
+              <span>Flutter</span>
+              <span>PostgresSQL</span>
+              <span>MongoDB</span>
+            </div>
+            <div class="slotbuttons">
+              <a
+                href="https://www.thecomedyhub.com.br/"
+                target="_blank"
+                class="button"
+                >Home</a
+              >
+              <a
+                href="https://www.thecomedyhub.com.br/about-us"
+                target="_blank"
+                class="button"
+                >Sobre Nós</a
+              >
+            </div>
+          </div>
+
+          <div class="slot">
+            <img
+              src="https://stream.nexuswebdigital.com/web/f5bbb798cb2c65908633.png"
+              alt=""
+              class="img1"
+            />
+            <h2>Jellyfin</h2>
+            <h3>Self Hosting</h3>
+            <p>
+              Jellyfin é um dos serviços que faço "Self Host" como forma de
+              aprender a utilziar toda a suite de ferramentas para Devops entre
+              outros inumeros serviços que são utilizados para monitoramento do
+              servidor, como grafanna, caddyvisor, loki, prometheus entre outros
+              os mesmos estão protegidos por sistema de authenticação de dois
+              fatores pelo Authentik.
+            </p>
+            <div class="tech">
+              <h3>Technologias:</h3>
+              <span>Nginx</span>
+              <span>Grafanna</span>
+              <span>Loki</span>
+              <span>Prometheus</span>
+              <span>Docker</span>
+              <span>Authentik</span>
+            </div>
+            <div class="slotbuttons">
+              <a
+                href="https://stream.nexuswebdigital.com/"
+                target="_blank"
+                class="button"
+                >Acesso</a
+              >
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section_5" id="contact">
+        <div class="conteudo_5">
+          <h1 class="titulosBrancos titulosCentro">Contato</h1>
+          <div class="contatos_icons">
+            <div class="contatos_icons1">
+              <a
+                href="mailto:christian.nascimento.falcao@gmail.com"
+                target="_blank"
+                ><i class="fa-regular fa-envelope"></i
+              ></a>
+              <p class="textosBrancos">christian.nascimento.falcao@gmail.com</p>
+            </div>
+            <div class="contatos_icons1">
+              <a
+                href="https://api.whatsapp.com/send?phone=5511999935492"
+                target="_blank"
+                ><i class="fa-brands fa-whatsapp"></i
+              ></a>
+              <p class="textosBrancos">+55-11-999935492</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <p>© Copyright 2022 Christian do Nascimento Falcao</p>
+    </footer>
+    TESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTESTEST
+    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
+  </body>
+</html>