Untitled
unknown
plain_text
3 years ago
4.1 kB
9
Indexable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi Portafolio</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<script src="script.js"></script>
</head>
<body>
<header>
<div class="container1">
<section id="presentacion">
<h1 class="h1">XIMENA</h1>
</section>
</div>
</header>
<div>
<h3>PRIMER PARCIAL</h3>
</div>
<div class="grid-container">
<a href="#" class="button">Ejercicio 1</a>
<a href="#" class="button">Ejercicio 5</a>
<a href="#" class="button">Ejercicio 9</a>
<a href="#" class="button">Ejercicio 13</a>
<a href="#" class="button">Ejercicio 17</a>
<a href="#" class="button">Ejercicio 2</a>
<a href="#" class="button">Ejercicio 6</a>
<a href="#" class="button">Ejercicio 10</a>
<a href="#" class="button">Ejercicio 14</a>
<a href="#" class="button">1ER PARCIAL (1)</a>
<a href="#" class="button">Ejercicio 3</a>
<a href="#" class="button">Ejercicio 7</a>
<a href="#" class="button">Ejercicio 11</a>
<a href="#" class="button">Ejercicio 15</a>
<a href="#" class="button">1ER PARCIAL (2)</a>
<a href="#" class="button">Ejercicio 4</a>
<a href="#" class="button">Ejercicio 8</a>
<a href="#" class="button">Ejercicio 12</a>
<a href="#" class="button">Ejercicio 16</a>
</div>
<div>
<h3>SEGUNDO PARCIAL</h3>
</div>
<div class="grid-container">
<a href="#" class="button">Ejercicio 1</a>
<a href="#" class="button">Ejercicio 5</a>
<a href="#" class="button">Ejercicio 9</a>
<a href="#" class="button">Ejercicio 13</a>
<a href="#" class="button">Ejercicio 17</a>
<a href="#" class="button">Ejercicio 2</a>
<a href="#" class="button">Ejercicio 6</a>
<a href="#" class="button">Ejercicio 10</a>
<a href="#" class="button">Ejercicio 14</a>
<a href="#" class="button">1ER PARCIAL (1)</a>
<a href="#" class="button">Ejercicio 3</a>
<a href="#" class="button">Ejercicio 7</a>
<a href="#" class="button">Ejercicio 11</a>
<a href="#" class="button">Ejercicio 15</a>
<a href="#" class="button">1ER PARCIAL (2)</a>
<a href="#" class="button">Ejercicio 4</a>
<a href="#" class="button">Ejercicio 8</a>
<a href="#" class="button">Ejercicio 12</a>
<a href="#" class="button">Ejercicio 16</a>
</div>
<style>
body{
background-color:#01012b;
background-image:url(../resources/images/Primera_Textura_Index_Empower.png);
position: absolute;
}
.h3{
color: #d1f7ff;
font-family: 'UNDERRATED Ultra Bold',sans-serif;
left: 200px;
top: 20px;
font-size: 2.5em;
}
.container1{
display: flex;
justify-content: space-between;
margin: 250px;
}
.h1{
color: #d1f7ff;
font-family: 'BIGMACCA Regular';
font-size: 5em;
left: 0px;
top: 444px;
transform: rotate(270deg) translateY(-400%);;
}
.h3{
color: #d1f7ff;
font-family: 'Oswald',sans-serif;
left: 200px;
top: 20px;
font-size: 1em;
}
.button{
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
color: #d1f7ff;
outline: 2px solid #ffffff;
padding: 30px 60px;
position: relative;
overflow: hidden;
transition: color 1s;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
font-family: 'Cascadia Code Regular', sans-serif;
text-align: center;
}
.button:hover{
color: #01012b;
}
.button::before{
content: '';
top: 0;
left: -50px;
width: 0;
height: 100%;
background-color: #d1f7ff;
transform: skewX(30deg);
z-index: -1;
position: absolute;
transition: width 1s;
}
.button:hover::before{
width: 150%;
}
.grid-container{
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}
</style>
<footer>
<p>Derechos reservados © 2023 [Poot Gómez Ximena Alexandra]</p>
</footer>
</body>
</html>Editor is loading...