interim

In this example below you will see how to do a interim with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by erika-harvey, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright erika-harvey ©

Technologies

  • HTML
  • CSS
  • JavaScript
    
<html>
  <head>
    <meta charset="utf-8">
    <title>RoutineSync</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="erika harvey">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet"> 
    
    
    <!--Font-->
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
    
    
    
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
      
      <!-- Fav and touch icons -->
      <link rel="shortcut icon" href="ico/favicon.ico">
      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
      <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">


      

    <!-- SCRIPT 
    ============================================================-->  
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script  src="https://use.fontawesome.com/2c555c4b0d.js"></script>
      
      
  </head>
  <body>
  <!--HEADER ROW-->
  <div id="header-row">
    <div class="container">
      <div class="row span4">
		  <div class = "span 4"style="background-color:whitesmoke;margin-top:4%;padding:4%;">
              <!--LOGO-->
            <logo> <a style = "font-size:2em;color:#34495E;" class="brand" href="#"><img src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/224685/cropped-logo2large%20(1).jpg"style = "width:75px;height50px;" /> </a></logo>
             </div>
		</div>
              <!-- /LOGO -->
		<div class="span4"></div>
		
            <!-- MAIN NAVIGATION -->  
            
<!--                 <div class="navbar  pull-right">
                  <div class="navbar-inner"> -->
<!--                     <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> -->
<!--                     <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        
                     

                        <li><a href="#features">Features</a></li>
                        
                        <li><a href="contact.html">Contact</a></li>
                 
                    </ul>
                  </div> -->

<!--                   </div>
                </div>
              </div>
            <!-- MAIN NAVIGATION -->  
     
  
	  
		
	
  <!-- /HEADER ROW -->
<div class ="navigation">
	<div class="span12">
	<ul>
		<li><a href="#features">Features</a></li>
		<li><a href = "#contact">Contact </a></li>
		</div>
	  </div>
				  </div>
		</div>
	  </div>
	  
<section class="main" style = "width: 100%;!Important">
 
  <div class="container">

  <!--Carousel
  ==================================================-->

  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">

      <div class="active item">
        <div class="container">
          <div class="row">
           
              <div class="span4 col-sm-4">

                <div class="carousel-caption">
                      <h1 style = 'font-weight:600;color:black;'>Keep Your Patients Safe And Your Facility In Compliance</h1>
                      <p class="lead"style = "color:#191919;">
                      <a class="btn btn-large " style = "color: whitesmoke;background-color:#E30B5D;border:4px outset #70002B; font-weight:bold;padding:5%;margin-top:-40px;" href="#">Sign Up For Beta Release</a>
                </div>

              </div>
			  <div class = "span1"></div>
                <div class="span4 col-sm-4">
					<iframe id = "dad" width="560" height="315" src="https://www.youtube.com/embed/JL8tMlcTLtg" frameborder="0" allowfullscreen alt="explainer video"></iframe>
				
					
					
				
			</div>

          </div>
        </div>
       
<!-- en></iframe> -->


      </div>

      <div class="item">
       
        <div class="container">
          <div class="row">
            
              <div class="span4">

                <div class="carousel-caption">
                      <h1 style = "color:black;font-weight:600;">Care Staff Has Another Pair Of Eyes </h1>
					<p style = "color:#191919;">.</p>
                     <a class="btn btn-large " style = "margin-bottom:4%;color: whitesmoke;background-color:#E30B5D;border:4px outset #70002B; font-weight:bold;padding:8%;" href="#" >Sign up To Be One Of The First With Our Beta Roll Out</a>
                </div>

              </div>
			  <div class = "span2"></div>
                <div class="span4"> <iframe width="420" height="500" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/224685/Screen%20Shot%202017-01-22%20at%2012.48.32%20PM.png" frameborder="0" allowfullscreen></iframe></div>

          </div>
        </div>

      </div>





    </div>
       <!-- Carousel nav -->
      <a class="carousel-control left " href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"></i></a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"></i></a>
        <!-- /.Carousel nav -->

  </div>
    <!-- /Carousel -->



