add flexbox demo

keshprad · keshprad · commit e57b1ad428ef · 2020-10-17T20:11:50.000-07:00
diff --git a/CSS_Flexbox_and_Animations/index.html b/CSS_Flexbox_and_Animations/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>CSS Flexbox and Animations</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <section id="hero">
+      
+      <div class="text">
+        <h1 class="animate__animated animate__fadeInDown">This is WebDev</h1>
+        <h3>Let's talk &rarr;</h3>
+      </div>
+
+      <div class="socials">
+        <ul class="animate__animated animate__zoomInRight animate__slow">
+          <li>Twitter</li>
+          <li>Reddit</li>
+          <li>Facebook</li>
+          <li>Instagram</li>
+        </ul>
+      </div>
+
+    </section>
+
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/CSS_Flexbox_and_Animations/script.js b/CSS_Flexbox_and_Animations/script.js
diff --git a/CSS_Flexbox_and_Animations/style.css b/CSS_Flexbox_and_Animations/style.css
@@ -0,0 +1,52 @@
+* {
+  margin: 0px;
+  padding: 0px;
+}
+
+#hero {
+  background-color: #212121;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: sans-serif;
+  color: #c9c9c9;
+}
+
+#hero div {
+  margin: 0 5vw;
+}
+
+#hero .text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#hero .text h1 {
+  font-size: 5rem;
+  margin-bottom: 20px;
+}
+
+#hero .text h3 {
+  font-size: 3rem;
+  margin-top: 20px;
+  transition: transform 500ms;
+}
+
+#hero .text h3:hover {
+  transform: scale(0.9) translateY(10px);
+  color: #969696;
+}
+
+#hero .socials ul li {
+  list-style: none;
+  font-size: 2rem;
+  font-weight: 600;
+  transition: 500ms;
+}
+
+#hero .socials ul li:hover {
+  color: #e5911b;
+}
