Skip to content

Instantly share code, notes, and snippets.

@joel-extremo

joel-extremo/index.html

Created August 30, 2018 02:52
Show Gist options
  • Save joel-extremo/e7ea68aa5fe0f4228eee63e4f8178127 to your computer and use it in GitHub Desktop.
Save joel-extremo/e7ea68aa5fe0f4228eee63e4f8178127 to your computer and use it in GitHub Desktop.
Download ZIP
Project 1
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>
<!-- 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" type="text/css" href="css/styles.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar" class="active">
<div class="sidebar-header">
<button type="button" class="sidebarCollapse btn btn-info">
<span class="navbar-toggler-icon">
<i class="fas fa-times"></i>
</span>
</button><!-- menu close button -->
<h3 class="text-center">Menu</h3>
</div>
<ul class="list-unstyled components">
<li><a data-value="about" href="#">About</a></li>
<li><a data-value="skills" href="#">Skills</a></li>
<li><a data-value="work" href="#">Work</a></li>
<li><a data-value="contact" href="#">Contact</a></li>
</ul>
</nav><!-- end menu sidebar -->
<div id="content" class="active">
<button id="menu-btn" type="button" class="sidebarCollapse">
<i class="fas fa-bars"></i>
</button><!-- menu button -->
<div class="container-fluid">
<section id="header">
<div class="row">
<div class="col-sm-6 col-xs-12">
<img class="img-fluid" src="images/beardman.gif" alt="beardman">
</div>
<div class="col-sm-6 col-xs-12">
<h1 class="mr-auto">Hi, I'm José</h1>
</div>
</div>
<img class="img-fluid" src="images/shape_header3.png" alt="shape_header">
</section><!-- end header -->
<section id="about">
<h2>About</h2>
<div class="row">
<div class="col-sm-6 col-xs-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel placerat magna,
eget scelerisque est. Ut tincidunt, sem vehicula sodales blandit, sem nisi pharetra dui,
hendrerit pulvinar ante lectus eu lectus. Quisque sed enim fermentum, condimentum nisi nec,
consequat lacus. Sed massa metus, tincidunt quis condimentum eget, viverra id sem. Nam dapibus.
</p>
</div>
<div class="col-sm-6 col-xs-12">
<img class="profile-photo img-fluid" src="images/jose.jpg" alt="profile-picture">
</div>
</div>
</section><!-- end about -->
</div><!-- end container -->
<div class="container">
<section id="skills">
<h2>Skills</h2>
<div class="row">
<div class="col-sm-3 col-xs-12">
<div class="chart" data-percent="85">
<span class="percent">HTML</span>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="chart" data-percent="40">
<span class="percent">CSS</span>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="chart" data-percent="65">
<span class="percent">Javascript</span>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="chart" data-percent="85">
<span class="percent">PHP</span>
</div>
</div>
</div>
</section><!-- end skills -->
</div><!-- end container -->
<div class="container-fluid">
<section id="work">
<h2>Work</h2>
<div class="row">
<div class="col-sm-3 col-xs-12">
<a href="#">
<img class="img-fluid" src="images/portfolio/portfolio1.jpg" alt="portfolio">
<div class="overlay"></div>
</a>
</div>
<div class="col-sm-3 col-xs-12">
<a href="#">
<img class="img-fluid" src="images/portfolio/portfolio2.jpg" alt="portfolio">
<div class="overlay"></div>
</a>
</div>
<div class="col-sm-3 col-xs-12">
<a href="#">
<img class="img-fluid" src="images/portfolio/portfolio3.jpg" alt="portfolio">
<div class="overlay"></div>
</a>
</div>
<div class="d-none d-sm-block col-sm-3">
<a href="#">
<img class="img-fluid" src="images/portfolio/portfolio4.jpg" alt="portfolio">
<div class="overlay"></div>
</a>
</div>
<div class="d-none d-sm-block col-sm-3">
<a href="#">
<img class="img-fluid" src="images/portfolio/portfolio5.jpg" alt="portfolio">
<div class="overlay"></div>
</a>
</div>
<div class="d-none d-sm-block col-sm-3">
<a href="#">
<img class="img-fluid" src="images/portfolio/portfolio6.jpg" alt="portfolio">
<div class="overlay"></div>
</a>
</div>
<div class="d-none d-sm-block col-sm-3">
<a href="#">
<img class="img-fluid" src="images/portfolio/portfolio7.jpg" alt="portfolio">
<div class="overlay"></div>
</a>
</div>
<div class="d-none d-sm-block col-sm-3">
<a href="#">
<img class="img-fluid" src="images/portfolio/portfolio8.jpg" alt="portfolio">
<div class="overlay"></div>
</a>
</div>
<button class="button">See More</button>
</div>
</section><!-- end work -->
<section id="contact">
<div class="overlay">
<div id="contact-content">
<h2>Contact Me</h2>
<div class="row" >
<div id="info" class="col-sm-6 col-xs-12">
<h3 class="text-center 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-6 col-xs-12">
<h3 class="text-center">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 class="button" type="submit">SUBMIT</button>
</form>
</div><!-- end form -->
</div>
</div><!-- end contact content -->
</div><!-- end overlay -->
</section><!-- end contact -->
<footer class="text-center">Copyright &copy; All Rights Reserved</footer>
</div><!-- end container -->
</div><!-- end content -->
</div><!-- end wrappper -->
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- piechart -->
<script src='js/jquery.easypiechart.min.js'></script>
<!-- work section - hover -->
<script src="js/modernizr.min.js"></script>
<script src='js/jquery.hoverdir.js'></script>
<!-- javascript -->
<script src="js/main.js"></script>
</body>
</html>
Raw
main.js
$(document).ready(function () {
/*** sidebar menu section ***/
//close the side bar if click the display
$("#content").click(function(){
if(!$('#sidebar').hasClass('active'))
toggleSideBar()
})
//buttons that close the sidebar
$('.sidebarCollapse').on('click', function () {
setTimeout(function(){
toggleSideBar();
}, 5)
});
function toggleSideBar()
{
$('#sidebar').toggleClass('active');
if ($(window).width() > 768)
$('#content').toggleClass('active');
$('#content').toggleClass('blur');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
}
// transition between sections
$("#sidebar a").click(function(){
$("body,html").animate({
scrollTop:$("#" + $(this).data('value')).offset().top
},1000)
setTimeout(function(){
toggleSideBar();
}, 1001)
})
/*** end sidebar menu section ***/
// skills section - pie chart
$('.chart').easyPieChart({
barColor : "#ff1c73",
size: "200"
});
// work section - hover
$(' #work [class*="col-"] ').each( function() { $(this).hoverdir({
hoverDelay : 75
}); } );
});
Raw
styles.css
body{
font-family: 'Quicksand', sans-serif;
}
section h2{
text-align: center;
font-size: 3em;
}
.button {
width: 100%;
background-color: white;
color: black;
height: 40px;
border-radius: 50px;
border: 0;
}
.container-fluid {
padding-right: 0;
padding-left: 0;
}
.row {
margin-right: 0;
margin-left: 0;
}
/*** menu btn ***/
#menu-btn{
position: fixed;
top: 0;
right: 0;
border: 0;
background-color: white;
color: #ff1c73;
font-size: 2em;
margin: 40px;
z-index: 990;
border-radius: 20%;
}
/*** menu sidebar ***/
#sidebar {
width: 250px;
position: fixed;
top: 0;
right: 0;
height: 150vh;
z-index: 999;
background: #C2185B;
color: white;
transition: all 0.3s;
}
#sidebar button {
height: 30px;
width: 30px;
padding: 0;
float: right;
}
#sidebar.active {
margin-right: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #E91E63;
}
#sidebar ul li a {
text-align: center;
color: white;
padding: 10px;
font-size: 1.1em;
display: block;
margin-top: 40px;
}
.blur {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px);
-o-filter: blur(10px);
filter: blur(10px);
}
@media (max-width: 768px) {
#sidebar {
margin-right: 0;
}
#content {
width: 100%;
}
#sidebarCollapse span {
display: none;
}
}
/*** content ***/
#content {
width: calc(100% - 250px);
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
left: 0;
}
#content.active {
width: 100%;
}
/*** Header ***/
#header h1 {
font-size: 3.5em;
position: absolute;
right: 20%;
top: 40%;
}
#about [class*="col-"]{
padding: 0;
}
@media (max-width: 576px) {
#header h1 {
position: static;
font-size: 3em;
text-align:center;
margin-bottom: 30px;
}
}
/*** About ***/
#about{
background-color: #ff1c73;
color: white;
}
.profile-photo {
height: 200px;
width: 200px;
border-radius: 50%;
border:8px solid white;
margin: auto;
display: block;
}
#about p{
padding: 0 80px;
text-align: justify;
line-height: 35px;
}
#about [class*="col-"]{
margin: 60px 0;
}
@media (max-width: 576px) {
#about h2 {
padding-top: 50px;
}
#about [class*="col-"]{
margin: 30px 0;
}
#about p{
padding: 0 40px;
}
}
/*** Skills ***/
#skills{
margin-bottom: 150px;
}
#skills h2{
margin: 100px 0;
}
.chart {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
text-align: center;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 200px;
z-index: 2;
}
@media (max-width: 576px) {
#skills [class*="col-"]{
text-align: center;
margin-bottom: 40px;
}
#skills h2{
margin: 60px 0;
}
}
/*** Work ***/
#work{
background-color: #ff1c73;
padding: 50px 100px;
}
#work h2{
margin-bottom: 50px;
color: white;
}
#work [class*="col-"]{
margin-bottom: 50px;
}
@media (max-width: 576px) {
#work{
padding: 40px 50px;
}
}
/*** contact ***/
#contact h2,
#contact h3{
margin-bottom: 50px;
}
#contact {
background-image: url("../images/contact.jpg");
background-attachment: fixed;
background-size: cover;
height: 100%;
}
#contact .overlay {
padding: 50px 120px;
width:100%;
height:100%;
background-color: rgba(50, 44, 44, 0.8);
}
#contact-content{
color: white;
}
#contact-list li{
margin-bottom: 10px;
font-size: 1.1em;
}
#contact-list i{
margin: 10px;
margin-left: 0px;
color: #ff1c73;
}
#form input,
#form textarea,
#contact button{
background-image:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: block;
width: 100%;
margin-bottom: 15px;
padding: 10px;
border: 0;
}
#form input{
height: 30px;
}
#form textarea{
height: 100px;
}
@media (max-width: 576px) {
#contact .overlay {
padding: 50px 20px;
}
#contact-list{
margin-bottom: 50px;
}
#contact-list li {
list-style-type: none;
}
}
/*** footer ***/
footer{
height: 50px;
width: 100%;
background-color: black;
color: white;
padding-top: 10px;
}
/*****portfolio hover ****/
#work [class*="col-"] a,
#work [class*="col-"] a img {
display: block;
position: relative;
}
#work [class*="col-"] a {
overflow: hidden;
}
#work [class*="col-"] a div {
position: absolute;
background: #333;
background: rgba(75,75,75,0.7);
width: 100%;
height: 100%;
}
#work [class*="col-"] a div span {
display: block;
padding: 10px 0;
margin: 40px 20px 20px 20px;
text-transform: uppercase;
font-weight: normal;
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.5);
box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment