first commit

peter-kimanzi · Sep 12, 2022 · 962678a · 962678a
commit 962678a
Show file tree

Hide file tree

Showing 3 changed files with 713 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Queen Elizabeth II Portrait in Vanilla CSS</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<queen-liz id="queen">
+
+  <queen-head>
+    <div class="hair"></div>
+    <div class="earrings"></div>
+
+    <ul class="hat">
+      <li class="top"><i></i></li>
+      <li class="feather"></li>
+      <li class="feather"></li>
+      <li class="brim"></li>
+    </ul>
+
+    <ul class="face">
+      <li class="eye"><i></i></li>
+      <li class="eye"><i></i></li>
+      <li class="nose"></li>
+      <li class="mouth"></li>
+    </ul>
+  </queen-head>
+
+  <queen-body>
+    <div class="neck"></div>
+    <div class="button"></div>
+    <div class="crest"><i></i></div>
+  </queen-body>
+
+</queen-liz>
+
+<details class="ref">
+  <summary>View Reference Image</summary>
+  <div class="ref-bg">
+<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Queen_Elizabeth_II_in_March_2015.jpg/1200px-Queen_Elizabeth_II_in_March_2015.jpg" />
+  </div>
+</details>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,7 @@
+var queen = document.getElementById('queen');
+
+function animateQueen() {
+queen.classList.toggle('smile');
+}
+
+queen.addEventListener("click", animateQueen);