Created
December 11, 2016 16:11
-
-
Save ellathur/42ec5122599539d1d37dfa73111e66d1 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"> | |
<title>About Christian</title> | |
<!--[if lt IE9]> | |
<script src="dist/html5shiv.js"></script> | |
<![endif]--> | |
<link rel="stylesheet" href="css/normalize.css" media="screen" title="no title"> | |
<link rel="stylesheet" href="css/about_styles.css" media="screen" title="no title"> | |
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" type="text/css"> | |
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="header"> | |
<h1> About Christian</h1> | |
</div><!--end header--> | |
<div class="image column"> | |
<img class="chrisflying" src="img/chris.jpg" alt="chris"> | |
<!--img src="img/coffee.jpg" width="400" height="400"alt="coffee cup" /--> | |
</div><!--/image--> | |
<div class="intro column"> | |
<h2>Introduction</h2> | |
<p> | |
Hi! I am Christian. I am currently a biotechnologist and I am on a mission to become a web developer. Stay tuned! | |
</p> | |
</div><!--/intro--> | |
<div class="skill column"> | |
<h3>My Skills</h3> | |
<ul id="skill-list"> | |
<li>Biotechnology</li> | |
<li>Architecture and Construction</li> | |
<li> some other</li> | |
</ul> | |
</div><!-- /skills --> | |
<div class="main-text"> | |
<h3>My story</h3> | |
<p>I studied Architecture and also graduated from the University of Birmingham with an MSc in Contruction Management. I have been working in the biotech industry in various roles for the past 7 years. I am currently a biotechnologist and looking to sneak into 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; | |
} | |
.header h1 { | |
text-align: center; | |
margin: 100px 0px; | |
} | |
.image { | |
display: inline-block; | |
float: left; | |
} | |
.chrisflying{ | |
width: 100%; | |
} | |
.column { | |
display: inline-block; | |
float: left; | |
width: 30%; | |
padding: 0 20px; | |
} | |
.main-text { | |
position: relative; | |
clear: both; | |
padding-top: 60px; | |
} | |
#skills-list { | |
margin-left: 50px; | |
} | |
/*Typography*/ | |
h1, | |
h2, | |
h3 { | |
font-family: Lato, 'Lobster Two' , Futura, Helvetica, Arial, sans-serif; | |
} | |
.intro p { | |
font-family: Lato, 'Lobster Two', Futura, Helvetica, Arial, sans-serif; | |
font-size: 3em; | |
font-weight: 100; | |
-webkit-margin-before: 0; | |
} | |
.skill h3{ | |
text-align: center; | |
text-transform: uppercase; | |
} | |
/*ENDTypography*/ | |
body { | |
background-color: #fffeea; | |
color: #34495e; | |
} | |
.skill{ | |
background-color: #5AD4C2; | |
color: #F00; | |
padding: 20px 0; | |
} |
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> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="css/contact_styles.css"> | |
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" type="text/css"> | |
<title>Contact Me</title> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="contact"> | |
<h1 class="contactme">Contact Me</h1> | |
</div><!--/contact me><--> | |
<div class="contact-email"> | |
<p class="Bold-email">Email: 123@somebody.com</p> | |
<p>I am learning web development! please contact me if you have any suggestion for this website. | |
</p> | |
<p>If you are interested in hiring me, keep an eye on this website for my progress. | |
</p> | |
</div><!--/contact email><--> | |
<div class="contact-address"> | |
<p>You can find us at: | |
12 Somebody's Plaza | |
London | |
E1 4DX | |
</p> | |
<p id="map2"><img class="gmap" src="img/googlemap.jpg" alt=""></p> | |
</div><!--/contact address><--> | |
<div class="follow"> | |
<h2>Follow me!</h2> | |
<p><a href="https://twitter.com/seychiki" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @seychiki</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> | |
</p> | |
<p> | |
<a href="https://plus.google.com/collections/featured"><img class="resize" src="img/gogle_plus_follow_icon.png" alt="" /></a> | |
</p> | |
</div> | |
</div> | |
</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
.container { | |
width: 90%; | |
margin: 5% 5%; | |
color: white; | |
text-align: center; | |
font-family: lato; | |
} | |
.contact { | |
} | |
.contactme { | |
text-align: center; | |
padding-top: 5%; | |
} | |
.Bold-email { | |
font-weight: bold; | |
font-size: 2em; | |
font-weight: 100; | |
} | |
.contact-address>p { | |
font-size: 2em; | |
font-weight: 100; | |
} | |
.follow a { | |
} | |
img.resize { | |
max-width: 5%; | |
max-height: 2%; | |
padding-bottom: 5%; | |
} | |
img.gmap { | |
max-width: 50%; | |
max-height: 50%; | |
} | |
body { | |
background-color: #34495e; | |
} |
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/gallery.jpg"); | |
background-size: contain; | |
} | |
.jumbotron p { | |
color: white; | |
font-family: lato; | |
} | |
.jumbotron h1 { | |
color: /*#333;*/ #34495e; | |
font-family: 'Lobster Two', cursive; | |
} | |
.navbar { | |
background-color: #34495e; | |
padding: 0; | |
margin: 0; | |
text-transform: uppercase; | |
} | |
.navbar-list ul { | |
list-style-type: none; | |
padding: 0; | |
margin: 0; | |
overflow: hidden; | |
font-size: 16px; | |
} | |
li { | |
float: left; | |
} | |
li a { | |
display: block; | |
color: white; | |
text-align: center; | |
padding: 16px 16px; | |
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
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ | |
/** | |
* 1. Change the default font family in all browsers (opinionated). | |
* 2. Correct the line height in all browsers. | |
* 3. Prevent adjustments of font size after orientation changes in | |
* IE on Windows Phone and in iOS. | |
*/ | |
/* Document | |
========================================================================== */ | |
html { | |
font-family: sans-serif; /* 1 */ | |
line-height: 1.15; /* 2 */ | |
-ms-text-size-adjust: 100%; /* 3 */ | |
-webkit-text-size-adjust: 100%; /* 3 */ | |
} | |
/* Sections | |
========================================================================== */ | |
/** | |
* Remove the margin in all browsers (opinionated). | |
*/ | |
body { | |
margin: 0; | |
} | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
article, | |
aside, | |
footer, | |
header, | |
nav, | |
section { | |
display: block; | |
} | |
/** | |
* Correct the font size and margin on `h1` elements within `section` and | |
* `article` contexts in Chrome, Firefox, and Safari. | |
*/ | |
h1 { | |
font-size: 2em; | |
margin: 0.67em 0; | |
} | |
/* Grouping content | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
* 1. Add the correct display in IE. | |
*/ | |
figcaption, | |
figure, | |
main { /* 1 */ | |
display: block; | |
} | |
/** | |
* Add the correct margin in IE 8. | |
*/ | |
figure { | |
margin: 1em 40px; | |
} | |
/** | |
* 1. Add the correct box sizing in Firefox. | |
* 2. Show the overflow in Edge and IE. | |
*/ | |
hr { | |
box-sizing: content-box; /* 1 */ | |
height: 0; /* 1 */ | |
overflow: visible; /* 2 */ | |
} | |
/** | |
* 1. Correct the inheritance and scaling of font size in all browsers. | |
* 2. Correct the odd `em` font sizing in all browsers. | |
*/ | |
pre { | |
font-family: monospace, monospace; /* 1 */ | |
font-size: 1em; /* 2 */ | |
} | |
/* Text-level semantics | |
========================================================================== */ | |
/** | |
* 1. Remove the gray background on active links in IE 10. | |
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. | |
*/ | |
a { | |
background-color: transparent; /* 1 */ | |
-webkit-text-decoration-skip: objects; /* 2 */ | |
} | |
/** | |
* Remove the outline on focused links when they are also active or hovered | |
* in all browsers (opinionated). | |
*/ | |
a:active, | |
a:hover { | |
outline-width: 0; | |
} | |
/** | |
* 1. Remove the bottom border in Firefox 39-. | |
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. | |
*/ | |
abbr[title] { | |
border-bottom: none; /* 1 */ | |
text-decoration: underline; /* 2 */ | |
text-decoration: underline dotted; /* 2 */ | |
} | |
/** | |
* Prevent the duplicate application of `bolder` by the next rule in Safari 6. | |
*/ | |
b, | |
strong { | |
font-weight: inherit; | |
} | |
/** | |
* Add the correct font weight in Chrome, Edge, and Safari. | |
*/ | |
b, | |
strong { | |
font-weight: bolder; | |
} | |
/** | |
* 1. Correct the inheritance and scaling of font size in all browsers. | |
* 2. Correct the odd `em` font sizing in all browsers. | |
*/ | |
code, | |
kbd, | |
samp { | |
font-family: monospace, monospace; /* 1 */ | |
font-size: 1em; /* 2 */ | |
} | |
/** | |
* Add the correct font style in Android 4.3-. | |
*/ | |
dfn { | |
font-style: italic; | |
} | |
/** | |
* Add the correct background and color in IE 9-. | |
*/ | |
mark { | |
background-color: #ff0; | |
color: #000; | |
} | |
/** | |
* Add the correct font size in all browsers. | |
*/ | |
small { | |
font-size: 80%; | |
} | |
/** | |
* Prevent `sub` and `sup` elements from affecting the line height in | |
* all browsers. | |
*/ | |
sub, | |
sup { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
sub { | |
bottom: -0.25em; | |
} | |
sup { | |
top: -0.5em; | |
} | |
/* Embedded content | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
audio, | |
video { | |
display: inline-block; | |
} | |
/** | |
* Add the correct display in iOS 4-7. | |
*/ | |
audio:not([controls]) { | |
display: none; | |
height: 0; | |
} | |
/** | |
* Remove the border on images inside links in IE 10-. | |
*/ | |
img { | |
border-style: none; | |
} | |
/** | |
* Hide the overflow in IE. | |
*/ | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
/* Forms | |
========================================================================== */ | |
/** | |
* 1. Change the font styles in all browsers (opinionated). | |
* 2. Remove the margin in Firefox and Safari. | |
*/ | |
button, | |
input, | |
optgroup, | |
select, | |
textarea { | |
font-family: sans-serif; /* 1 */ | |
font-size: 100%; /* 1 */ | |
line-height: 1.15; /* 1 */ | |
margin: 0; /* 2 */ | |
} | |
/** | |
* Show the overflow in IE. | |
* 1. Show the overflow in Edge. | |
*/ | |
button, | |
input { /* 1 */ | |
overflow: visible; | |
} | |
/** | |
* Remove the inheritance of text transform in Edge, Firefox, and IE. | |
* 1. Remove the inheritance of text transform in Firefox. | |
*/ | |
button, | |
select { /* 1 */ | |
text-transform: none; | |
} | |
/** | |
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` | |
* controls in Android 4. | |
* 2. Correct the inability to style clickable types in iOS and Safari. | |
*/ | |
button, | |
html [type="button"], /* 1 */ | |
[type="reset"], | |
[type="submit"] { | |
-webkit-appearance: button; /* 2 */ | |
} | |
/** | |
* Remove the inner border and padding in Firefox. | |
*/ | |
button::-moz-focus-inner, | |
[type="button"]::-moz-focus-inner, | |
[type="reset"]::-moz-focus-inner, | |
[type="submit"]::-moz-focus-inner { | |
border-style: none; | |
padding: 0; | |
} | |
/** | |
* Restore the focus styles unset by the previous rule. | |
*/ | |
button:-moz-focusring, | |
[type="button"]:-moz-focusring, | |
[type="reset"]:-moz-focusring, | |
[type="submit"]:-moz-focusring { | |
outline: 1px dotted ButtonText; | |
} | |
/** | |
* Change the border, margin, and padding in all browsers (opinionated). | |
*/ | |
fieldset { | |
border: 1px solid #c0c0c0; | |
margin: 0 2px; | |
padding: 0.35em 0.625em 0.75em; | |
} | |
/** | |
* 1. Correct the text wrapping in Edge and IE. | |
* 2. Correct the color inheritance from `fieldset` elements in IE. | |
* 3. Remove the padding so developers are not caught out when they zero out | |
* `fieldset` elements in all browsers. | |
*/ | |
legend { | |
box-sizing: border-box; /* 1 */ | |
color: inherit; /* 2 */ | |
display: table; /* 1 */ | |
max-width: 100%; /* 1 */ | |
padding: 0; /* 3 */ | |
white-space: normal; /* 1 */ | |
} | |
/** | |
* 1. Add the correct display in IE 9-. | |
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. | |
*/ | |
progress { | |
display: inline-block; /* 1 */ | |
vertical-align: baseline; /* 2 */ | |
} | |
/** | |
* Remove the default vertical scrollbar in IE. | |
*/ | |
textarea { | |
overflow: auto; | |
} | |
/** | |
* 1. Add the correct box sizing in IE 10-. | |
* 2. Remove the padding in IE 10-. | |
*/ | |
[type="checkbox"], | |
[type="radio"] { | |
box-sizing: border-box; /* 1 */ | |
padding: 0; /* 2 */ | |
} | |
/** | |
* Correct the cursor style of increment and decrement buttons in Chrome. | |
*/ | |
[type="number"]::-webkit-inner-spin-button, | |
[type="number"]::-webkit-outer-spin-button { | |
height: auto; | |
} | |
/** | |
* 1. Correct the odd appearance in Chrome and Safari. | |
* 2. Correct the outline style in Safari. | |
*/ | |
[type="search"] { | |
-webkit-appearance: textfield; /* 1 */ | |
outline-offset: -2px; /* 2 */ | |
} | |
/** | |
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. | |
*/ | |
[type="search"]::-webkit-search-cancel-button, | |
[type="search"]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
/** | |
* 1. Correct the inability to style clickable types in iOS and Safari. | |
* 2. Change font properties to `inherit` in Safari. | |
*/ | |
::-webkit-file-upload-button { | |
-webkit-appearance: button; /* 1 */ | |
font: inherit; /* 2 */ | |
} | |
/* Interactive | |
========================================================================== */ | |
/* | |
* Add the correct display in IE 9-. | |
* 1. Add the correct display in Edge, IE, and Firefox. | |
*/ | |
details, /* 1 */ | |
menu { | |
display: block; | |
} | |
/* | |
* Add the correct display in all browsers. | |
*/ | |
summary { | |
display: list-item; | |
} | |
/* Scripting | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
canvas { | |
display: inline-block; | |
} | |
/** | |
* Add the correct display in IE. | |
*/ | |
template { | |
display: none; | |
} | |
/* Hidden | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 10-. | |
*/ | |
[hidden] { | |
display: 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
* { box-sizing: border-box; } | |
.container { | |
width: 80%; | |
margin: 0 auto; | |
} | |
.header h1 { | |
text-align: center; | |
margin: 100px 0px; | |
} | |
.image { | |
display: inline-block; | |
float: left; | |
} | |
.chrisflying{ | |
width: 100%; | |
} | |
.column { | |
display: inline-block; | |
float: left; | |
width: 30%; | |
padding: 0 20px; | |
} | |
.main-text { | |
position: relative; | |
clear: both; | |
padding-top: 60px; | |
} | |
#skills-list { | |
margin-left: 50px; | |
} | |
/*Typography*/ | |
h1, | |
h2, | |
h3 { | |
font-family: Lato, 'Lobster Two' , Futura, Helvetica, Arial, sans-serif; | |
} | |
.intro p { | |
font-family: Lato, 'Lobster Two', Futura, Helvetica, Arial, sans-serif; | |
font-size: 3em; | |
font-weight: 100; | |
-webkit-margin-before: 0; | |
} | |
.skill h3{ | |
text-align: center; | |
text-transform: uppercase; | |
} | |
/*ENDTypography*/ | |
body { | |
background-color: #fffeea; | |
color: #34495e; | |
} | |
.skill{ | |
background-color: #5AD4C2; | |
color: #F00; | |
padding: 20px 0; | |
} |
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
.container { | |
width: 90%; | |
margin: 5% 5%; | |
color: white; | |
text-align: center; | |
font-family: lato; | |
} | |
.contact { | |
} | |
.contactme { | |
text-align: center; | |
padding-top: 5%; | |
} | |
.Bold-email { | |
font-weight: bold; | |
font-size: 2em; | |
font-weight: 100; | |
} | |
.contact-address>p { | |
font-size: 2em; | |
font-weight: 100; | |
} | |
.follow a { | |
} | |
img.resize { | |
max-width: 5%; | |
max-height: 2%; | |
padding-bottom: 5%; | |
} | |
img.gmap { | |
max-width: 50%; | |
max-height: 50%; | |
} | |
body { | |
background-color: #34495e; | |
} |
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 http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
<title>Hello World!</title> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
<link rel="stylesheet" href="css/styles.css" media="screen" title="no title"> | |
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" type="text/css"> | |
<!--link rel="stylesheet" <link href="https://fonts.googleapis.com/css?family=lobster" type="text/css"--> | |
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet"> | |
<!-- Custom styles for this template go here --> | |
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
<!--[if lt IE 9]> | |
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<!-- Main jumbotron for a primary marketing message or call to action --> | |
<div class="navbar"> | |
<div class="navbar-list"> | |
<ul> | |
<li><a href="https://www.google.co.uk/">Learn More</a></li> | |
<li><a href="about.html">About</a></li> | |
<li><a href="contact.html">Contact</a></li> | |
</ul> | |
</div> | |
</div> | |
<div class="jumbotron"> | |
<div class="container"> | |
<h1>christian aguzey</h1> | |
<!--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--> | |
<p><strong>Hi, I am Chris, this site will document my journey of learning To Code and eventually finding a job, stay tuned...!</strong></p> | |
<p>I have studied Architecture, studied construction management and now work in biotechnology. </p> | |
<p>I am now following my passion by learning to code and ultimately become a software delevoper. </p> | |
</div> | |
<div class="container"></div> | |
</div><!-- /jumbotron --> | |
<div class="container"> | |
<!-- Example row of columns --> | |
<div class="row"> | |
<div class="col-md-4"> | |
<h2>Portfolio Concept</h2> | |
<p>The concept for this portfolio is to document my newbie journey into web development.</p> | |
<p>When you visit this site each week and notice a change, then I am on track otherwise give a nudge. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div><!-- /col --> | |
<div class="col-md-4"> | |
<h2>Project Goals</h2> | |
<p>I aim to complete this course on a pace similar to full time bootcamp or at a minimum of 50 hours every 2 weeks as I work 5 days on 5 days off. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div><!-- /col --> | |
<div class="col-md-4"> | |
<h2>Course Goals</h2> | |
<p>Ultimate aim for learning to code is to <strong>change careers.</strong> | |
Presently focused on developing excellent programming skills and I believe the jobs will come. I aim to do this course at a live-in bootcamp pace. </p> | |
<p>So I want to:</p> | |
<ol> | |
<li>Keep work-family balance</li> | |
<li>Keep my fulltime job for now</li> | |
<li>Keep working at bootcamp pace</li> | |
<li>Keep practising untl I get it!</li> | |
<li>Keep my sanity!</li> | |
</ol> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div><!-- /col --> | |
</div><!-- /row --> | |
<hr> | |
</div> <!-- /container --> | |
<!-- ============================= --> | |
<!-- All your JavaScript comes now --> | |
<!-- ============================= --> | |
<!-- Bootstrap core JS --> | |
<!-- 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
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ | |
/** | |
* 1. Change the default font family in all browsers (opinionated). | |
* 2. Correct the line height in all browsers. | |
* 3. Prevent adjustments of font size after orientation changes in | |
* IE on Windows Phone and in iOS. | |
*/ | |
/* Document | |
========================================================================== */ | |
html { | |
font-family: sans-serif; /* 1 */ | |
line-height: 1.15; /* 2 */ | |
-ms-text-size-adjust: 100%; /* 3 */ | |
-webkit-text-size-adjust: 100%; /* 3 */ | |
} | |
/* Sections | |
========================================================================== */ | |
/** | |
* Remove the margin in all browsers (opinionated). | |
*/ | |
body { | |
margin: 0; | |
} | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
article, | |
aside, | |
footer, | |
header, | |
nav, | |
section { | |
display: block; | |
} | |
/** | |
* Correct the font size and margin on `h1` elements within `section` and | |
* `article` contexts in Chrome, Firefox, and Safari. | |
*/ | |
h1 { | |
font-size: 2em; | |
margin: 0.67em 0; | |
} | |
/* Grouping content | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
* 1. Add the correct display in IE. | |
*/ | |
figcaption, | |
figure, | |
main { /* 1 */ | |
display: block; | |
} | |
/** | |
* Add the correct margin in IE 8. | |
*/ | |
figure { | |
margin: 1em 40px; | |
} | |
/** | |
* 1. Add the correct box sizing in Firefox. | |
* 2. Show the overflow in Edge and IE. | |
*/ | |
hr { | |
box-sizing: content-box; /* 1 */ | |
height: 0; /* 1 */ | |
overflow: visible; /* 2 */ | |
} | |
/** | |
* 1. Correct the inheritance and scaling of font size in all browsers. | |
* 2. Correct the odd `em` font sizing in all browsers. | |
*/ | |
pre { | |
font-family: monospace, monospace; /* 1 */ | |
font-size: 1em; /* 2 */ | |
} | |
/* Text-level semantics | |
========================================================================== */ | |
/** | |
* 1. Remove the gray background on active links in IE 10. | |
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. | |
*/ | |
a { | |
background-color: transparent; /* 1 */ | |
-webkit-text-decoration-skip: objects; /* 2 */ | |
} | |
/** | |
* Remove the outline on focused links when they are also active or hovered | |
* in all browsers (opinionated). | |
*/ | |
a:active, | |
a:hover { | |
outline-width: 0; | |
} | |
/** | |
* 1. Remove the bottom border in Firefox 39-. | |
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. | |
*/ | |
abbr[title] { | |
border-bottom: none; /* 1 */ | |
text-decoration: underline; /* 2 */ | |
text-decoration: underline dotted; /* 2 */ | |
} | |
/** | |
* Prevent the duplicate application of `bolder` by the next rule in Safari 6. | |
*/ | |
b, | |
strong { | |
font-weight: inherit; | |
} | |
/** | |
* Add the correct font weight in Chrome, Edge, and Safari. | |
*/ | |
b, | |
strong { | |
font-weight: bolder; | |
} | |
/** | |
* 1. Correct the inheritance and scaling of font size in all browsers. | |
* 2. Correct the odd `em` font sizing in all browsers. | |
*/ | |
code, | |
kbd, | |
samp { | |
font-family: monospace, monospace; /* 1 */ | |
font-size: 1em; /* 2 */ | |
} | |
/** | |
* Add the correct font style in Android 4.3-. | |
*/ | |
dfn { | |
font-style: italic; | |
} | |
/** | |
* Add the correct background and color in IE 9-. | |
*/ | |
mark { | |
background-color: #ff0; | |
color: #000; | |
} | |
/** | |
* Add the correct font size in all browsers. | |
*/ | |
small { | |
font-size: 80%; | |
} | |
/** | |
* Prevent `sub` and `sup` elements from affecting the line height in | |
* all browsers. | |
*/ | |
sub, | |
sup { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
sub { | |
bottom: -0.25em; | |
} | |
sup { | |
top: -0.5em; | |
} | |
/* Embedded content | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
audio, | |
video { | |
display: inline-block; | |
} | |
/** | |
* Add the correct display in iOS 4-7. | |
*/ | |
audio:not([controls]) { | |
display: none; | |
height: 0; | |
} | |
/** | |
* Remove the border on images inside links in IE 10-. | |
*/ | |
img { | |
border-style: none; | |
} | |
/** | |
* Hide the overflow in IE. | |
*/ | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
/* Forms | |
========================================================================== */ | |
/** | |
* 1. Change the font styles in all browsers (opinionated). | |
* 2. Remove the margin in Firefox and Safari. | |
*/ | |
button, | |
input, | |
optgroup, | |
select, | |
textarea { | |
font-family: sans-serif; /* 1 */ | |
font-size: 100%; /* 1 */ | |
line-height: 1.15; /* 1 */ | |
margin: 0; /* 2 */ | |
} | |
/** | |
* Show the overflow in IE. | |
* 1. Show the overflow in Edge. | |
*/ | |
button, | |
input { /* 1 */ | |
overflow: visible; | |
} | |
/** | |
* Remove the inheritance of text transform in Edge, Firefox, and IE. | |
* 1. Remove the inheritance of text transform in Firefox. | |
*/ | |
button, | |
select { /* 1 */ | |
text-transform: none; | |
} | |
/** | |
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` | |
* controls in Android 4. | |
* 2. Correct the inability to style clickable types in iOS and Safari. | |
*/ | |
button, | |
html [type="button"], /* 1 */ | |
[type="reset"], | |
[type="submit"] { | |
-webkit-appearance: button; /* 2 */ | |
} | |
/** | |
* Remove the inner border and padding in Firefox. | |
*/ | |
button::-moz-focus-inner, | |
[type="button"]::-moz-focus-inner, | |
[type="reset"]::-moz-focus-inner, | |
[type="submit"]::-moz-focus-inner { | |
border-style: none; | |
padding: 0; | |
} | |
/** | |
* Restore the focus styles unset by the previous rule. | |
*/ | |
button:-moz-focusring, | |
[type="button"]:-moz-focusring, | |
[type="reset"]:-moz-focusring, | |
[type="submit"]:-moz-focusring { | |
outline: 1px dotted ButtonText; | |
} | |
/** | |
* Change the border, margin, and padding in all browsers (opinionated). | |
*/ | |
fieldset { | |
border: 1px solid #c0c0c0; | |
margin: 0 2px; | |
padding: 0.35em 0.625em 0.75em; | |
} | |
/** | |
* 1. Correct the text wrapping in Edge and IE. | |
* 2. Correct the color inheritance from `fieldset` elements in IE. | |
* 3. Remove the padding so developers are not caught out when they zero out | |
* `fieldset` elements in all browsers. | |
*/ | |
legend { | |
box-sizing: border-box; /* 1 */ | |
color: inherit; /* 2 */ | |
display: table; /* 1 */ | |
max-width: 100%; /* 1 */ | |
padding: 0; /* 3 */ | |
white-space: normal; /* 1 */ | |
} | |
/** | |
* 1. Add the correct display in IE 9-. | |
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. | |
*/ | |
progress { | |
display: inline-block; /* 1 */ | |
vertical-align: baseline; /* 2 */ | |
} | |
/** | |
* Remove the default vertical scrollbar in IE. | |
*/ | |
textarea { | |
overflow: auto; | |
} | |
/** | |
* 1. Add the correct box sizing in IE 10-. | |
* 2. Remove the padding in IE 10-. | |
*/ | |
[type="checkbox"], | |
[type="radio"] { | |
box-sizing: border-box; /* 1 */ | |
padding: 0; /* 2 */ | |
} | |
/** | |
* Correct the cursor style of increment and decrement buttons in Chrome. | |
*/ | |
[type="number"]::-webkit-inner-spin-button, | |
[type="number"]::-webkit-outer-spin-button { | |
height: auto; | |
} | |
/** | |
* 1. Correct the odd appearance in Chrome and Safari. | |
* 2. Correct the outline style in Safari. | |
*/ | |
[type="search"] { | |
-webkit-appearance: textfield; /* 1 */ | |
outline-offset: -2px; /* 2 */ | |
} | |
/** | |
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. | |
*/ | |
[type="search"]::-webkit-search-cancel-button, | |
[type="search"]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
/** | |
* 1. Correct the inability to style clickable types in iOS and Safari. | |
* 2. Change font properties to `inherit` in Safari. | |
*/ | |
::-webkit-file-upload-button { | |
-webkit-appearance: button; /* 1 */ | |
font: inherit; /* 2 */ | |
} | |
/* Interactive | |
========================================================================== */ | |
/* | |
* Add the correct display in IE 9-. | |
* 1. Add the correct display in Edge, IE, and Firefox. | |
*/ | |
details, /* 1 */ | |
menu { | |
display: block; | |
} | |
/* | |
* Add the correct display in all browsers. | |
*/ | |
summary { | |
display: list-item; | |
} | |
/* Scripting | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
canvas { | |
display: inline-block; | |
} | |
/** | |
* Add the correct display in IE. | |
*/ | |
template { | |
display: none; | |
} | |
/* Hidden | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 10-. | |
*/ | |
[hidden] { | |
display: 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
.jumbotron { | |
background-image: url("../img/gallery.jpg"); | |
background-size: contain; | |
} | |
.jumbotron p { | |
color: white; | |
font-family: lato; | |
} | |
.jumbotron h1 { | |
color: /*#333;*/ #34495e; | |
font-family: 'Lobster Two', cursive; | |
} | |
.navbar { | |
background-color: #34495e; | |
padding: 0; | |
margin: 0; | |
text-transform: uppercase; | |
} | |
.navbar-list ul { | |
list-style-type: none; | |
padding: 0; | |
margin: 0; | |
overflow: hidden; | |
font-size: 16px; | |
} | |
li { | |
float: left; | |
} | |
li a { | |
display: block; | |
color: white; | |
text-align: center; | |
padding: 16px 16px; | |
text-decoration: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment