Skip to content

Instantly share code, notes, and snippets.

@sebyx07

sebyx07/index.html

Created December 8, 2017 09:16
Show Gist options
  • Save sebyx07/2224c5d35452e3e4acc6e7c4b0fc0b5b to your computer and use it in GitHub Desktop.
Save sebyx07/2224c5d35452e3e4acc6e7c4b0fc0b5b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Riders Club</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- pt telefon, blocare zoom -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- // librarie bootstrap -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <!-- //fonturi -->
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Mountain Bike</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#myPage">Acasa</a></li>
<li><a href="#band">Club</a></li>
<li><a href="#tour">Concurs</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.biciclistul.ro/wp-content/uploads/Concurs-mountain-bike-Romania-1080x738.jpg" alt="New York" width="1200" height="700">
<div class="carousel-caption">
<h3>Muntii Semenic</h3>
<p>O privliste uimitoara deasupra muntiilor!</p>
</div>
</div>
<div class="item">
<img src="https://www.freerider.ro/wp-content/uploads/2016/06/o-alta-poza-noroi.jpg">
<div class="carousel-caption">
<h3>Cheile Nerei</h3>
<p>Un traseu mirific prin padure!</p>
</div>
</div>
<div class="item">
<img src="http://www.freerider.ro/wp-content/uploads/2016/01/1015591_389507204491870_960543493_o.jpg?x12266" alt="Los Angeles" width="1200" height="700">
<div class="carousel-caption">
<h3>Valea lui Liman</h3>
<p>O experienta minunata!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Inapoi</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Inainte</span>
</a>
</div>
<!-- Container (The Band Section) -->
<div id="band" class="container text-center">
<h3>Riders</h3>
<p><em>Viața este ca mersul pe bicicletă. Pentru a-ți păstra echilibrul trebuie să fii mereu în mișcare!</em></p>
<p class="description">Prin cateva poteci salbatice, neconventionale si provocatoare, de-a lungul unor peisaje unice, fie ca va duc spre frumoasa vale a Tarcaului, fie spre Cheile Bicazului prin Bicajel si Damuc, fie pe vechile drumuri ale plutasilor care se intorceau pe jos, peste munti, traseele va vor oferi senzatii deosebite si aventuri de neuitat. Cu mic, cu mare, indiferent de nivelul competitonal, toti cei pasionati de drumetiile montane experimentate cu bicicleta sau de cursele epuizante, cu diferenta mare de nivel, isi pot alege un traseu pe masura la cea de a 7-a editie a evenimentului Marathon MTB Bicaz.</p>
<br>
<div class="row">
<div class="col-sm-4">
<p class="text-center"><strong>Proba pe funie</strong></p><br>
<a href="#demo" data-toggle="collapse">
<img src="http://moontimebike.ro/wp-content/uploads/2014/10/08_MoonTimeBike-2013.jpg" align="middle class="img-circle person" alt="Random Name" width="255" height="255">
</a>
<div id="demo" class="collapse">
<p>Hateg</p>
<p>Iunie 2017</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Runda a II-a</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="http://moontimebike.ro/wp-content/uploads/2014/10/04_MoonTimeBike-2013.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
</a>
<div id="demo2" class="collapse">
<p>Herculane</p>
<p>Aprilie 2012</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Finalul de concurs </strong></p><br>
<a href="#demo3" data-toggle="collapse">
<img src="http://www.biciclistul.ro/wp-content/uploads/Start-copii-Dumbrava-cu-Margaritar.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
</a>
<div id="demo3" class="collapse">
<p>Poiana Marului</p>
<p>Anul 2016</p>
</div>
</div>
</div>
</div>
<!-- Container (TOUR Section) -->
<div id="tour" class="bg-1">
<div class="container">
<h3 class="text-center">Zilele Concursului</h3>
<ul class="list-group">
<li class="list-group-item">August 2017 <span class="label label-danger">Stoc epuizat!</span></li>
<li class="list-group-item">Decembrie 2017 <span class="label label-danger">14</span></li>
<li class="list-group-item">Februarie 2018 <span class="label label-danger">84</span></li>
</ul>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzIpbGdKCTKt448mRrMXrdZ1JpykseoQh3WUGv9uJS2TzJc_-k-Q" alt="Paris" width="400" height="300">
<p><strong>Cheile Nerei</strong></p>
<p>Friday 27 November 2017</p>
<button class="btn" data-toggle="modal" data-target="#myModal">Cumpar</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="https://www.newsbucovina.ro/wp-content/uploads/2017/06/concurs-mountain-bike-MTB-59.jpg" alt="New York" width="400" height="300">
<p><strong>Valea lui Liman</strong></p>
<p>Saturday 28 November 2017</p>
<button class="btn" data-toggle="modal" data-target="#myModal">Cumpar</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROntqjexugVmdiFc1dUoGFTJ_TjLT74tGjOq29FUPeOpgtwg6J" alt="San Francisco" width="400" height="300">
<p><strong>Muntii semenic</strong></p>
<p>Sunday 29 November 2017</p>
<button class="btn" data-toggle="modal" data-target="#myModal">Cumpar</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Bilete</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Pretul unui bilet este de 50 lei /persoana, 30 lei/copil</label>
<input type="number" class="form-control" id="psw" placeholder="cantitate?">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Trimite</label>
<input type="text" class="form-control" id="usrname" placeholder="Introduceti email-ul">
</div>
<button type="submit" class="btn btn-block">Cumpar
<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> Anulare
</button>
<p>Pot sa te <a href="#">ajut?</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container">
<h3 class="text-center">Contact</h3>
<div class="row">
<div class="col-md-4">
<p>Comentarii :.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Timisoara, Romania</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: 0746837261</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: [email protected]</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>
<br>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit">Trimite</button>
</div>
</div>
</div>
</div>
<br>
<h3 class="text-center"> Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Manager</a></li>
<li><a data-toggle="tab" href="#menu1">Oraganizator</a></li>
<li><a data-toggle="tab" href="#menu2">Contabil</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>Popescu Ana, Manager</h2>
<p>Pentru eventualele probleme majore</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Tache Dan</h2>
<p>Se ocupa in special de echipamentele sportive</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2> Gheorghiu Sebastian</h2>
<p>Gestionarea venitului din organizarea concursului si organizarea unei donatii in scop caritabil cu fondurile obtinute</p>
</div>
</div>
</div>
<!-- Add Google Maps -->
<div id="googleMap"></div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(45.75333302700204, 21.23775224999997);
var mapProp = {center:myCenter, zoom:12, scrollwheel:false, draggable:false, mapTypeId:google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQ0nxs1HZwRU6VVnbLnLBsD3-jTSYPHds&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
<!-- Footer -->
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
</footer>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script>
</body>
</html>
Raw
style.css
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
.container {
padding: 80px 120px;
}
@media only screen and (max-width: 481px){
.container{
padding: 0;
}
.container .description{
text-align: justify;
padding: 0 0.7em 0 0.7em;
}
}
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
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;}
.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;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
.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;
}
.nav-tabs li a {
color: #777;
}
#googleMap {
width: 100%;
height: 400px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.navbar {
font-family: Montserrat, sans-serif;
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity: 0.9;
}
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
.navbar-nav li a:hover {
color: #fff !important;
}
.navbar-nav li.active a {
color: #f00 !important;
background-color: #29292c !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.open .dropdown-toggle {
color: #f00;
background-color: #555 !important;
}
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu li a:hover {
background-color: red !important;
}
footer {
background-color: #2d2d30;
color: #f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer a:hover {
color: #777;
text-decoration: none;
}
.form-control {
border-radius: 0;
}
textarea {
resize: none;
}
#tour img{
height: 300px !important;
object-fit: cover;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment