Skip to content

Instantly share code, notes, and snippets.

@Ahnita Ahnita/Better CSS
Last active Aug 29, 2015

Embed
What would you like to do?
Index
/* Nav Bar */
nav li ul {
float: right;
width: 100%;
position: fixed;
letter-spacing: 0.05em;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
z-index: 5;
display: inline-block;
padding: 20px 10px 20px;
}
.projectname a img {
float: none;
padding: 5px;
position: fixed;
z-index: 6;
}
li a {
transition: color 600ms;
font: 20px 'josefin sans', serif;
}
ul.nav a:hover {
color: #D42163 !important;
}
nav {
float: right;
}
/* Hero Elements including Carousel */
.jumbotron {
top: 10px;
left: 0px;
background-color: #000;
margin-bottom: 0;
}
.jumbotron h1 {
display: inline-block;
color: #FFFEF9;
font: 40px 'josefin sans', serif;
text-shadow: 2px 1px #000;
top: 10px;
vertical-align: middle;
}
.jumbotron p {
color: #FFFEF9;
font: 20px 'josefin sans', sans-serif;
top: 15px;
margin: center;
}
.container h1 {
font: 40px 'josefin sans', serif;
}
.container h2 {
font: 30px 'josefin slab', sans-serif;
}
.carousel-caption h3 p {
text-align: center;
position: relative !important;
display: inline;
vertical-align: middle;
width: 550px;
top: 210px;
left: 380px !important;
z-index: 600;
}
.carousel-ahnita {
height: 100%;
min-width: 100%;
position: relative;
overflow: hidden;
z-index: 2;
}
.carousel-inner {
display: block;
max-width: 100%;
height: auto !important;
}
.header-wrapper {
overflow: auto;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Headers and text customizations*/
h1 h2 h3 {
margin-top: 10px;
}
h3:hover {
color: #E31D70;
}
h4 {
font-family: 12px 'josefin slab', sans-serif;
}
.contact h1 {
text-align: center;
margin: 50%;
position: absolute;
font: 20px, 'josefin sans', serif;
}
/* Body */
body {
background-color: #000;
}
.div .container {
min-height: 10em;
display: inline-block;
vertical-align: middle;
}
/*About*/
.container {
padding: 50px 50px 50px 50px;
margin: 0;
color: white;
width: 100%;
text-align: center;
margin-right: 50%;
top: 50%;
left: 50%;
}
.container .about {
margin-top: 100px;
display: block;
position: absolute;
float: left;
z-index: 99;
}
/* Projects */
.row h2 {
text-align: center;
}
.img-responsive {
padding: 30px 30px 30px 30px;
}
/*FAQ*/
.panel-body {
color: #000;
}
.learn-more {
text-align: left;
float: left;
padding: 15px;
}
.modal-button {
float: right;
padding: 5px;
}
.modal-body {
height: 500px;
}
.modal-content {
color: #000;
}
.close {
float: right;
padding: 5px;
}
#modalframe {
padding: 10px;
width: 100%;
height: 100%;
color: rgba (0,0,0,0.25);
}
.closebutton {
background-color: rgba(255, 255, 255, 0.25);
border: 2px solid #fff;
color: #fff;
position: absolute;
right: 5px;
top: 5px;
margin: 2px;
width: 30px;
padding: 5px;
height: 30px;
}
.modal-dialog .modal-content {
background-color: rgba(255, 255, 255, 0.25);
}
.modal-title {
color: #fff;
}
.video {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 10px 10px 10px 10px;
}
/*contact*/
#contact {
background-image: url("../img/course.png");
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 100%;
padding: 20px 20px 20px 20px;
text-align: center;
}
map iframe {
padding: 10px 10px 10px 10px;
}
.form-group {
padding: 10px 10px 10px 10px;
}
.name {
width: 100%;
color: #000;
}
.message-box {
width: 100%;
color: #000;
}
.email {
width: 100%;
color: #000;
}
textarea {
width: 100%;
}
.phone {
width: 100%;
color: #000;
}
button {
width: 100%;
}
/* Footer */
.footer {
display: inline-block;
padding: 20px 20px 20px 20px;
width: 100%;
color: white;
background-color: #000;
}
.twittershare {
float: right;
}
@media screen and (max-width: 768px) {
/*header*/
.navbar {
width: 100%;
}
.jumbotron{
display: none! important;
}
/*body*/
html {
background-color: #000;
}
a img {
z-index: 5;
top: 0;}
.container {
width: 100%;
}
.container .about {
background-color: #000;
margin-top: 200px
}
.container .contact h3 a {
font-size: 4.5vw;
text-align: center;
}
/*FAQ*/
.learn-more {
display: none;
}
.modal-button {
display: none;
}
.video {
display: none !important;
}
/*Contact*/
map iframe {
display: none;
}
/*footer*/
.fb-share {
display: none !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ahn Bustamante - Web Developer</title>
<!-- Bootstrap core CSS -->
<link href="css/index_style.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- 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">
<ul>
<li><a href= "http://gracesahnbustamante.bitballoon.com/">Home</a></li>
<li><a href= "http://gracesahnbustamante.bitballoon.com/about">About</a></li>
<li><a href= "http://gracesahnbustamante.bitballoon.com/Projects">Projects</a></li>
<li><a href="http://gracesahnbustamante.bitballoon.com/Contact">Contact</a></li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
<h1>Graces Ahn Bustamante
</h1>
<p><strong>Aspiring Web Developer</strong>
</p>
</div>
</div>
<div class="row container">
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>I want to include a background of my work experience and a few of my social media accounts and a blog. The design should be clean and simple white as a background with black, grey and a bright color of magenta for highlights and buttons. </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 be fully equipped at the end of three months. I can commit to a minimum of 16 hours a week. </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've always liked web programming for a long time but life got in the way. I would like to use the skills that I will acquire to eventually lead to a freelance developer and if luck is on my side and a company wants to sponsor me I'd be happy to work as an employed developer. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div> <!-- /row container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ahn Bustamante - Web Developer</title>
<!-- Bootstrap core CSS -->
<link href="css/index_style.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Josefin+Slab|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap Javascript-->
<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 = "header">
<a href= "http://gracesahnbustamante.bitballoon.com/">
<img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
</a>
<div class = "nav">
<ul>
<li><a href= "http://gracesahnbustamante.bitballoon.com/about">About</a></li>
<li><a href= "http://gracesahnbustamante.bitballoon.com/Projects">Projects</a></li>
<li><a href="http://gracesahnbustamante.bitballoon.com/Contact">Contact</a></li>
<li><a href="http://gracesahnbustamante.bitballoon.com/FAQ">FAQ</a></li>
</ul>
</div>
</div> <!--- end of header --->
<div class="jumbotron">
<div id="carousel-ahnita" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-ahnita" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ahnita" data-slide-to="1"></li>
<li data-target="#carousel-ahnita" data-slide-to="2"></li>
<li data-target="#carousel-ahnita" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/HNCK3988.jpg" class="img.responsive" alt="Intro Quote">
<div class="carousel-caption">
<h3>Ahn Bustamante</h3>
<p>Aspiring Full Stack Web Developer</p>
</div>
</div>
<div class="item">
<img src="img/bubbles.jpg" class="img.responsive" alt="Responsive">
<div class="carousel-caption">
<h3>Simple</h3>
<p>Minimalism is not the lack of something.
<br>
It's the perfect amount of something.
</div>
</div>
<div class="item">
<img src="img/responsive.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h3>Responsive</h3>
<p> See it in different devices.
<br>
Use your phone, tablet or a computer.
<br>
Anywhere, anytime.
</div>
</div>
<div class="item">
<img src="img/1576.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h3>Intuitive</h3>
<p> When you see it, you know what to do. </p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-ahnita" 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-ahnita" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- Jumbotron -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ahn Bustamante - Web Developer</title>
<!-- Bootstrap core CSS -->
<link href="css/index_style.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Josefin+Slab|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap Javascript-->
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Parallax -->
<script type="text/javascript" src="jquery.stellar.min.js"></script>
<script>!function(d,s,id){var js, fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'htttps';if(!d.getElementById(id)){js=d.createElement(s);js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');
</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>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '125232304166875',
xfbml : true,
version : 'v2.3'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class = "header-wrapper">
<body data-spy = "scroll" data-target=".navbar">
<!-- navbar starts here -->
<nav class = "navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class = "projectname">
<a href ="#"><img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
</a>
</div> <!-- end of projectName -->
<nav class="container-fluid">
<nav class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle=".navbar-collapse">
<span class="sr only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href= "#about">About</a></li>
<li><a href= "#projects">Projects</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!-- end of navbar-collapse collapse -->
</nav> <!-- End of navbar-header -->
</nav> <!-- end f nav container -->
</nav> <!-- end of navbar -->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div id="carousel-ahnita" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-ahnita" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ahnita" data-slide-to="1"></li>
<li data-target="#carousel-ahnita" data-slide-to="2"></li>
<li data-target="#carousel-ahnita" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/HNCK3988.jpg" class="img.responsive" alt="Intro Quote">
<div class="carousel-caption">
<h1>Ahn Bustamante</h1>
<p>Aspiring Full Stack Web Developer</p>
</div>
</div>
<div class="item">
<img src="img/bubbles.jpg" class="img.responsive" alt="Responsive">
<div class="carousel-caption">
<h1>Simple</h1>
<p>Minimalism is not the lack of something.
<br>
It's the perfect amount of something.
</div>
</div>
<div class="item">
<img src="img/responsive.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h1>Responsive</h1>
<p> See it in different devices.
<br>
Use your phone, tablet or a computer.
<br>
Anywhere, anytime.
</div>
</div> <!-- end of item -->
<div class="item">
<img src="img/1576.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h1>Intuitive</h1>
<p> When you see it, you know what to do. </p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-ahnita" 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-ahnita" 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> <!-- Jumbotron -->
</div> <!-- end of Header -->
<div class = "container" id="about">
<div class="header">
<h1>Intro</h1>
<div class = "col-md-4 col-xs-12">
<img src="img/1.png" width="300" height="300" alt = "Ahnita">
</div>
<div class = "col-md-8 col-xs-12">
<h2>"I sing a song of myself, as others have done before me, but none have sung a song quite like this because this one is mine, and there will never be any like me.
<br>
<br>
- Walt Whitman, Leaves of Grass"
</h2>
</div> <!-- end of col-md-8 col-xs-12 -->
</div> <!-- end of header -->
</div> <!-- end of About -->
<div class = "container" id = "skills">
<div class = "skill-column">
<h1>My Skills</h1>
<ul id = "skill_list">
<li>Change Management</li>
<li>Procurement Management (S2P) and Enterprise Implementation</li>
<li>Growth Hacking (Social Media)</li>
<li>HTML5</li>
<li>CSS</li>
<li>Ruby on Rails</li>
<li>Cartography</li>
<li>Cooking</li>
</ul>
</div> <!-- end of Skill Column -->
</div> <!-- end of container skill -->
<div class= "container" id="main_text">
<h1>More about me</h1>
<p>Enthused about life and living, I'm interested in music, art, social media, exploring the outdoors and devouring food made right out of my kitchen. I enjoy working out and staying healthy. Enjoying the simple quirks of everyday.
<br>
<br>
Eager to bridge the gap, I use data and information gathered from investigation to provide solutions. I have been involved in procurement and technology implementation projects within Fortune 500 companies and has been a vital contributor in establishing the structure of an organization. I've worked for big brands such as Apple, Johnson and Johnson, Orica and Barclays Capital just to name a few.
<br>
<br>
After months of mauling over and finally getting the free time and resources, without much distraction, I'm finally doing what I wanted for a long time. To be an opportunity maker through web development.</p>
</div> <!-- End of main text -->
</div> <!-- End of About -->
<div class = "container" id="projects">
<div class = "header">
<h1>Projects/Work in Progress</h1>
</div> <!-- ebd of header -->
<div class = "row" id= "works">
<div class = "col-md-3 col-xs-6">
<img src="img/classC.jpg" alt="classyC" class="img-responsive">
<h2> Sample 1 </h2>
</div>
<div class = "col-md-3 col-xs-6">
<img src="img/divD.jpg" alt="DivD" class="img-responsive">
<h2> Sample 2 </h2>
</div>
<div class = "col-md-3 col-xs-6">
<img src="img/html.jpg" alt="html" class="img-responsive">
<h2> Sample 3 </h2>
</div>
</div> <!-- End of Project container -->
<div class = "container" id= "FAQ">
<div class = "header">
<h1>Frequently Asked Questions</h1>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class ="glyphicon glyphicon-plus"></span>
Do you offer responsive design solutions?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Yes! Responsive web design is a bullet proof practice that ensures your website is accessible to everyone - even if they don't own a traditional computer.
</div> <!-- end of panel-body -->
</div> <!-- end of collapseOne -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class ="glyphicon glyphicon-plus"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
It emerged from a desire to help and make things better. I've spent about 8 years in Singapore helping out in implementation projects that it became a habit. The web is the largest resource of information and it made life easier looking for things to buy and to find locations. My return to the Philippines is like going inside a time capsule, I was back in the 90's. I realized a greater purpose in web development.
</div>
</div> <!-- end of collapseTwo -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class ="glyphicon glyphicon-plus"></span>
What is your design process?
</a>
</h4>
</div> <!-- end of panel heading -->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
My design process is to first get the client's requirements, build the design and concept and present it. We got through a feedback loop to see if there's anything that needs to be revised. Once everything is approved, that's the only time I can start cracking my fingers to make your website. After everything's done, I ask for a final check to see if there's any revisions and improvement before launching.
</div>
</div> <!-- end of collapseThree -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFOUR" aria-expanded="false" aria-controls="collapseFOUR"><span class ="glyphicon glyphicon-plus"></span>
Do you provide support after the website gets built?
</a>
</h4>
</div>
<div id="collapseFOUR" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFOUR">
<div class="panel-body">
Certainly, for minor issues I can definitely help but if you require a redesign a month after launching, it will be considered as a new project.
</div>
</div> <!-- end of collapseFour -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFIVE" aria-expanded="false" aria-controls="collapseFIVE"><span class ="glyphicon glyphicon-plus"></span>
How long will the project take?
</a>
</h4>
</div>
<div id="collapseFIVE" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFIVE">
<div class="panel-body">
It depends on the complexity of the project. If it's just a few pages, it may take 1 to 2 weeks. If it's a website that requires lots of pages linked to a database, it may take a month.
</div>
</div>
</div>
</div> <!-- End of FAQ container -->
<div class = "video">
<iframe src="https://player.vimeo.com/video/128963391?color=ffffff&portrait=0" height = 400 width = 900 frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class = "container" id="contact">
<div class = "col-md-4 col-xs-12">
<div class = "header">
<h1>Contact</h1>
</div>
<h3><span class = "glyphicon glyphicon-envelope"></span> Email</h3>
<a href="mailto:ahn.bustamante@gmail.com?Subject=Hello%20Ahnita!" target = "_top">ahn@ahnbustamante.com</a>
<br>
<br>
<h3><span class = "glyphicon glyphicon-map-marker"></span> Location</h3>
Makati, Metro Manila Philippines
<br>
<h3><span class = "glyphicon glyphicon-phone"></span> Skype</h3>
<a href="skype:hola.ahnita?call">hola.ahnita</a>
<br>
<br>
<h3><span class = "glyphicon glyphicon-globe"></span> Social Media</h3>
<a href = "https://ph.linkedin.com/in/ahnbustamante"><img src="img/linkedin.png" class="sm-icon" alt="linkedin"></a>
<a href = "https://twitter.com/wahnderlush"><img src="img/twitter icon.png" class="sm-icon" alt="twitter"></a>
<a href = "https://www.facebook.com/ahnita6"><img src="img/facebook icon.png" class="sm-icon" alt="facebook"></a>
<a href = "https://soundcloud.com/ahnita"><img src="img/soundcloud.png" class="sm-icon" alt="soundcloud"></a>
<a href = "https://gist.github.com/Ahnita"><img src="img/github.png" class="sm-icon" alt="github"></a>
</div> <!-- end of contact text -->
<div class = "col-md-4 col-xs-12">
<map>
<iframe width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?zoom=10&center=14.6091%2C121.0223&key=AIzaSyCW7MqhYrWFHnQ2UbB4-LuRQDjpyAPSHLw"></iframe>
</map>
</div>
<form>
<div class = "col-md-4 col-xs-12">
<div class = "form-group">
<h1> Say Hello! </h1>
<label for = "name">Your Name </label>
<br>
<input type="name" class="name" id="name" placeholder = "Your Name"></input>
<br>
<br>
<label for = "email">Email Address</label>
<br>
<input type ="email" class="email" id="email" placeholder = "Your email"></input>
<br>
<label for = "Phone">Contact Number</label>
<br>
<input type ="phone-number" class="phone" id="phone" maxlength = 12 placeholder = "Your number"></input>
<br>
<label for = "message-box">Message</label>
<textarea placeholder = "Your message here" class = "message-box" style = "resize: none" cols="40" rows="5" maxlength = 150></textarea>
<br>
<br>
<button type = "submit" class="btn btn-danger">Submit</button>
</div>
</div>
</form>
</div> <!-- end of contact container -->
</div> <!-- end of content container -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
<footer>
<div class = "footer">
<div class="fb-share" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true">
<div class="fb-follow" data-href="https://www.facebook.com/zuck" data-colorscheme="light" data-layout="standard" data-show-faces="true"></div>
</div>
<div class = "twittershare">
<a href="https://twitter.com/wahnderlush" class="twitter-follow-button" data-show-count="false">Follow @wahnderlush</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<br>
&copy;Ahn Bustamante 2015
</div>
</footer>
</body>
</html>
nav li ul {
background-color: #000;
float: right;
width: 100%;
position: fixed;
letter-spacing: 0.05em;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
z-index: 5;
display: inline-block;
padding: 20px 10px 20px;
}
.projectname a img {
float: none;
padding: 5px;
position: fixed;
z-index: 6;
}
li a {
transition: color 600ms;
font: 20px 'josefin sans', serif;
}
ul.nav a:hover {
color: #D42163 !important;
}
nav {
float: right;
}
.jumbotron {
top: 10px;
left: 0px;
}
.jumbotron h1 {
display: inline-block;
color: #FFFEF9;
font: 30px 'josefin sans', serif;
text-shadow: 2px 1px #000;
top: 10px;
vertical-align: middle;
padding: 10px;
}
.jumbotron p {
color: #FFFEF9;
padding: 10px;
font: 20px 'josefin sans', sans-serif;
top: 15px;
margin: center;
}
.container h1 {
font: 30px 'josefin sans', serif;
}
.container h2 {
font: 30px 'josefin slab', sans-serif;
}
.carousel-caption h3 p {
text-align: center;
position: relative !important;
display: inline;
vertical-align: middle;
width: 550px;
top: 210px;
left: 380px !important;
z-index: 600;
}
.carousel-ahnita {
height: 100%;
min-width: 100%;
position: relative;
overflow: hidden;
z-index: 2;
}
.carousel-inner {
display: block;
max-width: 100%;
height: auto !important;
}
.header-wrapper {
overflow: auto;
}
body {
background-color: #000;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.div .container {
min-height: 10em;
display: inline-block;
vertical-align: middle;
}
.container .about {
margin-top: 100px;
display: block;
position: absolute;
float: left;
background-color: #000;
padding: 10px 10px 10px 10px;
width: 100%;
z-index: 99;
}
h1 h2 h3 {
margin-top: 10px;
}
h3:hover {
color: #E31D70;
}
.container .skills {
text-align: center;
top: 50%;
left: 50%;
margin-right: 50%;
padding: 20px 20px 20px 20px;
}
h4 {
font-family: 12px 'josefin slab', sans-serif;
}
.container .main_text {
text-align: center;
top: 50%;
left: 50%;
margin-right: 50%;
padding: 50px 50px 50px 50px;
}
.contact h1 h3 {
text-align: center;
margin: 50%;
position: absolute;
font: 15px, 'josefin sans', serif;
}
.container .skills {
text-align: center;
margin-right: 70%;
position: absolute;
display: inline-block;
width: 100%;
padding: 5px 5px 5px 5px;
}
#contact {
background-image: url("../img/course.png");
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 100%;
padding: 10px 10px 10px 10px;
text-align: center;
}
.panel-body {
color: #000;
}
.container {
background: #000;
padding: 10px;
margin: 0;
padding: 20px;xw
height: 100%;
position: relative;
color: white;
}
.footer {
display: inline-block;
padding: 20px 20px 20px 20px;
width: 100%;
color: white;
background-color: #000;
}
.twittershare {
float: right;
}
.video {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 10px 10px 10px 10px;
}
.name {
width: 100%;
color: #000;
}
.message-box {
width: 100%;
color: #000;
}
.email {
width: 100%;
color: #000;
}
textarea {
width: 100%;
}
.phone {
width: 100%;
color: #000;
}
button {
width: 100%;
}
@media screen and (max-width: 768px) {
.jumbotron {
display: none !important;
}
html {
background-color: #000;
}
a img {
z-index: 5;
position: fixed;
top: 0;}
.container {
width: 100%;
}
.container .about {
background-color: #000;
margin-top: 50px
}
.video {
display: none !important;
}
.container .contact h3 a {
font-size: 2em;
font-size: 3.5vw;
}
.container .contact {
background-size: cover;
height: 500px;
width: 100%;
padding: 10px 10px 10px 10px;
text-align: center;
}
map iframe {
display: none;
}
.message-box {
width: 100%;
color: #000;
}
.email {
color: #000;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ahn Bustamante - Web Developer</title>
<!-- Bootstrap core CSS -->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Josefin+Slab|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/index_style.css" rel="stylesheet">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- jQuery Media Script -->
<script src = "js/jquery.media.js" type="text/javascript"></script>
<!-- Latest compiled and minified Bootstrap Javascript-->
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Parallax -->
<script type="text/javascript" src="jquery.stellar.min.js"></script>
<script>!function(d,s,id){var js, fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'htttps';if(!d.getElementById(id)){js=d.createElement(s);js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');
</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>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '125232304166875',
xfbml : true,
version : 'v2.3'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class = "header-wrapper">
<body data-spy = "scroll" data-target=".navbar">
<!-- navbar starts here -->
<nav class = "navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class = "projectname">
<a href ="#"><img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
</a>
</div> <!-- end of projectName -->
<nav class="container-fluid">
<nav class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href= "#about">About</a></li>
<li><a href= "#projects">Projects</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!-- end of navbar-collapse collapse -->
</nav> <!-- End of navbar-header -->
</nav> <!-- end f nav container -->
</nav> <!-- end of navbar -->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class= "mobile-cover">
<h1>Ahn Bustamante</h1>
<p>Aspiring Full Stack Web Developer
</p>
</div>
<div class="jumbotron">
<div id="carousel-ahnita" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-ahnita" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ahnita" data-slide-to="1"></li>
<li data-target="#carousel-ahnita" data-slide-to="2"></li>
<li data-target="#carousel-ahnita" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/HNCK3988.jpg" class="img.responsive" alt="Intro Quote">
<div class="carousel-caption">
<h1>Ahn Bustamante</h1>
<p>Aspiring Full Stack Web Developer</p>
</div>
</div>
<div class="item">
<img src="img/bubbles.jpg" class="img.responsive" alt="Responsive">
<div class="carousel-caption">
<h1>Simple</h1>
<p>Minimalism is not the lack of something.
<br>
It's the perfect amount of something.
</div>
</div>
<div class="item">
<img src="img/responsive.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h1>Responsive</h1>
<p> See it in different devices.
<br>
Use your phone, tablet or a computer.
<br>
Anywhere, anytime.
</div>
</div> <!-- end of item -->
<div class="item">
<img src="img/1576.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h1>Intuitive</h1>
<p> When you see it, you know what to do. </p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-ahnita" 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-ahnita" 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> <!-- Jumbotron -->
</div> <!-- end of Header -->
<div class = "container" id="about">
<div class="header">
<h1>Intro</h1>
<div class = "col-md-4 col-xs-12">
<img src="img/1.png" width="250" height="250" alt = "Ahnita">
</div>
<div class = "col-md-8 col-xs-12">
<h2>"I sing a song of myself, as others have done before me, but none have sung a song quite like this because this one is mine, and there will never be any like me.
<br>
<br>
- Walt Whitman, Leaves of Grass"
</h2>
</div> <!-- end of col-md-8 col-xs-12 -->
</div> <!-- end of header -->
</div> <!-- end of About -->
<div class = "container" id = "skills">
<div class = "skill-column">
<h1>My Skills</h1>
<ul id = "skill_list">
<li>Change Management</li>
<li>Procurement Management (S2P) and Enterprise Implementation</li>
<li>Growth Hacking (Social Media)</li>
<li>HTML5</li>
<li>CSS</li>
<li>Ruby on Rails</li>
<li>Cartography</li>
<li>Cooking</li>
</ul>
</div> <!-- end of Skill Column -->
</div> <!-- end of container skill -->
<div class= "container" id="main_text">
<h1>More about me</h1>
<p>Enthused about life and living, I'm interested in music, art, social media, exploring the outdoors and devouring food made right out of my kitchen. I enjoy working out and staying healthy. Enjoying the simple quirks of everyday.
<br>
<br>
Eager to bridge the gap, I use data and information gathered from investigation to provide solutions. I have been involved in procurement and technology implementation projects within Fortune 500 companies and has been a vital contributor in establishing the structure of an organization. I've worked for big brands such as Apple, Johnson and Johnson, Orica and Barclays Capital to name a few.
<br>
<br>
After months of reflection and finally getting the free time and resources, without much distraction, I'm finally doing what I wanted for a long time. To be an opportunity maker through web development.</p>
</div> <!-- End of main text -->
</div> <!-- End of About -->
<div class = "container" id="projects">
<div class = "header">
<h1>Projects/Work in Progress</h1>
</div> <!-- ebd of header -->
<div class = "row" id= "works">
<div class = "col-md-3 col-xs-6">
<img src="img/classC.jpg" alt="classyC" class="img-responsive">
<h2> Sample 1 </h2>
</div>
<div class = "col-md-3 col-xs-6">
<img src="img/divD.jpg" alt="DivD" class="img-responsive">
<h2> Sample 2 </h2>
</div>
<div class = "col-md-3 col-xs-6">
<img src="img/html.jpg" alt="html" class="img-responsive">
<h2> Sample 3 </h2>
</div>
</div> <!-- End of Project container -->
<div class = "container" id= "FAQ">
<div class = "header">
<h1>Frequently Asked Questions</h1>
</div>
<div class = "row">
<h2 class = "learn-more">Learn More</h2>
<div class = "modal-button">
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">View CV</button>
<!-- Small modal -->
<div class = "modal fade bs-example-modal-sm" tabindex="-1" role = "dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class = "modal-content">
<div class = "modal-header">
<h4 class="modal-title" id="myModalLabel">CV of Ahn Bustamante</h4>
<button type = "button" class = "closebutton" data-dismiss ="modal" aria-label="close"><span aria-hidden="true">X</span></button>
</div> <!-- end of modal-header -->
<div class = "modal-body">
<iframe id = "modalframe" src = "img/web developer cv.pdf"></iframe>
</div> <!-- end of modal-body -->
</div>
</div> <!-- end of modal dialog -->
</div> <!-- end of modal fade -->
</div>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class ="glyphicon glyphicon-plus"></span>
Do you offer responsive design solutions?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Yes! Responsive web design is a bullet proof practice that ensures your website is accessible to everyone - even if they don't own a traditional computer.
</div> <!-- end of panel-body -->
</div> <!-- end of collapseOne -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class ="glyphicon glyphicon-plus"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
It emerged from a desire to help and make things better. I've spent about 8 years in Singapore helping out in implementation projects that it became a habit. The web is the largest resource of information and it made life easier looking for things to buy and to find locations. My return to the Philippines is like going inside a time capsule, I was back in the 90's. I realized a greater purpose in web development.
</div>
</div> <!-- end of collapseTwo -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class ="glyphicon glyphicon-plus"></span>
What is your design process?
</a>
</h4>
</div> <!-- end of panel heading -->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
My design process is to first get the client's requirements, build the design and concept and present it. We go through a feedback loop to see if there's anything that needs to be revised. Once everything is finalized, I can start cracking my fingers to make your website. There will be a review to see if there's any revisions and improvement before launching.
</div>
</div> <!-- end of collapseThree -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFOUR" aria-expanded="false" aria-controls="collapseFOUR"><span class ="glyphicon glyphicon-plus"></span>
Do you provide support?
</a>
</h4>
</div>
<div id="collapseFOUR" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFOUR">
<div class="panel-body">
Certainly, for minor issues I can definitely help but if you require a redesign a month after launching, it will be considered as a new project.
</div>
</div> <!-- end of collapseFour -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFIVE" aria-expanded="false" aria-controls="collapseFIVE"><span class ="glyphicon glyphicon-plus"></span>
How long will the project take?
</a>
</h4>
</div>
<div id="collapseFIVE" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFIVE">
<div class="panel-body">
It depends on the complexity of the project. If it's just a few pages, it may take 1 to 2 weeks. If it's a website that requires lots of pages linked to a database, it may take a month.
</div>
</div>
</div>
</div> <!-- End of FAQ container -->
<div class = "video">
<iframe src="https://player.vimeo.com/video/128963391?color=ffffff&portrait=0" height = 400 width = 900 frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class = "container" id="contact">
<div class = "col-md-4 col-xs-12" id= "contact-text">
<div class = "header">
<h1>Contact</h1>
</div>
<h3><span class = "glyphicon glyphicon-envelope"></span> Email</h3>
<a href="mailto:ahn.bustamante@gmail.com?Subject=Hello%20Ahnita!" target = "_top">ahn@ahnbustamante.com</a>
<br>
<br>
<h3><span class = "glyphicon glyphicon-map-marker"></span> Location</h3>
Makati, Metro Manila Philippines
<br>
<h3><span class = "glyphicon glyphicon-phone"></span> Skype</h3>
<a href="skype:hola.ahnita?call">hola.ahnita</a>
<br>
<br>
<h3><span class = "glyphicon glyphicon-globe"></span> Social Media</h3>
<a href = "https://ph.linkedin.com/in/ahnbustamante"><img src="img/linkedin.png" class="sm-icon" alt="linkedin"></a>
<a href = "https://twitter.com/wahnderlush"><img src="img/twitter icon.png" class="sm-icon" alt="twitter"></a>
<a href = "https://www.facebook.com/ahnita6"><img src="img/facebook icon.png" class="sm-icon" alt="facebook"></a>
<a href = "https://soundcloud.com/ahnita"><img src="img/soundcloud.png" class="sm-icon" alt="soundcloud"></a>
<a href = "https://gist.github.com/Ahnita"><img src="img/github.png" class="sm-icon" alt="github"></a>
</div> <!-- end of contact text -->
<div class = "col-md-4 col-xs-12">
<map>
<iframe width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?zoom=10&center=14.6091%2C121.0223&key=AIzaSyCW7MqhYrWFHnQ2UbB4-LuRQDjpyAPSHLw"></iframe>
</map>
</div>
<form>
<div class = "col-md-4 col-xs-12">
<div class = "form-group">
<h1> Say Hello! </h1>
<label for = "name">Name</label>
<br>
<input type="name" class="name" id="name" placeholder = "Your Name"></input>
<br>
<br>
<label for = "email">Email Address</label>
<br>
<input type ="email" class="email" id="email" placeholder = "Your email"></input>
<br>
<label for = "Phone">Contact Number</label>
<br>
<input type ="phone-number" class="phone" id="phone" maxlength = 12 placeholder = "Your number"></input>
<br>
<label for = "message-box">Message</label>
<textarea placeholder = "Your message here" class = "message-box" style = "resize: none" cols="40" rows="5" maxlength = 150></textarea>
<br>
<br>
<button type = "submit" class="btn btn-danger">Submit</button>
</div>
</div>
</form>
</div> <!-- end of contact container -->
</div> <!-- end of content container -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
<footer>
<div class = "footer">
<div class="fb-share" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true">
<div class="fb-follow" data-href="https://www.facebook.com/zuck" data-colorscheme="light" data-layout="standard" data-show-faces="true"></div>
</div>
<div class = "twittershare">
<a href="https://twitter.com/wahnderlush" class="twitter-follow-button" data-show-count="false">Follow @wahnderlush</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<br>
&copy;Ahn Bustamante 2015
</div>
</footer>
</body>
</html>
nav li ul {
float: right;
width: 100%;
position: fixed;
letter-spacing: 0.05em;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
z-index: 5;
display: inline-block;
padding: 20px 10px 20px;
}
.projectname a img {
float: none;
padding: 5px;
position: fixed;
z-index: 6;
}
li a {
transition: color 600ms;
font: 20px 'josefin sans', serif;
}
ul.nav a:hover {
color: #D42163 !important;
}
nav {
float: right;
}
.mobile-cover {
display: none !important;
}
.jumbotron {
top: 10px;
left: 0px;
background-color: #000;
margin-bottom: 0;
}
.jumbotron h1 {
display: inline-block;
color: #FFFEF9;
font: 40px 'josefin sans', serif;
text-shadow: 2px 1px #000;
top: 10px;
vertical-align: middle;
}
.jumbotron p {
color: #FFFEF9;
font: 20px 'josefin sans', sans-serif;
top: 15px;
margin: center;
}
.container h1 {
font: 40px 'josefin sans', serif;
}
.container h2 {
font: 30px 'josefin slab', sans-serif;
}
.carousel-caption h3 p {
text-align: center;
position: relative !important;
display: inline;
vertical-align: middle;
width: 550px;
top: 210px;
left: 380px !important;
z-index: 600;
}
.carousel-ahnita {
height: 100%;
min-width: 100%;
position: relative;
overflow: hidden;
z-index: 2;
}
.carousel-inner {
display: block;
max-width: 100%;
height: auto !important;
}
.header-wrapper {
overflow: auto;
}
body {
background-color: #000;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.div .container {
min-height: 10em;
display: inline-block;
vertical-align: middle;
}
.container .about {
margin-top: 100px;
display: block;
position: absolute;
float: left;
background-color: #000;
padding: 10px 10px 10px 10px;
width: 100%;
z-index: 99;
}
h1 h2 h3 {
margin-top: 10px;
}
h3:hover {
color: #E31D70;
}
.container .skills {
text-align: center;
top: 50%;
left: 50%;
margin-right: 50%;
padding: 20px 20px 20px 20px;
}
h4 {
font-family: 12px 'josefin slab', sans-serif;
}
.container .main_text {
text-align: center;
top: 50%;
left: 50%;
margin-right: 50%;
}
.contact h1 {
text-align: center;
margin: 50%;
position: absolute;
font: 20px, 'josefin sans', serif;
}
.container .skills {
text-align: center;
margin-right: 70%;
position: absolute;
display: inline-block;
width: 100%;
padding: 5px 5px 5px 5px;
}
#contact {
background-image: url("../img/course.png");
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 100%;
padding: 20px 20px 20px 20px;
text-align: center;
}
.contact-text {
padding: 5px;
}
map iframe {
padding: 10px;
}
.form-group {
padding: 5px;
}
.panel-body {
color: #000;
}
.container {
background: #000;
padding: 10px;
margin: 0;
padding: 20px;xw
height: 100%;
position: relative;
color: white;
}
.footer {
display: inline-block;
padding: 20px 20px 20px 20px;
width: 100%;
color: white;
background-color: #000;
}
.twittershare {
float: right;
}
.video {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 10px 10px 10px 10px;
}
.name {
width: 100%;
color: #000;
}
.message-box {
width: 100%;
color: #000;
}
.email {
width: 100%;
color: #000;
}
textarea {
width: 100%;
}
.phone {
width: 100%;
color: #000;
}
button {
width: 100%;
}
.learn-more {
text-align: left;
float: left;
padding: 15px;
}
.modal-button {
float: right;
padding: 5px;
}
.modal-body {
height: 500px;
}
.modal-content {
color: #000;
}
.close {
float: right;
padding: 5px;
}
#modalframe {
padding: 10px;
width: 100%;
height: 100%;
color: rgba (0,0,0,0.25);
}
.closebutton {
background: #ffffff none;
border: 2px solid #000;
position: absolute;
right: 5px;
top: 5px;
margin: 2px;
width: 30px;
padding: 5px;
height: 30px;
}
@media screen and (max-width: 768px) {
.mobile-cover {
background-image: url("../img/HNCK3988.jpg");
background-size: cover;
height: 300px;
width: 100%;
padding: 20px 20px 20px 20px;
text-align: center;
}
.jumbotron{
display: none! important;
}
html {
background-color: #000;
}
a img {
z-index: 5;
top: 0;}
.container {
width: 100%;
}
.container .about {
background-color: #000;
margin-top: 200px
}
.video {
display: none !important;
}
.container .contact h3 a {
font-size: 2em;
font-size: 4.5vw;
}
.container .contact {
background-size: cover;
height: 500px;
width: 100%;
padding: 10px 10px 10px 10px;
text-align: center;
}
map iframe {
display: none;
}
.message-box {
width: 100%;
color: #000;
}
.email {
color: #000;
}
.fb-share {
display: none !important;
}
.navbar {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ahn Bustamante - Web Developer</title>
<!-- Bootstrap core CSS -->
<link href="css/index_style.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Josefin+Slab|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap Javascript-->
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Parallax -->
<script type="text/javascript" src="jquery.stellar.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>
<body data-spy = "scroll" data-target=".navbar">
<!-- navbar starts here -->
<div class = "navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class = "projectname">
<a href ="#"><img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
</a>
</div> <!-- end of projectName -->
<button type="button" class="navbar-toggle" data-toggle=".navbar-collapse">
<span class="sr only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class = "navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href= "#about">About</a></li>
<li><a href= "#projects">Projects</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div> <!-- end of navbar-collapse collapse -->
</div> <!-- End of navbar-header -->
</div> <!-- end f nav container -->
</div> <!-- end of navbar -->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div id="carousel-ahnita" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-ahnita" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ahnita" data-slide-to="1"></li>
<li data-target="#carousel-ahnita" data-slide-to="2"></li>
<li data-target="#carousel-ahnita" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/HNCK3988.jpg" class="img.responsive" alt="Intro Quote">
<div class="carousel-caption">
<h3>Ahn Bustamante</h3>
<p>Aspiring Full Stack Web Developer</p>
</div>
</div>
<div class="item">
<img src="img/bubbles.jpg" class="img.responsive" alt="Responsive">
<div class="carousel-caption">
<h3>Simple</h3>
<p>Minimalism is not the lack of something.
<br>
It's the perfect amount of something.
</div>
</div>
<div class="item">
<img src="img/responsive.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h3>Responsive</h3>
<p> See it in different devices.
<br>
Use your phone, tablet or a computer.
<br>
Anywhere, anytime.
</div>
</div> <!-- end of item -->
<div class="item">
<img src="img/1576.jpg" class="img.responsive" alt="best">
<div class="carousel-caption">
<h3>Intuitive</h3>
<p> When you see it, you know what to do. </p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-ahnita" 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-ahnita" 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> <!-- Jumbotron -->
<div class="container anchor" id="process">
<div class = "container" id="about">
<div class="header">
<h1>Intro</h1>
<div class = "col-md-4 col-xs-12">
<img src="img/1.png" width="300" height="300" alt = "Ahnita">
</div>
<div class = "col-md-8 col-xs-12">
<h1>"I sing a song of myself, as others have done before me, but none have sung a song quite like this because this one is mine, and there will never be any like me. - Walt Whitman, Leaves of Grass"
</h1>
</div> <!-- end of col-md-8 col-xs-12 -->
</div> <!-- end of header -->
</div> <!-- end of About -->
<div class = "container" id = "skills">
<div class = "skill-column">
<h3>My Skills</h3>
<ul id = "skill_list">
<li>Change Management</li>
<li>Procurement Management (S2P) and Enterprise Implementation</li>
<li>Growth Hacking (Social Media)</li>
<li>HTML5</li>
<li>CSS</li>
<li>Ruby on Rails</li>
<li>Cartography</li>
<li>Cooking</li>
</ul>
</div> <!-- end of Skill Column -->
</div> <!-- end of container skill -->
<div class= "container" id="main_text">
<h3>More about me</h3>
<p>Enthused about life and living, I'm interested in music, art, social media, exploring the outdoors and devouring food made right out of my kitchen. I enjoy working out and staying healthy. Enjoying the simple quirks of everyday.
<br>
<br>
Eager to bridge the gap, I use data and information gathered from investigation to provide solutions. I have been involved in procurement and technology implementation projects within Fortune 500 companies and has been a vital contributor in establishing the structure of an organization. I've worked for big brands such as Apple, Johnson and Johnson, Orica and Barclays Capital just to name a few.
<br>
<br>
After months of mauling over and finally getting the free time and resources, without much distraction, I'm finally doing what I wanted for a long time. To be an opportunity maker through web development.</p>
</div> <!-- End of main text -->
</div> <!-- End of About -->
</div> <!-- end of anchor -->
<div class = "container" id="projects">
<div class = "header">
<h1>Projects/Work in Progress</h1>
</div>
<div class = "row" id= "works">
<div class = "col-md-3 col-xs-6">
<img src="img/classC.jpg" alt="classyC" class="img-responsive">
<h2> Sample 1 </h2>
</div>
<div class = "col-md-3 col-xs-6">
<img src="img/divD.jpg" alt="DivD" class="img-responsive">
<h2> Sample 2 </h2>
</div>
<div class = "col-md-3 col-xs-6">
<img src="img/html.jpg" alt="html" class="img-responsive">
<h2> Sample 3 </h2>
</div>
</div> <!-- End of Project container -->
<div class = "container" id= "FAQ">
<div class = "header">
<h1>Frequently Asked Questions</h1>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class ="glyphicon glyphicon-plus"></span>
Do you offer responsive design solutions?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Yes! Responsive web design is a bullet proof practice that ensures your website is accessible to everyone - even if they don't own a traditional computer.
</div> <!-- end of panel-body -->
</div> <!-- end of collapseOne -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class ="glyphicon glyphicon-plus"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
It emerged from a desire to help and make things better. I've spent about 8 years in Singapore helping out in implementation projects that it became a habit. The web is the largest resource of information and it made life easier looking for things to buy and to find locations. My return to the Philippines is like going inside a time capsule, I was back in the 90's when it comes to technology. I realized a greater purpose in web development.
</div>
</div> <!-- end of collapseTwo -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class ="glyphicon glyphicon-plus"></span>
What is your design process?
</a>
</h4>
</div> <!-- end of panel heading -->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
My design process is to first get the client's requirements, build the design and concept and present it. We got through a feedback loop to see if there's anything that needs to be revised. Once everything is approved, that's the only time I can start cracking my fingers to make your website. After everything's done, I ask for a final check to see if there's any revisions and improvement before launching.
</div>
</div> <!-- end of collapseThree -->
</div> <!-- end of panel panel default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFOUR" aria-expanded="false" aria-controls="collapseFOUR"><span class ="glyphicon glyphicon-plus"></span>
Do you provide support after the website gets built?
</a>
</h4>
</div>
<div id="collapseFOUR" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFOUR">
<div class="panel-body">
Certainly, for minor issues I can definitely help but if you require a redesign a month after launching, it will be considered as a new project.
</div>
</div> <!-- end of collapseFour -->
</div> <!-- end of panel panel-default -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFIVE" aria-expanded="false" aria-controls="collapseFIVE"><span class ="glyphicon glyphicon-plus"></span>
How long will the project take?
</a>
</h4>
</div>
<div id="collapseFIVE" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFIVE">
<div class="panel-body">
It depends on the complexity of the project. If it's just a few pages, it may take 1 to 2 weeks. If it's a website that requires lots of pages linked to a database, it may take a month.
</div>
</div>
</div>
</div> <!-- End of FAQ container -->
<div class = "container" id="contact">
<div class = "header">
<h1>Contact</h1>
</div>
<h3><span class = "glyphicon glyphicon-envelope"></span> Email</h3>
<a href="mailto:ahn.bustamante@gmail.com?Subject=Hello%20Ahnita!" target = "_top">ahn@ahnbustamante.com</a>
<br>
<br>
<h3><span class = "glyphicon glyphicon-map-marker"></span> Location</h3>
Makati, Metro Manila Philippines
<br>
<br>
<h3><span class = "glyphicon glyphicon-phone"></span> Skype</h3>
<a href="skype:hola.ahnita?call">hola.ahnita</a>
<br>
<br>
<h3><span class = "glyphicon glyphicon-globe"></span> Social Media</h3>
<a href = "https://ph.linkedin.com/in/ahnbustamante">Linkedin</a>
<br>
<a href = "https://twitter.com/wahnderlush">Twitter</a>
<br>
<a href = "https://www.facebook.com/ahnita6">Facebook</a>
<br>
<a href = "https://soundcloud.com/ahnita">Soundcloud</a>
</div> <!-- end of contact container -->
</div>
</div>
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
</script>
</body>
</html>
.nav ul li {
display: inline-block;
padding: 20px 10px 20px;
}
.navbar-collapse li ul {
background-color: #000;
float: right;
width: 100%;
position: fixed;
letter-spacing: 0.05em;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
z-index: 5;
}
.projectname a img {
float: none;
padding: 5px;
position: fixed;
z-index: 6;
}
li a {
transition: color 600ms;
}
.nav ul li a:hover {
color: #D42163;
text-decoration: none;
}
.nav {
float: right;
}
.jumbotron {
top: 10px;
height: 400px;
left: 0px;
}
.jumbotron h2 {
display: inline-block;
color: #FFFEF9;
font: 60px 'wallowsregular', Arial, sans-serif;
text-shadow: 2px 1px #000;
top: 10px;
vertical-align: middle;
padding: 20px;
}
.jumbotron p {
color: #FFFEF9;
padding: 20px;
font: 20px 'josefin sans', sans-serif;
top: 15px;
margin: center;
}
.item p {
color: #F9FFFB;
}
.carousel-caption {
background: rgba(154, 155, 156, 0.02);
width: 100%;
top: 250px;
display: inline;
vertical-align: middle;
letter-spacing: 5px;
margin-left: 0% !important;
}
.item {
text-align: center;
}
.carousel-caption h3 p {
position: absolute;
display: inline;
vertical-align: middle;
top: 50%;
padding: 20px 20px 20px 20px;
}
.carousel-ahnita {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #000;
height: 100%;
z-index: 2;
background-color: #000;
margin-bottom: 50px;
}
body {
background-color: #000;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.div .container {
min-height: 10em;
display: inline-block;
vertical-align: middle;
}
.container .about {
margin-top: 1em;
display: block;
position: relative;
background-color: #000;
padding: 10px 10px 10px 10px;
margin: 0;
top: -520px;
width: 29em;
}
h1 h2 h3 {
margin-top: 10px;
}
.container .contact {
margin: 0;
position: absolute;
padding: 20px 20px 20px 20px;
}
.contact h1 h3 {
text-align: center;
margin: 50%;
position: absolute;
}
h3:hover {
color: #E31D70;
}
.container .skills {
text-align: center;
top: 50%;
left: 50%;
margin-right: 50%;
padding: 20px 20px 20px 20px;
}
.container .main_text {
text-align: center;
top: 50%;
left: 50%;
margin-right: 50%;
padding: 20px 20px 20px 20px;
}
.container .contact {
text-align: center;
margin-left: auto;
margin-right: auto;
position: absolute;
color: white;
display: block;
font-family: 15px, sans-serif;
width: 6em;
padding: 20px 20px 20px 20px;
}
.container .skills {
text-align: center;
margin-right: 70%;
position: absolute;
display: inline-block;
width: 6em;
padding: 5px 5px 5px 5px;
}
#contact {
background-image: url("../img/course.png");
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 100%;
padding: 10px 10px 10px 10px;
text-align: center;
}
.panel-body {
color: #000;
}
.container {
background: #000;
padding: 10px;
margin: 0;
padding: 20px;
height: 100%;
border: 1px solid rgb (128, 128, 128);
height: 100%;
position: relative;
color: white;
}
.anchor {
padding-top: 10px;
border-top: 50px;
margin-top: 20px;
}
@media screen and (max-width: 768px) {
.jumbotron {
font-family: 0.5em #FFF7FF;
background-image: none;
background-color: #000;
}
html {
background-color: #000;
}
.carousel-inner img {
margin-top: 150px;
max-width: 100%;
height: 100%;
position: relative;
}
.carousel-ahnita {
margin-top: 150px;
max-height: 100%;
background-size: cover;
}
a img {
z-index: 5;
position: fixed;
top: 0;}
.carousel-ahnita {
width: 100%;
background-color: #000;
}
.container .about {
background-color: #000;
}
}
.nav ul li {
display: inline-block;
padding: 20px 10px 20px;
}
.nav ul li a {
text-transform: uppercase;
letter-spacing: 0.05em;
font: futura;
color: #ff0;
}
.nav {
background-color: rgba(0, 0, 0, 0.6);
float: right;
width: 100%;
position: fixed;
}
.nav ul {
float: right;
}
li a {
transition: color 600ms;
}
.nav ul li a:hover {
color: #FAFFFF;
text-decoration: none;
}
.jumbotron {
background: url("../img/HNCK3988.jpg") no-repeat;
background-size: cover;
top: 10px;
height: 400px;
left: 0px;
}
.jumbotron h1 {
display: inline-block;
color: white;
font: 55px 'Marcellus SC', serif;
text-shadow: 1px 1px #D2D3D4;
padding: 5px 5px 5px 5px;
margin-top: 100px;
}
.jumbotron p {
color: white;
text-shadow: 1px 1px #4E4F4E;
padding: 5px 5px 5px 5px;
font: 10px 'Poiret One', sans-serif;
top: 200px;
}
.headerAhn {
background-color: rgba(154, 155, 156, 0.20);
padding: 1px;
}
$(document).ready(function() {
$('textarea').css('background-color', 'white');
$("#submit").on("click", function(){
console.log("clicked");
});
$('.message-box').on("keyup", function(){
console.log("keyup happened");
var charCount = $(".message-box").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if (charCount > 50) {
$("#char-count").css("color", "red");
}else {
$("#char-count").css("color", "black");
}
if (charCount >= 149) {
alert("Please do not exceed 150 characters");
}
});
});
<script src = "https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"></script>
<script>
$(function() {
$('#linkedin').tooltip();
$('#twitter').tooltip();
$('#facebook').tooltip();
$('#soundcloud').tooltip();
$('#github').tooltip();
$('#submit').tooltip();
$('#emailahnita').tooltip();
});
</script>
@Ahnita

This comment has been minimized.

Copy link
Owner Author

commented Jun 19, 2015

Developing my portfolio website adding snippets and improving it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.