diff --git a/css/estilos.css b/css/estilos.css
index 55d74d3..f867255 100644
--- a/css/estilos.css
+++ b/css/estilos.css
@@ -19,6 +19,7 @@ h2 {
text-transform: uppercase;
}
+
/* Header */
header {
display: flex;
@@ -54,15 +55,8 @@ header {
.menu li:last-child > a {
color: #29a744;
}
-.menu-movil {
- display:none;
-}
-i {
- font-size:2rem;
- color:#FFFFFF;
- text-align: center;
- padding: 0 25px 0 0;
- margin:0;
+#menuToggle {
+ display: none;
}
/* Main */
.conferencia {
@@ -324,6 +318,90 @@ footer {
display:flex;
justify-content: flex-end;
}
+/* Menu Hamburguesa */
+#menuToggle {
+ display: block!important;
+ position: relative;
+ top: 10px;
+ left: 20px;
+ z-index: 1;
+ -webkit-user-select: none;
+ user-select: none;
+}
+#menuToggle a {
+ text-decoration: none;
+ color: #232323;
+ transition: color 0.3s ease;
+}
+#menuToggle a:hover {
+ color: tomato;
+}
+#menuToggle input {
+ display: block;
+ width: 40px;
+ height: 32px;
+ position: absolute;
+ top: -7px;
+ left: -5px;
+ cursor: pointer;
+ opacity: 0;
+ z-index: 2;
+ -webkit-touch-callout: none;
+}
+#menuToggle span {
+ display: block;
+ width: 33px;
+ height: 4px;
+ margin-bottom: 5px;
+ position: relative;
+ background: #cdcdcd;
+ border-radius: 3px;
+ z-index: 1;
+ transform-origin: 4px 0px;
+ transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+ background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+ opacity 0.55s ease;
+}
+#menuToggle span:first-child {
+ transform-origin: 0% 0%;
+}
+#menuToggle span:nth-last-child(2) {
+ transform-origin: 0% 100%;
+}
+#menuToggle input:checked ~ span {
+ opacity: 1;
+ transform: rotate(45deg) translate(-2px, -1px);
+ background: #232323;
+}
+#menuToggle input:checked ~ span:nth-last-child(3) {
+ opacity: 0;
+ transform: rotate(0deg) scale(0.2, 0.2);
+}
+
+#menuToggle input:checked ~ span:nth-last-child(2) {
+ transform: rotate(-45deg) translate(0, -1px);
+}
+#menu-movil {
+ overflow: hidden;
+ position: absolute;
+ width: 300px;
+ margin: -35px 0 0 -60px;
+ padding: 50px;
+ padding-top: 50px;
+ background: #ededed;
+ list-style-type: none;
+ -webkit-font-smoothing: antialiased;
+ transform-origin: 0% 0%;
+ transform: translate(-100%, 0);
+ transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+}
+#menu-movil li {
+ padding: 10px 0;
+ font-size: 22px;
+}
+#menuToggle input:checked ~ ul {
+ transform: none;
+}
/* Sección 01: Conferencia Bs. As. */
.menu-principal {
diff --git a/index.html b/index.html
index 26a9875..ca2bc23 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,9 @@
-
+
@@ -22,6 +24,7 @@
Conferencia Bs. As.
+
-