Skip to content

Instantly share code, notes, and snippets.

@ronaldsmartin
Created March 21, 2018 06:39
Show Gist options
  • Save ronaldsmartin/f92210be1de5bf5b45c98f2a70fa4d83 to your computer and use it in GitHub Desktop.
Save ronaldsmartin/f92210be1de5bf5b45c98f2a70fa4d83 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=f92210be1de5bf5b45c98f2a70fa4d83
<!DOCTYPE html>
<html>
<head>
<title>Barack Obama Carpool Karaoke</title>
</head>
<body>
<div class="content">
<div class="main">
<div id="header">
<h1>Petition for Barack Obama Carpool Karoke</h1>
<h2>We want to hear him sing! 🎤</h2>
</div>
<div id="pics">
<img src="https://media.giphy.com/media/zN0kDsnH3fuLe/giphy.gif">
<img src="https://www.lessonly.com/wp-content/uploads/2015/01/obama-employee-engagement.gif">
<img src="https://www.reactiongifs.us/wp-content/uploads/2013/10/oh_yeah_obama.gif">
</div>
<div id="eagles">
<h2>"If I can do it, you can too, Barack."</h2>
<p>- Michelle Obama</p>
<iframe class="videoEmbed" src="https://www.youtube-nocookie.com/embed/ln3wAdRAim4?rel=0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="quote">
<h2>"Yes we can."</h2>
<p>- Barack Obama</p>
</div>
</div>
<div id="subscribe">
<h2>Support our cause</h2>
<p>Follow us here to get the latest updates to show B.O. that we need this in our lives 🙏</p>
<button>Follow</button>
</div>
</div>
</body>
</html>
{"hiddenUIComponents":["console","editor.javascript"]}
body{
font-family:Tahoma, Geneva, sans-serif;
}
h1{
font-size: 50px;
}
h2{
font-size: 30px;
}
.content {
display: flex;
flex-direction: column;
}
#eagles h2 {text-shadow: 2px 2px #ff0000;}
p {
font-size: 20px;
}
#header, #subscribe, #eagles, #quote {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40px 0;
}
#header {
color: white;
background-image: url("https://obamadiary.files.wordpress.com/2016/04/dbqubwbv8hbwy.gif?w=788&h=443");
}
img {
border-radius: 50%;
}
#eagles {
background: blue;
color: white;
}
.videoEmbed {
width: 560px;
height: 315px;
}
#pics img{
width: 20%;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
#pics {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40px 0;
}
#pics img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
#quote {
background-color: #1b2c3a;
color: white;
}
/* Subscribe Section */
#subscribe {
background: #f5fc74;
justify-content: center;
padding: 60px;
border: 80px solid #fafcd1;
}
#subscribe button {
width: 300px;
height: 50px;
font-size: 20px;
background: blue;
color: white;
border-radius: 5px;
border: solid white 3px;
}
#subscribe button:hover {
background: #f5fc74;
color: black;
}
#subscribe h2 {
text-shadow: 2px 2px #FFFFFF;
}
@media only screen and (min-width: 1024px) {
/* For desktop: */
.main {
width: 80%;
}
#subscribe {
width: 20%;
}
.content {
display: flex;
flex-direction: row;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment