diff --git a/css/main.css b/css/main.css index b25e769..bb20ce7 100755 --- a/css/main.css +++ b/css/main.css @@ -5,18 +5,60 @@ ========================================================================== */ - - - - - - - - - - - - - - - +.fillthevoid { + height: 200px; + width: 100%; + font-family: Lato; + font-weight: 800; + font-size: 30px; + color: white; + background-color: red; + border:none; +} + +.voidfilled { + background: linear-gradient(270deg, #674500, #ffecc7); + background-size: 400% 400%; + -webkit-animation: BrownTown 5s ease infinite; + -moz-animation: BrownTown 5s ease infinite; + animation: BrownTown 5s ease infinite; + height: 200px; + width: 100%; + color: white; +} + +@-webkit-keyframes BrownTown { + 0% { + background-position: 0% 50% + } + 50% { + background-position: 100% 50% + } + 100% { + background-position: 0% 50% + } +} + +@-moz-keyframes BrownTown { + 0% { + background-position: 0% 50% + } + 50% { + background-position: 100% 50% + } + 100% { + background-position: 0% 50% + } +} + +@keyframes BrownTown { + 0% { + background-position: 0% 50% + } + 50% { + background-position: 100% 50% + } + 100% { + background-position: 0% 50% + } +} \ No newline at end of file diff --git a/index.html b/index.html index 8adde02..a3c175a 100755 --- a/index.html +++ b/index.html @@ -25,68 +25,11 @@ - - - -
-
-

Hello, world!

-

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

-

Learn more »

-
-
- -
- -
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

View details »

-
-
- -
- - -
+

You are using an outdated browser. Please upgrade your browser to improve your experience.

--> + + + + diff --git a/js/main.js b/js/main.js index 8b13789..b504467 100755 --- a/js/main.js +++ b/js/main.js @@ -1 +1,12 @@ +$(document).ready(function() { + $(".fillthevoid").click(function() { + $(this).toggleClass("voidfilled"); + }); +}); +$(".fillthevoid").on("click", function() { + var el = $(this); + el.text() == el.data("text-swap") ? + el.text(el.data("text-original")) : + el.text(el.data("text-swap")); +});