framework html

Página 1

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/request"></script>

<script type="text/javascript" src="js/jquery-3.4.1.min"></script>

<script type="text/javascript" src="js/jquery.min"></script>

<style>

* {

margin:0;

padding:0;

}

header{

width:100%;

height:50px;

position:absolute;

background-color:#5b859a;

}

.menu-icon{

position:absolute;

font-size:25px;

font-weight:bold;

padding:5px;

width: 40px;

height: 40px;

text-align:center;

background-color:#5b859a;

color:#fff;

cursor:pointer;

transition:all .4s;

left:300px;

}

.menu-icon:hover{

background-color:#fff;

color:#5b859a;

}

#chk:checked ~.bg{

display:block;

}

#chk:checked ~ #principal{

transform:translateX(300px);

box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);

}

#chk{

display:none;

}

.menu{

height:100%;

position:absolute;

background-color:#222;

transition:all .2s;

top:0;

overflow:hidden;

}

#principal{

width:300px;

left:-300px;

transition:all .3s;

}

ul{

list-style:none;

background-color: #303030;

}

ul li a{

display:block;

font-size:18px;

font-family:'Arial';

padding:10px;

border-bottom: solid 1px #000;

text-decoration:none;

color:#ccc;

transition:all .2s;

}

ul li span{

float:right;

padding-right: 10px;}

ul li a:hover{

background-color:#5b859a;

}

.voltar{

margin-top: 60px;

background-color: #111;

border-left: #444 solid 5px;

}

.bg{

width:100%;

height:100%;

left:0;

top:0;

position:fixed;

background-color: rgba(0,0,0,.6);

display:none;

}

#cursos,

#contato{

width:250px;

left:-250px;

}

#cursos:target,

#contato:target {

transform:translateX(250px);

box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.5);

}

</style>

<title>Curso Guanabara</title>

</head>

<body>

<header>

</header>

<input type="checkbox" id="chk">

<label for="chk" class="menu-icon">&#9776;</label>

<div class="bg"></div>

<nav class="menu" id="principal">

<ul>

<li><a href="" class="voltar">Voltar</a></li>

<li><a href="#">Home</a></li>

<li><a href="#">Fórum</a></li>

<li><a href="#cursos">Cursos<span>+</span></a></li>

<li><a href="#">Sobre</a></li>

<li><a href="#contato">Contato<span>+</span></a></li>

</ul>

</nav>

<nav class="menu" id="cursos">

<ul>

<li><a href="#" class="voltar">Voltar</a><li>

<li><a href="#">PHP</a></li>

<li><a href="#">Ruby</a></li>

<li><a href="#">Python</a></li>

</ul>

</nav>

<nav class="menu" id="contato">

<ul>

<li><a href="#" class="voltar">Voltar</a><li>

<li><a href="#">Email</a></li>

<li><a href="#">Facebook</a></li>

<li></li>

</ul>

</nav>

</body>

</html>

Página 2

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/request"></script>

<script type="text/javascript" src="js/jquery-3.4.1.min"></script>

<script type="text/javascript" src="js/jquery.min"></script>

<style>

*{

margin: 0;

padding: 0;

}

body{

background-color: #ddd;

font-family: 'Roboto Condensed';

}

.nav_tabs{

width: 600px;

height: 400px;

margin: 100px auto;

background-color: #fff;

position: relative;

}

.nav_tabs ul{

list-style: none;

}

.nav_tabs ul li{

float: left;

}

.tab_label{

display: block;

width: 100px;

background-color: #363b48;

padding: 25px;

font-size: 20px;

color:#fff;

cursor: pointer;

text-align: center;

}

.nav_tabs .rd_tab {

display:none;

position: absolute;

}

.nav_tabs .rd_tab:checked ~ label {

background-color: #e54e43;

color:#fff;

}

.tab-content{

border-top: solid 5px #e54e43;

background-color: #fff;

display: none;

position: absolute;

height: 320px;

width: 600px;

left: 0;

}

.rd_tab:checked ~ .tab-content{

display: block;

}

.tab-content h2{

padding: 10px;

color: #87d3b7;

}

.tab-content article{

padding: 10px;

color: #555;

}

</style>

<title>Curso Guanabara</title>

</head>

<body>

<nav class="nav_tabs">

<ul>

<li>

<input type="radio" id="tab1" class="rd_tab" name="tabs" checked>

<label for="tab1" class="tab_label">Tab 1</label>

<div class="tab-content">

<h2>Title 1</h2>

<article>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum, felis sed feugiat tristique, massa nisl pretium ligula, vel finibus risus lacus at mauris. Proin vel mollis augue. Sed non auctor ipsum, congue facilisis diam. Proin sed enim odio. Ut libero mi, luctus sit amet tincidunt a, ullamcorper sit amet ex. Duis faucibus condimentum lectus, id accumsan diam posuere eu. Cras eu blandit dui, vitae lacinia velit. Aliquam gravida massa a velit pulvinar, ut placerat sem tristique. Vivamus dictum, quam nec pharetra iaculis, risus velit dapibus nunc, quis lobortis sapien ligula mollis nunc. Praesent elementum rutrum tincidunt. Phasellus at lacinia lectus.

</article>

</div>

</li>

<li>

<input type="radio" name="tabs" class="rd_tab" id="tab2">

<label for="tab2" class="tab_label">Tab 2</label>

<div class="tab-content">

<h2>Title 2</h2>

<article>

Sed sit amet mauris vitae lorem pretium congue. Donec pulvinar auctor est, a porta ipsum vulputate ac. Ut sit amet sollicitudin ante. Sed gravida nulla et nibh consequat sagittis. Donec eu justo eu tortor elementum scelerisque. Mauris mollis volutpat tellus, id volutpat massa ultricies vel. Donec mollis arcu leo, ac ullamcorper eros viverra ut. Aliquam cursus justo nec purus condimentum, eu dignissim nunc mattis. Sed fermentum sollicitudin felis mattis malesuada. Quisque tempor tellus a odio euismod, non suscipit justo laoreet. Curabitur vel urna lorem. Pellentesque semper justo leo, in tristique ex porta at. Sed justo massa, lobortis quis hendrerit ac, eleifend vitae tellus.

</article>

</div>

</li>

<li>

<input type="radio" name="tabs" class="rd_tab" id="tab3">

<label for="tab3" class="tab_label">Tab 3</label>

<div class="tab-content">

<h2>Title 3</h2>

<article>

Integer at ligula eget turpis elementum ultrices eget quis tortor. Duis posuere lorem justo, ut malesuada tortor tempus a. Curabitur pellentesque ultricies consectetur. Maecenas diam lorem, hendrerit eget sem ut, tincidunt vulputate ipsum. In vel enim et erat sagittis eleifend vel eu nunc. In hac habitasse platea dictumst. Integer tincidunt, augue at posuere eleifend, lacus quam hendrerit risus, aliquam sollicitudin ligula tellus quis elit. Proin varius fringilla vehicula. Phasellus mollis sollicitudin orci, id fringilla magna volutpat non. Nullam sed luctus nisl.

</article>

</div>

</li>

<li>

<input type="radio" name="tabs" class="rd_tab" id="tab4">

<label for="tab4" class="tab_label">Tab 4</label>

<div class="tab-content">

<h2>Title 4</h2>

<article>

Morbi condimentum, ligula in pretium feugiat, erat turpis egestas nisl, eu rutrum felis tortor eget tellus. Donec bibendum finibus sapien id vehicula. Nullam tempus, leo ut tristique pharetra, ligula sapien dictum nunc, eget lacinia mauris tellus sit amet ligula. Etiam posuere metus elementum sem feugiat laoreet. Curabitur efficitur tellus sed felis feugiat vehicula. Ut congue dui at ligula tempus accumsan. Sed ut lacus imperdiet erat aliquam pharetra. Phasellus ultricies nisi mauris, quis tincidunt tortor viverra id. Ut sit amet finibus mi, id fringilla ex. Fusce hendrerit purus nec ipsum volutpat, eu condimentum eros congue. Sed at leo tortor. In a ultrices sapien. Nulla posuere urna id urna semper aliquet.

</article>

</div>

</li>

</ul>

</nav>

</body>

</html>

Página 3

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/request"></script>

