Skip to content

Instantly share code, notes, and snippets.

@xentek
Created November 15, 2014 17:25
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 xentek/066e46a741bec3e0bb9c to your computer and use it in GitHub Desktop.
Save xentek/066e46a741bec3e0bb9c to your computer and use it in GitHub Desktop.
A Pen by Eric Marden.
<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>

Octocat Code Along (Completed)

A simple example of HTML and CSS featuring Github's mascot, The Octocat!

A Pen by Eric Marden on CodePen.

License.

/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment