Construcción del Header.

Inicio de la construcción del header. Además de ello, se añadió un asset que faltaba (otro logo).
v-Miguel-v · May 30, 2022 · 34de869 · 34de869
1 parent 39005e4
commit 34de869
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 1 deletion.
diff --git a/assets/imgs/logo(3).svg b/assets/imgs/logo(3).svg
diff --git a/index.html b/index.html
@@ -11,7 +11,16 @@
 		<link rel="stylesheet" type="text/css" href="style.css"/>
     </head>
 	<body>
-		<header></header>
+		<header class="header">
+			<img alt="Batabit" src="assets/imgs/logo(1).svg" class="header__logo"/>
+			<div class="header__title-container">
+				<h1 class="header__title">La próxima revolución en el intercambio de criptomonedas.</h1>
+				<p class="header__subtitle">Batabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
+			</div>
+			<div class="header__button-container">
+				<a class="header__button">Conoce Nuestros Planes <span>i</span></a>
+			</div>
+		</header>
 		<main>
 			<section></section>
 			<section></section>

diff --git a/style.css b/style.css
@@ -1,5 +1,17 @@
 /* Variables e Inicializaciones */
 
+:root {
+	--bitcoin-orange: #f7931a;
+	--soft-orange: #ffe9d5;
+	--secondary-blue: #1a9af7;
+	--soft-blue: #e7f5ff;
+	--warm-black-1: #282623;
+	--warm-black-2: #201e1c;
+	--grey: #bababa;
+	--off-white: #faf8f7;
+	--just-white: #fff;
+}
+
 * {
 	margin: 0;
 	padding: 0;
@@ -8,4 +20,28 @@
 
 html {
 	font-size: 62.5%;
+	font-family: "DM Sans", sans-serif;
+}
+
+/* Encabezado (header) */
+
+.header {
+	text-align: center;
+	width: 100%;
+	min-width: 320px;
+	height: 334px;
+}
+
+.header__logo {
+	width: 150px;
+	height: 24px;
+	margin-top: 35px;
+	margin-bottom: 25px;
+}
+
+.header__title-container {
+	width: 90%;
+	min-width: 288px;
+	max-width: 900px;
+	margin: 0 auto;
 }