Created
August 30, 2018 03:00
-
-
Save joel-extremo/c3db7dbd9050a87901bfa963d782b287 to your computer and use it in GitHub Desktop.
Project 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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/cf_logo_min_small_dark.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 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"> | |
</head> | |
<body> | |
<div class="se-pre-con"></div><!-- loader --> | |
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-custom fixed-top"> | |
<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 xm-mx-auto"> | |
<li class="nav-item"> | |
<a class="nav-link" href="#about">About</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> | |
<li class="nav-item"> | |
<a class="nav-link" href="#faq">Faq</a> | |
</li> | |
</ul> | |
</div> | |
</nav><!-- end navbar --> | |
<div id="heroCarousel" class="carousel slide d-none d-sm-block" 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> | |
</div><!-- end hero carousel --> | |
<div class="container"> | |
<section id="about" class="content"> | |
<h1 class="d-none d-sm-block"><span> About Me</span></h1> | |
<img src="img/jose.jpg" class="mx-auto d-block" alt="jose"> | |
<div class="row"> | |
<div class="col-sm"> | |
<h3>Biography</h3> | |
<p> | |
I'm a software developer that like challenges project and always try | |
to improve myself. | |
</p> | |
</div> | |
<div class="col-sm"> | |
<h3>Process</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 --> | |
<section id="work" class="content"> | |
<h1><span>Work</span></h1> | |
<div class="row"> | |
<div id="work1" class="col-md-3 col-sm-6 col-xm-12"> | |
<img src="img/portfolio/portfolio1.jpg" class="img-fluid" alt="portfolio"> | |
</div> | |
<div id="work2" class="col-md-3 col-sm-6 col-xm-12"> | |
<img src="img/portfolio/portfolio2.jpg" class="img-fluid" alt="portfolio"> | |
</div> | |
<div id="work3" class="col-md-3 col-sm-6 col-xm-12"> | |
<img src="img/portfolio/portfolio3.jpg" class="img-fluid" alt="portfolio"> | |
</div> | |
<div id="work4" class="col-md-3 col-sm-6 d-none d-sm-block"> | |
<img src="img/portfolio/portfolio4.jpg" class="img-fluid" alt="portfolio"> | |
</div> | |
<div id="work5" class="col-md-3 col-sm-6 d-none d-sm-block"> | |
<img src="img/portfolio/portfolio5.jpg" class="img-fluid" alt="portfolio"> | |
</div> | |
<div id="work6" class="col-md-3 col-sm-6 d-none d-sm-block"> | |
<img src="img/portfolio/portfolio6.jpg" class="img-fluid" alt="portfolio"> | |
</div> | |
<div id="work7" class="col-md-3 col-sm-6 d-none d-sm-block"> | |
<img src="img/portfolio/portfolio7.jpg" class="img-fluid" alt="portfolio"> | |
</div> | |
<div id="work8" class="col-md-3 col-sm-6 d-none d-sm-block"> | |
<img src="img/portfolio/portfolio8.jpg" class="img-fluid" alt="portfolio"> | |
</div> | |
</div> | |
</section><!-- end work --> | |
</div><!-- end container --> | |
<div class="container-fluid m-0 p-0"> | |
<section id="contact"> | |
<div class="section-overlay-layer"> | |
<h1>Contact Me</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">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>Joel Rodriguez Varona</li> | |
</ul> | |
</div><!-- end info --> | |
<div id="form" class="col-sm"> | |
<h3>Send us a message</h3> | |
<form action="joke.html"> | |
<input type="text" placeholder="YOUR NAME"> | |
<input type="text" placeholder="EMAIL ADDRESS"> | |
<input type="text" placeholder="TELEPHONE NUMBER"> | |
<textarea placeholder="YOUR MESSAGE"></textarea> | |
<button type="submit">SUBMIT</button> | |
</form> | |
</div><!-- end form --> | |
</div> | |
</div> <!-- end overlay layer --> | |
</section><!-- end work --> | |
</div><!-- end container --> | |
<div class="container"> | |
<section id="faq" class="content"> | |
<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"> | |
<i class="fas fa-plus"></i> | |
Why did you decide to become a web developer? | |
</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"> | |
<i class="fas fa-plus"></i> | |
What is your design process? | |
</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"> | |
<i class="fas fa-plus"></i> | |
Who are your clients? | |
</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"> | |
<i class="fas fa-plus"></i> | |
What is your average project turnaround? | |
</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><!-- end FAQ --> | |
</div><!-- end container --> | |
<div class="container-fluid p-0 m-0"> | |
<footer class="text-center">Copyright <span>©</span> All Rights Reserved</footer> | |
</div> | |
<!-- Javascript --> | |
<script src="js/jquery-3.3.1.min.js"></script> | |
<script src="js/bootstrap.min.js"></script> | |
<script src="js/main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
//close navbar | |
$(".navbar-nav li a").click(function(event) { | |
$(".navbar-collapse").collapse('hide'); | |
}); | |
//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 | |
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); | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body{ | |
font-family: 'Quicksand', sans-serif; | |
} | |
h3{ | |
color: #3a424b; | |
} | |
section h1{ | |
text-align: center; | |
margin-bottom: 70px; | |
color: #f94e66; | |
} | |
.content { | |
padding-top: 50px; | |
} | |
h1 span{ | |
border-bottom :1px solid #3a424b; | |
padding-bottom: 10px; | |
} | |
@media (max-width: 576px) { | |
section h1{ | |
margin-bottom: 40px; | |
} | |
section{ | |
margin: 0; | |
} | |
} | |
/*** Navbar ***/ | |
.navbar{ | |
padding: 8px 60px; | |
} | |
.navbar-brand { | |
text-transform: uppercase; | |
} | |
a.navbar-brand { | |
color: #f94e66 !important; | |
} | |
.navbar-custom{ | |
background-color: #3a424b !important; | |
} | |
.navbar-dark .navbar-nav .nav-link{ | |
color: white; | |
} | |
@media (max-width: 576px) { | |
.navbar{ | |
padding: 8px 20px | |
} | |
.navbar ul{ | |
text-align: center; | |
} | |
} | |
/*** About ***/ | |
#about h1 { | |
margin-top: 10px; | |
margin-bottom: 80px; | |
} | |
#about img { | |
width: 300px; | |
height: 300px; | |
background-color: white; | |
border-radius: 150px; | |
border:8px solid #f94e66; | |
margin-top: 40px; | |
margin-bottom: 85px; | |
} | |
#about h3{ | |
text-align: center; | |
margin-bottom: 40px; | |
} | |
#about p{ | |
text-align: justify; | |
} | |
#about [class*="col-"]{ | |
margin: 0 60px; | |
} | |
@media (max-width: 576px) { | |
#about [class*="col-"]{ | |
margin: 30px; | |
} | |
#about [class*="col-"]:last-child{ | |
margin-bottom: 0; | |
} | |
#about h1{ | |
margin:80px 0; | |
} | |
#about img{ | |
margin-bottom: 40px; | |
} | |
} | |
/*** work ***/ | |
#work img{ | |
margin: 20px 0; | |
} | |
#work [class*="col-"]:hover{ | |
background-color: rgba(64, 44, 44, 0.2); | |
} | |
@media (max-width: 576px) { | |
#work img{ | |
padding: 25px; | |
} | |
} | |
/*** Contact ***/ | |
#contact { | |
background-image: url("../img/contact_background.jpg"); | |
background-attachment: fixed; | |
background-size: cover; | |
color: white; | |
height: 100%; | |
} | |
#contact h1{ | |
margin: 40px; | |
} | |
#contact i{ | |
color: #f94e66; | |
margin-right: 15px; | |
} | |
#contact h3{ | |
color: white; | |
text-align: center; | |
margin-bottom: 50px; | |
} | |
#contact div { | |
padding: 20px 50px; | |
} | |
#contact .section-overlay-layer { | |
padding-bottom: 50px; | |
background: rgba(58, 66, 75, 0.8); | |
} | |
#contact-list { | |
padding-left: 0; | |
} | |
#contact-list li { | |
list-style-type: none; | |
margin-bottom: 10px; | |
} | |
#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; | |
} | |
@media (max-width: 576px) { | |
#contact .section-overlay-layer { | |
padding: 50px 20px; | |
} | |
#contact-list{ | |
margin-bottom: 50px; | |
text-align: center; | |
} | |
#contact div { | |
padding: 0 10px; | |
} | |
#contact h1{ | |
margin-top: 20px; | |
margin-bottom: 45px; | |
} | |
} | |
/*** faq ***/ | |
#faq{ | |
margin-bottom: 50px; | |
} | |
#faq .btn-link{ | |
color: #f94e66; | |
} | |
#faq i{ | |
margin-right: 10px; | |
} | |
@media (max-width: 576px) { | |
#faq h1 { | |
margin-top: 10px; | |
} | |
#faq .btn-link { | |
text-overflow: ellipsis; | |
overflow: hidden; | |
width: 300px; | |
} | |
} | |
/*** footer ***/ | |
footer{ | |
height: 50px; | |
width: 100%; | |
background-color: #3a424b; | |
color: white; | |
padding-top: 10px; | |
} | |
footer span{ | |
color: #f94e66; | |
} | |
/* 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