Skip to content

Instantly share code, notes, and snippets.

@KipchirchirIan

KipchirchirIan/ktnnewslogo.html

Last active June 11, 2016 21:18
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 KipchirchirIan/33f83bafb9a3d02a83a1ce12a06d37fb to your computer and use it in GitHub Desktop.
Save KipchirchirIan/33f83bafb9a3d02a83a1ce12a06d37fb to your computer and use it in GitHub Desktop.
Download ZIP
KTN News logo in pure CSS
Raw
ktnnewslogo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css" charset="utf-8">
</head>
<body>
<div id="ktnnewslogo">
<div id="ktnsection">
<h2>ktn</h2>
</div>
<div id="newssection">
<h2>NEWS</h2>
</div>
<p>
Get The Whole <span id="storyfmt">Story</span>
</p>
</div>
</body>
</html>
Raw
style.css
body {
padding: 50px;
color: #fff;
background-color: #000;
font-family: sans-serif;
}
#ktnnewslogo {
/*width: 500px;
height: 300px;
background: #ddd;*/
color: #fff;
font-size: 2em;
position: relative;
z-index: -100;
}
#ktnsection {
color: #fff;
height: 0;
width: 80px;
border-top: 80px solid red;
border-left: 40px solid red;
border-right: 60px solid transparent;
}
#ktnsection h2 {
margin: 0px;
padding: 0px;
position: relative;
bottom: 70px;
right: 10px;
}
#newssection {
color: #fff;
height: 0px;
width: 100px;
border-bottom: 80px solid blue;
border-left: 60px solid transparent;
border-right: 60px solid blue;
position: relative;
left: 70px;
bottom: 70px;
z-index: -1;
}
#newssection h2 {
font-size: 1.05em;
font-weight: normal;
margin: 0px;
padding: 0px;
position: relative;
left: 30px;
top: 20px;
}
#ktnnewslogo p {
margin: 0px;
padding: 0px;
font-size: 0.8em;
position: relative;
bottom: 60px;
left: 10px;
}
#storyfmt {
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment