Skip to content

Instantly share code, notes, and snippets.

@acaporrini

acaporrini/about.html

Last active August 29, 2015 14:19
Show Gist options
  • Save acaporrini/33413f2c45f9c9a1e562 to your computer and use it in GitHub Desktop.
Save acaporrini/33413f2c45f9c9a1e562 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
about.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="css/about_styles.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>about</title>
<!--[if lt IE 9]>
<scritp src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="nav">
<a href="index.html"><span class="glyphicon glyphicon-home"></span></a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</div>
<div class="container">
<div class="header">
<h1>About</h1>
</div>
<div class="image">
<img src="img/me.jpg" alt="my picture">
</div>
<div class="intro column">
<h2>Introduction</h2>
<p>
Full Stack Web Developer, system administrator, tech enthusiast.
</p>
</div>
<div class="skills column">
<h3>My Skills</h3>
<ul id="skill_list">
<li>Java</li>
<li>Linux</li>
<li>Javascript</li>
<li>HTML</li>
</ul>
</div>
<div class="main_text">
<h3>More about me</h3>
<p>
Junior Web developer able to build a Web presence from the ground up: from concept, navigation, layout to back-end programming.
Fast learner, hard worker and team player who is proficient in modern web languages.
Strong background in Java development and object oriented programming, Linux administration and LAMP environment.
</p>
</div>
</div><!-- end container -->
</body>
</html>
Raw
about_styles.css
* { box-sizing: border-box; }
body {
background-image: url("../img/S27701RXMD.jpg");
background-size: cover;
background-repeat: no-repeat;
font-weight: bold;
}
.container {
width:80%;
margin: 40px auto;
background: rgba(255, 255, 255, .7);
padding:30px;
}
.header h1 {
text-align: center;
}
.image {
display: inline-block;
float: left;
width:30%;
}
.image img{
float: right;
}
.column {
display: inline-block;
float: left;
width:30%;
padding: 0 20px;
}
.main_text {
clear: both;
padding-top: 60px;
}
.header {
margin-bottom: 40px;
}
#skill_list {
margin-left:50px;
}
/*Typography*/
.intro h2 {
margin-top:0px;
font-size:2em;
font-weight: bold;
}
.intro p {
font-size: 2em;
font-weight: 100;
-webkit-margin-before: 0;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
.skills {
background-color: #34495e;
color: #FFF;
}
Raw
contacts.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="css/contacts_styles.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>FAQ</title>
<!--[if lt IE 9]>
<scritp src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="nav">
<a href="index.html"><span class="glyphicon glyphicon-home"></span></a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</div>
<div class="container">
<div class="jumbotron">
<div class="contacts">
<h1>Contact</h1>
<span class="link"> <a href="mailto:a.caporrini@gmail.com"><span class="glyphicon glyphicon-envelope"></span> a.caporrini@gmail.com</a></span><br>
<span class="link"><span class="glyphicon glyphicon-earphone"></span> <a href="skype:alessandro.caporrini">alessandro.caporrini</a></span><br>
<h1>Follow</h1>
<a class="socialLink" href="https://github.com/acaporrini" target="_blank">GitHub</a>
<a class="socialLink" href="https://it.linkedin.com/in/alessandrocaporrini" targer="_blank">LinkedIn</a>
<a class="socialLink" href="https://twitter.com/acaporrini" target="_blank">Twitter</a>
</div>
<div class="image">
<img class="img-responsive" src="http://maps.googleapis.com/maps/api/staticmap?center=Via+Madonna+del+Riposo+rome&zoom=13&scale=false&size=600x300&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:red%7Clabel:1%7CVia+Madonna+del+Riposo+rome" alt="Google Map of Via Madonna del Riposo rome"><br><br>
Based in Rome, Italy
</div>
<div>
<div></div>
</div>
</div>
</body>
</html>
Raw
contacts_styles.css
body {
background-image: url("../img/JZCER77RBB.jpg");
background-size: cover;
background-color: #fffeea;
background-repeat: no-repeat;
}
.jumbotron {
display:inline-block;
margin-top:40px;
width:100%;
padding:20px;
text-align: center;
background: rgba(255, 255, 255, .5);
}
.contacts {
width:50%;
float:left;
display:inline-block;
}
.image {
width:50%;
display:inline-block;
float:left;
}
.link {
font-size: 2em;
}
.link a {
text-decoration: none;
color: #34495e;
margin-left:10px;
}
.socialLink{
display: inline-block;
font-size: 2em;
padding:5px;
margin:10px;
font-weight: bold;
text-decoration: none;
color: #34495e;
border-width:5px;
border-style: double;
border-color: #34495e;
}
a.socialLink {
transition:font-size 600ms;
}
a.socialLink:hover {
font-size: 2.2em;
text-decoration: none;
}
Raw
faq.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="css/faq_styles.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>FAQ</title>
<!--[if lt IE 9]>
<scritp src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="nav">
<a href="index.html"><span class="glyphicon glyphicon-home"></span></a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</div>
<div class="container">
<h1>Frequently asked questions</h1>
</br>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> Why did you decide to become a Web Developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span>
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span>
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<div class="mail">Still have questions? <a href="mailto:a.caporrini@gmail.com"> Write me an email</a></div>
</div>
</body>
</html>
Raw
faq_styles.css
body {
background-image: url("../img/ONZPW5KBET.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.container {
width:80%;
margin: 40px auto;
background: rgba(255, 255, 255, .7);
}
.panel-default {
background-color: transparent;
border:none;
box-shadow:none;
}
.panel-default a{
color:#34495e;
text-decoration: none;
}
.panel-default >.panel-heading {
background-color:transparent;
}
.panel-group .panel-heading+.panel-collapse>.panel-body {
border:none;
box-shadow:none;
/* background-color:transparent;*/
}
.panel-collapse>.panel-body {
margin-left:40px;
font-style: italic;
}
.glyphicon-plus{
margin-right: 10px;
font-size: 0.8em;
}
.mail{
text-align: center;
display: block;
font-size: 2em;
margin:20px;
}
Raw
home_styles.css
.nav {
background-color: transparent;
}
.container-fluid{
padding:0;
}
.carousel-caption {
top:20px;
}
.carousel-caption h1 {
font-size: 3em;
}
.carousel-caption p {
font-size:1.5em;
}
.footer {
text-align: center;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Home</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
<link href="css/home_styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Custom styles for this template go here -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="nav">
<a href="#"><span class="glyphicon glyphicon-home"></span></a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</div>
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/carousel/1.jpg" alt="">
<div class="carousel-caption">
<h1>Alessandro Caporrini, Webmaster</h1>
<p><strong>Junior Web developer</strong> I'm able to build a Web presence from the ground up: from concept, navigation, layout to back-end programming. I'm a fast learner, hard worker and team player who is proficient in modern web languages.</p>
<a href="about.html">Learn more...</a>
</div>
</div>
<div class="item">
<img src="img/carousel/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>I have done a couple of projects using wordpress and Joomla and I would like to include them. I've worked as system administrator for years before I decided to start a career as web developer. I would like to include also this professional experience. Would be cool to have a single page scrolling theme with a fullscreen opening image followed by about, portfolio and contact sections with some kind of animation for every section that shows up while scrolling. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Project Goals</h2>
<p>I want to dedicate at least 20 hours per week. I'm planning to finish this course within this summer.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Course Goals</h2>
<p>I wanna start a career as full time junior web developer</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-12 footer"><a href="contacts.html">Contact Me</a></div>
</div>
<hr>
</div> <!-- /container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
body {
background-color: #fffeea;
color: #34495e;
font-family: 'Quicksand', sans-serif;
}
.nav {
background-color: #34495e;
position: fixed;
width:100%;
top:0;
padding:5px 15px 5px;
z-index: 1;
}
.nav ul {
float:right;
}
.nav ul li{
display: inline-block;
}
.nav a{
color:white;
transition: color 600ms;
-webkit-transition: color 600ms;
text-transform: uppercase;
letter-spacing: 0.05em;
margin:5px 10px;
font-weight: bold;
}
.nav a:hover {
color: #FBCC00;
text-decoration: none;
}
.nav ul li a {
font-size: 1.2em;
}
.glyphicon-home {
font-size:1.6em;
margin-top: 5px;
}
Raw
work.html
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="css/work_styles.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>Work</title>
<!--[if lt IE 9]>
<scritp src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="nav">
<a href="index.html"><span class="glyphicon glyphicon-home"></span></a>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</div>
<div class="container">
<h1>Work</h1>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<img class="img-responsive" src="img/pug.jpg">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<img class="img-responsive" src="img/pug.jpg">
</div>
</div>
</div>
</div>
</body>
Raw
work_styles.css
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.container {
width:80%;
margin: 40px auto;
background: rgba(255, 255, 255, .7);
padding:30px;
}
.container h1 {
text-align: center;
margin:30px;
font-weight: 2em;
text-transform: uppercase;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment