Skip to content

Instantly share code, notes, and snippets.

@joel-extremo

joel-extremo/index.html

Last active September 15, 2018 03:53
Show Gist options
  • Save joel-extremo/bd396bb3ebe41c466cc066439483578b to your computer and use it in GitHub Desktop.
Save joel-extremo/bd396bb3ebe41c466cc066439483578b to your computer and use it in GitHub Desktop.
Download ZIP
2.12: Interactive Website
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CareerFoundry</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link href="//fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- twitter js -->
<script async src="//platform.twitter.com/widgets.js"></script>
</head>
<body>
<div class="se-pre-con"></div><!-- loader -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<img id="logo" src="images/logo.png" alt="logo">
<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">
<li class="nav-item">
<a class="nav-link" href="#technology">technologies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume">resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">contact</a>
</li>
</ul>
</div><!-- end navbar options -->
</nav><!-- end navbar -->
<header>
<section id="technology" class="container">
<div class="row">
<div class="col-md-12 col-lg-4">
<img class="logo mx-auto d-block" src="images/html-logo.png" alt="html-logo">
<div class="ribbon">
<img src="images/top-ribbon-orange.png" class="d-none d-lg-block d-xl-block" alt="top-ribbon">
<div class="content orange">
<h1>HTML5</h1>
<p>
Over time we’ve learned a lot by working with clients from different industries.
Naturally we’d like to share our knowledge with you. It’s our know­how that makes
things work and ensures your digital strategy is battle ready.
</p>
</div>
<img src="images/botton-ribbon-orange.png" class="d-none d-lg-block d-xl-block" alt="botton-ribbon">
</div>
</div><!-- end html -->
<div class="col-md-12 col-lg-4">
<img class="logo mx-auto d-block" src="images/javascript-logo.png" alt="javascript-logo">
<div class="ribbon">
<img src="images/top-ribbon-yellow.png" class="d-none d-lg-block d-xl-block" alt="top-ribbon">
<div class="content yellow" style="color: black">
<h1>Javascript</h1>
<p>
Over time we’ve learned a lot by working with clients from different industries.
Naturally we’d like to share our knowledge with you. It’s our know­how that makes
things work and ensures your digital strategy is battle ready.
</p>
</div>
<img src="images/botton-ribbon-yellow.png" class="d-none d-lg-block d-xl-block" alt="botton-ribbon">
</div>
</div><!-- end javascript -->
<div class="col-md-12 col-lg-4">
<img class="logo mx-auto d-block" src="images/php-logo.png" alt="php-logo">
<div class="ribbon">
<img src="images/top-ribbon-purple.png" class="d-none d-lg-block d-xl-block" alt="top-ribbon">
<div class="content purple">
<h1>PHP</h1>
<p>
Over time we’ve learned a lot by working with clients from different industries.
Naturally we’d like to share our knowledge with you. It’s our know­how that makes
things work and ensures your digital strategy is battle ready.
</p>
</div>
<img src="images/botton-ribbon-purple.png" alt="botton-ribbon">
</div>
</div><!-- end php -->
</div>
</section><!-- end technology -->
<section id="header-footer" data-parallax="scroll" data-image-src="images/process-bg.png">
<div class="video embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9aipBufoJP8?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="overlay-layer">
<h1>FULLSTACK</h1>
</div>
</section><!-- end header footer -->
</header><!-- end header -->
<section id="quotes" class="container-fluid">
<blockquote>
<i class="fas fa-quote-left"></i>
<h1 class="quote">
<!-- load by js -->
</h1>
<p class="author">
<!-- load by js -->
</p>
</blockquote>
<button id="loadQuoteButton">Next quote</button>
</section>
<section id="resume" data-parallax="scroll" data-image-src="images/frontendvsbackend-1.jpg">
<h1 class="text-center">Resume</h1>
<div class="circle-button" data-toggle="modal" data-target="#resume-modal">
<span>Open</span>
</div>
</section>
<div class="container">
<section id="work" class="content">
<h1><span>Work</span></h1>
<div class="row">
<!-- load with JS -->
</div>
</section><!-- end work -->
<section id="contact">
<h1><span>Contact</span></h1>
<p id="visible-comment"></p>
<form id="contact-form" method="post" action="mail.php">
<div class="form-group">
<label for="name">Your name <span>*</span></label>
<input type="text" class="form-control" id="name" name="name" minlength="3" data-toggle="tooltip" data-placement="left" title="write your name here please!" required="yes">
</div>
<div class="form-group">
<label for="email">Your email <span>*</span></label>
<input type="email" class="form-control" id="email" name="email" minlength="3" data-toggle="tooltip" data-placement="left" title="write your email here please!" required>
</div>
<div class="form-group">
<label for="message-box">Your massage <span>*</span></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> -->
<textarea id="message-box" name="message" class="form-control" data-toggle="tooltip" data-placement="left" title="write your message here please!"></textarea>
</div>
<p>Total characters: <span id="char-count">0</span></p>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</section><!-- end contact -->
</div><!-- end container -->
<div class="container-fluid p-0 m-0">
<div id="map">
<iframe height="350" style="border:0; width:100%;" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBLIGBz-MGEJKLXgOAbu3hhVGdEv80T98I&q=La+Espiral+313+(Soul)" allowfullscreen></iframe>
</div><!-- end map -->
<footer>
<div class="row">
<div class="col-4">
<span id="copyright">&copy;</span> <span class="d-none d-sm-inline-block">All Rights</span> Reserved
</div>
<div id="social-media" class="col-8">
<a href="https://twitter.com/jmrv002?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @jmrv002</a>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FUniversidadAPEC.UNAPEC%2F&width=200&layout=button&action=like&size=small&show_faces=false&share=false&height=80&appId=317854238964944" width="76" height="20" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div><!-- end social media -->
</div>
</footer><!-- end footer -->
</div><!-- end container -->
<div id="resume-modal" class="modal fade bd-example-modal" tabindex="-1" role="dialog" 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">Resume</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/cv_jose.pdf">
</div>
</div>
</div>
</div><!-- end resume modal -->
<!-- Javascript -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="js/parallax.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/quotes.js"></script>
<script src="js/works.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
Raw
quotes.js
var quotes = [
{
"quote":"Life isn’t about getting and having, it’s about giving and being.",
"author":"Kevin Kruse"
},
{
"quote":"Whatever the mind of man can conceive and believe, it can achieve.",
"author":"Napoleon Hill"
},
{
"quote":"Strive not to be a success, but rather to be of value.",
"author":"Albert Einstein"
},
{
"quote":"I attribute my success to this: I never gave or took any excuse.",
"author":"Florence Nightingale"
},
{
"quote":"You miss 100% of the shots you don’t take.",
"author":"Wayne Gretzky"
},
{
"quote":"Every strike brings me closer to the next home run.",
"author":"Babe Ruth"
},
{
"quote":"We become what we think about.",
"author":"Earl Nightingale"
},
{
"quote":"Life is 10% what happens to me and 90% of how I react to it.",
"author":"Charles Swindoll"
},
{
"quote":"The mind is everything. What you think you become.",
"author":"Buddha"
},
{
"quote":"An unexamined life is not worth living.",
"author":"Socrates"
},
{
"quote":"Eighty percent of success is showing up.",
"author":"Woody Allen"
},
{
"quote":"Winning isn’t everything, but wanting to win is.",
"author":"Vince Lombardi"
},
{
"quote":"Either you run the day, or the day runs you.",
"author":"Jim Rohn"
},
{
"quote":"Whether you think you can or you think you can’t, you’re right.",
"author":"Henry Ford"
},
{
"quote":"The best revenge is massive success.",
"author":"Frank Sinatra"
},
{
"quote":"Life shrinks or expands in proportion to one’s courage.",
"author":"Anais Nin"
},
{
"quote":"Believe you can and you’re halfway there.",
"author":"Theodore Roosevelt"
},
{
"quote":"Everything you’ve ever wanted is on the other side of fear.",
"author":"George Addair"
},
{
"quote":"Start where you are. Use what you have. Do what you can.",
"author":"Arthur Ashe"
},
{
"quote":"Fall seven times and stand up eight.",
"author":"Japanese Proverb"
},
{
"quote":"Everything has beauty, but not everyone can see.",
"author":"Confucius"
},
{
"quote":"When I let go of what I am, I become what I might be.",
"author":"Lao Tzu"
},
{
"quote":"If the wind will not serve, take to the oars.",
"author":"Latin Proverb"
},
{
"quote":"If you want to lift yourself up, lift up someone else.",
"author":"Booker T. Washington"
},
{
"quote":"I didn’t fail the test. I just found 100 ways to do it wrong.",
"author":"Benjamin Franklin"
},
{
"quote":"A person who never made a mistake never tried anything new.",
"author":" Albert Einstein"
},
{
"quote":"There are no traffic jams along the extra mile.",
"author":"Roger Staubach"
},
{
"quote":"It is never too late to be what you might have been.",
"author":"George Eliot"
},
{
"quote":"You become what you believe.",
"author":"Oprah Winfrey"
},
{
"quote":"I would rather die of passion than of boredom.",
"author":"Vincent van Gogh"
},
{
"quote":"Education costs money. But then so does ignorance.",
"author":"Sir Claus Moser"
},
{
"quote":"It does not matter how slowly you go as long as you do not stop.",
"author":"Confucius"
},
{
"quote":"You can’t use up creativity. The more you use, the more you have.",
"author":"Maya Angelou"
},
{
"quote":"Dream big and dare to fail.",
"author":"Norman Vaughan"
},
{
"quote":"Do what you can, where you are, with what you have.",
"author":"Teddy Roosevelt"
},
{
"quote":"If you do what you’ve always done, you’ll get what you’ve always gotten.",
"author":"Tony Robbins"
},
{
"quote":"Dreaming, after all, is a form of planning.",
"author":"Gloria Steinem"
},
{
"quote":"You may be disappointed if you fail, but you are doomed if you don’t try.",
"author":"Beverly Sills"
},
{
"quote":"Remember no one can make you feel inferior without your consent.",
"author":"Eleanor Roosevelt"
},
{
"quote":"Life is what we make it, always has been, always will be.",
"author":"Grandma Moses"
},
{
"quote":"Change your thoughts and you change your world.",
"author":"Norman Vincent Peale"
},
{
"quote":"Either write something worth reading or do something worth writing.",
"author":"Benjamin Franklin"
},
{
"quote":"Nothing is impossible, the word itself says, “I’m possible!”",
"author":"–Audrey Hepburn"
},
{
"quote":"The only way to do great work is to love what you do.",
"author":"Steve Jobs"
},
{
"quote":"If you can dream it, you can achieve it.",
"author":"Zig Ziglar"
}
]
Raw
scripts.js
$(document).ready(function(){
var messageBoxInput = $("#message-box")
loadQuote()
loadWorkSection()
//this function load the quotes in the quotes section
function loadQuote()
{
let quoteSelected = quotes[Math.floor(Math.random()*quotes.length)]
$('#quotes .quote').html(quoteSelected.quote)
$('#quotes .author').html(quoteSelected.author)
}
//mouse hover in the work section
$(".work-img").mouseenter( function() {
$(".info", this).show()
}).mouseleave(function(){
$(".info", this).hide()
});
// execute when write in the textarea on contact section
messageBoxInput.on("keyup", function() {
let charCount = $(this).val().length
let color = charCount > 50 ? 'red' : '#38c3ce'
$('#char-count').text(charCount)
$('#char-count').css("color", color)
});
$('#loadQuoteButton').click(function() {
loadQuote()
})
// hide de loader gif when the page load complete it
setTimeout(function(){
$(".se-pre-con").fadeOut("slow")
}, 4000)
//close navbar when click an option
$(".navbar-nav li a").click(function(event) {
$(".navbar-collapse").collapse('hide');
});
//navbar scroll
var $root = $('html, body');
$('.navbar a').click(function() {
var href = $.attr(this, 'href');
if (href != undefined && href != '#')
{
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
}
return false;
});
//init tooltips
$('[data-toggle="tooltip"]').tooltip()
// form submit
$('#contact-form').submit(function(event) {
event.preventDefault()
var message = messageBoxInput.val()
if (message === '')
{
messageBoxInput.css('border', '1px solid red');
return false
}
showMessage(message)
return false
});
// add the html to work section
function loadWorkSection()
{
for(var i = 0; i < works.length; ++i )
{
hide = works[i].hideInMovilSize ? 'd-none d-sm-block' : ''
$('#work .row').append(`
<div class="col-md-3 col-sm-6 col-xm-12 ${hide}">
<a class="work-img img-responsive" href="#">
<img src="images/portfolio/portfolio${i+1}.jpg" class="img-fluid" alt="portfolio">
<span class="info">${works[i].title}</span>
</a>
</div>
`)
}
}
// hide the form in the contact section and display the message that will send to Bugs
function showMessage(message)
{
var textMessage = '<h2>Your message was:</h2> ' + message
$('#contact-form').hide()
$('#visible-comment').html(textMessage)
}
})
Raw
styles.css
body {
background-image: url("../images/header-bg.png");
background-position: top center;
background-repeat: no-repeat;
background-size: 1400px auto;
background-color: #f5f6f1;
color: #0f1215;
height: 100%;
font-family: 'Quicksand', sans-serif;
}
h1{
text-align: center;
}
#work h1 span,
#contact h1 span{
border-bottom: 2px solid #38c3ce;
padding-bottom: 10px;
}
#quotes button,
#contact button {
border: none;
background-color: #38c3ce;
color: white;
width: 150px;
height: 50px;
}
#quotes button:hover,
#contact button:hover {
background-color: #38b6c2;
}
/*** navbar ***/
nav {
margin: 0 10% 170px 10%;
}
#logo {
position: relative;
top: 15px;
width: 37%;
}
.navbar-nav{
margin-top: 30px;
width: 100%;
}
.nav-link{
margin-left: 30px;
text-align: center;
text-transform: uppercase;
color: #78787b;
font-size: 1.15em;
}
nav .navbar-toggler{
position: relative;
top: 15px;
}
@media (max-width : 992px) {
nav {
margin: 3%;
margin-top: 0;
}
}
/*** technology ***/
#technology [class*="col-"]{
padding: 0 40px;
}
#technology .logo{
width: 38%;
}
.ribbon img{
width: 100%;
display: block;
}
.ribbon .content{
background-color: #47c3b1;
color: #edeee7;
width: 100%;
height: 400px;
}
.ribbon .yellow{
background-color: #f0da4f;
}
.ribbon .orange{
background-color: #f0662b;
}
.ribbon .purple{
background-color: #5b67a3;
}
.ribbon h1 {
padding-top: 30px;
text-align: center;
}
.ribbon p {
text-align: justify;
margin: 10%;
}
@media (max-width: 992px) {
#technology .logo{
width: 35%;
margin: 15% 0;
}
}
/*** header footer ***/
#header-footer{
position: relative;
top: -80px;
height: 700px;
}
#overlay-layer{
background-color: #404339;
background-color: rgba(64,67,57,.9);
text-align: center;
position: absolute;
bottom: -3px;
width: 100%;
color: white;
}
#header-footer .video{
width: 760px;
margin: 0 auto;
position: relative;
top: 145px;
}
@media (max-width: 760px) {
#header-footer{
height: auto;
padding-bottom: 82px;
padding-top: 81px;
}
#header-footer .video{
width: 100%;
margin: 0;
padding: 0;
top: 10px;
}
}
/*** quotes ***/
#quotes{
text-align: center;
margin-bottom: 50px;
}
blockquote i{
color: #38c3ce;
font-size: 5em;
margin-bottom: 50px;
}
blockquote h1{
margin-bottom: 25px;
}
blockquote p {
margin-bottom: 45px;
}
/*** resume ***/
#resume{
height: 400px;
padding-top: 35px;
background-color: rgba(56, 195, 206, 0.5);
background-blend-mode: multiply;
}
#resume h1{
color: white;
text-transform: uppercase;
margin-bottom: 55px;
}
#resume .circle-button{
background-image: url("../images/contact-circle.png");
height: 200px;
width: 200px;
margin: 0 auto;
background-repeat: no-repeat;
background-size: 100%;
text-align: center;
display: table;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#resume .circle-button:hover{
cursor: pointer;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
#resume .circle-button span{
color: #ffdc1a;
font-size: 2rem;
font-weight: 900;
text-transform: uppercase;
display: table-cell;
vertical-align: middle;
}
/*** work ***/
#work h1 {
margin-top: 60px;
margin-bottom: 85px;
}
.work-img {
display: block;
margin-bottom: 30px;
max-width: 100%;
position: relative;
}
.info {
position: absolute;
top: 0;
left: 0;
text-align: center;
padding-top: 45%;
width: 100%;
height: 100%;
color: #ffdc1a;
text-transform: uppercase;
font-weight: 700;
display: none;
font-size: 1.5em;
background-color: rgba(56, 195, 206, 0.5);
}
@media (max-width : 576px) {
.work-img{
padding : 25px;
}
}
/*** contact ***/
#contact{
margin-bottom: 50px;
}
#contact h1{
margin-top: 45px;
margin-bottom: 70px;
}
#contact label{
font-size: 1.2em;
}
#contact label span{
color: red;
}
#contact textarea{
height: 175px;
border: none;
}
#contact input{
border: none;
}
.form-group{
margin-bottom: 30px;
}
#contact-form p{
float: right;
}
@media (max-width : 576px) {
#contact{
margin: 0 20px 60px 20px;
}
#contact h1{
margin-top: 0;
}
#contact button{
width: 100%
}
#contact-form p{
text-align: center;
float: none;
}
}
/*** footer ***/
footer{
height: 55px;
padding: 0 15px;
background-color: black;
color: white;
}
footer [class*="col-"]{
padding-top: 15px;
}
#copyright-icon{
color: #38c3ce;
}
#social-media{
display: inline-block;
position: relative;
text-align: right;
}
#modal-embed {
height: 500px;
width: 100%;
}
/* loader */
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/loader.gif) center no-repeat #fff;
}
Raw
works.js
var works = [
{
title : "WebEX",
hideInMovilSize : false
},
{
title : "NatGeo",
hideInMovilSize : false
},
{
title : "CocoLab",
hideInMovilSize : false
},
{
title : "NetFlixx",
hideInMovilSize : true
},
{
title : "PlayBall",
hideInMovilSize : true
},
{
title : "TvCall",
hideInMovilSize : true
},
{
title : "Mentos",
hideInMovilSize : true
},
{
title : "Woblob",
hideInMovilSize : true
}
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment