Updating CSS

SaqibS · May 5, 2012 · 11e146f · 11e146f
1 parent 8dc1ae7
commit 11e146f
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -11,19 +11,19 @@
 </head>
 
 <body>
+<div class="wrapper">
 <header role="banner">
-<img id="me" src="me.jpg" alt="" />
 <h1>Saqib Shaikh</h1>
 </header>
 
 <div role="main">
-<p>Hi, I&apos;m Saqib Shaikh - a software developer from London, England, and currently working for <a href="http://microsoft.com">Microsoft</a> on <a href="http://bing.com">Bing</a>.</p>
+<p class="summary"><img id="me" src="me.jpg" alt="" /> Hi, I&apos;m Saqib Shaikh - a software developer from London, England, and currently working for <a href="http://microsoft.com">Microsoft</a> on <a href="http://bing.com">Bing</a>.</p>
 
 <p>I like making things. As a child at boarding school this ranged from writing to pottery to woodwork to electronics. And then one day, when I was 13, a kid showed me how to use Basic to choose six random numbers for the recently introduced National Lottery - I was hooked. I taught myself to program in C, and started selling my apps around school. Many years later, I still love using technology to create solutions to peoples' problems - I measure success by the smile it produces.</p>
 
 <p>I went on to study <a href="http://www.essex.ac.uk/csee">Computer Science at <a href="http://www.essex.ac.uk">Essex</a>, where I graduated top of my class; and study <a href="http://www.informatics.sussex.ac.uk/research/groups/easy/">Evolutionary and Adaptive Systems</a> at <a href="http://www.sussex.ac.uk">Sussex</a>, with an internship at <a href="http://hpl.hp.com">HP Labs</a>. I started my career by spending a year at <a href="http://vodafone.com">Vodafone</a>, learning the ways of the business world, before making my way to Microsoft.</p>
 
-<p>I spent 3¼ years in <a href="http://blogs.msdn.com/b/mcsuksoldev/">Microsoft Consulting Services</a>, helping customers develop solutions on the Microsoft stack; projects ranged from internal solutions for large enterprises like <a href="http://citibank.com">Citibank</a> and <a href="http://chevron.com">Chevron</a>, to government solutions for <a href="http://hmrc.gov.uk">HMRC</a> and <a href="http://nhs.uk">the NHS</a>, to proof of concepts for startups like <a href="http://microlib.co.uk">Micro Librarian Ssystems</a> and <a href="http://iwantgreatcare.org">IWantGreatCare.org</a>.</p>
+<p>I spent 3&#188; years in <a href="http://blogs.msdn.com/b/mcsuksoldev/">Microsoft Consulting Services</a>, helping customers develop solutions on the Microsoft stack; projects ranged from internal solutions for large enterprises like <a href="http://citibank.com">Citibank</a> and <a href="http://chevron.com">Chevron</a>, to government solutions for <a href="http://hmrc.gov.uk">HMRC</a> and <a href="http://nhs.uk">the NHS</a>, to proof of concepts for startups like <a href="http://microlib.co.uk">Micro Librarian Ssystems</a> and <a href="http://iwantgreatcare.org">IWantGreatCare.org</a>.</p>
 
 <p>I&apos;ve spent the last 3+ years working on Bing&apos;s backend algorithms; mining data to produce the information displayed on the search results page to complement the core results. For example, suggesting &quot;related searches&quot; that may lead you to the information you seak, identifying &quot;deep links&quot; to take you to common destinations within a search result, or determining the order in which elements should appear on the page.</p>
 
@@ -42,5 +42,6 @@ <h1>Saqib Shaikh</h1>
 <footer>
 <p>Copyright &copy; Saqib Shaikh</p>
 </footer>
+</div>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,7 +1,60 @@
-body { font-family: helvetica,arial,sans-serif; font-size: 12pt; background-color: aqua; color: black }
-header { font-size: 18pt; font-weight: bold; text-align: center; background-color: black; color: white; height: 100px }
-#me { width: 100px; height: 100px; float: left }
-#social-networks { text-align: center }
-#social-networks li { list-style-type: none; display: inline; padding: 50px }
-#social-networks img { height: 50px; width: 50px }
-footer { font-size: 8pt; text-align: center }
+body {
+	padding: 50px 100px;
+	font-family: helvetica,arial,sans-serif;
+	font-size: 14px;
+	color: #2C2C2C;
+}
+
+.wrapper {
+	max-width: 960px;
+	margin: 0 auto;
+}
+
+header {
+	margin-bottom: 50px;
+}
+
+header h1 {
+	color: #0088CC;
+	font-size: 5em;
+	font-weight: 100;
+	letter-spacing: -1px;
+}
+
+.summary {
+	font-size: 1.8em;
+	overflow: hidden;
+}
+
+#me {
+	width: 100px;
+	float: left;
+	margin-right: 20px;
+	margin-bottom: 20px;
+}
+
+p {
+	font-size: 1.2em;
+	font-weight: 300;
+}
+
+a {
+	color: #0088CC;
+}
+
+#social-networks li {
+	list-style-type: none;
+	display: inline;
+	padding: 50px;
+}
+
+#social-networks img {
+	width: 80px;
+}
+
+footer {
+	margin-top: 50px;
+	border-top: 1px solid #CCCCCC;
+	color: #666666;
+	font-size: 0.8em;
+}