Add files via upload

tjb17003 · Mar 27, 2020 · e05b7af · e05b7af
1 parent f479420
commit e05b7af
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 10 deletions.
diff --git a/cssShowcase/index.html b/cssShowcase/index.html
@@ -10,8 +10,20 @@
     <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Hind:300&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Karla:700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
 </head>
 <body>
+
+
+
+    <div class="loader-wrapper">
+        <div class="wrap">
+            <div class="loading">
+              <div class="bounceball"></div>
+              <div class="text">LOADING</div>
+            </div>
+        </div>
+    </div>
     <div class="title">
         <p aria-label="Tyler">
             <span data-text="T">T</span>
@@ -38,7 +50,7 @@
             <ul class="drop-menu">
                 <li><a class="drop" href="https://www.instagram.com/tylerjamesburke/"><i id="icons" class="fa fa-instagram" aria-hidden="true"></i>Instagram</a></li>
                 <li><a class="drop" href="mailto:tylerburke3@gmail.com"><i id="icons" class="fa fa-envelope-o" aria-hidden="true"></i>Email</a></li>
-                <li><a class="drop" href="https://www.linkedin.com/in/tyler-burke-149ab31a3/"><i id="icons" class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a></li>
+                <li><a class="drop" href="www.linkedin.com/in/tyler-burke-149ab31a3"><i id="icons" class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a></li>
             </ul>
         </li>
 
@@ -48,8 +60,8 @@
     <div class="drop-menu2">
         <p id="aboutInfo">Hello,</p>
         <p id="aboutInfo">Welcome to my page! I have chosen a few of my favored pieces to display my craft below. Currently, I am attending the University of Connecticut as 
-            a Digital Media and Design student. I am focused on a concentration of Web & Interactive Media Design. </p>
-        <p id="aboutInfo">I have a passion for art and creating detailed illustrations. For me, conveying emotion and making an observer feel a certain way is the most rewarding 
+            a Digital Media and Design student. I am on a focused concentration of Web & Interactive Media Design. </p>
+        <p id="aboutInfo">I have a passion for art and creating detailed illustrations. For me, conveying emotion and making an observer feel a certain type of way is the most rewarding 
             aspect of drawing.  To do this, I shape my artwork to exposes a certain emotion leaving a lingering impression on a person.  Such as picking a certain subject 
             matter and implementing hidden messages underneath the broader picture. Interpretation of these messages are totally individualized for the viewer. Art has the power to 
             transform, to educate, inspire and motivate others. It is a significant feature of my life and has altered the way I view this world.</p>
@@ -140,6 +152,8 @@
     </div>
 </div>
 
+
+
 <script src="https://use.fontawesome.com/0e60a59edb.js"></script>
 <script src="newJS.js"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
@@ -148,14 +162,17 @@
         $("#contact").click(function(){
             $("ul").toggleClass("active")
         })
-    })
+    });
 
     $(document).ready(function(){
         $("#about").click(function(){
             $("div").toggleClass("active")
         })
-    })
+    });
+    $(window).on("load", function(){
+        $(".loader-wrapper").fadeOut("slow");
+    });
 </script>
 <script src="main.js"></script>
 </body>
-</html>
+</html>
diff --git a/cssShowcase/style.css b/cssShowcase/style.css
@@ -9,6 +9,96 @@ body {
 
 }
 
+
+
+
+
+.loader-wrapper{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left:0;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: Montserrat;
+}
+.wrap {
+
+  top: 50%;
+  left: 50%;
+
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.text {
+  color:black;
+  display: inline-block;
+  margin-left: 5px;
+}
+
+.bounceball {
+  position: relative;
+  display: inline-block;
+  height: 37px;
+  width: 15px;
+}
+.bounceball:before {
+  position: absolute;
+  content: '';
+  display: block;
+  top: 0;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background-color: black;
+  -webkit-transform-origin: 50%;
+          transform-origin: 50%;
+  -webkit-animation: bounce 500ms alternate infinite ease;
+          animation: bounce 500ms alternate infinite ease;
+}
+
+@-webkit-keyframes bounce {
+  0% {
+    top: 30px;
+    height: 5px;
+    border-radius: 60px 60px 20px 20px;
+    -webkit-transform: scaleX(2);
+            transform: scaleX(2);
+  }
+  35% {
+    height: 15px;
+    border-radius: 50%;
+    -webkit-transform: scaleX(1);
+            transform: scaleX(1);
+  }
+  100% {
+    top: 0;
+  }
+}
+
+@keyframes bounce {
+  0% {
+    top: 30px;
+    height: 5px;
+    border-radius: 60px 60px 20px 20px;
+    -webkit-transform: scaleX(2);
+            transform: scaleX(2);
+  }
+  35% {
+    height: 15px;
+    border-radius: 50%;
+    -webkit-transform: scaleX(1);
+            transform: scaleX(1);
+  }
+  100% {
+    top: 0;
+  }
+}
+
 /*title*/
 .title{
     display: flex;
@@ -53,7 +143,7 @@ p {
   p span::after {
     z-index: 2;
     color:#6b6b6b;
-    text-shadow: -1px 0 1px#6b6b6b, 1px 0 1px #6b6b6b);
+    text-shadow: -1px 0 1px#6b6b6b, 1px 0 1px #6b6b6b;
     -webkit-transform: rotateY(-40deg);
             transform: rotateY(-40deg);
   }
@@ -65,9 +155,7 @@ p {
     -webkit-transform: rotateY(-10deg);
             transform: rotateY(-10deg);
   }
-  p span + span {
-    margin-left: 0.3em;
-  }
+
   @media (min-width: 20em) {
     p {
       font-size: 2em;