underdown · July 15, 2020 18:38 · Jul 15, 2020
diff --git a/index.html b/index.html
@@ -0,0 +1,8 @@
+<div class="level">
+  <div class="highlight">
+    <div id="level-one" class="vertical-center2">
+      LEVEL 1 | $<span style="color:#c0c0c0">$$$</span>
+    </div>
+  </div
+</div>
+
diff --git a/playing-with-overlays-v2.markdown b/playing-with-overlays-v2.markdown
@@ -0,0 +1,7 @@
+playing with overlays v2
+------------------------
+
+
+A [Pen](https://codepen.io/overup/pen/jOWvwQj) by [Ryan Underdown](https://codepen.io/overup) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/overup/pen/jOWvwQj/license).
diff --git a/script.js b/script.js
@@ -0,0 +1,10 @@
+$(document).ready(function() {
+
+  $(".level").click(function() {
+    $("#level-one").toggleClass("vertical-center");
+     $("#level-one").toggleClass("vertical-center2");
+    console.log("container clicked");
+  });
+
+
+  });
diff --git a/scripts b/scripts
@@ -0,0 +1,2 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/animateCSS/1.2.2/jquery.animatecss.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,28 @@
+.level {width:550px;margin:auto;background-image:url("https://classyclosets.com/lp/images/price-2.jpg");height:400px;cursor:pointer;}
+.highlight {height:400px;width:550px;}
+.hidden {display:none}
+.vertical-center {
+  margin: 0;
+  position: absolute;
+  border:3px solid #fff;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  background:#3F3E3C;padding:1em;
+  opacity:0.98;
+  font-size:24px;
+  color:white;
+}
+.vertical-center2 {
+  margin: 0;
+  position: absolute;
+  border:3px solid #867B72;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  background:#fff;padding:1em;
+  font-size:24px;
+  color:#867B72;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/animateCSS/1.2.2/jquery.animatecss.min.js"></script>
No results found