Last active
August 29, 2015 14:16
-
-
Save offirgolan/a4f10c3ca1cfc69be997 to your computer and use it in GitHub Desktop.
Responsive Wed Design - http://jsbin.com/renoha
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** Start - Showcase CSS **/ | |
.title { | |
width 100%; | |
text-align: center; | |
background-color: #2cbe94; | |
margin-top: 0; | |
padding: 10px; | |
color: white; | |
border-bottom: 1px solid #F8F8F8; | |
font-size: 16px; | |
font-weight: 200; | |
} | |
/** End - Showcase CSS **/ | |
/** Start - Demo CSS **/ | |
/** Common Styling **/ | |
.container { | |
position: relative; | |
margin-top: 50px; | |
padding: 0; | |
} | |
.device { | |
margin: 0 auto; | |
overflow: hidden; | |
-webkit-transition: all 500ms ease-in-out; | |
transition: all 500ms ease-in-out; | |
} | |
.screen { | |
width: 100%; | |
height: 100%; | |
background-color: #f8f8f8; | |
border: 1px solid lightgrey; | |
border-top: 4px solid lightgrey; | |
} | |
.content { | |
position: relative; | |
background-color: #f8f8f8; | |
border-top: 8px solid lightgrey; | |
padding: 5px 5px 1px 5px; | |
} | |
.content .main-content { | |
width: 85%; | |
margin: 0 auto; | |
} | |
.content .main-content section { | |
width: 100%; | |
height: 60px; | |
margin: 0 0 10px 0; | |
background-color: rgb(231, 231, 231); | |
} | |
.content .sidebar { | |
width: 10%; | |
height: 150px; | |
position: absolute; | |
top: 5px; | |
right: 5px; | |
} | |
.content .sidebar section { | |
width: 100%; | |
height: 50px; | |
margin: 0 0 10px 0; | |
background-color: rgb(231, 231, 231); | |
} | |
/** Media Query Styling **/ | |
@media only screen and (min-width: 400px) { | |
.device { | |
width: 80px; | |
height: 150px; | |
background-color: #f0f0f0; | |
border: 7px solid rgb(113, 113, 113); | |
border-bottom-width: 20px; | |
border-top-width: 18px; | |
border-radius: 5px; | |
} | |
.container { | |
width: 80px; | |
} | |
.container:after { | |
width: 8px; | |
height: 8px; | |
background-color: grey; | |
border-radius: 50px; | |
margin: -14px auto 0 auto; | |
border: 1px solid rgb(109, 107, 107); | |
} | |
.content .main-content, | |
.content .sidebar { | |
width: 90%; | |
position: relative; | |
} | |
.content .main-content section, | |
.content .sidebar section { | |
height: 30px; | |
} | |
} | |
@media only screen and (min-width: 600px) { | |
.device { | |
width: 200px; | |
height: 250px; | |
background-color: #f0f0f0; | |
border: 10px solid rgb(113, 113, 113); | |
border-bottom-width: 20px; | |
border-radius: 10px; | |
} | |
.container { | |
width: 300px; | |
} | |
.container:after { | |
width: 10px; | |
height: 10px; | |
background-color: grey; | |
border-radius: 50px; | |
margin: -15px auto 0 auto; | |
border: 1px solid rgb(109, 107, 107); | |
} | |
.content .main-content, | |
.content .sidebar { | |
width: 100%; | |
position: relative; | |
right: 0px; | |
} | |
.content .main-content section, | |
.content .sidebar section { | |
height: 30px; | |
} | |
} | |
@media only screen and (min-width: 1000px) { | |
.device { | |
width: 300px; | |
height: 175px; | |
background-color: #f0f0f0; | |
border: 10px solid black; | |
border-bottom-width: 20px; | |
border-radius: 10px; | |
padding: 5px; | |
} | |
.container { | |
width: 300px; | |
} | |
.container:before { | |
width: 350px; | |
height: 15px; | |
background-color: rgb(178, 175, 175); | |
border-radius: 2px; | |
margin: -10px auto 0 auto; | |
position: absolute; | |
border: none; | |
bottom: -5px; | |
left: -25px; | |
} | |
.container:after { | |
width: 80px; | |
height: 5px; | |
content: ''; | |
background-color: rgb(131, 131, 131); | |
position: absolute; | |
bottom: 5px; | |
left: 120px; | |
border-bottom-left-radius: 1px; | |
border-bottom-right-radius: 1px; | |
} | |
.content .main-content { | |
width: 85%; | |
margin: 0; | |
} | |
.content .sidebar { | |
width: 10%; | |
position: absolute; | |
} | |
.content .main-content section { | |
height: 30px; | |
} | |
.content .sidebar section { | |
height: 20px; | |
} | |
} | |
@media only screen and (min-width: 1400px) { | |
.device { | |
width: 450px; | |
height: 250px; | |
background: #f0f0f0; | |
border: 8px solid rgb(113, 113, 113); | |
padding: 5px; | |
position: relative; | |
} | |
.container { | |
width: 450px; | |
} | |
.container:before { | |
content: ''; | |
width: 50px; | |
height: 30px; | |
background-color: rgb(113, 113, 113); | |
margin: -2px auto 0 auto; | |
position: absolute; | |
border: none; | |
bottom: -20px; | |
left: 45%; | |
} | |
.container:after { | |
width: 125px; | |
height: 8px; | |
content: ''; | |
background-color: rgb(113, 113, 113); | |
position: absolute; | |
top: initial; | |
border: none; | |
left: 37%; | |
bottom: -25px; | |
border-radius: 0; | |
} | |
.content .main-content { | |
width: 85%; | |
margin: 0; | |
} | |
.content .sidebar { | |
width: 10%; | |
right: 5px; | |
position: absolute; | |
} | |
.content .main-content section { | |
height: 60px; | |
} | |
.content .sidebar section { | |
height: 50px; | |
} | |
} | |
/** End - Demo CSS **/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="http://code.jquery.com/jquery.min.js"></script> | |
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
/** Start - Showcase CSS **/ | |
.title { | |
width 100%; | |
text-align: center; | |
background-color: #2cbe94; | |
margin-top: 0; | |
padding: 10px; | |
color: white; | |
border-bottom: 1px solid #F8F8F8; | |
font-size: 16px; | |
font-weight: 200; | |
} | |
/** End - Showcase CSS **/ | |
/** Start - Demo CSS **/ | |
/** Common Styling **/ | |
.container { | |
position: relative; | |
margin-top: 50px; | |
padding: 0; | |
} | |
.device { | |
margin: 0 auto; | |
overflow: hidden; | |
-webkit-transition: all 500ms ease-in-out; | |
transition: all 500ms ease-in-out; | |
} | |
.screen { | |
width: 100%; | |
height: 100%; | |
background-color: #f8f8f8; | |
border: 1px solid lightgrey; | |
border-top: 4px solid lightgrey; | |
} | |
.content { | |
position: relative; | |
background-color: #f8f8f8; | |
border-top: 8px solid lightgrey; | |
padding: 5px 5px 1px 5px; | |
} | |
.content .main-content { | |
width: 85%; | |
margin: 0 auto; | |
} | |
.content .main-content section { | |
width: 100%; | |
height: 60px; | |
margin: 0 0 10px 0; | |
background-color: rgb(231, 231, 231); | |
} | |
.content .sidebar { | |
width: 10%; | |
height: 150px; | |
position: absolute; | |
top: 5px; | |
right: 5px; | |
} | |
.content .sidebar section { | |
width: 100%; | |
height: 50px; | |
margin: 0 0 10px 0; | |
background-color: rgb(231, 231, 231); | |
} | |
/** Media Query Styling **/ | |
@media only screen and (min-width: 400px) { | |
.device { | |
width: 80px; | |
height: 150px; | |
background-color: #f0f0f0; | |
border: 7px solid rgb(113, 113, 113); | |
border-bottom-width: 20px; | |
border-top-width: 18px; | |
border-radius: 5px; | |
} | |
.container { | |
width: 80px; | |
} | |
.container:after { | |
width: 8px; | |
height: 8px; | |
background-color: grey; | |
border-radius: 50px; | |
margin: -14px auto 0 auto; | |
border: 1px solid rgb(109, 107, 107); | |
} | |
.content .main-content, | |
.content .sidebar { | |
width: 90%; | |
position: relative; | |
} | |
.content .main-content section, | |
.content .sidebar section { | |
height: 30px; | |
} | |
} | |
@media only screen and (min-width: 600px) { | |
.device { | |
width: 200px; | |
height: 250px; | |
background-color: #f0f0f0; | |
border: 10px solid rgb(113, 113, 113); | |
border-bottom-width: 20px; | |
border-radius: 10px; | |
} | |
.container { | |
width: 300px; | |
} | |
.container:after { | |
width: 10px; | |
height: 10px; | |
background-color: grey; | |
border-radius: 50px; | |
margin: -15px auto 0 auto; | |
border: 1px solid rgb(109, 107, 107); | |
} | |
.content .main-content, | |
.content .sidebar { | |
width: 100%; | |
position: relative; | |
right: 0px; | |
} | |
.content .main-content section, | |
.content .sidebar section { | |
height: 30px; | |
} | |
} | |
@media only screen and (min-width: 1000px) { | |
.device { | |
width: 300px; | |
height: 175px; | |
background-color: #f0f0f0; | |
border: 10px solid black; | |
border-bottom-width: 20px; | |
border-radius: 10px; | |
padding: 5px; | |
} | |
.container { | |
width: 300px; | |
} | |
.container:before { | |
width: 350px; | |
height: 15px; | |
background-color: rgb(178, 175, 175); | |
border-radius: 2px; | |
margin: -10px auto 0 auto; | |
position: absolute; | |
border: none; | |
bottom: -5px; | |
left: -25px; | |
} | |
.container:after { | |
width: 80px; | |
height: 5px; | |
content: ''; | |
background-color: rgb(131, 131, 131); | |
position: absolute; | |
bottom: 5px; | |
left: 120px; | |
border-bottom-left-radius: 1px; | |
border-bottom-right-radius: 1px; | |
} | |
.content .main-content { | |
width: 85%; | |
margin: 0; | |
} | |
.content .sidebar { | |
width: 10%; | |
position: absolute; | |
} | |
.content .main-content section { | |
height: 30px; | |
} | |
.content .sidebar section { | |
height: 20px; | |
} | |
} | |
@media only screen and (min-width: 1400px) { | |
.device { | |
width: 450px; | |
height: 250px; | |
background: #f0f0f0; | |
border: 8px solid rgb(113, 113, 113); | |
padding: 5px; | |
position: relative; | |
} | |
.container { | |
width: 450px; | |
} | |
.container:before { | |
content: ''; | |
width: 50px; | |
height: 30px; | |
background-color: rgb(113, 113, 113); | |
margin: -2px auto 0 auto; | |
position: absolute; | |
border: none; | |
bottom: -20px; | |
left: 45%; | |
} | |
.container:after { | |
width: 125px; | |
height: 8px; | |
content: ''; | |
background-color: rgb(113, 113, 113); | |
position: absolute; | |
top: initial; | |
border: none; | |
left: 37%; | |
bottom: -25px; | |
border-radius: 0; | |
} | |
.content .main-content { | |
width: 85%; | |
margin: 0; | |
} | |
.content .sidebar { | |
width: 10%; | |
right: 5px; | |
position: absolute; | |
} | |
.content .main-content section { | |
height: 60px; | |
} | |
.content .sidebar section { | |
height: 50px; | |
} | |
} | |
/** End - Demo CSS **/ | |
</style> | |
</head> | |
<body> | |
<div class="title"> | |
Responsive Web Design Demo | |
</div> | |
<div class="container"> | |
<div class="device"> | |
<div class="content"> | |
<div class="main-content"> | |
<section></section> | |
<section></section> | |
<section></section> | |
</div> | |
<aside class="sidebar"> | |
<section></section> | |
<section></section> | |
</aside> | |
</div> | |
</div> | |
</div> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<script src="//code.jquery.com/jquery.min.js"><\/script> | |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script> | |
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<div class="title"> | |
Responsive Web Design Demo | |
</div> | |
<div class="container"> | |
<div class="device"> | |
<div class="content"> | |
<div class="main-content"> | |
<section></section> | |
<section></section> | |
<section></section> | |
</div> | |
<aside class="sidebar"> | |
<section></section> | |
<section></section> | |
</aside> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html></script> | |
<script id="jsbin-source-css" type="text/css">/** Start - Showcase CSS **/ | |
.title { | |
width 100%; | |
text-align: center; | |
background-color: #2cbe94; | |
margin-top: 0; | |
padding: 10px; | |
color: white; | |
border-bottom: 1px solid #F8F8F8; | |
font-size: 16px; | |
font-weight: 200; | |
} | |
/** End - Showcase CSS **/ | |
/** Start - Demo CSS **/ | |
/** Common Styling **/ | |
.container { | |
position: relative; | |
margin-top: 50px; | |
padding: 0; | |
} | |
.device { | |
margin: 0 auto; | |
overflow: hidden; | |
-webkit-transition: all 500ms ease-in-out; | |
transition: all 500ms ease-in-out; | |
} | |
.screen { | |
width: 100%; | |
height: 100%; | |
background-color: #f8f8f8; | |
border: 1px solid lightgrey; | |
border-top: 4px solid lightgrey; | |
} | |
.content { | |
position: relative; | |
background-color: #f8f8f8; | |
border-top: 8px solid lightgrey; | |
padding: 5px 5px 1px 5px; | |
} | |
.content .main-content { | |
width: 85%; | |
margin: 0 auto; | |
} | |
.content .main-content section { | |
width: 100%; | |
height: 60px; | |
margin: 0 0 10px 0; | |
background-color: rgb(231, 231, 231); | |
} | |
.content .sidebar { | |
width: 10%; | |
height: 150px; | |
position: absolute; | |
top: 5px; | |
right: 5px; | |
} | |
.content .sidebar section { | |
width: 100%; | |
height: 50px; | |
margin: 0 0 10px 0; | |
background-color: rgb(231, 231, 231); | |
} | |
/** Media Query Styling **/ | |
@media only screen and (min-width: 400px) { | |
.device { | |
width: 80px; | |
height: 150px; | |
background-color: #f0f0f0; | |
border: 7px solid rgb(113, 113, 113); | |
border-bottom-width: 20px; | |
border-top-width: 18px; | |
border-radius: 5px; | |
} | |
.container { | |
width: 80px; | |
} | |
.container:after { | |
width: 8px; | |
height: 8px; | |
background-color: grey; | |
border-radius: 50px; | |
margin: -14px auto 0 auto; | |
border: 1px solid rgb(109, 107, 107); | |
} | |
.content .main-content, | |
.content .sidebar { | |
width: 90%; | |
position: relative; | |
} | |
.content .main-content section, | |
.content .sidebar section { | |
height: 30px; | |
} | |
} | |
@media only screen and (min-width: 600px) { | |
.device { | |
width: 200px; | |
height: 250px; | |
background-color: #f0f0f0; | |
border: 10px solid rgb(113, 113, 113); | |
border-bottom-width: 20px; | |
border-radius: 10px; | |
} | |
.container { | |
width: 300px; | |
} | |
.container:after { | |
width: 10px; | |
height: 10px; | |
background-color: grey; | |
border-radius: 50px; | |
margin: -15px auto 0 auto; | |
border: 1px solid rgb(109, 107, 107); | |
} | |
.content .main-content, | |
.content .sidebar { | |
width: 100%; | |
position: relative; | |
right: 0px; | |
} | |
.content .main-content section, | |
.content .sidebar section { | |
height: 30px; | |
} | |
} | |
@media only screen and (min-width: 1000px) { | |
.device { | |
width: 300px; | |
height: 175px; | |
background-color: #f0f0f0; | |
border: 10px solid black; | |
border-bottom-width: 20px; | |
border-radius: 10px; | |
padding: 5px; | |
} | |
.container { | |
width: 300px; | |
} | |
.container:before { | |
width: 350px; | |
height: 15px; | |
background-color: rgb(178, 175, 175); | |
border-radius: 2px; | |
margin: -10px auto 0 auto; | |
position: absolute; | |
border: none; | |
bottom: -5px; | |
left: -25px; | |
} | |
.container:after { | |
width: 80px; | |
height: 5px; | |
content: ''; | |
background-color: rgb(131, 131, 131); | |
position: absolute; | |
bottom: 5px; | |
left: 120px; | |
border-bottom-left-radius: 1px; | |
border-bottom-right-radius: 1px; | |
} | |
.content .main-content { | |
width: 85%; | |
margin: 0; | |
} | |
.content .sidebar { | |
width: 10%; | |
position: absolute; | |
} | |
.content .main-content section { | |
height: 30px; | |
} | |
.content .sidebar section { | |
height: 20px; | |
} | |
} | |
@media only screen and (min-width: 1400px) { | |
.device { | |
width: 450px; | |
height: 250px; | |
background: #f0f0f0; | |
border: 8px solid rgb(113, 113, 113); | |
padding: 5px; | |
position: relative; | |
} | |
.container { | |
width: 450px; | |
} | |
.container:before { | |
content: ''; | |
width: 50px; | |
height: 30px; | |
background-color: rgb(113, 113, 113); | |
margin: -2px auto 0 auto; | |
position: absolute; | |
border: none; | |
bottom: -20px; | |
left: 45%; | |
} | |
.container:after { | |
width: 125px; | |
height: 8px; | |
content: ''; | |
background-color: rgb(113, 113, 113); | |
position: absolute; | |
top: initial; | |
border: none; | |
left: 37%; | |
bottom: -25px; | |
border-radius: 0; | |
} | |
.content .main-content { | |
width: 85%; | |
margin: 0; | |
} | |
.content .sidebar { | |
width: 10%; | |
right: 5px; | |
position: absolute; | |
} | |
.content .main-content section { | |
height: 60px; | |
} | |
.content .sidebar section { | |
height: 50px; | |
} | |
} | |
/** End - Demo CSS **/</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment