Skip to content

Instantly share code, notes, and snippets.

@joel-extremo

joel-extremo/index.html

Created August 31, 2018 13:25
Show Gist options
  • Save joel-extremo/2bb4d3abc1767db9d21c1595896d55cf to your computer and use it in GitHub Desktop.
Save joel-extremo/2bb4d3abc1767db9d21c1595896d55cf to your computer and use it in GitHub Desktop.
Download ZIP
2.5: Better CSS
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/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 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 p-0 m-0">
<section id="contact">
<div class="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 -->
<footer class="text-center container-fluid">Copyright <span>&copy;</span> All Rights Reserved</footer>
<!-- 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>
Raw
styles.css
body{
font-family : 'Quicksand', sans-serif;
}
h1{
text-align : center;
margin-bottom : 70px;
margin-top : 10px;
color : #f94e66;
}
h1 span{
border-bottom :1px solid #3a424b;
padding-bottom : 10px;
}
h3{
color : #3a424b;
}
.content {
padding-top : 50px;
}
@media (max-width : 576px) {
h1{
margin-bottom : 40px;
}
section{
margin : 0;
}
}
/*** Navbar ***/
.navbar{
padding : 8px 60px;
background-color : #3a424b !important;
}
.navbar-brand {
text-transform : uppercase;
}
a.navbar-brand {
color : #f94e66 !important;
}
.nav-link{
color : white !important;
}
@media (max-width : 576px) {
.navbar{
padding : 8px 20px
}
.navbar ul{
text-align : center;
}
}
/*** About ***/
#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 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 h3{
color : white;
text-align : center;
margin-bottom : 50px;
}
#contact div {
padding : 20px 50px;
}
#contact-list {
padding-left : 0;
}
#contact-list li {
list-style-type : none;
margin-bottom : 10px;
}
#contact-list i{
color : #f94e66;
margin-right : 15px;
}
#contact .overlay-layer {
padding-bottom : 50px;
background : rgba(58, 66, 75, 0.8);
}
#contact input,
#contact textarea,
#contact 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 div {
padding : 0 10px;
}
#contact .overlay-layer {
padding : 50px 20px;
}
#contact-list{
margin-bottom : 50px;
text-align : center;
}
}
/*** faq ***/
#faq{
margin-bottom : 50px;
}
#faq button{
color : #f94e66;
}
#faq i{
margin-right : 10px;
}
@media (max-width : 576px) {
#faq button {
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 */
.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