<!-- Feature 
  ==============================================-->


  <div class="row feature-box">
      <div class="span1 ">
		  <div class="span10 cnt-title">
       <h1 style = "font-weight:600;"><a style = "font-size:2em;color:#fff;" class="brand" href="#"><img src = ""/> Prevent Wandering In Your Facility</h1> 
        <h2 style="color:white;">Become Proactive Instead of Reactive And Lower Your Liability </h2>        
      </div>
		  <div class = "span1"></div>
	  </div>
	  </div>
	  <div class = "row "></div>
		  <div class="container">
	  <!--PAGE TITLE-->

	<div class="row">
		<div class="span12">
		<div class="page-header">
				<h1 style = "font-weight:600;color:black;">
				Features
			</h1>
		</div>
		</div>
	</div>

  <!-- /. PAGE TITLE-->

	<div class="row">
		
		<div class="col-sm-4 ">
			<div class="media">
				 <a href="#" class="pull-left"><img src="https://goo.gl/FsRb9P" id = "first" class="media-object" alt='' /></a>
			
		
			  
				
				
				<div class="media-body">
					<h4 class="media-heading" style = "color:black;font-weight:600;">
						Find The Patterns
					</h4> 
					<p class = "def">Easily see patterns that emerge and discover the triggers
					</p>
					


				</div>
			</div>
					
		</div>
		
		
		<div class="col-sm-4 ">
		<div class="media">
				 <a href="#" class="pull-left"><img src="https://goo.gl/4SSWd6" id = "touch" alt='' /></a>
				<div class="media-body">
					<h4 class="media-heading"style = "color:black;font-weight:600;">
						one touch ADL's
					</h4> 
					<p class  = "def">Easily keep track of important ADL's while on the go with our one click checklists
					</p>
					
				</div>
			</div>
		</div>
			  

<!-- <div class = "col-sm-2 span2"></div> -->
	
		<div class="col-sm-4">
		<div class="media">
				 <a href="#" class="pull-left"><img style "width:200px;hight:200px" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/224685/icon-service3.png" id = "pig" class="media-object" alt='' /></a>
				<div class="media-body">
					<h4 class="media-heading" style = "color:black;font-weight:600;">
						Keep in compliance 
					</h4> 
					<p class = "def">
				New Medicare guidelines require new safety measures be placed for wandering incidents. Keep your facility safe from the $100,000 dollar fine if one of your patients has a AA sentinel event. 
					</p>
					</div>
			</div>
		</div>
		
<!-- <div class = "col-sm-2 span2"></div> -->
	

		

	
	<!--	
		<div class="col-sm-5 span5">
		<div class="media">
				 <a href="#" class="pull-left"><img src="https://goo.gl/1SlexR" class="media-object" id="school" alt='' /></a>
				<div class="media-body">
					<h4 class="media-heading"style = "color:black;font-weight:600;">
						Stay Up To Date With What Is Happening In School
					</h4> 
					<p class = "def">
				Invite your childs teacher and aides to your page and have them update all the information while your child is in class. 
					</p>
					
				</div>
			</div>
		</div>
			  </div>
			  -->
			  </div>
		<div class = "row">
		</div>
<!-- <div class = "col-sm-2 span2"></div> -->
			
<!--
			<div class = "span1"></div>
		<div class=" span5">
		<div class="media">
				 <a href="#" class="pull-left"><img src="https://goo.gl/J9S7vf"id="doc" class="media-object" alt='' /></a>
				<div class="media-body">
					<h4 class="media-heading" style = "color:black;font-weight:600;">
						
					Connect With Your Doctor's Office
					</h4> 
					<p class = "def">
		Send a message directly to your doctors office from your dashboard. Alert them to emerging patterns that need to be reviewed or get updates on medications. Whatever you need answers to but don't need face to face time. 
					</p>
					
				</div>
			</div>
			</div>

			<div class = "span1"></div>
		
		<div class="span5">
		<div class="media">
				 <a href="#" class="pull-left"><img src = "https://goo.gl/072Ni4" id = "alert" class="media-object" alt='' /></a>
				<div class="media-body">
					<h4 class="media-heading" style = "color:black;font-weight:600;">
						Coming Soon: Alerts When Child Runs or Wets Diaper
					</h4> 
					<p style="color:#191919;">
					Through new long range RF technology, we enable you to monitor thier whereabouts within a 3mile radius in urban areas and 10 miles out in the country. We also offer a sensor that can detect when your child has urinated and needs to be changed. 
					</p>
					
				</div>
			</div>
			
			</div>	
			


		</div>		

		<hr>