<script type="text/javascript" src="js/jquery-3.4.1.min"></script>

<script type="text/javascript" src="js/jquery.min"></script>

<style>

*{

margin:0;

padding:0;

}

body{

background-color:#e8e8e8;

}

nav{

width:400px;

height:auto;

font-family:'Open Sans',sans-serif ;

margin: 100px auto;

overflow:hidden;

}

.item input{

display:none;

}

.item label{

display:block;

padding:10px;

background-color:#434343;

font-size:20px;

color:#fff;

cursor:pointer;

border-bottom:solid 2px #aaa;

}

.item label span{

padding-left:240px;

transform:rotateX(45deg);

}

.item label:hover{

background-color:#f2673a;

}

.item ul{

overflow:hidden;

max-height:0;

transition: all .4s;

background-color:#fff;

width:100%;

}

.item ul li a{

width:100%;

height: 20px;

background-color:#fafafa;

display:block;

text-decoration:none;

color: #333;

border-bottom: 2px solid #aaa;

padding: 10px;

}

.item ul li a:hover{

background-color:#9CF;

}

.item input:checked ~ ul{

height:auto;

max-height:200px;

transition: all .4s linear;

}

.item input:checked ~ label span{

}

</style>

<title>Curso Guanabara</title>

</head>

<body>

<nav>

<div class="item">

<input type="checkbox" id="check1">

<label for="check1">Menu</label>

<ul>

<li><a href="">Home</a></li>

<li><a href="">Sobre</a></li>

</ul>

</div>

<div class="item">

<input type="checkbox" id="check2">

<label for="check2">Cursos</label>

<ul>

<li><a href="">Java</a></li>

<li><a href="">Banco de Dados</a></li>

<li><a href="">Photoshop</a></li>

</ul>

</div>

<div class="item">

<input type="checkbox" id="check3">

<label for="check3">Material</label>

<ul>

<li><a href="">Artigos</a></li>

<li><a href="">Vídeos</a></li>

</ul>

</div>

</nav>

</body>

</html>

Página 4

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/request"></script>

<script type="text/javascript" src="js/jquery-3.4.1.min"></script>

<script type="text/javascript" src="js/jquery.min"></script>

<style>

*{

margin: 0px;

padding: 0px;

}

body{

background-color: #f9f9f9;

}

#icone {

cursor: pointer;

padding: 15px;

position: absolute;

z-index: 1;

}

#check{

display: none;

background-color: #f00;

}

.barra{

background-color: #333;

height: 100%;

width: 300px;

position: absolute;

left: -300px;

transition: all .2s linear;

}

.barra .link{

list-style: none;

background-color: #494950;

}

nav{

width: 100%;

position: absolute;

top: 60px;

}

nav a{

text-decoration: none;

}

.link{

color: #f4f4f9;

font-family: 'Arial';

font-size: 12pt;

padding: 20px;

border-bottom: 2px solid #222;

transition: all .2s linear;

opacity: 0;

margin-top: 200px;

}

.link:hover{

background-color: #050542;

}

#check:checked ~ .barra nav a .link{

opacity: 1;

margin-top: 0;

transition-delay: .2s;

}

#check:checked ~ .barra{

transform: translateX(300px);

}

</style>

<style>

body{

background-color: #ccc;

}

.objeto{

width: 200px;

height: 200px;

background-color: #a52a2a;

margin:150px auto;

cursor: pointer;

}

.objeto:hover{

animation: bounce .4s;

}

@keyframes bounce{

10%, 40%, 70%{

transform: translateY(-10px);

}

25%, 55%, 85%{

transform: translateY(10px);

}

}

</style>

<title>Curso Guanabara</title>

</head>

<body>

<input type="checkbox" id="check">

<label for="check" id="icone"><img src="https://i.imgur.com/RWHvwPE.png"/></label>

<div class="barra">

<nav>

<a href=""><div class="link">Home</div></a>

<a href=""><div class="link">Tutoriais</div></a>

<a href=""><div class="link">Downloads</div></a>

<a href=""><div class="link">Eventos</div></a>

<a href=""><div class="link">Contato</div></a>

</nav>

</div>

<div class="objeto"></div>

</body>

</html>