Skip to content

Instantly share code, notes, and snippets.

@joel-extremo

joel-extremo/index.html

Created September 4, 2018 12:09
Show Gist options
  • Save joel-extremo/b86d7c801ae2e97022c0c9c83233cf54 to your computer and use it in GitHub Desktop.
Save joel-extremo/b86d7c801ae2e97022c0c9c83233cf54 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bugs Bunny</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- twitter api -->
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- mapbox -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-custom">
<a class="navbar-brand" href="#">BugsBunny</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto xm-mx-auto">
<li class="nav-item">
<a class="nav-link" href="#video">video</a>
</li>
</ul>
</div>
</nav><!-- end navbar -->
<div class="container">
<section id="biography">
<img class="mx-auto d-block" src="images/bugs.png">
<h1 class="text-center">About Bugs Bunny</h1>
<p>
Lorem ipsum dolor amet everyday carry pug intelligentsia tumblr literally lo-fi subway tile austin photo booth.
Put a bird on it meggings forage heirloom, ugh taiyaki <a href="#" title="More information" id="item1">Tooltips</a> small batch adaptogen truffaut kogi bicycle rights
fanny pack kale chips. Scenester tattooed neutra brooklyn literally pug hot chicken enamel pin everyday carry.
Kitsch cronut mlkshk put a bird on it four dollar toast tbh +1 vinyl slow-carb PBR&B humblebrag distillery small
batch. Truffaut celiac bespoke prism, selvage PBR&B iPhone synth palo santo selfies migas.
</p>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
</section><!-- end biography -->
<section id="video">
<h1 class="text-center">Video</h1>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/O7w7xp9q71w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="row">
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target=".bd-example-modal">Lear More about Bugs Bunny</button>
</div>
</section><!-- end video -->
<section id="work" class="content">
<h1><span>Work</span></h1>
<div class="row">
<!-- this load dynamically -->
</div>
</section><!-- end work -->
<section id="contact">
<h1 class="text-center">Contact Bugs Bunny</h1>
<div class="row">
<div id="info" class="col-sm">
<h3 class="d-none d-sm-block">Get in touch</h3>
<p class="d-none d-sm-block">he wants to know you</p>
<ul id="contact-list">
<li><i class="fas fa-phone"></i>1-829-849-2121</li>
<li><i class="far fa-envelope"></i>jmrv002@gmail.com</li>
<li><i class="fab fa-instagram"></i>@jmrv002</li>
<li><i class="fab fa-facebook-square"></i>Joel Rodriguez Varona</li>
</ul>
</div><!-- end info -->
<div id="form" class="col-sm">
<h3>Send us a message</h3>
<p id="visible-comment"></p>
<form id="contact-form" action="/message" method="post">
<div class="form-group">
<label for="name">Name</label>
<input id="name" class="form-control" name="name" type="text" placeholder="Juan Mendez" minlength="3" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input id="email" class="form-control" name="email" type="email" placeholder="example@gmail.com" minlength="3" required>
</div>
<div class="form-group">
<label for="message-box">Message</label>
<textarea id="message-box" class="form-control" name="message" placeholder="Te quiero Bugs!!" data-toggle="tooltip" data-placement="right" title="write your message to bugs bunny and have some fun" style="resize:none" cols="40" rows="5" required></textarea>
</div>
<p>Total characters: <span id="char-count">0</span></p>
<button id="submit-btn" type="submit" class="btn btn-primary">Submit</button>
</form>
</div><!-- end form -->
</div>
</section><!-- end contact -->
<section id="google-embeded-map" class="text-center">
<h1>bugs bunny location (embeded) </h1>
<iframe
width="100%"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBLIGBz-MGEJKLXgOAbu3hhVGdEv80T98I
&q=La+Espiral+313+(Soul)" allowfullscreen>
</iframe>
</section><!-- end google embeded map -->
<section id="google-api-map" class="text-center">
<h1>bugs bunny location (JavaScript APIv3)</h1>
<div id="map"></div>
</section><!-- end google api map -->
<section id="mapbox-map" class="text-center">
<h1>bugs bunny location (Mapbox)</h1>
<div id='map2' style='width: 400px; height: 300px;'></div>
</section><!-- end mapbox map -->
</div><!-- end container -->
<footer>
<div class="row">
<div id="social-media" class="col-sm">
<div class="social-media-container">
<a href="https://twitter.com/jmrv002?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Follow @jmrv002</a>
</div>
<div class="social-media-container">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FUniversidadAPEC.UNAPEC%2F&width=200&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=317854238964944" width="400" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
</div><!-- end social media -->
<div class="col-sm">
<div id="copyright">Copyright <span>&copy;</span> All Rights Reserved</div>
</div>
</div>
</footer><!-- end footer -->
<!-- Modal -->
<div class="modal fade bd-example-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Bugs Bunny in DOUBLE TROUBLE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<embed id="modal-embed" src="documents/bugs_bunny.pdf">
</div>
</div>
</div>
</div><!-- end modal -->
<!-- Javascript -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAC3yu7PRe5SsZK9OYPZ0T_yfxksyj_mo4&callback=initMap" async defer></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/work.js"></script>
<script src="js/scripts.js"></script>
<script src="js/maps.js"></script>
</body>
</html>
Raw
maps.js
// google map
var map;
function initMap() {
let myLatLng = {lat: 18.471045, lng: -69.903610};
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 16
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
//mapbox
mapboxgl.accessToken = 'pk.eyJ1Ijoiam1ydjAwMiIsImEiOiJjamxubW44YnYxa21jM3dvNWZoNTQxcTJiIn0.LaK4-aDH27sgc-b4DWIW0g';
var map2 = new mapboxgl.Map({
container: 'map2',
style: 'mapbox://styles/mapbox/streets-v10',
"center": [
18.471045,
-69.903610
]
});
Raw
scripts.js
$(function () {
var messageBoxInput = $("#message-box")
var chartCountLabel = $('#char-count')
loadWorkSection()
// tootip
$('#item1').tooltip()
$('[data-toggle="tooltip"]').tooltip()
// form submit
$('#submit-btn').on('click', function() {
var message = messageBoxInput.val()
console.log('message: ' + message)
if (message === '')
{
messageBoxInput.css('border', '1px solid red');
return false
}
showMessage(message)
return false
});
// execute when write in the textarea on contact section
messageBoxInput.on("keyup", function() {
var charCount = $(this).val().length;
console.log('total characters: ' + charCount)
chartCountLabel.text(charCount)
if(charCount > 50)
chartCountLabel.css("color", "red");
else
chartCountLabel.css("color", "#495057");
});
//mouse hover in the work section
$(".work-img").mouseenter( function() {
$(".info", this).show();
}).mouseleave(function(){
$(".info", this).hide();
});
// hide the form in the contact section and display the message that will send to Bugs
function showMessage(message)
{
var textMessage = '<b>Your message was:</b> ' + message
$('#contact-form').hide()
$('#form h3').text('Thanks for send a message to Bugs Bunny')
$('#visible-comment').html(textMessage)
}
// add the html to work section
function loadWorkSection()
{
for(var i = 1; i <= work.length; ++i )
{
$('#work .row').append("\
<div id='work" + i + "' class='col-md-3 col-sm-6 col-xm-12'>\
<a class='work-img img-responsive' href=https://" + work[i-1].url + ">\
<img src='images/portfolio/portfolio" + i + ".jpg' class='img-fluid' alt='portfolio'>\
<span class='info'><p class='proj-title'>Title:</p> " + work[i-1].title.toUpperCase() + " </span>\
<p class='text-center'> " + work[i-1].description + " </p>\
</a>\
</div>")
}
addBorderToWorkImages()
}
// ass a border to each image in the work section
function addBorderToWorkImages()
{
var images = $("#work .row img");
for(var i = 0; i < images.length; ++i )
{
if (i%2 === 0)
$(images[i]).css("border", "2px solid DodgerBlue");
else
$(images[i]).css("border", "2px solid salmon");
}
}
});
Raw
styles.css
h1{
margin-bottom : 50px;
}
section{
margin-top : 50px;
}
/*** video ***/
#video button{
margin-top : 50px;
}
/*** work ***/
.work-img {
display : block;
margin : auto;
max-width : 200px;
position : relative;
}
.info {
position : absolute;
top : 15%;
left : 22%;
color : black;
font-family : Futura;
text-transform : uppercase;
font-weight : 700;
letter-spacing : 0.5em;
line-height : 1.6;
display : none;
}
.proj-title { font-weight:100; }
/*** contact ***/
.form-control{
width : 80%;
}
/*** footer ***/
.footer a:active {
color : #ff0000;
}
footer {
width : 100%;
background-color : lightgray;
color : black;
}
.social-media-container{
padding : 15px;
text-align : left;
}
#copyright{
text-align : center;
margin-top : 10%;
}
/*** modal ***/
#modal-embed {
height : 500px;
width : 100%;
}
/*** maps ***/
#map {
height : 500px;
width : 500px;
margin : 0 auto;
}
.marker {
background-image : url('../images/mapbox-icon.png');
background-size : cover;
width : 50px;
height : 50px;
border-radius : 50%;
cursor : pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment