idealti · LexFalconis · Feb 8, 2021 · Feb 13, 2021
diff --git a/alex/app.js b/alex/app.js
@@ -0,0 +1,24 @@
+function sendForm() {
+    var nome = document.getElementById('nome').value;
+    var email = document.getElementById('email').value;
+    var mensagem = document.getElementById('mensagem').value;
+
+    var data = JSON.stringify({
+        "nome": nome,
+        "email": email,
+        "mensagem": mensagem
+    });
+    var xhr = new XMLHttpRequest();
+    xhr.withCredentials = true;
+
+    xhr.addEventListener("readystatechange", function () {
+        if (this.readyState === this.DONE) {
+            console.log(this.responseText);
+        }
+    });
+
+    xhr.open("POST", "http://mockbin.com/request");
+    xhr.setRequestHeader("x-pretty-print", "2");
+
+    xhr.send(data);
+}
diff --git a/alex/assets/baloes.png b/alex/assets/baloes.png
diff --git a/alex/assets/banner.jpg b/alex/assets/banner.jpg
diff --git a/alex/assets/logo@3x.png b/alex/assets/logo@3x.png
diff --git a/alex/assets/modelo.png b/alex/assets/modelo.png
diff --git a/alex/assets/relogio.png b/alex/assets/relogio.png
diff --git a/alex/index.html b/alex/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Início | Guepardo Transportes</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+    <link rel="stylesheet" href="./style.css"/>
+</head>
+<body>
+<div id="container">
+    <div class="row">
+        <section class="topo col-12" id="inicio">
+            <div class="logo col-6">
+                <img src="assets/logo@3x.png">
+            </div>
+            <div class="menu col-6">
+                <nav>
+                    <ul>
+                        <li>
+                            <a href="#inicio">Início</a>
+                            <a href="#sobre">Sobre</a>
+                            <a href="#servicos">Serviços</a>
+                            <a href="#contato">Contato</a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </section>
+    </div>
+    <div class="row">
+        <section class="col-12" id="sobre">
+            <div class="sobre col-12">
+                <div class="title col-6">
+                    <h4>Entregando cargas e sonhos</h4>
+                    <p>Desde 1980 entregando cargas e fazendo pessoas e negócios sorrirem e se realizarem.</p>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <div class="row">
+        <section class="col-12" id="servicos">
+            <div class="servicos col-12">
+                <div class="title col-8">
+                    <h4>Entregas rápidas e eficientes</h4>
+                    <p>Temos experiência na entrega de cargas para pessoas e empresas em tempo recorde para todo o
+                        Brasil.</p>
+                </div>
+                <div class="img col-4">
+                    <img src="assets/relogio.png">
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <div class="row">
+        <section class="col-12" id="contato">
+            <div class="contato col-12">
+                <div class="form col-8">
+                    <form method="post" class="col-8">
+                        <h4>Fale conosco</h4>
+                        <div class="form-grup mb-3">
+                            <label for="nome" class="label-inline">Nome</label>
+                            <input class="form-control" type="text" id="nome" placeholder="João da Silva">
+                        </div>
+
+                        <div class="form-grup mb-3">
+                            <label for="email" class="label-inline">E-mail</label>
+                            <input class="form-control" type="email" id="email" placeholder="joao@suaempresa.com">
+                        </div>
+
+                        <div class="form-grup mb-4">
+                            <label for="mensagem" class="label-inline">Mensagem</label>
+                            <textarea class="form-control" id="mensagem"></textarea>
+                        </div>
+
+                        <div class="form-group mb-3">
+                            <input type="button" class="btn" value="Enviar" onclick="sendForm()">
+                        </div>
+                    </form>
+                </div>
+                <div class="img col-4">
+                    <img src="assets/baloes.png">
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <div class="row">
+        <section class="col-12" id="footer">
+            <div class="assinatura">
+                &#169; 2021 Guepardo Transportes
+            </div>
+        </section>
+    </div>
+</div>
+<script src="app.js"></script>
+</body>
+</html>
+
diff --git a/alex/style.css b/alex/style.css
@@ -0,0 +1,171 @@
+/**
+ * Importing website's font family
+ */
+@import url('https://fonts.googleapis.com/css2?family=Nova+Square&family=Oxygen&display=swap');
+
+html, body {
+    font-family: 'Oxygen', sans-serif;
+    color: #101010;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Nova Square', cursive;
+}
+
+#inicio {
+    height: 70px;
+    background-color: #fdd55e;
+    top: 0;
+    left: 0;
+}
+
+.logo {
+    margin: 0;
+    padding-top: 20px;
+    padding-bottom: 8px;
+    padding-left: 60px;
+    float: left;
+}
+
+.logo img {
+    height: 40px;
+}
+
+.menu {
+    margin: 0;
+    padding-top: 25px;
+    padding-bottom: 8px;
+    padding-left: 60px;
+    float: left;
+    text-align: center;
+}
+
+.menu nav ul {
+    font-size: 12px;
+    font-weight: bold;
+    list-style: none;
+}
+
+.menu nav ul li a {
+    color: #000;
+    margin: 0px 15px;
+    text-decoration: none;
+    padding-bottom: 7px;
+}
+
+.menu nav ul li a:active, .menu nav ul li a:hover {
+    border-bottom: 2px solid #000;
+}
+
+#sobre {
+    /*display: inline-block;*/
+    left: 0;
+    height: 300px;
+    background-image: url("assets/banner.jpg");
+    background-position: center;
+    background-size: cover;
+}
+
+.sobre {
+    left: 0;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 1;
+    height: 300px;
+    padding-top: 7%;
+    padding-left: 7%;
+}
+
+.sobre .title {
+    color: #fff;
+}
+
+.sobre .title h4 {
+    margin-bottom: 1px;
+    font-size: 20px;
+}
+
+.sobre .title p {
+    font-size: 12px;
+}
+
+#servicos {
+    left: 0;
+    height: 300px;
+}
+
+#servicos .title {
+    padding-top: 7%;
+    padding-left: 7%;
+    float: left;
+}
+
+#servicos .title h4 {
+    margin-bottom: 1px;
+    font-size: 20px;
+}
+
+#servicos .title p {
+    font-size: 12px;
+}
+
+#servicos .img {
+    padding-top: 3%;
+    float: left;
+}
+
+#servicos .img img {
+    width: 350px;
+}
+
+#contato {
+    left: 0;
+}
+
+#contato .form {
+    padding-top: 7%;
+    padding-left: 7%;
+    float: left;
+}
+
+#contato .form form label {
+    font-size: 12px;
+}
+
+#contato .img {
+    padding-top: 10%;
+    float: left;
+}
+
+#contato .img img {
+    width: 350px;
+}
+
+#contato input[type='text'], #contato input[type='email'], #contato textarea {
+    border-radius: 0px;
+}
+
+#contato input[type='text'] #mensagem {
+    resize: none;
+    overflow: auto;
+}
+
+#contato input[type='button'] {
+    background-color: #fdd55e;
+    height: 30px;
+    width: 120px;
+    padding-top: 0px;
+    border-radius: 0px;
+}
+
+#footer {
+    left: 0;
+    margin-top: 20px;
+    background-color: #f2f2f2;
+    height: 80px;
+}
+
+#footer .assinatura {
+    text-align: center;
+    margin-top: 30px;
+    font-size: 12px;
+}