Criando index

Criando index e pastas do css., organizando o css em uma estrutura de diretórios lógicos.
JuJuVitoria · Aug 2, 2024 · 1fc8ec3 · 1fc8ec3
1 parent b80dca1
commit 1fc8ec3
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 0 deletions.
diff --git a/css/base/reset.css b/css/base/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/css/base/typography.css b/css/base/typography.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');
diff --git a/css/base/variables.css b/css/base/variables.css
@@ -0,0 +1,14 @@
+:root {
+    /*Fonts*/
+    --tamanhoGrande: 1.25rem;
+    --tamanhoMedio: 1.000rem;
+    --tamanhoPequeno: 0.812rem;
+
+    /*Colors*/
+    --green: #0c4b3b;
+    --cyan: #117785;
+    --darkBlue: #072e81;
+    --white: #fefefe;
+    --lightBlack: #373737;
+    --gray: #c9c9c9;
+}
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,9 @@
+/* Base styles */ 
+@import url('./base/reset.css');
+@import url('./base/variables.css');
+@import url('./base/typography.css');
+
+/* Layout styles */
+
+/* Pages styles */
+@import url('./pages/index.css');
diff --git a/css/pages/index.css b/css/pages/index.css
@@ -0,0 +1,101 @@
+.index_body {
+    animation: gradient 10s ease infinite;
+    background: linear-gradient(135deg, var(--green), var(--cyan), var(--darkBlue)) no-repeat;
+    background-size: 300% 300%;
+    height: 100vh;
+    font-family: 'Montserrat', sans-serif;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    margin: 0 1rem;
+}
+
+.text_reveal h1 {
+    animation: fade 1ms 1s forwards;
+    color: var(--white);
+    font-size: 2rem;
+    font-weight: 600;
+    opacity: 0;
+}
+
+.text_reveal p {
+    animation: fade 1ms 1s forwards;
+    color: var(--white);
+    font-size: 1.5rem;
+    font-weight: 500;
+    opacity: 0;
+}
+
+.button {
+    animation: animationButton 2s .5s ease-in-out forwards;
+    color: var(--lightBlack);
+    text-decoration: none;
+    font-size: 1rem;
+    background-color: var(--gray);
+    padding: 1rem 1rem;
+    border-radius: 15px;
+    opacity: 0;
+}
+
+.text_reveal {
+    overflow: hidden;
+    position: relative;
+
+    &::after {
+        animation: text_reveal 2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
+        background-color: var(--gray);
+        bottom: 0;
+        content: '';
+        display: block;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+}
+
+@keyframes animationButton {
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes text_reveal {
+    from {
+        transform: translateX(-101%);
+    }
+
+    to {
+        transform: translateX(101%);
+    }
+}
+
+@keyframes fade {
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0 50%;
+    }
+
+}
+
+@media screen and (max-width: 481px) {
+    .text_reveal h1 {
+        font-size: 4;
+    }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" type="image/svg" href="#"/>
+    <title>Início</title>
+
+    <link rel="stylesheet" href="./css/main.css">
+</head>
+<body class="index_body">
+    <div class="text_reveal">
+        <h1>Bem-vindo!</h1>
+    </div>
+    <div class="text_reveal">
+        <p>Este é o meu site para o Agrinho 2024.</p>
+    </div>
+    <a href="#" class="button">Clique aqui, e confita tudo!</a>
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');