<!-- /.Feature -->

  

<!-- Row View -->
			<div class = "feature-box1">
		<div class = "span3"></div>
<div class = "span6">
	<button id = "cta"><h2>Sign Up To Be Part Of The Beta Launch</h2></button>
		</div>
		<div class = "span3"></div>
			</div>
<!-- /.Row View -->
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
     <script>
		var map;
		function initialize() {
		  var mapOptions = {
		    zoom: 8,
		    center: new google.maps.LatLng(37.7648199, -122.4193735),
		    mapTypeId: google.maps.MapTypeId.ROADMAP
		  };
		  map = new google.maps.Map(document.getElementById('map-canvas'),
		      mapOptions);
		}

		google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>

<body>


 
  <!-- /HEADER ROW -->




<div class="container">
	  <!--PAGE TITLE-->

	<div class="row">
		<div class="span12">
		<div class="page-header">
				<h1 style = "color:black;font-weight:600;">
				Contact
			</h1>
		</div>
		</div>
	</div>

  <!-- /. PAGE TITLE-->

  <div class="row">

  	<div class="span3 floatleft"> 
  		<div id="map-canvas"></div>
  	</div>
	  <div class = "span1"></div>
  		<div class="span3" id = "form1">
  			<form>
				<fieldset>
					<legend><h3 style = "color:black;font-weight:600;">Get in Touch</h3></legend>
					<p class = "formp"><label id = "labelName" for = "name">Your Name </label>
					</p><p class = 'input'>	<input class="input-xxlarge"id = "name" type="text" placeholder="Name" /> </p>
				<p class = "formp">
					<label id = "labelEmail"for = "email">Email</label>
						</p> <p class = "input"><input class="input-xxlarge" type="text" type="email" id = "email" placeholder="Email" required/> </p>

					<p class = "formp">
						<label for ="textarea"id = "message">Your Message</label></p><p class = "input"><textarea  class="input-xxlarge"  rows="10" cols="40" placeholder="Your Message"></textarea></p>
						<br>
					 <button type="submit" class="btn btn-warning">Submit</button>
				</fieldset>
			</form>
  		</div>
	
	  <div class = "span1"></div>
  		<span class="span3 address">



  			<h3 style = "color:black;font-weight:600;">Address</h3>
  			<address>
  <strong>medUX / RoutineSync.</strong><br>
 2017 Mission Street Floor 2<br>
  San Francisco, CA 94110<br>
  <abbr title="Phone">P:</abbr> (415) 336-2115
</address>
 
<address>
  <strong>Erika Harvey, CEO/Founder</strong><br>
  <a href="mailto:#">erika@medux.org</a>
</address>

  			<p>
Get in touch, tell us what you think. This is for you, so we will always strive to make sure we implement exactly what you find necessary to make your lives easier. Thanks for using RoutineSync. 


  			</p>
  		</span>

  </div>

	
</div>


	</section>

<!--Footer
==========================-->

<footer>
    <div class="container">
      <div class="row">
        <div class="span6" style = "color:#191919;style = "color:black;font-weight:600;>© 2016 medUX designed by:ERIKA HARVEY| All Rights Reserved  <br>
        
        </div>
        <div class="span6">
            <div class="social pull-right">
                <a href="#"><img src="img/social/googleplus.png" alt=""></a>
                <a href="#"><img src="img/social/dribbble.png" alt=""></a>
                <a href="#"><img src="img/social/twitter.png" alt=""></a>
                <a href="#"><img src="img/social/dribbble.png" alt=""></a>
                <a href="#"><img src="img/social/rss.png" alt=""></a>
            </div>
        </div>
      </div>
    </div>
