Skip to content

Instantly share code, notes, and snippets.

@pancanin

pancanin/Responsive-Website.markdown

Created July 1, 2014 15:31
Show Gist options
  • Save pancanin/7963323c34d9f411bc11 to your computer and use it in GitHub Desktop.
Save pancanin/7963323c34d9f411bc11 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Vallerious.
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pretty Website</title>
<link rel="stylesheet" href="pretty.css">
</head>
<body>
<div id="main-wrapper">
<header id="cover-photo-header">
<h2>In the twilight of one`s life</h2>
</header>
<nav id="main-navig">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
<main id="content">
<section id="welcome-banner">
<header><h3>WELCOME TO HOME PAGE</h3></header>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, ducimus dignissimos voluptas quasi velit sunt ex repudiandae voluptatem ullam nisi!</strong> Dolorum temporibus reiciendis ad numquam veniam alias, ipsa, qui incidunt. Minus, ducimus dignissimos voluptas quasi velit sunt ex repudiandae voluptatem ullam nisi! Dolorum temporibus reiciendis ad numquam veniam alias, ipsa, qui incidunt.</p>
</section>
<section id="free-products">
<header>
<h3>Our Free Products</h3>
</header>
<article class="product-box" id="find-me">
<img src="http://i59.tinypic.com/11ha2ya.jpg"/>
<header>
<h4>Try to find me</h4>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptates rerum nobis optio vel nemo, atque sed ipsa eius consectetur, culpa! Laborum odio delectus perspiciatis sit ratione molestias placeat enim.</p>
</article>
<article class="product-box" id="meet">
<img src="http://i57.tinypic.com/2ez753t.jpg.jpg"/>
<header>
<h4>Meeting Place</h4>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga iure, quia minus alias vel neque. Labore nulla alias quos? Nesciunt, assumenda itaque. Non, quo id, commodi distinctio ipsum reprehenderit voluptatibus.</p>
</article>
<article class="product-box" id="skate">
<img src="http://i58.tinypic.com/2udugw9.jpg"/>
<header>
<h4>Skate Show</h4>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit et accusamus ipsam explicabo ad molestiae sed ducimus illo mollitia maxime, deleniti, voluptatem quibusdam sapiente veniam odio aperiam repellat cum.</p>
</article>
</section>
</main>
<div id="side-asides">
<aside id="news-box">
<header>
<h3>NEWS</h3>
</header>
<section class="news-article">
<time datetime="02.08.2009">02.08.2009</time>
<span>Lorem ipsum dolor sit amet..</span>
<a href="#">see more...</a>
</section>
<section class="news-article">
<time datetime="02.08.2009">01.08.2009</time>
<span>Lorem ipsum dolor sit amet..</span>
<a href="#">see more...</a>
</section>
<section class="news-article">
<time datetime="02.08.2009">28.07.2009</time>
<span>Lorem ipsum dolor sit amet..</span>
<a href="#">see more...</a>
</section>
</aside>
<aside id="message-box">
<header>
<h3>MESSAGES</h3>
<section>
<time datetime="02.08.2009">02.08.2009</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati ipsum at in possimus minus. Saepe atque laborum ea, animi iste illum, porro commodi. Corrupti soluta, veniam earum eligendi sint perspiciatis. Obcaecati ipsum at in possimus minus. Saepe atque laborum ea, animi iste illum, porro commodi. Corrupti soluta, veniam earum eligendi sint perspiciatis</p>
<span>Author <strong>SoftUni</strong></span>
<a href="">See all testomonials...</a>
</section>
</header>
</aside>
</div>
<footer>
<span>In the twilight of one`s life Copyright @ 2 August 2009 |</span>
<a href="">XHTML</a>&nbsp;|
<a href="">CSS</a>
</footer>
</div>
</body>
</html>
Raw
style.css
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial;
background: #181818;
}
#main-wrapper {
position: relative;
width:65%;
top:0px;
right:0px;
bottom: 0px;
left: 0px;
margin:auto;
background: #F0F0F0;
}
#cover-photo-header {
position: relative;
height: 270px;
background-image: url('http://i58.tinypic.com/10s8wzn.jpg');
background-repeat: no-repeat;
}
header#cover-photo-header h2 {
position: absolute;
bottom:40px;
right:60px;
color:#fff;
}
nav#main-navig {
height: auto;
background-color: #D8D8D8;
}
nav#main-navig ul li {
list-style: none;
display: inline-block;
text-align: center;
line-height: 45px;
border-right:2px solid white;
}
nav#main-navig ul li a {
text-decoration: none;
display:block;
width:120px;
height: 45px;
background-color: #D8D8D8;
color:#888888;
}
nav#main-navig ul li a:hover {
background: #A0A0A0;
color: #303030;
}
main#content {
display: inline-block;
width:60%;
margin:10px 3%;
}
section#welcome-banner, #free-products {
border:2px solid #C0C0C0;
border-radius: 10px;
background-color: #F0F0F0;
padding:15px;
}
section#welcome-banner {margin-bottom: 10px;}
h3 {
color:#33CC00;
margin-bottom: 15px;
}
section#welcome-banner p, article p {
font-size:15px;
}
article.product-box {
display: block;
margin-bottom: 10px;
min-height: 125px;
border-bottom: 2px solid black;
}
#side-asides {
display: inline-block;
vertical-align: top;
width:230px;
font-size:15px;
}
aside#news-box, #message-box {
width:200px;
border:2px solid #C0C0C0;
border-radius: 10px;
background-color: #A0A0A0;
padding: 10px;
margin-top:10px;
margin-right: 5%;
}
#side-asides time {
display: block;
font-weight: bold;
}
#side-asides span {
display: block;
}
#message-box {
background:#F0F0F0;
}
#side-asides a {
color:#33CC00;
}
footer {
height: 55px;
background:#00FF33;
border-radius: 10px;
text-align: center;
padding-top:34px;
}
img {float:left;}
@media screen and (max-width: 1230px) {
main#content {
width:95%;
}
#side-asides {
width:92%;
display: block;
margin-left: auto;
margin-right: auto;
}
aside#news-box, #message-box {
width:97%;
}
}
@media screen and (max-width: 1024px) {
#main-wrapper {
width:75%;
}
nav#main-navig ul li {
display: block;
width:99%;
border-bottom: 2px solid gray;
}
nav#main-navig ul li a {
text-align: center;
font-size: 1.2em;
width:99%;
}
}
@media screen and (max-width: 920px) {
#main-wrapper {
width:85%;
}
}
@media screen and (max-width: 780px) {
#main-wrapper {
width:95%;
}
}
@media screen and (max-width: 480px) {
#side-asides {
padding-right: 6%;
}
#cover-photo-header {
text-align: right;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment