Transform, Transition and Animation - Translate Hero Example

pktcodes · pktcodes · commit cc6509db72a8 · 2022-11-09T21:21:34.000-06:00
diff --git a/index.html b/index.html
@@ -11,8 +11,16 @@
   </head>
 
   <body>
-    <div class="one"></div>
-    <div class="two"></div>
-    <div class="three"></div>
+    <div class="hero">
+      <div class="hero-center">
+        <h1>hello world</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quos quia
+          asperiores incidunt accusantium tenetur saepe, eaque sequi? Ipsum
+          dicta illo corrupti voluptatibus minus explicabo quae officia odit
+          consequuntur distinctio!
+        </p>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,25 +1,22 @@
 /* 
-transform:translate(),scale()rotate(),skew()
+transform:translate() - Hero Example
 */
 
-div {
-  width: 150px;
-  height: 150px;
-  display: inline-block;
+* {
+  margin: 0;
 }
 
-.one {
-  background: red;
-  transform: translateX(75px);
+.hero {
+  min-height: 100vh;
+  position: relative;
 }
 
-.two {
-  background: blue;
-  transform: translateY(-40px);
-}
-
-.three {
-  background: green;
-  /* transform: translateX(50%); */
-  transform: translate(200px, 200px);
+.hero-center {
+  border: 2px solid red;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 300px;
+  text-align: center;
 }