</footer>

<!--/.Footer-->

  </body>
</html>

/*Downloaded from https://www.codeseek.co/erika-harvey/interim-WpNWzd */
    body > img{
	width:421px;
	height:400px;
}

/*
Global
============================= */
#header-row > div{
	background-color:#131c6d;
	color:000;
}
#pig{
	border-radius: 100%;
	border:10px solid yellowgreen;
	width: 160px;
	background-color:yellowgreen;
}
.carousel-caption h1{
	color:black;
	font-weight:600;
}
form label{
	color:#191919;
}
#doc{
	width: 160px;
	height:160px;
	border-radius:100%;
	border:4px solid #E30B5D;
	background-color:#131c6d;
	padding:4%;
}
.floatleft{
	float:left;
}
#labelEmail{
	text-align:end;
}
#labelName{
	text-align:end;
}
.formp{
	margin-bottom:4%;
}
.input{
	margin-top:-15px;

	
}
#cta{
	padding:5%;
	color:white;
	background-color: #f9a620;
	border-radius:40px inset #70002B;
	margin-top: 4%;
}
#cta h2{
	color:whitesmoke;
	font-weight:bold;
}
#alert{
	width:180px;
	height:180px;
	border-radius:100%;
}
.feature-box1{
	width: 100%;
	height: 200px;
	background-color:#131c6d;
}
#school{
	width:220px;
	
}
#touch{
	width: 200px;
	height:220px;
	margin-top: -35px;
}
#first{
	width:180px;
	height:180px;
}
.feature-box{
	background-color:#131c6d;
	padding:4%;
	width:100%;
	
}
.feature-box h1,p{
	color:whitesmoke;
	font-weigth:bold;
	
	align-text:center;
}
.def{
	color:#191919;
}
body{
	font-family:'Source Sans Pro', sans-serif;
	color:#666;
	font-size:16px;
	font-weight: 400;
	  -webkit-font-smoothing: antialiased;
     font-smoothing: antialiased;
}

* {
     text-shadow: 0 1px 1px rgba(255,255,255,.3);
}

p{line-height: 24px}
a{color:#0088cc;}
a:hover{text-decoration: none;}



h1,h2,h3,h4,h5,h6{ font-family:'Source Sans Pro', sans-serif}

h1{font-size:50px; font-weight: 200; color: #555; margin-bottom: 20px;}
h2{font-size: 30px; font-weight: 300; color:#444; margin: 30px 0}
h3{font-size: 20px; font-weight: 400; margin: 20px 0;}
h4{font-size:18px; font-weight: 400}

/* 
HEADER ROW STYLE
===========================*/
#header-row{
	background: #131c6d;
	border-bottom:1px solid #eee;
	padding: 15px 0;
}

#header-row .navbar{margin:10px 0 0 0;}

#header-row .navbar .navbar-inner{
	border:none;
	box-shadow: none;
	margin: 0;
	background: transparent;
}
/* logo{
	background-color:whitesmoke;
	margin-top:3%;
	
} */
#header-row > div > div.row > logo > a{
	background-color:whitesmoke;
	padding:4%;
	top: 50px;
	
}
#header-row .navbar .navbar-inner ul.nav > li > a{
	box-shadow: none;
	background: white;
	color: #131c6d;
}
#header-row .navbar .navbar-inner ul.nav li.active a{
	color: #333;
}

#header-row > div > div.span9{
	align-text:right;
	color:white;
}
#header-row > div > div.navigation > div > ul{
	display:inline-flex;
	
	list-style-type:none;
	
	margin-left:70%;
	
}
#header-row > div > div.navigation > div > ul li{
	margin-right:20%;
	color:white;
	
}
#header-row > div > div.navigation > div > ul li a{
	color:white;
	font-size:2em;
}
#header-row > div > div.navigation > div > ul li a:hover{
	color:#E30B5D;
	font-weight:600;
	text-decoration:underline;

}
/* 
Carousel
===========================*/

