Skip to content

Instantly share code, notes, and snippets.

@kelvneo

kelvneo/index.css

Created May 25, 2015 02:05
Show Gist options
  • Save kelvneo/5176234b7b5d54b4a16a to your computer and use it in GitHub Desktop.
Save kelvneo/5176234b7b5d54b4a16a to your computer and use it in GitHub Desktop.
Download ZIP
DISM - WCD CA1 Source Code
Raw
index.css
/* Sidebar */
#sidebar {
background-color: #D1B388;
width: 19.75em;
height: 50em;
float: right;
clear: both;
border-top: 0.25em solid #795A37;
border-right: 0.25em solid #795A37;
border-bottom: 0.25em solid #795A37;
}
#sidebar img.image1 {
width: 256px;
height: 256px;
position: relative;
left: 50%;
transform: translate(-50%, 10%);
}
#sidebarcontent {
width: 17em;
padding: 0 auto;
margin: 0 auto;
}
/* Social Media */
#socialmedia {
padding: auto;
margin: auto;
}
#twitter , #instagram, #github, #facebook{
display: inline-block;
padding-right: 0.1em;
padding-bottom: 0.2em;
}
#twitter img{
float:left;
padding: 0.1em;
width: 39.360361145px;
height: 32px;
}
#instagram img, #github img , #facebook img {
float:left;
padding: 0.1em;
padding-right: 7.360361145px;
width: 32px;
height: 32px;
}
.socialmediatxt {
position: relative;
top: 0.4em;
}
/* Start of Content */
#content {
border: 0.25em solid #795A37;
width: 54.5em;
margin: auto;
height: 50em;
float: left;
}
#content ul {
list-style-type: none;
margin: 0;
padding: 1em 0;
}
#content li {
width: 44em;
padding-left: 1em;
font-size: 19px;
}
#content .date {
font-size: 15px;
}
#content .blogtrailer {
font-size: 17px;
}
#content .blogtrailer a:link,a:visited {
text-decoration: none;
color: blue;
background-color: transparent;
font-weight: normal;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kelvin Neo's Website</title>
<link rel="shortcut icon" href="favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link type="text/css" rel="stylesheet" media="screen" href="main.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="index.css"/>
<!--[if lt IE 9]>
<script src="scripts/semantic.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<!--Header of website-->
<div id="header">
<h1>Le Kelvin Site</h1>
</div>
<!--Navigation Bar-->
<nav id="nav">
<ul>
<li id="currentpage">
<a href="index.html">Home</a>
</li>
<li>
<a href="aboutme.html">About Me</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="portfolio.html">Portfolio</a>
</li>
<li>
<a href="srccode.html">Source Code</a>
</li>
<li>
<a href="gallery.html">Gallery</a>
</li>
</ul>
</nav>
<!--Start of Content-->
<div id="stuff">
<!--Sidebar-->
<aside id="sidebar">
<div id="sidebarcontent">
<img class="image1" src="images/image1.png" alt="logo"/>
<div style="padding-top: 2em;">
<a href="aboutme.html#iconhistory">Why is my icon a Yellow Square?</a>
</div>
<div id="socialmedia">
<br />---<br />
<h3> Stalk Me: </h3>
<div id="facebook">
<a href="https://www.facebook.com/nkh.kelvin" target="_blank"><img src="images/FB-f-Logo__blue_512.png" alt="Find me on Facebook"/><span class="socialmediatxt">Find me on Facebook</span></a>
</div><img src="images/open_in_new_window.png" style="padding-left:1px;padding-bottom:1px;width:12px;height:12px;">
<div id="twitter">
<a href="https://twitter.com/deathline75e3" target="_blank"><img src="images/Twitter_logo_blue.png" alt="Follow @deathline75e3 on Twitter"/><span class="socialmediatxt">Follow me on Twitter</span></a>
</div><img src="images/open_in_new_window.png" style="padding-left:1px;padding-bottom:1px;width:12px;height:12px;">
<div id="instagram">
<a href="https://instagram.com/nkh.kelvin" target="_blank"><img src="images/Glyph_Logo_png.png" alt="Follow nkh.kelvin on Instagram"/><span class="socialmediatxt">Follow me on Instagram</span></a>
</div><img src="images/open_in_new_window.png" style="padding-left:1px;padding-bottom:1px;width:12px;height:12px;">
<div id="github">
<a href="https://github.com/deathline75" target="_blank"><img src="images/GitHub-Mark-32px.png" alt="Find deathline on Github"/><span class="socialmediatxt">Find me on Github</span></a>
</div><img src="images/open_in_new_window.png" style="padding-left:1px;padding-bottom:1px;width:12px;height:12px;">
</div>
</div>
</aside>
<!--Main Content-->
<div id="content">
<ul>
<li>
<h2>Isolating of CSS files</h2>
<div class="date">21 May 2015, 12.26PM</div>
Apparently having more than one CSS file helps to clear up some of the dirt in the CSS file, creating a smaller file size.
<div class="blogtrailer"><span class="readmore"><a href="blog.html#1">Read more</a></span> <span class="top"><a href="#main">Back to Top</a></span></div>
---
</li>
<li>
<h2>Content Filling Time!</h2>
<div class="date">20 May 2015, 10.46AM</div>
So much for filling text. I am very very tired.
i r8 8/8 gr8 job m8te.
<div class="blogtrailer"><span class="readmore"><a href="blog.html#1">Read more</a></span> <span class="top"><a href="#main">Back to Top</a></span></div>
---
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Raw
main.css
/* All colours are temporary */
body {
background-color: #FFE1BF;
font-family: "Open Sans", sans-serif;
}
h2, h3, h4{
padding: 0;
margin: 0;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 19px;
}
a {
color: blue;
text-decoration: none;
}
ul {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
#header {
color: white;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
background-color: #5E412F;
background-image: url("images/header.png");
width: 74.5em;
padding-top: 30em;
margin: auto;
font-weight: bold;
border: 0.25em solid #795A37;
}
#header h1 {
font-size: 50px;
margin: 0;
padding: 0 0.1em;
}
#nav {
width: 74.5em;
margin: auto;
padding: 0.2em 0 0.2em 0;
background-color: #C69C6D;
border-left: 0.25em solid #795A37;
border-right: 0.25em solid #795A37;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
font-size: 22px;
padding: 0 0.5em 0;
display: inline;
list-style-type: none;
}
#nav a{
padding: 0 0.2em 0 0.2em;
}
#nav a:link {
color: black;
text-decoration: none;
}
#nav a:visited {
color: black;
text-decoration: none;
}
#nav a:hover {
background-color: #F09B18;
font-weight: normal;
text-decoration: none;
}
#nav a:active {
background-color: #FF9B18;
font-weight: bold;
text-decoration: none;
}
#currentpage a:link, a:visited, a:hover, a:active {
font-weight: bold;
background-color: transparent;
}
#stuff {
width: 75em;
margin: auto;
}
#content {
background-color: #D1B388;
width: 74.5em;
margin: 0 auto;
padding: 0;
border: 0.25em solid #795A37;
}
#content .top {
float:right;
}
#content.top a:hover,a:active {
font-weight: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment