Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
ish works
  • Loading branch information
Shobha Venkatraman authored and Shobha Venkatraman committed Mar 26, 2016
1 parent 3a7b9fd commit c82161b
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 77 deletions.
72 changes: 57 additions & 15 deletions css/main.css
View file
Expand Up @@ -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%
}
}
67 changes: 5 additions & 62 deletions index.html
View file
Expand Up @@ -25,68 +25,11 @@
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>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.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>

<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>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. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>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. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>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.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>

<hr>

<footer>
<p>&copy; Company 2015</p>
</footer>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>-->

<button class="fillthevoid" data-text-swap="DON'T PUT ME IN A BOX" data-text-original="PUT ME IN A BOX">PUT ME IN A BOX</button>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

<script src="js/vendor/bootstrap.min.js"></script>
Expand Down
11 changes: 11 additions & 0 deletions js/main.js
View file
@@ -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"));
});

0 comments on commit c82161b

Please sign in to comment.