Autor
Código:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
ul, li {
padding: 0;
margin: 0;
list-style: none inside;
}
ul.slider {
position:relative; /*Necesitamos que el ul sea relativo*/
}
ul.slider li {
opacity: 0; /*Ocultamos todos los <li>*/
transition: opacity .5s;
position: absolute; /*Posicionamos en absoluto los <li>*/
left: 0px;
top: 0px;
margin:50px;
padding:50px;
border:2px solid red;
background:#fff;
}
ul.slider li:first-child {
opacity: 1; /*Mostramos el primer <li>*/
}
ul.slider li:target {
opacity: 1; /*Mostramos el <li> al que apunta el enlace*/
}
nav {
position:relative;
top:200px;
left:50px;
}
body, html {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
overflow:hidden;
}
ul, li {
box-sizing: border-box;
}
ul.slider {
padding: 30px;
}
ul.slider li {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
border: 0;
background-color: gray;
opacity: 0;
transition: opacity .5s;
padding-top: 30vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: calc( 1.5rem + 1vw );
text-align: center;
}
#slide1 {
background-color: #00324b;
color: #fff;
}
#slide2 {
background-color: #65bce8;
color: #00324b;
}
#slide3 {
background-color: #f90;
color: #00324b;
}
#slide4 {
background-color: #00324b;
color: #65bce8;
}
#slide5 {
background-color: #65bce8;
color: #00324b;
}
#slide6 {
background-color: #FDFEFE;
color: #00324b;
}
#slide7 {
background-color: #FDFEFE;
color: #00324b;
}
#slide8 {
background-color: #FDFEFE;
color: #00324b;
}
nav {
width: 100vw;
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
background: #f1f2f3;
}
nav ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
nav ul li {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
box-sizing: border:box;
}
nav a {
font-size: calc( 1.2rem + 1vw );
text-decoration: none;
font-weight: bold;
color: #00324b;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.8;
flex-grow: 1;
text-align: center;
border-top: 5px solid #00324b;
border-right: 1px solid #00324b;
flex-wrap: wrap;
position: relative;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover {
background-color: #00324b;
color: #fff;
border-top-color: #65bce8;
}
nav a:active {
border-top-color: #f90;
background: #f90;
color: #00324b;
}
]]></b:skin>
</head>
<body>
<b:section id='main' showaddelement='yes'/>
<ul class='slider'>
<li id='slide1'>En campusMVP</li>
<li id='slide2'>encontrarás los mejores</li>
<li id='slide3'>cursos online de programación</li>
<li id='slide4'>y aprenderás de la mano</li>
<li id='slide5'>de los mejores profesionales</li>
<li id='slide6'>extra 6</li>
<li id='slide7'>extra 7</li>
<li id='slide8'>extra 8</li>
</ul>
<nav>
<ul class='menu'>
<li><a href='#slide1'>Diapositiva 1</a></li>
<li><a href='#slide2'>Diapositiva 2</a></li>
<li><a href='#slide3'>Diapositiva 3</a></li>
<li><a href='#slide4'>Diapositiva 4</a></li>
<li><a href='#slide5'>Diapositiva 5</a></li>
<li><a href='#slide6'>Diapositiva 6</a></li>
<li><a href='#slide7'>Diapositiva 7</a></li>
<li><a href='#slide8'>Diapositiva 8</a></li>
</ul>
</nav>
</body>
</html>
En línea
