HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>CTW Homepage</title>
</head>
<body>

  <div class="container"> 
    <div id="logo_container">
      <img id="logo" src="https://i.imgur.com/Ua2gRs9.png"/>
    </div>
   <nav> 
  <ul class="sf-menu">
    <li><a href="#">Schedule</a>
      <ul>
        <li><a href="#">Calendar</a></li>
        <li><a href="#">Speakers</a></li>
      </ul>
    </li>
    <li><a href="#">Apply</a>
      <ul>
        <li><a href="#">Application</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Volunteer</a></li>
      </ul>
    </li>
    <li><a href="#">Sponsor</a>
      <ul>
        <li><a href="#">Application</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Overview</a></li>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Past CTW</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </li>
    <li><a href="#">Buy Tickets</a></li>
  </ul>
     </nav>
  </div>
  <div class="body_container">
    <div id="header_img">
      <h1 id="page_title">Creative Tech Week 2018</h1>
      <h4 id="top_about">CTW is a crowdsourced festival that brings top creative technologists together to meet,
discover new ideas, and show their work.</h4>
      <h2 id="date_time">May 3-12, 2017</h2> 
    </div>
    <div id="second_img"></div>
    <div id="apply_now_button"><a href="#"> Apply Today </a> </div>
    <div id="virtual_section">
      <h2 id="virtually_attend">Virtually Attend Creative Tech Week</h2>
      <iframe id="video" width="960" height="315" src="https://www.youtube.com/embed/88c_7BSmuJE" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
    </div>
    <div id="light_grey_container">
     <div id="spacer"></div>
    </div>
    <div id="card_left">
      <img id="left_img" src="https://i.imgur.com/LXhxwk4.png"/>
      <h3 id="performances">Performances</h3>
      <div id="orange_button">
        <h4 id="button_type"><a href="#">Learn More</a></h4>
      </div>
    </div>
    <div id="card_middle">
      <img id="left_img" src="https://i.imgur.com/yeI7BuY.png"/>
      <h3 id="performances">Conference Hub</h3>
      <div id="orange_button">
        <h4 id="button_type"><a href="#">Learn More</a></h4>
      </div>
    </div>
    <div id="card_right">
      <img id="left_img" src="https://i.imgur.com/t7d7UY1.png"/>
      <h3 id="performances">Mixed Reality Party</h3>
      <div id="orange_button">
        <h4 id="button_type"><a href="#">Learn More</a></h4>
      </div>
    </div>
    
    <div id="third_img"></div>
    <div id="sponsor_us"><a href="#"> Sponsor US </a> </div>
    <div id="sponsors"></div>
     <h2 id="about_sponsors">Previous sponsors include:</h2>
      <img id="sponsor_logos" src="https://i.imgur.com/aFnce5n.png"/>
  </div>
  
  <div id="footer">
      <img id="icons" src="https://i.imgur.com/7N1O952.png"/>
    <ul id="footer_type">
      <li class="float"><a href="#"> Contact Us</a></li>
      <li class="float"><a href="#">Work With Us</a></li>
      <li class="float"><a href="#">FAQ</a></li>
      <li class="float"><a href="#">Privacy Policy</a></li>
      <li class="float"><a href="#">Code Of Conduct</a></li>
    </ul>
    <div id="copyright">&copy; 2017 Creative Tech week</div>
    </div>

</body>
</html>

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}

/*** DEMO SKIN ***/
.sf-menu {
	float: left;
	margin-bottom: 1em;
    width: 720px;
}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em; /* allow long menu items to determine submenu width */
	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
	border-left: 1px solid #fff;
	border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
	border-top: 1px solid rgba(255,255,255,.5);
	padding: .75em 1em;
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.sf-menu a {
	color: #13a;
}
.sf-menu li {
	background: #BDD2FF;
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu ul li {
	background: #AABDE6;
}
.sf-menu ul ul li {
	background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: #CFDEFF;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}

/* my CSS */

.container {
  background-color: #000000;
  width: 960px;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  
  
}

nav {
  float: left;
}

.sf-menu a {
	color: #D3D3D3;
	border-left: 1px solid black;
	border-top: 1px solid black; /* fallback colour must use full shorthand */
	border-top: 1px solid black;
	padding: .75em 1em;
	text-decoration: none;
	zoom: 1; /* IE7 */
}

.sf-menu li {
	background: black;
}

.sf-menu ul li {
	background: black;
}

.sf-menu li:hover,
.sf-menu li.sfHover {
	background: darkblue;
}

.sf-menu > li {
	float: left;
    margin-left: 30px;
}

.logo_container{
  float: left;
  background-color: #000000;
  width: 960px;
  
}

.logo{
  float: left;
}

nav{
  margin-left: 25%;
  width: 720px;
  margin-top: -80px;
  background-color: #000000;
}

#footer{
  margin-top: 6%;
  background-color: #000000;
  width: 960;
}

#icons{
  text-align: center;
  margin: auto;
  display: block;
  width: 150;
  padding-top: 4%;
}

#footer_type{
  color: #D3D3D3;
  font-family: 'Roboto', sans-serif;
  list-style: none;
  margin-left: 18%;
  margin-top: 6%;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
  font-size: 15px;
  
}

.float{
  float: left;
  padding-left: 5%;
  display: block;
  text-align: center;
}

#copyright{
  color: #D3D3D3;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  font-size: 14px;
  margin-top: 5%;
  padding-bottom: 5%;
}

.float a{
  text-decoration: none;
  color: #D3D3D3;
}

.body_container{
  font-family: 'Roboto', sans-serif;
}

#header_img{
  background-image: url("https://i.imgur.com/n4TCEEV.jpg");
  width: 960px;
  height: 392px;
  background-size: contain;
  color: #FFFFFF;
}

#page_title{
  text-transform: uppercase;
  float: left;
  width: 300px;
  margin-left: 17%;
  font-size: 35;
  margin-top: 9%;
}

#top_about{
  float: left;
  font-weight: 300;
  width: 300px;
  margin-top: 22%;
  margin-left: -296px;
}

#date_time{
  float: left;
  margin-top: 33%;
  margin-left: -300;
  font-weight: 400;
  text-transform: uppercase;
}

#apply_now_button{
  width: 960;
  text-align: center;
  text-transform: uppercase;
  margin-top: -180px;
  width: 200px;
  padding-top: 10px;
  font-size: 30px;
  color: #FFFFFF;
  border: 2px solid white;
  padding-bottom: 10px;
  margin-left: 14%;
  clear: both;
  font-weight: 500;
  padding-right: 10px;
  padding-left: 10px;
}

a{
  text-decoration: none;
  color: white;
}

#second_img{
  width: 960px;
  height: 266px;
  background-image: url("https://i.imgur.com/oPEZ5in.png");
  background-size: contain;
}

#light_grey_container{
  background-image: url("https://i.imgur.com/5hPmZ4V.png");
  height: 600px;
  width: 960;
}

#about_festival{
  color: #000000;
  margin-top: 200px;
  font-family: 'Raleway', sans-serif;
  margin-left: 13.5%;
}

#about_description{
  font-weight: 300;
  width: 450px;
  color: #808080;
  margin-left: 13.5%;
  font-size: 15px;
}

#card_left{
  width: 260px;
  background-color: #FFFFFF;
  height: 300px;
  border: 1px solid grey;
  margin-top: -430px;
  margin-left: 2%;
  float: left;
}

#left_img{
  width: 260;
}

#performances{
  text-transform: uppercase;
  text-align: center;
}

#orange_button{
  background-color: #FFA500;
  width: 100px;
  text-align: center;
  margin-left: 32%;
}

#button_type{
  padding: 8px;
}

#card_middle{
  width: 260px;
  background-color: #FFFFFF;
  height: 300px;
  border: 1px solid grey;
  margin-top: -430px;
  margin-left: 10%;
  float: left;
}

#card_right{
  width: 260px;
  background-color: #FFFFFF;
  height: 300px;
  border: 1px solid grey;
  margin-top: -430px;
  margin-left: 58%;
  float: left;
}

#virtual_section{
  background-image: url("https://i.imgur.com/JMlygj8.png");
  height: 283px;
  width: 960px;
  background-size: contain;
  margin-top: 0;
}

#virtually_attend{
  color: #FFFFFF;
  text-align: center;
  font-size: 35;
  width: 350px;
  margin-left: 32%;
  padding-top: 6%;
  margin-top: 8%;
}

#video{
  margin-top: 10%;
}

#blue_img{
  width: 960px;
  margin-top: -30px;
}

#third_img{
  background-image: url("https://i.imgur.com/D710uCK.png");
  height: 295px;
  width: 960px;
  background-size: contain;
  margin-top: -60;
  clear: both;
}

#sponsor_us{
  width: 960;
  text-align: center;
  text-transform: uppercase;
  margin-top: -200px;
  width: 200px;
  padding-top: 10px;
  font-size: 30px;
  color: #FFFFFF;
  border: 2px solid white;
  padding-bottom: 10px;
  margin-left: 5%;
  clear: both;
  font-weight: 500;
  padding-right: 10px;
  padding-left: 10px;
}

#sponsor_logos{
  width: 960;
  margin-bottom: -5%;
}

#sponsors{
  background-image: url("https://i.imgur.com/AjO5a4m.png");
  background-size: contain;
  width: 960px;
  height: 392px;
  margin-top: 138px;
}

#about_sponsors{
  color: #FFFFFF;
  margin-top: -310px;
  font-family: 'Raleway', sans-serif;
  margin-left: 5%;
}

#spacer{
  margin-top: 22%;
}

#card_middle{
  margin-left: 22.5%;
}

#card_right{
  margin-left: 42.5%;
}

// Write JavaScript here 
;!function(a,b){"use strict";var c=function(){var c={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},d=function(){var b=/^(?![\w\W]*Windows Phone)[\w\W]*(iPhone|iPad|iPod)/i.test(navigator.userAgent);return b&&a("html").css("cursor","pointer").on("click",a.noop),b}(),e=function(){var a=document.documentElement.style;return"behavior"in a&&"fill"in a&&/iemobile/i.test(navigator.userAgent)}(),f=function(){return!!b.PointerEvent}(),g=function(a,b,d){var e,f=c.menuClass;b.cssArrows&&(f+=" "+c.menuArrowClass),e=d?"addClass":"removeClass",a[e](f)},h=function(b,d){return b.find("li."+d.pathClass).slice(0,d.pathLevels).addClass(d.hoverClass+" "+c.bcClass).filter(function(){return a(this).children(d.popUpSelector).hide().show().length}).removeClass(d.pathClass)},i=function(a,b){var d=b?"addClass":"removeClass";a.children("a")[d](c.anchorClass)},j=function(a){var b=a.css("ms-touch-action"),c=a.css("touch-action");c=c||b,c="pan-y"===c?"auto":"pan-y",a.css({"ms-touch-action":c,"touch-action":c})},k=function(a){return a.closest("."+c.menuClass)},l=function(a){return k(a).data("sfOptions")},m=function(){var b=a(this),c=l(b);clearTimeout(c.sfTimer),b.siblings().superfish("hide").end().superfish("show")},n=function(b){b.retainPath=a.inArray(this[0],b.$path)>-1,this.superfish("hide"),this.parents("."+b.hoverClass).length||(b.onIdle.call(k(this)),b.$path.length&&a.proxy(m,b.$path)())},o=function(){var b=a(this),c=l(b);d?a.proxy(n,b,c)():(clearTimeout(c.sfTimer),c.sfTimer=setTimeout(a.proxy(n,b,c),c.delay))},p=function(b){var c=a(this),d=l(c),e=c.siblings(b.data.popUpSelector);return d.onHandleTouch.call(e)===!1?this:void(e.length>0&&e.is(":hidden")&&(c.one("click.superfish",!1),"MSPointerDown"===b.type||"pointerdown"===b.type?c.trigger("focus"):a.proxy(m,c.parent("li"))()))},q=function(b,c){var g="li:has("+c.popUpSelector+")";a.fn.hoverIntent&&!c.disableHI?b.hoverIntent(m,o,g):b.on("mouseenter.superfish",g,m).on("mouseleave.superfish",g,o);var h="MSPointerDown.superfish";f&&(h="pointerdown.superfish"),d||(h+=" touchend.superfish"),e&&(h+=" mousedown.superfish"),b.on("focusin.superfish","li",m).on("focusout.superfish","li",o).on(h,"a",c,p)};return{hide:function(b){if(this.length){var c=this,d=l(c);if(!d)return this;var e=d.retainPath===!0?d.$path:"",f=c.find("li."+d.hoverClass).add(this).not(e).removeClass(d.hoverClass).children(d.popUpSelector),g=d.speedOut;if(b&&(f.show(),g=0),d.retainPath=!1,d.onBeforeHide.call(f)===!1)return this;f.stop(!0,!0).animate(d.animationOut,g,function(){var b=a(this);d.onHide.call(b)})}return this},show:function(){var a=l(this);if(!a)return this;var b=this.addClass(a.hoverClass),c=b.children(a.popUpSelector);return a.onBeforeShow.call(c)===!1?this:(c.stop(!0,!0).animate(a.animation,a.speed,function(){a.onShow.call(c)}),this)},destroy:function(){return this.each(function(){var b,d=a(this),e=d.data("sfOptions");return e?(b=d.find(e.popUpSelector).parent("li"),clearTimeout(e.sfTimer),g(d,e),i(b),j(d),d.off(".superfish").off(".hoverIntent"),b.children(e.popUpSelector).attr("style",function(a,b){return b.replace(/display[^;]+;?/g,"")}),e.$path.removeClass(e.hoverClass+" "+c.bcClass).addClass(e.pathClass),d.find("."+e.hoverClass).removeClass(e.hoverClass),e.onDestroy.call(d),void d.removeData("sfOptions")):!1})},init:function(b){return this.each(function(){var d=a(this);if(d.data("sfOptions"))return!1;var e=a.extend({},a.fn.superfish.defaults,b),f=d.find(e.popUpSelector).parent("li");e.$path=h(d,e),d.data("sfOptions",e),g(d,e,!0),i(f,!0),j(d),q(d,e),f.not("."+c.bcClass).superfish("hide",!0),e.onInit.call(this)})}}}();a.fn.superfish=function(b,d){return c[b]?c[b].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof b&&b?a.error("Method "+b+" does not exist on jQuery.fn.superfish"):c.init.apply(this,arguments)},a.fn.superfish.defaults={popUpSelector:"ul,.sf-mega",hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:!0,disableHI:!1,onInit:a.noop,onBeforeShow:a.noop,onShow:a.noop,onBeforeHide:a.noop,onHide:a.noop,onIdle:a.noop,onDestroy:a.noop,onHandleTouch:a.noop}}(jQuery,window);

jQuery(document).ready(function() {
		jQuery('ul.sf-menu').superfish();
	});