ronaldsmartin/index.html

## index.html
<!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>

## popcode.json
{"hiddenUIComponents":["console","editor.javascript"]}

## styles.css
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;
    }
}
	<!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>
	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;
	}
	}