Skip to content

Instantly share code, notes, and snippets.

@waseemnawaz

waseemnawaz/about.html

Last active September 30, 2015 14:57
Show Gist options
  • Save waseemnawaz/845e807abf8cf1c16640 to your computer and use it in GitHub Desktop.
Save waseemnawaz/845e807abf8cf1c16640 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
about.html
<!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="index.html">Index</a></li>
<li><a href="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>
Raw
about_styles.css
* { 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;
}
Raw
contact.html
!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="about.html">About</a></li>
<li><a href="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>
Raw
contact_styles.css
* {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;
}
Raw
index.html
<!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="about.html">About</a></li>
<li><a href="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 &raquo;</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 &raquo;</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 &raquo;</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
.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;
width: 80px;
margin: 10px;
font-weight: 400;
transition: color 600ms;
display: block;
}
li {
display: block;
}
.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