Last active
August 29, 2015 14:21
-
-
Save Ahnita/9bbc3f6710f275218a2c to your computer and use it in GitHub Desktop.
About Ahn
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { 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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { 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