Skip to content

Commit

Permalink
Se agrega menu hamburguesa movil
Browse files Browse the repository at this point in the history
  • Loading branch information
@estrelicia
estrelicia committed Oct 6, 2023
1 parent 9cd77bb commit 93d2d14
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 15 deletions.
96 changes: 87 additions & 9 deletions css/estilos.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ h2 {
text-transform: uppercase;
}


/* Header */
header {
display: flex;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
41 changes: 35 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
<link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
Expand All @@ -22,6 +24,7 @@
<img src="./assets/img/codoacodo.png" alt="logo codo a codo 4.0" height="75px" /></a>
<h2>Conferencia Bs. As.</h2>
</div>

<nav class="menu-principal">
<ul class="menu">
<li><a href="#seccion1">La conferencia</a></li>
Expand All @@ -31,9 +34,35 @@ <h2>Conferencia Bs. As.</h2>
<li><a href="./pages/tickets.html">Comprar tickets</a></li>
</ul>
</nav>
<nav class="menu-movil">
<i class="fa-solid fa-bars"></i>

<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />

<span></span>
<span></span>
<span></span>

<ul id="menu-movil">
<a href="#seccion1">
<li>La conferencia</li>
</a>
<a href="#seccion2">
<li>Los oradores</li>
</a>
<a href="#seccion3">
<li>El lugar y la fecha</li>
</a>
<a href="#seccion4">
<li>Conviértete en orador</li>
</a>
<a href="#" target="_blank">
<li>Comprar tickets</li>
</a>
</ul>
</div>
</nav>

</header>
<main>
<section class="conferencia" id="seccion1">
Expand All @@ -55,7 +84,7 @@ <h2>
<div class="texto-superior-titulo">Conoce a los</div> Oradores
</h2>
<div class="caja-oradores">
<div class="caja" id="steve"><img src="./assets/img/steve.jpg" alt="Steve Jobs" width="450px"/>
<div class="caja" id="steve"><img src="./assets/img/steve.jpg" alt="Steve Jobs" width="450px" />
<div class="caja-interno">
<h4 class="recuadro js">javascript</h4>
<h4 class="recuadro react">react</h4>
Expand All @@ -66,7 +95,7 @@ <h3>Steve Jobs</h3>
consequuntur aperiam?</p>
</div>
</div>
<div class="caja" id="bill"><img src="./assets/img/bill.jpg" alt="Bill Gates" width="450px" />
<div class="caja" id="bill"><img src="./assets/img/bill.jpg" alt="Bill Gates" width="450px" />
<div class="caja-interno">
<h4 class="recuadro js">javascript</h4>
<h4 class="recuadro react">react</h4>
Expand All @@ -77,7 +106,7 @@ <h3>Bill Gates</h3>
consequuntur aperiam?</p>
</div>
</div>
<div class="caja" id="ada"><img src="./assets/img/ada.jpeg" alt="Ada Lovelace" width="450px"/>
<div class="caja" id="ada"><img src="./assets/img/ada.jpeg" alt="Ada Lovelace" width="450px" />
<div class="caja-interno">
<h4 class="recuadro negocios">negocios</h4>
<h4 class="recuadro startup">startups</h4>
Expand Down

0 comments on commit 93d2d14

Please sign in to comment.