Skip to content

Instantly share code, notes, and snippets.

@joel-extremo

joel-extremo/index.html

Last active June 2, 2022 21:00
Show Gist options
  • Save joel-extremo/3fe28fd2410c271b43537e319ba49c86 to your computer and use it in GitHub Desktop.
Save joel-extremo/3fe28fd2410c271b43537e319ba49c86 to your computer and use it in GitHub Desktop.
Download ZIP
1.10: Single Page Scrolling Navigation
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>Portfolio</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<!-- 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 rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body data-spy="scroll" data-target=".navbar">
<div class="se-pre-con"></div><!-- loader -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" role="navigation">
<a class="navbar-brand" href="#">CareerFoundry</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">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Work
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#work1">Work 1</a>
<a class="dropdown-item" href="#work2">Work 2</a>
<a class="dropdown-item" href="#work3">Work 3</a>
<a class="dropdown-item" href="#work4">Work 4</a>
<a class="dropdown-item" href="#work5">Work 5</a>
<a class="dropdown-item" href="#work6">Work 6</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq">Faq</a>
</li>
</ul>
</div>
</nav><!-- end navbar -->
<section id="heroCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#heroCarousel" data-slide-to="0" class="active"></li>
<li data-target="#heroCarousel" data-slide-to="1"></li>
<li data-target="#heroCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/carousel/carousel1.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Here is an example 1 headline</h5>
<p>Here is an example description</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/carousel/carousel2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Here is an example 2 headline</h5>
<p>Here is an example description</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/carousel/carousel3.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Here is an example 3 headline</h5>
<p>Here is an example description</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</section><!-- end carousel -->
<div class="container">
<section id="about">
<h1>About Me</h1>
<div class="row">
<div class="col-sm">
<img src="img/jose.jpg" class="img-fluid" alt="jose">
</div>
<div class="col-sm">
<h3>Introduction</h3>
<p>
I'm a software developer that like challenges project and always try
to improve myself.
</p>
</div>
<div class="col-sm">
<h3>My Skills</h3>
<ul>
<li>PHP</li>
<li>Laravel</li>
<li>MVC</li>
<li>Relational DB(MySQL, MariaDB, AuroraDB)</li>
<li>Scrum</li>
<li>Git(Bitbucket, Github)</li>
<li>Raspberry Pi(NodeJS)</li>
<li>Amazon Web Services</li>
<li>Deployments</li>
</ul>
</div>
</div>
</section><!-- end about -->
</div><!-- end container -->
<div class="container-fluid m-0 p-0">
<section id="contact">
<h1>Contact Me</h1>
<div class="row">
<div id="info" class="col-sm">
<h1>Get in touch</h1>
<p>I'm very approachable and I would love to speak to you. Feel free to call, send me an email, Tweet me or complete the enquiry form</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>https://www.facebook.com/joel.rodriguezvarona</li>
</ul>
</div><!-- end info -->
<div id="form" class="col-sm">
<h1>Send us a message</h1>
<form id="form" action="joke.html">
<input type="text" name="" placeholder="YOUR NAME">
<input type="text" name="" placeholder="EMAIL ADDRESS">
<input type="text" name="" placeholder="TELEPHONE NUMBER">
<textarea placeholder="YOUR MESSAGE"></textarea>
<button type="submit">SUBMIT</button>
</form><!-- end form -->
</div>
</div>
</section>
</div><!-- end container -->
<div class="container">
<section id="work">
<h1>Work</h1>
<div class="row">
<div id="work1" class="col-md-3 col-sm-6 col-xm-12"><img src="img/portfolio1.png" class="img-fluid"></div>
<div id="work2" class="col-md-3 col-sm-6 col-xm-12"><img src="img/portfolio1.png" class="img-fluid"></div>
<div id="work3" class="col-md-3 col-sm-6 col-xm-12"><img src="img/portfolio1.png" class="img-fluid"></div>
<div id="work4" class="col-md-3 col-sm-6 col-xm-12"><img src="img/portfolio1.png" class="img-fluid"></div>
<div id="work5" class="col-md-3 col-sm-6 col-xm-12"><img src="img/portfolio1.png" class="img-fluid"></div>
<div id="work6" class="col-md-3 col-sm-6 col-xm-12"><img src="img/portfolio1.png" class="img-fluid"></div>
<div id="work7" class="col-md-3 col-sm-6 col-xm-12"><img src="img/portfolio1.png" class="img-fluid"></div>
<div id="work8" class="col-md-3 col-sm-6 col-xm-12"><img src="img/portfolio1.png" class="img-fluid"></div>
</div>
</section><!-- end work -->
<section id="faq">
<h1>FAQ</h1>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why did you decide to become a web developer?
<i class="fas fa-plus"></i>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Because I like too much technology.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
What is your design process?
<i class="fas fa-plus"></i>
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<ol>
<li>Get the requirements form the client</li>
<li>Make some diagrams and wirefrmaes</li>
<li>show the diagrams and flows of the system to the client for aprove</li>
<li>If all the flows are aproved. start coding</li>
</ol>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Who are your clients?
<i class="fas fa-plus"></i>
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
<ul>
<li>Viral Rich</li>
<li>Pitech S.R.L.</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
What is your average project turnaround?
<i class="fas fa-plus"></i>
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
<div class="card-body">
6 month
</div>
</div>
</div>
</div><!-- end acordion -->
</section>
</div><!-- end container -->
<!-- Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Raw
main.js
$(document).ready(function(){
//carousel resize
resizeCarousel();
function resizeCarousel() {
let bodyWidth = document.body.clientWidth
let bodyHeight = $(window).height()
let navBarHeight = 0
$(".carousel").each(function(){
$(this).find(".carousel-item img").css({'width':bodyWidth, 'height':bodyHeight-navBarHeight})
})
}
//nav bar scroll
$('body').scrollspy({ target: '.navbar' })
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;
});
// hide de loader gif when the page load complete it
setTimeout(function(){
$(".se-pre-con").fadeOut("slow");
}, 3000);
})
Raw
styles.css
body { position: relative; }
section h1{
text-align: center;
margin: 0 0 70px 0;
}
.container section,
.container-fluid section { padding: 70px 0px; }
/*** Navbar ***/
.navbar-brand { text-transform: uppercase; }
a.navbar-brand { color: steelblue !important; }
/*** Contact ***/
#contact {
background-image: url("../img/contact_background.jpg"); /*Add a background image*/
background-attachment: fixed; /*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover; /*Have the background cover the entire div section*/
color: white; /*Change the color of the text on top so it is readable and adjust the padding as needed.*/
height: 100%;
}
#contact div {
margin: 20px 50px;
}
#form input,
#form textarea,
#form button{
border:none;
background-image:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: block;
width: 100%;
margin-bottom: 15px;
padding: 10px;
}
/*** work ***/
#work img{
margin: 20px 0;
}
#work [class*="col-"]:hover{
background-color: rgba(64, 44, 44, 0.2);
}
/* loader */
.no-js #loader {
display: none;
}
.js #loader {
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../img/loader.gif) center no-repeat #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment