Landing Page

tryber · Nov 10, 2023 · 9ae9f17 · 9ae9f17
1 parent 5108550
commit 9ae9f17
Show file tree

Hide file tree

Showing 12 changed files with 777 additions and 0 deletions.
diff --git a/aula.css b/aula.css
@@ -0,0 +1,72 @@
+/* all
+print
+screen
+speech */
+
+/* Código da aula 6.5 */
+@media screen and (max-width: 900px) {
+  /* VAMOS PARA O NOSSO PRIMEIRO OBJETIVO:
+   - [ ] Ajustar Menu: centralizar logo e remover links; */
+
+  header nav {
+    display: none;
+  }
+
+  header {
+    justify-content: center;
+  }
+
+  /* Ajustar seção Hero: diminuir o tamanho da fonte; */
+  .hero h1 {
+    font-size: 34px;
+  }
+
+  .hero h3 {
+    font-size: 26px;
+  }
+
+  /* Ajustar as imagens na seção Fotos: devem aparecer uma abaixo da outra; */
+
+  .know-the-ebytr {
+    padding: 100px 10px;
+  }
+
+  .know-the-ebytr .grid span {
+    padding: 10px;
+  }
+
+  .know-the-ebytr .grid span.small {
+    flex-basis: 100%;
+  }
+
+  .know-the-ebytr .grid span.large {
+    flex-basis: 100%;
+  }
+
+  .features .grid {
+    flex-direction: column;
+  }
+
+  /* Ajustar a Newsletter: ajustar espaço entre o input e o botão; */
+
+  .newsletter button {
+    margin-top: 10px;
+  }
+  mongodb://localhost:27018/
+  /* Ajustar Footer: aumentar o tamanho dos ícones. */
+  footer ul li i {
+    font-size: 40px;
+  }
+}
+
+
+@media print {
+  .features {
+    background-color: white !important;
+  }
+
+  * {
+    color: black !important;
+    background-color: white !important;
+  }
+}
diff --git a/images/1.png b/images/1.png
diff --git a/images/2.png b/images/2.png
diff --git a/images/3.png b/images/3.png
diff --git a/images/4.png b/images/4.png
diff --git a/images/5.png b/images/5.png
diff --git a/images/7.png b/images/7.png
diff --git a/images/8.png b/images/8.png
diff --git a/images/hero.png b/images/hero.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ebytr</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.min.css">
+  <script src="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.js"></script> -->
+</head>
+<body>
+  <header>
+    <a href="#">
+      <img src="images/logo.png" alt="Ebytr">
+    </a>
+    <!-- <label class="elle-label style-elle-btn" for="myMenu" role="button" aria-pressed="false">Open ►</label>
+      <input class="elle-checkbox" type="checkbox" id="myMenu">
+      <nav class="elle-menu">
+        <label class="elle-label elle-shadow" for="myMenu" role="button" aria-pressed="false"></label>
+        <ul>
+          <li class="elle-x">
+            <label class="elle-label" for="myMenu" role="button" aria-pressed="false">x</label>
+          </li>
+          <li class="text">This isn't a link</li>
+          <li><a href="/">This is a link</a></li>
+          <li>
+            <label class="elle-label" for="myMenu" role="button" aria-pressed="false">
+              <a onclick="this.parentElement.click();" href="#">Anchor link</a>
+            </label>
+          </li>
+        </ul>
+      </nav> -->
+    <nav>
+      <a href="">Home</a>
+      <a href="">Sobre</a>
+      <a href="">Clientes</a>
+      <a href="">Contato</a>
+    </nav>
+  </header>
+
+  <section class="hero">
+    <h1>Soluções digitais sob medida para seu negócio</h1>
+    <a href="" class="btn">Saiba mais</a>
+  </section>
+
+  <section class="know-the-ebytr">
+    <h3>Conheça a Ebytr!</h3>
+    <p>Somos mestres em criar soluções digitais sob medida que superam as expectativas de nossos.</p>
+    <hr>
+    <div class="grid">
+      <span class="small" style="background-image: url('images/1.png')"></span>
+      <span class="large" style="background-image: url('images/2.png')"></span>
+      <span class="large" style="background-image: url('images/3.png')"></span>
+      <span class="small" style="background-image: url('images/4.png')"></span>
+    </div>
+  </section>
+
+  <section class="features">
+    <h3>Desenvolvimento com Tecnologia de Ponta</h3>
+    <p>Oferecemos soluções personalizadas, utilizando as tecnologias mais avançadas para atender às suas necessidades. Nossa equipe é especializada em:</p>
+    <hr>
+    <ul class="grid">
+      <li>
+        <i class="fas fa-object-group"></i>
+        <h4>Front-End</h4>
+        <p>Transformamos ideias em experiências interativas e atraentes, utilizando:</p>
+        <ul class="tech-list">
+          <li>React.Js</li>
+          <li>Vue.Js</li>
+          <li>Javascript</li>
+          <li>HTML5</li>
+          <li>CSS</li>
+        </ul>
+      </li>
+      <li>
+        <i class="fas fa-laptop-code"></i>
+        <h4>Backend</h4>
+        <p>Construímos robustos backends para suportar suas aplicações, com expertise em:</p>
+        <ul class="tech-list">
+          <li>Python</li>
+          <li>Node.Js</li>
+          <li>Java</li>
+          <li>C#</li>
+          <li>PHP</li>
+        </ul>
+      </li>
+      <li>
+        <i class="fas fa-cube"></i>
+        <h4>Banco de Dados</h4>
+        <p>Gerenciamos seus dados de maneira eficiente, utilizando:</p>
+        <ul class="tech-list">
+          <li>SQL (MySQL, MariaDB)</li>
+          <li>NoSQL (MongoDB, ElasticSearch)</li>
+        </ul>
+      </li>
+    </ul>
+  </section>
+
+  <section class="newsletter">
+    <h3>Newsletter</h3>
+    <p>Assine nossa newsletter para se manter atualizado com nossos serviços.</p>
+    <hr>
+    <form>
+      <input type="text" placeholder="Email">
+      <button>Cadastrar</button>
+    </form>
+  </section>
+
+  <footer>
+    <ul>
+      <li><a href=""><i class="fab fa-facebook"></i></a></li>
+      <li><a href=""><i class="fab fa-twitter"></i></a></li>
+      <li><a href=""><i class="fab fa-snapchat"></i></a></li>
+      <li><a href=""><i class="fab fa-pinterest"></i></a></li>
+    </ul>
+    <p>Todos os direitos reservados - Ebytr 2020</p>
+  </footer>
+
+</body>
+</html>