Skip to content

Instantly share code, notes, and snippets.

@ThiagoFerreir4

ThiagoFerreir4/Personal Project.markdown

Created July 8, 2015 17:32
Show Gist options
  • Save ThiagoFerreir4/daf3454d0770726d14e0 to your computer and use it in GitHub Desktop.
Save ThiagoFerreir4/daf3454d0770726d14e0 to your computer and use it in GitHub Desktop.
Download ZIP
Ferreira's Web Design Studio
Raw
index.html
<head>
<title>Landing Page Ferreira's Web Development Studio</title>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="#">Thiago Ferreira</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header -->
<a name="home"></a>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Ferreira's Web Design Studio</h1>
<h3>Where Awesomeness Is Brought To Life.</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://github.com/ThiagoFerreir4" target="_blank" class="btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="fi.linkedin.com/in/thiagoferreir4" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<a name="about"></a>
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Chef, turned Web Developer <a target="_blank" href="http://www.freecodecamp.com/">@freeCodeCamp</a> </h2>
<p class="lead">I'm a <a target="_blank" href="http://www.freecodecamp.com/thiagoferreira">Self taught</a> web developer, co-founder and entrepreneur based in Finland.</br>
I'm currently part of a small web development team in a upcoming start-up, building web and mobile awesomeness.</br> <!--<a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> -->
My passion is to use technology based solutions, to help solve real world challenges.</br>
Competences:</br>
Languages and Frameworks:</br>
Javascript, HTML5, CSS3, jQuery, Bootstrap3, Angular.js, Meteor.js.</br>
Tools & expertise:</br>
Git, Responsive Web Design, Agile Methodologies.
</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-circle img-responsive" src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/10846145_10152980222990929_8526315828281707814_n.jpg?oh=1139bc0ef8d546784c3def1b810cf7aa&oe=561E3275" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- Portfolio Grid Section -->
<a name="portfolio"></a>
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Awesomeness Portfolio</h2>
<h3 class="section-subheading text-muted">Below you'll find some of my recent work.</h3>
</div>
</div>
<!-- Portfolio img1 -->
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item text-center">
<a href="http://codepen.io/ThiagoFerreir4/full/gpvJOK" target="_blank" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/11707627_10153522203165929_7676178806200668521_n.jpg?oh=52d391165a739719d7c6bd31bc675907&oe=56136AAE" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Twitch.tv API project</h4>
<p class="text-muted">Bootstrap and Angularjs</p>
</div>
</div>
<!-- End of Portfolio img1 -->
<!-- Portfolio img2 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="http://codepen.io/ThiagoFerreir4/full/vOyXre" class="portfolio-link" target="_blank" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xtf1/v/t1.0-9/11403481_10153522203025929_1101096737256896457_n.jpg?oh=23e60357490eb0b6dced73ef45695307&oe=561D2328" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Wikipedia Search Engine</h4>
<p class="text-muted">Bootstrap and jQuery</p>
</div>
</div>
<!-- End of Portfolio img2 -->
<!-- Portfolio img3 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="http://codepen.io/ThiagoFerreir4/full/QbKWGO" target="_blank" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/11140143_10153522202920929_207741351356014777_n.jpg?oh=7d1bf0ae100bf64e30f12aa1798f3174&oe=5617CC65" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Stainless Steel Calculator</h4>
<p class="text-muted">SCSS and Vanilla Javascript</p>
</div>
</div>
<!-- End of Portfolio img3 -->
<!-- Portfolio img4 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="http://codepen.io/ThiagoFerreir4/full/mJXvYg" target="_blank" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/18798_10153522203030929_3143817501969970615_n.jpg?oh=f7026b2ba7231622d53dabf29ed442d8&oe=562189CE" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>freeCodeCamp News Feed</h4>
<p class="text-muted">Bootstrap and Angular.js</p>
</div>
</div>
<!-- End of Portfolio img4 -->
<!-- Portfolio img5 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="http://codepen.io/ThiagoFerreir4/full/oXwKJV" target="_blank" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/11659237_10153522203265929_2869204364733091620_n.jpg?oh=b6b5b33d993b408d9ee3bf2286cc0172&oe=560E1ACD" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Weather App</h4>
<p class="text-muted">Bootstrap and Vanilla Javascript</p>
</div>
</div>
<!-- End of Portfolio img5 -->
<!-- Portfolio img6 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="http://codepen.io/ThiagoFerreir4/full/WvzQGx" target="_blank" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/11188330_10153522203050929_2261726113652100784_n.jpg?oh=36a6a36db2dc90fafd27cf76cd63b0bb&oe=5659D148" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Tv Show Searcher</h4>
<p class="text-muted">Bootstrap and Angular.js</p>
</div>
</div>
<!-- End of Portfolio img6 -->
</div>
</div>
</section>
<a name="contact"></a>
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Connect with Ferreira's Web Design Studio!</h2>
</div>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/Ferreir4Thiago" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://github.com/ThiagoFerreir4" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="fi.linkedin.com/in/thiagoferreir4" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.banner -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
<a href="#">Home</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="#about">About</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="#services">Services</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright &copy; Ferreira's Web Design Studio 2015. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
</body>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Raw
style.css
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.topnav {
font-size: 16px;
border: 1px outset rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.3);
box-shadow: 0px 3px rgba(0, 0, 0, 0.3);
text-shadow: 4px 0px 18px rgba(0,0,0,46);
}
.lead {
font-size: 18px;
font-weight: 400;
}
.intro-header {
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url('https://dbrds.files.wordpress.com/2011/08/01.jpg') no-repeat center scroll;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message > h1 {
margin: 0;
text-shadow: 3px 6px 3px rgba(0,0,0,0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.intro-message > h3 {
text-shadow: 3px 6px 3px rgba(0,0,0,0.6);
color: black;
}
@media(max-width:767px) {
.intro-message {
padding-bottom: 15%;
}
.intro-message > h1 {
font-size: 3em;
}
ul.intro-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.intro-social-buttons > li:last-child {
margin-bottom: 0;
}
.intro-divider {
width: 100%;
}
}
hr.intro-divider {
border: 2px outset rgba(255, 255, 255, 0.2);
box-shadow: 2px 3px 1px rgba(0,0,0,0.6);
}
/* Transparent buttons */
.btn {
border: 3px outset rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.3);
text-shadow: 3px 6px 3px rgba(0,0,0,0.6);
box-shadow: 3px 6px 3px rgba(0,0,0,0.9);
}
.btn:hover {
transform:scale(1.2);
transition: 0.5s;
box-shadow: 5px 5px 5px #000;
}
.network-name {
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
letter-spacing: 2px;
}
/*section 2*/
.content-section-a {
padding: 50px 0;
background-color: silver;
background: url('http://15pictures.com/wp-content/uploads/2013/04/modern-buildings-14.jpg') no-repeat center center scroll;
background-size: cover;
}
h2.section-heading {
text-shadow: 3px 6px 3px rgba(0,0,0,0.6);
}
.img-circle {
border: 3px groove rgba(255, 255, 255, 0.3);
box-shadow: 3px 6px 3px rgba(0,0,0,0.6);
}
/* Portfolio section*/
section{
color: black;
background-color: silver;
background: url('http://starmanner.com/wp-content/uploads/modern-light.jpg') no-repeat center scroll;
background-size: cover;
}
p {
color: #000;
}
.text-muted {
color: #000;
}
.portfolio-item {
padding: 7px;
}
/*Portfolio blocks*/
.col-md-4 {
display: inline-block;
border: 2px outset rgba(255, 255, 255, 0.6);
border-radius: 2%;
text-align: center;
box-shadow: 3px 6px 3px rgba(0,0,0,0.9);
cursor: pointer;
}
.col-md-4:hover {
background: rgba(255, 255, 255, 0.3);
border: 2px outset;
transition: 0.5s;
box-shadow: 15px 15px 55px 25px #000;
}
.section-heading {
margin-bottom: 30px;
}
.section-heading-spacer {
float: left;
width: 200px;
border-top: 3px solid #e7e7e7;
}
.banner {
padding: 100px 0;
color: #f8f8f8;
background: url('https://scontent-ams3-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/11665624_10153522225610929_1084216786969460468_n.jpg?oh=5cb18d647bafcaf0cc46bbdfe6eb18ba&oe=5659545F') no-repeat center center;
background-size: cover;
}
.banner h2 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
font-size: 3em;
}
.banner ul {
margin-bottom: 0;
}
.banner-social-buttons {
float: right;
margin-top: 0;
}
@media(max-width:1199px) {
ul.banner-social-buttons {
float: left;
margin-top: 15px;
}
}
@media(max-width:767px) {
.banner h2 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
font-size: 3em;
}
ul.banner-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.banner-social-buttons > li:last-child {
margin-bottom: 0;
}
}
footer {
padding: 50px 0;
background-color: #f8f8f8;
}
p.copyright {
margin: 15px 0 0;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment