responsive experimental

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

Thumbnail
This awesome code was written by ikledoo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ikledoo ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>responsive experimental</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
	
	
		<div class="page">
		<div id="ilkedoo">
		<div id='one' class="one"><h1>IKLEDOO</h1></div>
<div id='two'class='two'><h1>IKLEDOO</h1></div>
<div id='three' class="three"><h1>IKLEDOO</h1></div>
<div id='four' class="four"><h1>IKLEDOO</h1></span></div>
		</div>
			<header><a class="logo" href="#"></a></header>
			<div class="page_content">
				<div class="page_content_container_left">
					<div class="content">


						
						<p>SOME STUFF</p>
						<h2>HEADING</h2>
						<p>SOME MORE STUFF</p>
						<ul>
							<li>LIST1</li> 
							<li>LIST2</li> 
							<li>LIST3</li>
	 						<li>LIST4</li>
						</ul>				
					</div>
				</div>	
				<div class="page_content_container_right">
					<div class="content_sidebar">
							<h3>IMAGES</h3>
							<figure>
								<div class="figure_photo"></div>
								<figcaption>IMAGE</figcaption>
								<div class="clear_both"></div>
							</figure>
							<p>AND EVEN MORE STUFF</p>
							<div class="clear_both"></div>	
					</div>	
				</div>
				<div class="clear_both"></div>
				<nav id="large">
					<a href="#">HO</br>ME</a>
					<a href="#">I N</br>FO</a>
					<a href="#">MA</br>I L</a>
				</nav>
				<nav id="small">
					<a href="#">HOME</a>
					<a href="#">INFO</a>
					<a href="#">MAIL</a>
				</nav>
			</div>
			<footer>&copy FOOTER&CO 2001</footer>
		</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ikledoo/responsive-experimental-Aaklz */
@charset "UTF-8";
/* text formating */
body {font-family: Arial;
	font-size: 12px;
	margin: 0px;
	padding: 20px;
	color: #444;
	background-color: #252525;}

.page{font-size: 1em;}
	

h2{font-size:1.6em;color:#fff;
		margin:0px 0px .5em 0px;}
h3{font-size: 1.25em;color: #8b5487;margin: 0px 0px .25px 0px;}
p {margin: 0px 0px 1em 0px;font-size: 1em;}
li{margin: 0px 0px 1em 0px;}
a img{border: none;}
a{color: #018fd8;}
a:hover{color: #a5319d;}

	
h1{position:absolute;font-size:100px;color:white;top:-73px;}

	.one h1{position:absolute;left: 3px;color:rgb(255,7,0);}
	.two h1{position:absolute;left:-113px;color:rgb(100,100,100);}
	.three h1{position:absolute;left:-233px;color:rgb(240,210,200);}
	.four h1{position:absolute;left:-355px;color:rgb(200,150,0);}



.content_sidebar h3{color: #3274ad;margin-bottom: 10px;}
.content_sidebar p ,.content_sidebar li{color:#8b5487;} 
.content_sidebar a{color: #cc14a1;}
.content_sidebar a:hover{color: #000;}
.content_sidebar figure{display: block;margin: 0px;padding: 0px;}
.content_sidebar figure .figure_photo{
	background: url(../images/photo.png) 50% 0px ;
	margin: 0px 0px 10px 0px;
	height: 175px;
	border:1px solid #414141;
	border-radius: 10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;	
	box-shadow: 0px 4px 4px rgba(0,0,0,.2);
	-moz-box-shadow: 0px 4px 4px rgba(0,0,0,.2);
	-webkit-box-shadow: 0px 4px 4px rgba(0,0,0,.2);
	}
.content_sidebar figure figcaption{
	font-size: .9em;
	display: block;
	color: #777;
	margin: 3px 0px 15px 0px;
	padding: 0px 10px 0px 10px;}

	/*layout*/

.page {position: relative; margin: 0px auto 0px auto; max-width: 960px;}
.page header{margin-top: -100px;
		display: block;
		position: relative;
		height: 270px;
		border-top-left-radius: 10px;
		-moz-border-top-left-radius: 10px;
		-webkit-border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		-moz-border-top-right-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		background: url(../imagesforLW/banner_med.png) no-repeat 0px 0px;
	}
	.page header a.logo{
		position: absolute;
		top: 10px;
		left: 25px;
		display: block;
		width: 680px;
		height: 105px;
		background: url(../imagesforLW/newlogo.png) no-repeat 0px 0px;
	}
	.page .page_content{background-color:grey; padding: 1px 0px 1px 0px;}
	.page .page_content .page_content_container_left{
	width: 70%; float: left; margin: 0px; padding: 0px;}
	.page .page_content .page_content_container_right
	{width: 30%; float: left; margin: 0px; padding: 0px;}
	.page .page_content .content{margin: 15px 20px 20px 20px;padding: 0px;}
	.page .page_content .content_sidebar{
		margin: 15px 20px 20px 0px;
		padding: 10px;
		border: 1px solid #bdbdbd;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		background-color: #f1f1f1;
	}
	.page nav{
		position: absolute;
		top:97px;right:10px;
		text-align: right;border:none;
	}
	.page #large a{border: 1px solid rgb(240,210,200);

		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		color: rgb(250,220,210);
		padding:2px 5px 2px 0px;
		text-decoration: none;
		width:40px;height:40px;
		font-weight: bold;
		display: inline-block;
		margin: 0px 12px 4px 0px;
		background: rgb(255,10,0);
		font-size: 1.8em;
		
		line-height: 20px;
	}

	.page #large a:hover{
		background: rgb(200,150,0);
		color: rgb(100,100,100);
		width:60px;height: 60px;
		font-size: 3em;
		line-height: 30px;
	}
	.page #small {top:-100px;}
	.page footer{
		display: block;
		border-top: 1px solid #ddd;
		padding: 15px 10px 15px 20px;
		font-size: .9em;
		color: #757575;
		background: #fff;
		border-bottom-left-radius: 10px;
		-moz-border-bottom-left-radius: 10px;
		-wekit-border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px; 
		-moz-border-bottom-right-radius: 10px; 
		-webkit-border-bottom-right-radius: 10px;
		box-shadow: 0px 5px 3px rgba(0,0,0,.3); 
		-mozbox-shadow: 0px 5px 3px rgba(0,0,0,.3);
		-webkit-box-shadow: 0px 5px 3px rgba(0,0,0,.3);	
		background: -moz-linear-gradient(top,#ffffff 60%,#cccccc 90%);
		background: -webkit-gradient(linear left top, left bottom, color-stop(60%,#ffffff),color-stop(90%,#cccccc));
	}
	.clear_both{clear: both;
			line-height:1px; }
#ikledoo{position:absolute;top:-100px;}	
#one,#two,#three,#four{border-radius:4px;}
#one{position:absolute;background:rgb(255,150,40);width:120px;height:100px;overflow: hidden;left:30px;
		animation:bounce 5s;-webkit-animation:bounce1 2s forwards;}
	#two{position:absolute;background:rgb(200,150,0);width:120px;height:100px;overflow: hidden;left:150px;
		animation:bounce 5s;-webkit-animation:bounce2 2s forwards;-webkit-animation-delay:.1s;}
	#three{position:absolute;background:rgb(255,10,0);width:120px;height:100px;overflow: hidden;left:270px;
		animation:bounce 5s;-webkit-animation:bounce3 2s forwards;-webkit-animation-delay:.5s;}
	#four{position:absolute;background:rgb(100,100,100);width:120px;height:100px;overflow: hidden;left:390px;
		animation:bounce 5s;-webkit-animation:bounce4 2s forwards;-webkit-animation-delay:.2s;}
@-webkit-keyframes bounce1{
	10%{top:160px;}
	20%{top:80px;}
	30%{top:160px;}
	40%{top:120px;}
	50%{top:160px;}
	60%{top:140px;}
	70%{top:160px;}
  80%{top:150px;}
  90%{top:160px;}
  95%{top:155px;}
  100%{top:160px;}
    }
    @-webkit-keyframes bounce2{
	10%{top:160px;}
	20%{top:80px;}
	30%{top:160px;}
	40%{top:120px;}
	50%{top:160px;}
	60%{top:140px;}
	70%{top:160px;}
  80%{top:150px;}
  90%{top:160px;}
  95%{top:155px;}
  100%{top:160px;}
    }
    @-webkit-keyframes bounce3{
	10%{top:160px;}
	20%{top:80px;}
	30%{top:160px;}
	40%{top:120px;}
	50%{top:160px;}
	60%{top:140px;}
	70%{top:160px;}
  80%{top:150px;}
  90%{top:160px;}
  95%{top:155px;}
  100%{top:160px;}
    }
    @-webkit-keyframes bounce4{
	10%{top:160px;}
	20%{top:80px;}
	30%{top:160px;}
	40%{top:120px;}
	50%{top:160px;}
	60%{top:140px;}
	70%{top:160px;}
  80%{top:150px;}
  90%{top:160px;}
  95%{top:155px;}
  100%{top:160px;}
    }
	

/*small screen*/
@media screen and(max-width: 500px)and(min-width: 320px){
	body{padding: 10px;}

	.page{top:200px;margin:0px;padding: 0px;font-size: 1.2em;}
	.page header{height: 50px;background-image: url(../imagesforLW/banner_med.png);}
	.page header a.logo{top:3px;left:25px;
		margin:0px auto 0px auto;width:127px;
		height:30px;background-image: url(../imagesforLW/newlogo.png);}
	.page .page_content .page_content_container_left{width:inherit; float:none; margin:0px;}
	.page .page_content .page_content_container_right{width:inherit; float:none; margin:0px;}
    .page .page_content .content{margin: 10px 10px 20px 10px;}
    .page .page_content .content_sidebar{margin: 0px 10px 15px 10px; }
    .page .page_content .content_sidebar figure{width: 30%;float: right; margin-left: 15px}
    .page .page_content .content_sidebar figure .fgure_photo{
    	background-image: url(../imagesforLw/banner_small.png);height: 100px;}
    .page .page_content .content_sidebar figure figcaption{font-size: .8em;text-align: right;
		padding: 0px 10px 0px 10px;}
	.page nav{position: inherit; padding: 15px 0px 1px 0px; text-align: left; border-top: 1px solid #ddd;}
.page #large a,.page #large a:hover{height: 0px;padding:0px;font-size: 0em;border: none;}
	.page #small a{color:   #fff;padding: 7px 10px 7px 10px;font-weight: bold;font-size: 1em; 
		display: block; margin:0px 10px 15px 10px;
		background-color: rgb(200,150,0);text-decoration:none;border-radius: 4px;box-shadow:  black 3px 3px 8px;}
	.page #small a:hover{color: #fff; background-color: rgb(255,150,40);box-shadow:inset black 3px 3px 6px;}
	.page footer{font-size: .8em;}
	#one{position:absolute;background:rgb(255,150,40);width:120px;height:100px;overflow: hidden;top:-80px;left:3px;
		animation:move1 5s;-webkit-animation:move1 2s forwards;}
	#two{position:absolute;background:rgb(200,150,0);width:120px;height:100px;overflow: hidden;top:-80px;left:-113px;
		animation:move2 5s;-webkit-animation:move2 2s forwards;-webkit-animation-delay:.1s;}
	#three{position:absolute;background:rgb(255,10,0);width:120px;height:100px;overflow: hidden;top:-80px;left:-233px;
		animation:move3 5s;-webkit-animation:move3 2s forwards;-webkit-animation-delay:.5s;}
	#four{position:absolute;background:rgb(100,100,100);width:110px;height:100px;overflow: hidden;top:-80px;left:-355px;
		animation:move4 5s;-webkit-animation:move4 2s forwards;-webkit-animation-delay:.2s;}
@-webkit-keyframes move1{
10%{left:3px:}
100%{left:0px;}
}
@-webkit-keyframes move2{
10%{left:-113px:}
100%{left:120px;}
}
@-webkit-keyframes move3{
10%{left:-233px:}
100%{left:240px;}
}
@-webkit-keyframes move4{
10%{left:-355px:}
100%{left:360px;}
}
.small {font-size: 0em;}
}
/* medium screen*/
@media screen and(min-width: 501px)and(max-width: 800px){
	.page{margin: 0px;padding: 0px;font-size: 1.15em;}
	.page header{height: 290px;
		padding:10px 50px 0px 75px;}
	.page header a.logo{
		top: 20px;
		left: 25px;
		width: 200px;
		height: 55px;
		}
.page nav {
		top:85px;
	}
.page #small {top:-100px;}
.page #large a{border: 1px solid rgb(240,210,200);

		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		color: rgb(250,220,210);
		padding:5px 7px 2px 0px;
		text-decoration: none;
		width:35px;height:35px;
		font-weight: bold;
		display: inline-block;
		margin: 0px 12px 4px 0px;
		background: rgb(255,10,0);
		font-size: 1.4em;
		line-height: 15px;}
	
.page #large a:hover{background: rgb(200,150,0);
		color: rgb(100,100,100);
		width: 50px;height: 50px;
		padding:2px 5px 2px 2px;
		font-size: 2.3em;
		line-height: 25px;}
.page .content_sidebar figure .figure_photo
		{
		height: 150px;} 

.page .content_sidebar figure figcaption{font-size: .8em;}

}















Comments