responsive experimental

Tutorials of (Responsive experimental) by Sharon lancaster

<!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/ */
@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;}

}














/* Downloaded from https://www.codeseek.co/ */

This awesome code ( responsive experimental ) is write by Sharon Lancaster , you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Sharon Lancaster