Skip to content

Instantly share code, notes, and snippets.

@kurunve

kurunve/style.css

Created October 25, 2014 09:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kurunve/549e3fef27ec8c48e4b4 to your computer and use it in GitHub Desktop.
Save kurunve/549e3fef27ec8c48e4b4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
style.css
/* Reset */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl,
dt, dd, blockquote, address{
margin: 0;
padding: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,form {
display:block;
}
/* Main CSS Part */
body{
background-color: #3B2C38;
font-size: 16pt;
color: #F0A118;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
h1, h2, h3{
text-align: center;
}
li{
text-align: left;
}
a{
color: #DFE82E;
}
a:hover{
color:#02663d;
}
hr{
margin-top:2px;
}
nav{
font-size:20pt;
font-weight:bold;
font-variant: small-caps;
margin-bottom: 4px;
margin-top: 6px;
padding-left: 6px;
padding-right: 6px;
text-align: center;
}
.links a{
text-decoration: none;
margin: 10px auto;
padding: 2px 5px;
display: inline-block;
color: #de33de;
}
.links a:hover{
color: #ffbbaa;
padding: 0px 5px;
}
.links a:before{
content: "#";
border: 1px solid red;
}
@import url(http://fonts.googleapis.com/css?family=Dosis);
main{
overflow:hidden;
}
section p:first-letter {
font-weight: bold;
text-transform: capitalize;
font-size: 18pt;
}
main p{
font-family: 'Dosis', sans-serif;
padding: 5px 0px;
}
.main-image{
display: block;
margin: 0px auto;
border: 10px solid #ffffff;
}
.feedback{
float: right;
width: 39%;
}
.feedback input{
width: 300px;
font-weight: bold;
font-size: 13pt;
}
.feedback textarea{
width: 298px;
font-size: 11pt;
}
.feedback form div input{
margin: 0px auto;
}
.register{
margin: 0px 30px;
width: 55%;
float: left;
}
.register-form{
margin: 8px auto;
}
.register-form input{
font-weight: bold;
font-size: 13pt;
width: 300px;
}
.register label{
font-size: 13pt;
width: 100px;
display: inline-block;
}
.register textarea{
font-size: 13pt;
width: 60%;
margin: 0 0 0 70px;
}
#checkbox-input{
width:20px;
}
.checkbox-happy label{
width:90%;
}
.button{
text-decoration:none;
text-align:center;
padding:10px 37px;
border:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
font:15px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#E5FFFF;
background-color:#a84416;
background-image: -moz-linear-gradient(top, #a84416 0%, #2b2315 100%);
background-image: -webkit-linear-gradient(top, #a84416 0%, #2b2315 100%);
background-image: -o-linear-gradient(top, #a84416 0%, #2b2315 100%);
background-image: -ms-linear-gradient(top, #a84416 0% ,#2b2315 100%);
background-image: linear-gradient(top, #a84416 0% ,#2b2315 100%);
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
text-shadow: 1px 0px 11px #bababa;
}
Raw
task1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Abstract Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="links">
<a href="#about">About</a>
<a href="#faq">F.A.Q.</a>
<a href="#contacts">Contacts</a>
<a href="#register">Register</a>
<a href="#contacts">Feedback</a>
</nav>
</header>
<main>
<h1> Some Abstract Page Header </h1>
<section id="about">
<h2> About Abstract Page </h2>
<img src="http://www.developermemes.com/wp-content/uploads/2013/03/Facepalm-1.jpeg" alt="Tactical facepalm" class="main-image">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, animi provident aspernatur. Optio quisquam veritatis aperiam adipisci possimus minus, animi cumque excepturi, ex ullam iure, commodi odit totam doloribus tenetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, animi provident aspernatur. Optio quisquam veritatis aperiam adipisci possimus minus, animi cumque excepturi, ex ullam iure, commodi odit totam doloribus tenetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, animi provident aspernatur. Optio quisquam veritatis aperiam adipisci possimus minus, animi cumque excepturi, ex ullam iure, commodi odit totam doloribus tenetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!</p>
</section>
<section id="faq">
<h2> Frequently Asked Questions </h2>
<dl>
<dt>Question 1</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
<dt>Question 2</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
<dt>Question 3</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
<dt>Question 4</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
<dt>Question 5</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
</dl>
</section>
<section id="contacts">
<h2>Contacts</h2>
<address>
<div>
<a href="http://www.stackoverflow.com" class="link">StackOverflow</a>
</div>
<div>
<a href="http://www.linkedin.com" class="link">Linkedin</a>
</div>
<div>
<a href="http://www.google.com" class="link">Google</a>
</div>
</address>
</section>
<section id="register" class="register">
<h2>Register for participation</h2>
<form class="register-form">
<div>
<label for="email-input-register">Email</label>
<input id="email-input-register" type="text" name="email" size="40" maxlength="50">
</div>
<div>
<label for="password-input-register"> Password</label>
<input id="password-input-register" type="password" size="40" maxlength="50">
<p>
<sub>We will <s>never</s>
<a href="#reference1" class="link"><sup>1</sup></a>
sell your personal details</sub>
</p>
</div>
<div>
<textarea name="comment" rows="3" cols="20">Comment</textarea>
</div>
<div class="checkbox-happy">
<input id="checkbox-input" type="checkbox" checked="checked">
<label for="checkbox-input">Check this if you are happy with all conditions!</label>
</div>
<input type="submit" class="button" value="Subscribe">
<input type="reset"class="button" value="Clear">
</form>
</section>
<section id="feedback" class="feedback">
<h2>Problems?</h2>
<h4> Please, provide your feedback</h4>
<form>
<div>
<input id="name-input-feedback" type="text" name="name-feedback" placeholder="Name" size="40"/>
</div>
<div>
<input id="email-input-feetback" type="text" name="email-feedback" placeholder="Email" size="40"/>
</div>
<div>
<textarea name="Question" rows="5" cols="20" placeholder="Question/Comment"></textarea>
</div>
<input type="submit" class="button" value="Send"/>
<input type="reset" class="button" value="Clear"/>
</form>
</section>
</main>
<footer>
<aside id="reference1">
<p> <sup>1</sup>We will sell it anyway!</p>
</aside>
<div class="links">
<a href="#about">About</a>
<a href="#faq">F.A.Q.</a>
<a href="#contacts">Contacts</a>
<a href="#register">Register</a>
<a href="#contacts">Feedback</a>
</div>
<p> (c) made by Kuru 2014</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment