feat(sass): added

2025-11-10 02:13:05 +01:00 · 2025-01-27 13:50:39 +01:00
parent f189ff2f1c
commit 17d0563011
32 changed files with 842 additions and 0 deletions
--- a/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.css
+++ b/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.css
@@ -0,0 +1,77 @@
+/* Some CSS Setup - nothing to do with flexbox */
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 0;
+  background: #3494E6;
+  background: linear-gradient(to right, #EC6EAD, #3494E6);
+}
+
+a {
+  color:white;
+  font-weight: 100;
+  letter-spacing: 2px;
+  text-decoration: none;
+  background:rgba(0,0,0,0.2);
+  padding:20px 5px;
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  transition:all 0.5s;
+}
+
+a:hover {
+  background:rgba(0,0,0,0.5);
+}
+
+.wrapper {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding:50px;
+}
+
+
+/* Flex Container */
+.flex-nav ul {
+  border: 1px solid black;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.flex-nav li {
+  flex: 3;
+}
+
+.flex-nav .social {
+  flex: 1;
+}
+
+
+@media all and (max-width:1000px) {
+  .flex-nav ul {
+    flex-wrap: wrap;
+  }
+
+  .flex-nav li {
+    flex: 1 1 50%;
+  }
+
+  .flex-nav .social {
+    flex: 1 1 25%;
+  }
+}
+
+@media all and (max-width:500px) {
+  .flex-nav li {
+    flex-basis: 100%;
+  }
+}
--- a/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.html
+++ b/Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>FlexBox Nav</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <div class="wrapper">
+    <nav class="flex-nav">
+      <ul>
+        <li><a href="#">Item 01</a></li>
+        <li><a href="#">Item 02</a></li>
+        <li><a href="#">Item 03</a></li>
+        <li><a href="#">Item 04</a></li>
+        <li><a href="#">Item 05</a></li>
+        <li><a href="#">Item 06</a></li>
+        <li class="social">
+          <a href="https://twitter.com"><i class="fa fa-twitter"></i></a>
+        </li>
+        <li class="social">
+          <a href="https://facebook.com"><i class="fa fa-facebook"></i></a>
+        </li>
+        <li class="social">
+          <a href="https://github.com"><i class="fa fa-github"></i></a>
+        </li>
+        <li class="social">
+          <a href="https://www.instagram.com"><i class="fa fa-instagram"></i></a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</body>
+</html>