Skip to content

Instantly share code, notes, and snippets.

@fskinner

fskinner/index.html

Created September 9, 2019 16:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fskinner/f00402af7ca3d2e8f54f25070e0a1286 to your computer and use it in GitHub Desktop.
Save fskinner/f00402af7ca3d2e8f54f25070e0a1286 to your computer and use it in GitHub Desktop.
Download ZIP
cheerland 2020
Raw
index.html
<body>
<section>
<a href="#">
<img class="main-logo" src="https://www.cheerland.com.br/img/logo.png" alt="Cheerland Logo">
</a>
<h1>Vem aí <b>Cheerland Camp</b> 2020!</h1>
<p class="subtitle"> Veja como foi nossa última edição:</p>
<div class="iframe-container">
<iframe class="responsive-iframe"src="https://player.vimeo.com/video/344910388" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<p class="video-subtitle">
<a href="https://vimeo.com/344910388">CheerLand Camp 2019</a> from <a href="https://vimeo.com/44meiaproducoes">44meia Produções</a> on <a href="https://vimeo.com">Vimeo</a>.
</p>
</section>
<footer>
<div>
<img src="https://www.cheerland.com.br/img/logo.png" style="width:150px;">
<p>© Copyright 2018 <b>CheerLand</b> | All Rights Reserved</p>
<ul>
<li>
<a href="https://www.facebook.com/cheerlandcamp">
<i class="fab fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/cheerlandcamp">
<i class="fab fa-instagram" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="mailto:atendimento@cheerland.com.br">
<i class="fa fa-envelope" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</footer>
</body>
Raw
style.css
body {
font-family: 'Abel', sans-serif;
font-size: 16px;
font-weight: 300;
color: #c2d4f8;
background-color: #1e1d32;
text-align: center;
}
a {
text-decoration: none;
color: #337ab7;
}
h1 {
text-transform: uppercase;
font-size: 40px;
font-weight: 300;
line-height: 1em;
}
.subtitle {
color: #7c69e3;
font-size: 16px;
margin-bottom: 4em;
}
.main-logo {
max-width: 245px;
}
section {
padding: 1.5em 1.5em;
}
.iframe-container {
text-align: center;
position: relative;
overflow: hidden;
padding-top: 56.25%
}
.responsive-iframe {
position: absolute;
top: 0;
left: 5%;
width: 90%;
height: 100%;
max-width: 1080px;
border: 0;
}
.video-subtitle {
padding: 2em 1em;
}
footer {
/* background-image: url(https://www.cheerland.com.br/assets/images/footer-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
opacity: 0.4; */
display: block;
position: relative;
padding: 2em 2em;
}
footer::after {
content: "";
background: url(https://www.cheerland.com.br/assets/images/footer-bg.jpg);
background-size: cover;
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
ul {
list-style: none;
display: flex;
justify-content: center;
align-content: center;
padding: 1em;
}
ul > li {
padding: 0 1em;
}
@media only screen and (min-width: 1024px) {
.responsive-iframe { left: 5%; }
}
@media only screen and (min-width: 1200px) {
.responsive-iframe { left: 8%; }
}
@media only screen and (min-width: 1400px) {
.responsive-iframe { left: 15%; }
}
@media only screen and (min-width: 1500px) {
.responsive-iframe { left: 17%; }
}
@media only screen and (min-width: 1600px) {
.responsive-iframe { left: 22%; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment