Skip to content

Instantly share code, notes, and snippets.

@Ahnita Ahnita/About
Last active Aug 29, 2015

Embed
What would you like to do?
About Ahn
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<link href="css/about_styles.css" rel="stylesheet">
<title>About Ahn Bustamante</title>
<!--[if lt IE 9]>
<script src = "dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class = "container">
<div class = "header">
<div class = "intro column">
<h1>Intro</h1>
<img src="img/hh.jpg" alt = "Ahnita">
<br>
<p>"Refuse to inherit dysfunction. Learn new ways of living instead of repeating what you lived through"
</p>
</div>
<div class = "skills column">
<h2>My Skills</h2>
<ul id = "skill_list">
<li>Change Management</li>
<li>Procurement Management (S2P) and Enterprise Implementation</li>
<li>SAP MM</li>
<li>Affiliate Marketing through Social Media</li>
<li>HTML5</li>
<li>CSS</li>
<li>Ruby (soon)</li>
</ul>
</div>
<div class = "main_text">
<h3>More about me</h3>
<p>Aroused in bridging the gap, I use data and information gathered from investigation to provide solutions. I have been involved in a variety of start up 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>
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 a developer.
</p>
</div>
</div>
</div><!-- end container -->
</body>
</html>
* { box-sizing: border-box;}
.nav ul li {
display: inline-block;
padding: 20px 10px 20px;
}
.nav ul li a {
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
z-index:0;
}
.nav {
background-color: #000;
float: right;
width: 100%;
position: fixed;
z-index: 2;
}
a img {
z-index: 3;
float: left;
position: fixed;
left: 0;
margin-top: 1%;
margin-left: 1%;
}
.nav a img {
float: none;
}
.nav ul {
float: right;
}
li a {
transition: color 600ms;
}
.nav ul li a:hover {
color: #D42163;
text-decoration: none;
}
.intro_column p {
font-family:'Josefin Sans', serif;
color: #FAFFFF;
}
.container-fluid{
width: 100%;
margin: 0 auto;
display: inline-block;
background-color: #000;
}
.header h1 {
margin-top: 100px;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
}
.skills_column h3 {
font-family:'Josefin Sans', sans-serif;
color: #FAFFFF;
}
li {
font-family: sans-serif;
color: #FAFFFF;
}
.main_text h3 {
font-family:'Josefin Sans', sans-serif;
color: #FAFFFF;
}
.main_text {
position: absolute;
font-family: sans-serif;
color: #FAFFFF;
padding: 14px 10px 14px 10px;
}
body {
background-color: #000;
}
.div {
display: inline-block;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.column {
display: inline-block;
font-size: 2;
padding: 14px 10px 14px 10px;
}
.skills_column {
position: static;
font-size: 4;
padding: 14px 14px 14px 14px;
}
html {
background-color: #000;
}
@media screen and (max-width: 768px) {
.container-fluid {
margin-top: 80px;
}
.nav ul li a {
margin-left: 20%;
word-spacing: 5%;
}
h1 {
font-size: 3em;
}
}
<!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">
<link href="css/about_styles.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Josefin+Slab' 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>
<title>About Ahn Bustamante</title>
<!--[if lt IE 9]>
<script src = "dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<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 = "container-fluid">
<div class = "header">
<h1>Intro</h1>
</header>
<div class = "intro_column">
<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>
</div>
<div class = "skills_column">
<h3>My Skills</h3>
<ul id = "skill_list">
<li>Change Management</li>
<li>Procurement Management (S2P) and Enterprise Implementation</li>
<li>SAP MM</li>
<li>Growth Hacking (Social Media)</li>
<li>HTML5</li>
<li>CSS</li>
<li>Ruby on Rails</li>
</ul>
</div>
<div class = "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>
</div><!-- end container -->
</body>
</html>
* { box-sizing: border-box;}
.container{
width: 80%;
margin: 0 auto;
display: inline-block;
}
.header h1 {
right: 10px;
float: right;
position: fixed;
height: 500px;
color: #C0C0C0;
font: 48px;
}
body {
font-family: 'shift', sans-serif;
color: #5a5a5a;
}
.image {
display: block;
margin: 0 auto;
}
.column {
display: inline-block;
font-size: 15px;
padding: 14px 10px 14px 10px;
}
.main_text {
position: absolute;
font-size: 15px;
padding: 14px 10px 14px 10px;
}
.skills_column {
position: static;
font-size: 15px;
padding: 14px 10px 14px 10px;
}
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.