PlatziMaster · JulesCubs · Jul 27, 2020
diff --git a/challenge04.css b/challenge04.css
@@ -0,0 +1,74 @@
+.header{
+    background-color: #4d089a;
+    color: #ffffff;
+    display: flex;
+    font-family: 'Raleway', serif;
+    flex-direction: column;
+}
+.header__cabecera{
+    background-color: darkblue;
+    color: #ffffff;
+    text-align: end;
+    margin: 3px 0px;
+}
+.header__cabecera a{
+    color: white;
+    margin: 2px;
+    display: inline-block;
+}
+.header__cabecera a img{
+    height: 15px;
+    opacity: 0.5;
+}   
+.header__menutitle{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 70px;
+}
+.header__menutitle--1{
+    color: #ffffff;
+    text-decoration: none;
+    margin-left: 20px;
+}
+.header__menutitle--1 img{
+    width: 30px;
+    height: 30px;
+}
+.header__menutitle--2{
+    font-size: 20px;
+    letter-spacing: 1px;
+    margin-left: -60px;
+}
+.header__menutitle--3 a{
+    margin: 5px;
+}
+.header__menutitle--3 a img{
+    height: 30px;
+    width: 30px;
+}
+.banner{
+    border: 2px solid #6e6d70;
+    display: flex;
+    flex-direction: column;
+    font-family: 'Raleway', serif;
+    height: auto;
+    width: auto;
+}
+.banner__msg{
+    font-size: 20px;
+    margin-left: 10px;
+}
+.banner__op{
+    display: flex;
+    justify-content: flex-end;
+    margin: 10px;
+}
+.banner__op a{
+    color: #4d089a;
+    font-size: 15px;
+    font-weight: bold;
+    margin: 10px;
+    text-decoration: none;
+    text-transform: uppercase;
+}
diff --git a/challenge04.html b/challenge04.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./challenge04.css">
+    <title>Challenge04</title>
+</head>
+<body>
+    <header class="header">
+        <div class="header__cabecera">
+            <a href=""><img src="./rectangle.png" alt="cuadrado"></a>
+            <a href=""><img src="./circled.png" alt="circulo"></a>
+            <a href=""><img src="./give-way.png" alt="triangulo"></a>
+        </div>
+        <div class="header__menutitle">
+            <a class="header__menutitle--1" href=""><img src="./menu.png" alt="menu"></a>
+            <h1 class="header__menutitle--2">My Pictures</h1>
+            <div class="header__menutitle--3">
+                <a href=""><img src="./like.png" alt="like"></a>
+                <a href=""><img src="./menu-2.png" alt="options"></a>
+            </div>
+        </div>
+    </header>
+    <section class="banner">
+        <h1 class="banner__msg">Desea ingresar a nuevos contenidos?</h1>
+        <div class="banner__op">
+            <a href="">Entrar</a>
+            <a href="">Salir</a>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/challenge04.jpg b/challenge04.jpg
diff --git a/circled.png b/circled.png
diff --git a/give-way.png b/give-way.png
diff --git a/like.png b/like.png
diff --git a/lupa.png b/lupa.png
diff --git a/menu-2.png b/menu-2.png
diff --git a/menu.png b/menu.png
diff --git a/rectangle.png b/rectangle.png