Initial commit

ReciHub · Sep 29, 2020 · 6cd764c · 6cd764c
commit 6cd764c
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Otacilio Maia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# melhor-workshop-em-linha-reta
+Vamos construir nesse workshop um site para o melhor workshop em linha reta.
diff --git a/assets/cin.jpg b/assets/cin.jpg
diff --git a/assets/marco_zero.jpg b/assets/marco_zero.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Melhor website em linha reta</title>
+    <meta
+      name="description"
+      content="Fatos que provam que Recife é a melhor cidade em linha reta"
+    />
+    <meta name="author" content="Participantes do workshop Estufa Cin" />
+
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <div class="half-screen-container">
+      <!-- Estrutura do card -->
+      <div>
+        <div class="card">
+          <!-- Thanks Fabricio Macedo for the free picture https://pixabay.com/pt/photos/marco-zero-recife-pernambuco-2014135/ -->
+          <img src="./assets/marco_zero.jpg" alt="Avatar" style="width: 100%" />
+          <div class="container">
+            <h4>
+              Que recife é a maior cidade em linha reta do mundo nós já sabemos!
+            </h4>
+            <p>
+              Aqui a gente só vai mostrar mais argumentos ainda pra quem não
+              sabe.
+            </p>
+          </div>
+        </div>
+      </div>
+      <!-- Fim da estrutura do card -->
+    </div>
+    <div class="biggest-straight-line-container">
+      <div class="brennand-base"></div>
+      <div class="brennand-snake brennand-bottom"></div>
+      <div class="brennand-snake brennand-top"></div>
+      <div class="biggest-straight-line"></div>
+    </div>
+    <div class="half-screen-container">
+      <!-- Estrutura do card -->
+      <div>
+        <div class="card">
+          <img src="./assets/cin.jpg" alt="Avatar" style="width: 100%" />
+          <div class="container">
+            <h4>O Cin-UFPE é nosso!</h4>
+            <p>
+              E todo mundo já sabe que o Cin é o maior e melhor centro de
+              informática em linha reta do mundo.
+            </p>
+          </div>
+        </div>
+      </div>
+      <!-- Fim da estrutura do card -->
+    </div>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,67 @@
+body {
+  flex: 1;
+  display: flex;
+  background-color: #f8f8ff;
+  color: #111111;
+  flex-direction: column;
+}
+
+.half-screen-container {
+  flex: 1;
+  display: flex;
+  height: 49vh;
+  overflow-x: auto;
+}
+
+.biggest-straight-line {
+  width: 100%;
+  margin-left: -4px;
+  border-radius: 8px;
+  border-top: 16px #333e41 solid;
+}
+
+.biggest-straight-line-container {
+  align-items: center;
+  display: flex;
+  flex: 1;
+}
+
+.brennand-snake {
+  position: absolute;
+  z-index: 1;
+  height: 56px;
+  width: 8px;
+  border-bottom-left-radius: 8px;
+  border-top-left-radius: 8px;
+  background-color: #333e41;
+}
+
+.brennand-bottom {
+  left: 80px;
+}
+
+.brennand-top {
+  right: 100px;
+}
+
+.brennand-base {
+  z-index: 1;
+  height: 44px;
+  width: 24px;
+  background-color: #80604d;
+}
+
+.card {
+  margin: 48px 16px;
+  width: 20vw;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8);
+  transition: 0.3s;
+}
+
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.container {
+  padding: 2px 16px;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# melhor-workshop-em-linha-reta
		Vamos construir nesse workshop um site para o melhor workshop em linha reta.