Skip to content

Instantly share code, notes, and snippets.

@ajbraus

ajbraus/css-demo.html

Created September 3, 2019 18:36
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 ajbraus/bea3af788920f34485b43f5f668430a6 to your computer and use it in GitHub Desktop.
Save ajbraus/bea3af788920f34485b43f5f668430a6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="clearfix">
<a href="https://www.google.com" target="_blank" class="btn-awesome float-left">Log In</a>
<a href="https://www.google.com" target="_blank" class="btn-awesome float-right">Sign Up</a>
</div>
<img src="puppy.png" alt="">
<p>
Hey there, this is some <span class="small-text">small text</span> you've got there. <span class="italic-text">Italic text</span>
</p>
</body>
</html>
Raw
styles-sample.css
.text-crimson {
color:red;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.btn-awesome{
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
text-align: right;
margin: 10px 10px;
padding-right: 30px;
border: 11px solid #157fef;
color: red;
box-shadow: 5px 5px 2px -5px rgba(0,0,0,0.85);
padding: 10px;
border-radius: 7px;
text-decoration: none;
}
.btn-awesome:hover {
background: #eee;
color: #c50000;
cursor: pointer;
}
.small-text {
font-size: 10px;
}
.italic-text {
font-style: italic;
}
.clearfix {
overflow: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment