Skip to content

Instantly share code, notes, and snippets.

@keviocastro

keviocastro/index.html

Last active May 25, 2018 21:15
Show Gist options
  • Save keviocastro/fede68046b8f991e127e78b3b53dfd79 to your computer and use it in GitHub Desktop.
Save keviocastro/fede68046b8f991e127e78b3b53dfd79 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="./styles.css" rel="stylesheet">
</head>
<div class="cabecario">
<div class="esquerda">
<div class="logo">
<img src="./imgs/logos_turmacheia.png">
<span>Aula Cheia</span>
</div>
</div>
<div class="centro">
<span>PRÓXIMAS AULAS</span>
</div>
</div>
<div class="conteudo">
<div class="lista-aulas">
<div class="aula">
<div class="nome-aula">
<span>ZUMBA</span>
</div>
<div class="detalhes">
<span>19:00 - 20:00</span>
<span>PRINCIPAL</span>
</div>
<div class="professor">
<img src="https://randomuser.me/api/portraits/men/51.jpg">
<div class="nome-professor">
<span class="titulo">PROFESSOR</span>
<span class="nome">RENATO ASSUNÇÃO</span>
</div>
</div>
</div>
<div class="aula" style="
background: linear-gradient(to bottom, black, transparent 30%), linear-gradient(to top, black, transparent), url('./imgs/Z2.jpg'); background-position: center;
">
<div class="nome-aula">
<span>MUAY THAI</span>
</div>
<div class="detalhes">
<span>19:00 - 20:00</span>
<span>PRINCIPAL</span>
</div>
<div class="professor">
<img src="https://randomuser.me/api/portraits/men/52.jpg">
<div class="nome-professor">
<span class="titulo">PROFESSOR</span>
<span class="nome">LAILAN ROGÉRIO</span>
</div>
</div>
</div>
</div>
</html>
Raw
styles.css
body {
font-family: 'Lato', sans-serif;
margin: 0px;
padding: 0px;
}
.cabecario {
display: flex;
height: 115px;
background-color: #490247;
align-items: center;
justify-content: flex-start;
}
.cabecario .esquerda {
display: flex;
align-items: center;
width: 350px;
height: 100%;
background-color: #992487;
padding-left: 32px;
}
.cabecario .esquerda span {
color: #FFFFFF;
font-size: 40.52px;
font-weight: bold;
font-style: italic;
}
.cabecario .centro {
display: flex;
flex-grow: 1;
justify-content: center;
}
.cabecario .centro span {
color: #FFFFFF;
font-size: 64px;
font-weight: bold;
font-style: italic;
}
.conteudo {
background-image: url('./imgs/backgroundCrossBlack.jpg');
height: 100vh;
min-height: 1027px;
}
.lista-aulas {
display: flex;
padding-top: 51px;
padding-left: 45px;
}
.lista-aulas .aula {
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, black, transparent 30%), linear-gradient(to top, black, transparent), url('./imgs/Z1.jpg');
background-repeat: no-repeat;
background-position: center;
width: 524px;
height: 861px;
border-radius: 10px;
margin-left: 54px;
}
.lista-aulas .aula .nome-aula {
align-self: center;
font-size: 64px;
color: #ffffff;
font-style: italic;
font-weight: bold;
margin-top: 20px;
}
.lista-aulas .aula .detalhes {
display: flex;
justify-content: space-around;
font-size: 29;
color: #ffffff;
font-style: italic;
font-weight: bold;
}
.lista-aulas .professor {
display: flex;
margin-left: 25px;
margin-right: 25px;
padding-top: 550px;
}
.lista-aulas .professor img {
border: 3px solid #FFFFFF;
border-radius: 50%;
}
.lista-aulas .professor .nome-professor {
display: flex;
flex-direction: column;
margin-left: 12px;
}
.lista-aulas .professor .nome-professor .titulo {
font-size: 20px;
color: #FF1428;
font-weight: bold;
font-style: italic;
}
.lista-aulas .professor .nome-professor .nome {
font-size: 38px;
color: #FFFFFF;
font-weight: bold;
font-style: italic;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment