Skip to content

Instantly share code, notes, and snippets.

@ademsas

ademsas/about.html

Created January 27, 2016 05:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ademsas/8111d5d9509e50004913 to your computer and use it in GitHub Desktop.
Save ademsas/8111d5d9509e50004913 to your computer and use it in GitHub Desktop.
Download ZIP
CF Project 1.4
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>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body class="body">
<div class="container">
<div class="header">
<h1>About Me</h1>
</div>
<div class="image column">
<img class="picture" src="img/Liverpool.jpg" alt="Liverpool">
</div>
<div class="column">
<h2>Intro</h2>
<p>I was born and raised in East Africa. I moved to the US in 1998. I currently reside in sunny Santa Barbara, CA.</p>
</div>
<div class="column">
<h3>My Skills</h3>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Ruby On Rails</li>
</ul>
</div>
<div class="main_text">
<h3>More About Me</h3>
<p>I am a big Liverpool FC fan. I love to stay active playing soccer and basketball. If I'm not on the pitch or on the basketball court I am enjoying the beautiful outdoors. </p>
</div>
</div> <!-- end container -->
</body>
</html>
Raw
about_styles.css
* { box-sizing: border-box; }
.body {
background-image: url("../img/pitch.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container {
width: 80%;
margin: 0 auto;
color: white;
}
.header h1 {
text-align: center;
}
.image {
display: inline-block;
float: left;
}
.column {
display: inline-block;
float: left;
width: 30%;
padding: 0 20px
}
.main_text {
clear: both;
}
.main_text h3 {
text-align: left;
}
.picture {
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment