?
This commit is contained in:
parent
a1ee88add7
commit
1f75c986f8
2 changed files with 176 additions and 1 deletions
75
css/home.css
75
css/home.css
|
|
@ -11,3 +11,78 @@
|
||||||
.person:hover {
|
.person:hover {
|
||||||
border-color: #f1f1f1;
|
border-color: #f1f1f1;
|
||||||
}
|
}
|
||||||
|
.carousel-inner img {
|
||||||
|
-webkit-filter: grayscale(90%);
|
||||||
|
filter: grayscale(90%); /* make all photos black and white */
|
||||||
|
width: 100%; /* Set width to 100% */
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-caption h3 {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.carousel-caption {
|
||||||
|
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-1 {
|
||||||
|
background: #2d2d30;
|
||||||
|
color: #bdbdbd;
|
||||||
|
}
|
||||||
|
.bg-1 h3 {color: #fff;}
|
||||||
|
.bg-1 p {font-style: italic;}
|
||||||
|
|
||||||
|
/* Remove rounded borders from list */
|
||||||
|
.list-group-item:first-child {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item:last-child {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove border and add padding to thumbnails */
|
||||||
|
.thumbnail {
|
||||||
|
padding: 0 0 15px 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail p {
|
||||||
|
margin-top: 15px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Black buttons with extra padding and without rounded borders */
|
||||||
|
.btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #333;
|
||||||
|
color: #f1f1f1;
|
||||||
|
border-radius: 0;
|
||||||
|
transition: .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On hover, the color of .btn will transition to white with black text */
|
||||||
|
.btn:hover, .btn:focus {
|
||||||
|
border: 1px solid #333;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header, h4, .close {
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff !important;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header, .modal-body {
|
||||||
|
padding: 40px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
100
home.html
100
home.html
|
|
@ -84,6 +84,106 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!--
|
||||||
|
<div class="bg-1">
|
||||||
|
<div class="container">
|
||||||
|
<h3 class="text-center">UPCOMING EVENTS</h3>
|
||||||
|
<p class="text-center">idk what to put here yet<br> Remember to book your tickets!</p>
|
||||||
|
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
|
||||||
|
<li class="list-group-item">October Sold Out!</li>
|
||||||
|
<li class="list-group-item">November 3</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row text-center">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="thumbnail">
|
||||||
|
<img src="paris.jpg" alt="Paris">
|
||||||
|
<p><strong>Paris</strong></p>
|
||||||
|
<p>Fri. 27 November 2015</p>
|
||||||
|
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="thumbnail">
|
||||||
|
<img src="newyork.jpg" alt="New York">
|
||||||
|
<p><strong>New York</strong></p>
|
||||||
|
<p>Sat. 28 November 2015</p>
|
||||||
|
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="thumbnail">
|
||||||
|
<img src="sanfran.jpg" alt="San Francisco">
|
||||||
|
<p><strong>San Francisco</strong></p>
|
||||||
|
<p>Sun. 29 November 2015</p>
|
||||||
|
<button class="btn data-toggle="modal" data-target="#myModal"">Buy Tickets</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal fade" id="myModal" role="dialog">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||||
|
<h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form role="form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
|
||||||
|
<input type="number" class="form-control" id="psw" placeholder="How many?">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
|
||||||
|
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-block">Pay
|
||||||
|
<span class="glyphicon glyphicon-ok"></span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
|
||||||
|
<span class="glyphicon glyphicon-remove"></span> Cancel
|
||||||
|
</button>
|
||||||
|
<p>Need <a href="#">help?</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h3 class="text-center">Contact</h3>
|
||||||
|
<p class="text-center"><em>We love our fans!</em></p>
|
||||||
|
<div class="row test">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<p>Drop a note.</p>
|
||||||
|
<p><span class="glyphicon glyphicon-map-marker"></span>Denver, US</p>
|
||||||
|
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
|
||||||
|
<p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 form-group">
|
||||||
|
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 form-group">
|
||||||
|
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12 form-group">
|
||||||
|
<button class="btn pull-right" type="submit">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue