Women in STEM addition (#2348)

* card game addition * changes requested done --------- Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
zero-to-mastery · Oct 29, 2023 · fc3d50e · fc3d50e
1 parent 714711f
commit fc3d50e
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 0 deletions.
diff --git a/Art/Lucile-Tech/cardproject.png b/Art/Lucile-Tech/cardproject.png
diff --git a/Art/Lucile-Tech/index.html b/Art/Lucile-Tech/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Women in STEM</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <div class="card">
+      <div class="face face1">
+        <div class="content">
+          <h3>
+            Who is the world's first computer programmer ? (Answer on hover)
+          </h3>
+        </div>
+      </div>
+      <div class="face face2">
+        <div class="content">
+          <h4>Ada Lovelace</h4>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="face face1">
+        <div class="content">
+          <h3>Can you name a famous scientist? (Answer on hover)</h3>
+        </div>
+      </div>
+      <div class="face face2">
+        <div class="content">
+          <h4>Marie Curie</h4>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="face face1">
+        <div class="content">
+          <h3>Who is the CTO behind OpenAI's ChatGPT? (Answer on hover)</h3>
+        </div>
+      </div>
+      <div class="face face2">
+        <div class="content">
+          <h4>Mira Murati</h4>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Art/Lucile-Tech/style.css b/Art/Lucile-Tech/style.css
@@ -0,0 +1,49 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+  background-color: #f1f1f1;
+}
+
+.card {
+  width: 300px;
+  height: 150px;
+  perspective: 1000px;
+  display: inline-block;
+  margin: 10px;
+}
+
+.face {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transition: transform 0.5s;
+  backface-visibility: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.face1 {
+  background: #d2d7e7;
+}
+
+.face2 {
+  background: #d1dfde;
+  transform: rotateY(180deg);
+}
+
+.card:hover .face1 {
+  transform: rotateY(-180deg);
+}
+
+.card:hover .face2 {
+  transform: rotateY(0);
+}
+
+.content {
+  text-align: center;
+  color: #fff;
+}
diff --git a/include.js b/include.js
@@ -926,6 +926,13 @@ let cards = [
     author: 'Shubham Chaudhary',
     githubLink: 'https://github.com/Stellar-X'
   },
+  {
+    artName: 'Women in STEM',
+    pageLink: './Art/Lucile-Tech/index.html',
+    imageLink: './Art/Lucile-Tech/cardproject.png',
+    author: 'Lucile Tech',
+    githubLink: 'https://github.com/LucileTech'
+  },
   {
     artName: 'Trippy',
     pageLink: './Art/Simar/trippy.html',