Created
September 29, 2015 19:12
-
-
Save waseemnawaz/9cb5c19633cc0401156b to your computer and use it in GitHub Desktop.
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"> | |
<link rel="stylesheet" href="css/normalize.css"> | |
<link rel="stylesheet" href="css/about_styles.css"> | |
<title>About me</title> | |
</head> | |
<body> | |
<div class="nav"> | |
<ul> | |
<li><a href="#">About</a></li> | |
<li><a href="file://localhost/Users/waseemnawaz/Downloads/my_cf_project_final/index.html">Index</a></li> | |
<li><a href="file://localhost/Users/waseemnawaz/Downloads/my_cf_project_final/contact.html">Contact</a></li> | |
</ul> | |
</div> | |
<div class="container"> | |
<div class="header"> | |
<h1>My story</h1> | |
</div> | |
<div class="image"> | |
<img src="img/images.jpeg" alt="kitten"> | |
</div> | |
<div class="intro column"> | |
<h2>Introduction</h2> | |
<p>I am Waseem</p> | |
</div> | |
<div class="skills column"> | |
<h3>My skills</h3> | |
<ul id="skill list"> | |
<li>Languages</li> | |
<li>Development aid</li> | |
<li>Change management</li> | |
<li>Project management</li> | |
<li>Working with socially and economically disadvantaged persons in Latin America</li> | |
</ul> | |
</div> | |
<div class="main-text"> | |
<h3>More about me</h3> | |
<p>I am 43 years old. Much of my professional life has taken place in Latin America. My field is development aid. I have worked for NGOs, aid agencies and private companies. I also owned a restaurant once. I am fascinated by small and medium enterprises owned and run by women in Latin America. I speak several languages fluently. Currently, I am back home in Europe and I am looking for a job. I am learning how to code because I believe it would enhance my chances to find a job. Tech skills are important nowadays. Besides, coding is interesting.</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: 70%; | |
margin: 0 auto; | |
} | |
.header h1 { | |
text-align: center; | |
} | |
.image { | |
display: inline-block; | |
float: right; | |
} | |
.column { | |
display: inline-block; | |
float: left; | |
width: 30%; | |
padding: 0 20px; | |
} | |
.main-text { | |
clear: both; | |
padding-top: 5px; | |
} | |
.header { | |
margin-bottom: 15px; | |
} | |
#skill_list { | |
margin-left: 50px; | |
} | |
/*Typography*/ | |
h1, h2, h3 { | |
font-family: Futura, Helvetica, Arial, sans-serif; | |
} | |
p, li { | |
font-family: Times New Roman, Baskerville, Lucida Bright, serif; | |
} | |
.intro p { | |
font-family: Futura, Helvetica, Arial, sans-serif; | |
font-size: 3em; | |
font-weight: 100; | |
-webkit-margin-before: 0; | |
} | |
.skills h3 { | |
text-align: center; | |
text-transform: uppercase; | |
} | |
body { | |
background-color: #fffeea; | |
color: #34495e; | |
} | |
.skills { | |
background-color: #5AD4C2; | |
color: #FFF; | |
padding-top: 5px; | |
padding-bottom: 5px; | |
} | |
.nav { | |
background-color: black; | |
position: fixed; | |
width: 100%; | |
top: 0; | |
} | |
.nav ul li a { | |
color: white; | |
text-transform: uppercase; | |
letter-spacing: 0.05em; | |
float:right; | |
padding: 5px 5px 5px; | |
display: block; | |
} | |
.nav ul { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
.nav li { | |
float: right; | |
} | |
.nav ul li a { | |
display: block; | |
width: 80px; | |
margin: 4.5px; | |
font-weight: 400; | |
transition: color 600ms; | |
} | |
.nav a:hover { | |
color: #ff0; | |
text-decoration: none; | |
} | |
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"> | |
<title>Contact me</title> | |
<link rel="stylesheet" href="css/normalize.css"> | |
<link rel="stylesheet" href="css/contact_styles.css"> | |
</head> | |
<body> | |
<div class="nav"> | |
<ul> | |
<li><a href="#">Contact</a></li> | |
<li><a href="file://localhost/Users/waseemnawaz/Downloads/my_cf_project_final/about.html">About</a></li> | |
<li><a href="file://localhost/Users/waseemnawaz/Downloads/my_cf_project_final/index.html">Index</a></li> | |
</ul> | |
</div> | |
<div class="jumbotron"> | |
<div class="container"> | |
<div class="header"> | |
<h1>Contact me</h1> | |
</div> | |
<div class="links"> | |
<h1><a href="file://localhost/Users/waseemnawaz/Downloads/my_cf_project_final/index.html">Index</a></h1> | |
</div> | |
<div class="link2"> | |
<h1><a href="file://localhost/Users/waseemnawaz/Downloads/my_cf_project_final/about.html">About<a/></h1> | |
</div> | |
<div class="write" | |
<h1>Please feel free to write or call whenever you want to. I usually call or write back as soon as possible.</h1> | |
</div> | |
<div class="image"> | |
<img src="img/IMG_0284.jpg"> | |
</div> | |
<div class="email"> | |
<h2>Send me an email: info@waseemnawaz.com</h2> | |
</div> | |
<div class="phone"> | |
<h3> My telephone number: 000000000</h3> | |
</div> | |
</div><!-- end container --> | |
</div><!-- end jumbotron --> | |
</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; | |
float: center; | |
margin: 20px; | |
} | |
.header { | |
display: inline-block; | |
margin: 20px; | |
} | |
.write { | |
text-align: center; | |
} | |
.email { | |
text-align: center; | |
} | |
.phone { | |
text-align: center; | |
display: inline; | |
margin-bottom: 40px; | |
} | |
.image { | |
text-align: center; | |
padding-top: 20px; | |
padding-bottom: 20px; | |
} | |
.links { | |
display: inline-block; | |
margin-top: 20px; | |
margin-bottom: 20px; | |
} | |
.link2 { | |
display: inline-block; | |
} | |
/*topography*/ | |
h1, h2, h3 { | |
font-family: Futura, Helvetica, Arial, sans-serif; | |
} | |
.write { | |
font-size: 1.5em; | |
} | |
.header h1 { | |
text-transform: uppercase; | |
background-color: #FFA9A9; | |
} | |
.links { | |
text-transform: uppercase; | |
background-color: #FFA9A9; | |
} | |
.link2 { | |
text-transform: uppercase; | |
background-color: #FFA9A9; | |
} | |
h3 { | |
font-size: 1.5em; | |
} | |
body { | |
background-color: #FFF5F5; | |
} | |
.nav { | |
background-color: black; | |
position: fixed; | |
width: 100%; | |
top: 0; | |
} | |
.nav ul li a { | |
color: white; | |
text-transform: uppercase; | |
letter-spacing: 0.05em; | |
float:right; | |
padding: 5px 5px 5px; | |
display: block; | |
} | |
ul { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
li { | |
float: right; | |
} | |
ul li a { | |
display: block; | |
width: 80px; | |
margin: 10px;∫ | |
font-weight: 400; | |
transition: color 600ms; | |
} | |
.nav a:hover { | |
color: #ff0; | |
text-decoration: none; | |
} | |
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"> | |
<title>Hello World!</title> | |
<!-- Bootstrap core CSS --> | |
<link href="css/bootstrap.css" rel="stylesheet"> | |
<link href="css/styles.css" rel="stylesheet"> | |
<!-- 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="#">Home</a></li> | |
<li><a href="file://localhost/Users/waseemnawaz/Downloads/my_cf_project_final/about.html">About</a></li> | |
<li><a href="file://localhost/Users/waseemnawaz/Downloads/my_cf_project_final/contact.html">Contact</a></li> | |
</ul> | |
</div> | |
<div class="jumbotron"> | |
<div class="container"> | |
<div class="container"> | |
<h1>Waseem Nawaz</h1> | |
<strong><p>Serving all of your web development needs.</p></strong> | |
<p>I design webpages. I like designing colourful pages.</p> | |
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> | |
<a href="https://google.com">Learn more</a> | |
</div> | |
</div> | |
</div> | |
<div class="container"> | |
<!-- Example row of columns --> | |
<div class="row"> | |
<div class="col-md-4"> | |
<h2>Portfolio Concept</h2> | |
<p>Much of my prior experience has been in development aid in Latin America. I specifically worked with and for small producers´ groups. These artisans are weavers, knitters, beekeepers, jam makers, coffee growers, etc. I help them bridge the technological gap in order to sell their products at a good price while reaching a wider audience internationally.</p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
<div class="col-md-4"> | |
<h2>Project Goals</h2> | |
<p>I want to finish this course by the end of this year at the very latest. I am currently not working, so I could commit all day to the course.</p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
<div class="col-md-4"> | |
<h2>Course Goals</h2> | |
<p>I want to become extremely good at coding and be able to do a multitude of things at the end of the course. Have the option to freelance, work in web development and generally use this as a base to improve code writing skills.</p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
</div> | |
<hr> | |
</div> <!-- /container --> | |
<!-- | |
================================================== --> | |
<!-- Can place script tags with JavaScript files here --> | |
</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
.jumbotron { | |
background-image: url("../img/17_905.JPG"); | |
background-size: cover; | |
background-size: contain; | |
background-size: 100%; | |
} | |
.jumbotron p { | |
color: blue; | |
} | |
.nav { | |
background-color: black; | |
position: fixed; | |
width: 100%; | |
top: 0; | |
} | |
.nav ul li a { | |
color: white; | |
text-transform: uppercase; | |
letter-spacing: 0.05em; | |
float:right; | |
padding: 5px 5px 5px; | |
display: block; | |
} | |
ul { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
li { | |
float: right; | |
} | |
ul li a { | |
display: block; | |
width: 80px; | |
margin: 10px;∫ | |
font-weight: 400; | |
transition: color 600ms; | |
} | |
.nav a:hover { | |
color: #ff0; | |
text-decoration: none; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment