A simple example of HTML and CSS featuring Github's mascot, The Octocat!
A Pen by Eric Marden on CodePen.
<div class="container"> | |
<!-- START HERE --> | |
<h1>Octocat</h1> | |
<h2>Official GitHub mascot</h2> | |
<p>I'm part octopus and part cat and the official mascot of <a href="http://www.github.com">GitHub</a>.</p> | |
<p>You can find all sorts of variations of me <a href="http://octodex.github.com/" target="_blank">here</a>.</p> | |
<a href="https://twitter.com/github"> | |
<img src="http://xentek.net/octocat/social-twitter.png" alt="twitter"> | |
</a> | |
<a href="https://www.facebook.com/pages/GitHub/111984808855337"> | |
<img src="http://xentek.net/octocat/social-facebook.png" alt="facebook"> | |
</a> | |
<!-- END HERE --> | |
</div> |
A simple example of HTML and CSS featuring Github's mascot, The Octocat!
A Pen by Eric Marden on CodePen.
/* General Styles */ | |
body { | |
color: white; | |
font-size: 16px; | |
background: url('http://xentek.net/octocat/octocat.jpg') no-repeat; | |
} | |
h1 { | |
font-size: 80px; | |
} | |
h2 { | |
background: #35C0F2; | |
color: black; | |
padding: 5px; | |
border-radius: 5px; | |
} | |
a { | |
color: #35C0F2; | |
text-decoration: none; | |
} | |
/* Layout */ | |
.container { | |
float: right; | |
padding: 15px; | |
background: black; | |
border-bottom-left-radius: 25px; | |
} |