diff --git a/cssShowcase/index.html b/cssShowcase/index.html index 838be5c..8c457c8 100644 --- a/cssShowcase/index.html +++ b/cssShowcase/index.html @@ -10,8 +10,20 @@ + + + + +
+
+
+
+
LOADING
+
+
+

T @@ -38,7 +50,7 @@

@@ -48,8 +60,8 @@

Hello,

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.

-

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.

+

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.

@@ -140,6 +152,8 @@
+ + @@ -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"); + }); - + \ No newline at end of file diff --git a/cssShowcase/style.css b/cssShowcase/style.css index 81b05f9..900f9bb 100644 --- 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;