.carousel-control{
	background: transparent;
	width: 14px;
	height: 14px;
	font-size: 14px;
	top:50%;	
}

.carousel-control.right{right:-30px;}
.carousel-control.left{left:-30px;}



.carousel{
	height: 500px;
	background: url(../img/slide-bg.png) no-repeat bottom center;
}

.carousel img{
	max-width: 100%;
}

.carousel-caption {
      background-color: transparent;
      position: relative;
      max-width: 100%;
      padding: 0 20px;
      margin-top:20%;

}

.carousel-caption h1{
	font-size: 50px;
	text-transform: capitalize;
	margin-bottom: 30px;
	color:#555;
	font-weight:200;
}
.carousel-caption .lead{
	color: #888;
	font-size: 18px;
	line-height: 24px;
	padding-bottom: 40px;
	font-weight: 400
}


/* Divider
==================*/
.hr-divider{
	background: url(../img/slide-bg.png) no-repeat bottom center; 
	width:1170px;
	height: 100px;
	margin-bottom: 50px;
	display: block;
	clear: both;}

/*Feature
==========================*/
.feature-box{
	margin-top: 60px;
	text-align: center;
}
.cnt-title { text-align: center; margin-bottom: 50px;}
.cnt-title span { 
	font-size: 24px;
	font-weight: 200;
}

/* Review
==========================*/
.review{
	margin: 80px 0;
}

/* Page Header
==========================*/

.page-header{
	border-bottom: 1px solid #f9a620;
}


/*Media
========================*/

.media{
	margin-bottom:50px;
}

/*MAP
========================*/
#map-canvas{
	height: 400px;
	border: 15px solid #fff;
	box-shadow:0 0 0 1px #f5f5f5;
}


/*MAP
========================*/

.blog-post{
		border-bottom: 2px solid #f9a620;
		padding:0 0 50px; 
		margin-bottom: 40px;
}


.blog-post p{
	margin: 20px 0;

}


.postmetadata{
	margin-bottom: 20px;
	padding: 5px 0;
}

.postmetadata ul{margin: 0; padding: 0}

.postmetadata ul li{
	display: inline-block;
	margin-right: 20px;
}

.postmetadata i{
	margin: 4px 5px 0 0;
}


/*Sidebar
========================*/

.side-bar{margin-bottom: 30px;}

.side-bar ul{margin: 0; padding: 0}
.side-bar ul li{list-style: none;}

.side-bar h3{margin-bottom: 10px}

.recent-post strong {display: block; margin-bottom: 5px; color: #888 }

.recent-post li{margin-bottom: 15px}

/*Tags
========================*/



/*Footer
========================*/

footer{
border-top:1px solid #eee;
background: #34495E;
padding: 30px 0;
color: #ffffff;
margin-top:40px;
}

.address{
	color:#191919;
}
body > div.container > div:nth-child(3) > div > div:nth-child(2) > div.row > div.container > div:nth-child(2) > span > p{
	color:#191919;
}
/* Responsive View
=================================*/

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 

 }
 
/* Landscape phones and down */
@media (max-width: 480px) {  }

section.main{
	width:100%;
	
}
#dad{
	margin-top:10%;
	margin-right:20%;
	border:4px solid black;
	height:400px;
	padding:0 50px;
	background-color:black;
}
#myCarousel > div > div.active.item > div > div > div:nth-child(1) > div > p > a{
	padding-bottom:4%;
}


.btn.btn-large {
	padding-top: 5%;
}
#myCarousel > div > div.item.active > div > div > div:nth-child(1) > div > h1{
	padding-bottom:10%;
}	



/*Downloaded from https://www.codeseek.co/erika-harvey/interim-WpNWzd */
    (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

Comments