Skip to content

Instantly share code, notes, and snippets.

@zempo

zempo/__replit_main__

Created December 9, 2018 07:11
Show Gist options
  • Save zempo/84328945ecf897a38d5c93343b946c06 to your computer and use it in GitHub Desktop.
Save zempo/84328945ecf897a38d5c93343b946c06 to your computer and use it in GitHub Desktop.
Download ZIP
Anchor pseudo-classes drill created by zempo1 - https://repl.it/@zempo1/Anchor-pseudo-classes-drill
Raw
__replit_main__
Empty file
Raw
index.css
main {
padding: 30px;
font-size: 16px;
}
a {
text-decoration: none;
}
a:link {
color: purple;
}
a:visited {
color: orange;
}
a:active {
color: black;
}
a:hover {
font-size: 20px;
}
/* key-like styles used by
https://meta.stackexchange.com */
kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #FFF;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
white-space: nowrap;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Anchor pseudoclasses drill</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main role="main">
<p>Choose an animal below to search for it on Google. Remember: you can navigate through this list with
<kbd>Tab</kbd> and
<kbd>Shift</kbd> +
<kbd>Tab</kbd>.</p>
<ul>
<li>
<a href="https://www.google.com/?#q=cats" target="_blank">Cats</a>
</li>
<li>
<a href="https://www.google.com/?#q=dogs" target="_blank">Dogs</a>
</li>
<li>
<a href="https://www.google.com/?#q=pigs" target="_blank">Pigs</a>
</li>
</ul>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment