Skip to content

Instantly share code, notes, and snippets.

@zempo

zempo/__replit_main__

Created December 9, 2018 07:11
Show Gist options
  • Save zempo/2967acc315d987a13756d01ee4a20f25 to your computer and use it in GitHub Desktop.
Save zempo/2967acc315d987a13756d01ee4a20f25 to your computer and use it in GitHub Desktop.
Download ZIP
Attribute selector drill created by zempo1 - https://repl.it/@zempo1/Attribute-selector-drill
Raw
__replit_main__
Empty file
Raw
index.css
div {
background: green;
}
img {
width: 300px;
mix-blend-mode: overlay;
}
img[src*='cat'] {
transform: rotate(180deg);
}
/* Add a selector and remove comment
.... {
transform: rotate(180deg);
}
*/
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Attribute selectors drill</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main role="main">
<h3>Images</h3>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/June_odd-eyed-cat.jpg/737px-June_odd-eyed-cat.jpg" alt="a white cat with one yellow eye and one blue eye"></div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Rob_Roy_%28dog%29.jpg" alt="a golden retriever on a leash"></div>
<div><img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fstuffpoint.com%2Fcats%2Fimage%2F184228-cats-cute-weird-cat.jpg&f=1" alt="a cat with long whiskers looking up at the camera"></div>
<div><img src="https://upload.wikimedia.org/wikipedia/en/b/b7/Smoky_%28dog%29_in_helmet.jpg" alt="a small dog sitting inside an upturned helmet"></div>
<div><img src="http://vignette4.wikia.nocookie.net/harrypotter/images/7/7d/Blue-persian-cat-1-.jpg/revision/latest?cb=20101220161526" alt="a proud looking fluffy grey cat"></div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Boxer_%28dog%29.jpg" alt="two bulldogs on leashes"></div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment