Skip to content

Instantly share code, notes, and snippets.

@abhi2694

abhi2694/ind.html

Created August 18, 2018 18:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abhi2694/aef620416d4aa2b1a5c0b3270c43d865 to your computer and use it in GitHub Desktop.
Save abhi2694/aef620416d4aa2b1a5c0b3270c43d865 to your computer and use it in GitHub Desktop.
Download ZIP
index.html
Raw
ind.html
<html lang="en">
<head>
<title> Bootstrap Example </title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../lib/w3.css">
</head>
<style>
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
* {
box-sizing: border-box;
}
#ex1 {
width:100%;
border: 12% dashed;
padding: 20px;
box-shadow: 25px 30px 180px #888888;}
#ex2 { width:120%;
border: 12% dashed;
padding: 20px;
box-shadow: 25px 30px 180px #888888;
}
#a21 {width: 100%;
background-color: rgb(10,20,50);
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 10s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color: rgb(150,60,20);}
20% {background-color: rgb(30,140 ,50);}
40% {background-color: rgb(200,100,150);}
60% {background-color: rgb(20, 30 ,140);}
80% {background-color: black;}
100% {background-color: rgb(10,20,30);}
/* Standard syntax */
@keyframes example {
0% {background-color: rgb(150,60,20);}
20% {background-color: rgb(30,140,50);}
40% {background-color: rgb(200,100,150);}
60% {background-color: rgb(20,30,140);}
80% {background-color: black;}
100% {background-color: rgb(10,20,30);}
}
div {
animation-duration: 9s;
animation:infinite;
}
</style>
<body style="background-color:rgb(230,220,140);">
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">UC</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/customer">Customer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/prof">Professional</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/login">Login/Sign Up</a>
</li>
</ul>
</div>
</nav>
<br/>
<div class="container" style="margin-top:0%;">
<div class="row" style="position:fixed;">
<div class="column1">
<p id="a21" style="color:white;width:190%;padding:5%;margin-left:60%;margin-top: 20%;font-size:150%;text-align:center;">
<i>WELCOME TO U R B A N - C L A P</i>
</p>
</div>
</div>
</div>
<br><br>
<img class="mySlides w3-animate-fading" src="/images/ss1.png" style="width:30%;margin-left:32%;margin-top:10%;">
<img class="mySlides w3-animate-fading" src="/images/ss2.png" style="width:30%;margin-left:32%;margin-top:10%;">
<img class="mySlides w3-animate-fading" src="/images/ss3.png" style="width:30%;margin-left:32%;margin-top:10%;">
<img class="mySlides w3-animate-fading" src="/images/ss4.png" style="width:30%;margin-left:32%;margin-top:10%;">
<img class="mySlides w3-animate-fading" src="/images/ss5.png" style="width:30%;margin-left:32%;margin-top:10%;">
<img class="mySlides w3-animate-fading" src="/images/ss6.png" style="width:30%;margin-left:32%;margin-top:10%;">
<img class="mySlides w3-animate-fading" src="/images/ss7.png" style="width:30%;margin-left:32%;margin-top:10%;">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000);
}
</script>
<br>
<br>
<br>
<table>
<tr>
<th>
<div class="w3-container w3-center w3-animate-top" id="ex1" style="margin-left:80%; color:rgb(267,1,208);">
<h1><a href="/cust">CUSTOMER</a></h1>
</div>
</th>
<th >
<div class="w3-container w3-center w3-animate-bottom" id="ex2" style="margin-left:250%;color:rgb(267,1,208);">
<h1><a href="/prof">PROFESSIONAL</a></h1>
</div>
</th>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment