Skip to content

Instantly share code, notes, and snippets.

@emmasamuel

emmasamuel/about.html

Created March 1, 2018 02:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save emmasamuel/7d8f26c66644d7c2aee7af59bcedb2e8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save emmasamuel/7d8f26c66644d7c2aee7af59bcedb2e8 to your computer and use it in GitHub Desktop.
Download ZIP
portfolio for my lessoning
Raw
about.html
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cookie|Pacifico|Sacramento" rel="stylesheet">
<script src="/script.js" defer></script>
</head>
<body>
<div class="mainsection">
<div class="header">
<a class="link" href="portfoilo.html">HOME</a>
<a class="link" href="about.html">ABOUT</a>
<a class="link" href="contact.html">CONTACT</a>
</div>
<div class="subheader">
<h3> THIS IS WHAT I CAN DO</h3>
</div>
<div class="container">
<div class="imageone"></div>
<div class="imagetwo"></div>
<div class="imagethree"></div>
</div>
<div class="secondcontainer">
<div class="image"></div>
<div class="images"></div>
</div>
</div>
<footer>
<h3> &copy; COPYRIGHT By SAMUEL ONUKOAGU </h3>
</footer>
</body>
</html>
Raw
contact.html
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styless.css">
<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cookie|Pacifico|Sacramento" rel="stylesheet">
<script src="/script.js" defer></script>
</head>
<body>
<div class="mainsection">
<div class="header">
<a class="link" href="portfoilo.html">HOME</a>
<a class="link" href="about.html">ABOUT</a>
<a class="link" href="contact.html">CONTACT</a>
</div>
<address>
Written by Samuel Onukoagu.<br>
Visit us at:<br>
No 14 ayanleyeb st<br>
Lagos,Nigeria
</address>
</div>
<footer>
<h3> &copy; COPYRIGHT By SAMUEL ONUKOAGU </h3>
</footer>
</body>
</html>
Raw
portfolio.html
!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css">
<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cookie|Pacifico|Sacramento" rel="stylesheet">
<script src="/script.js" defer></script>
</head>
<body>
<div class="container">
<div class="header">
<a class="link" href="portfoilo.html">HOME</a>
<a class="link" href="about.html">ABOUT</a>
<a class="link" href="contact.html">CONTACT</a>
</div>
</div>
<footer>
<div class="mainfooter">
<h2>&copy; COPYRIGHT By SAMUEL ONUKOAGU</h2>
</div>
</footer>
</body>
</html>
Raw
style.css
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #000000;
color: white;
font-family: arial serif sans-serif monospace;
}
.container {
width: 100%;
height: 780px;
background-image: url(https://s5.postimg.org/3x1sbfw4n/lionface1.jpg );
background-repeat: no-repeat;
background-size: cover;
}
.header {
width: 1200px;
height: 30px;
text-align: right;
margin-top: 20px;
padding-top: 15px;
text-decoration-line: none;
}
.link {
width: 100px;
height: 50px;
padding-right: 30px;
color: white;
text-decoration-line: none;
padding-left: 30px;
font-family: Cookie;
font-size: 20px;
}
.link:hover {
text-decoration-line: underline;
}
.link:active{
background-color: red;
text-align: center;
border-radius: 3px;
padding-left: 20px;
}
.link:visited {
color: brown;
}
footer .mainfooter{
width: 100%;
height: 50px;
font-size: 8px;
text-align: center;
}
Raw
styles.css
body {
background-color: #000000;
color: white;
font-family: arial serif sans-serif monospace;
}
.mainsection {
width: 100%;
height: 900px;
}
.header {
width: 1200px;
height: 30px;
text-align: right;
margin-top: 20px;
padding-top: 15px;
text-decoration-line: none;
}
.link {
width: 100px;
height: 50px;
padding-right: 30px;
color: white;
text-decoration-line: none;
padding-left: 30px;
font-family: Cookie;
font-size: 20px;
}
.link:hover {
text-decoration-line: underline;
}
.link:active{
background-color: red;
text-align: center;
border-radius: 3px;
padding-left: 20px;
}
.link:visited {
color: brown;
}
.subheader h3 {
width: 1200px;
height: 30px;
text-align: center;
background-color: aqua;
color: black;
padding-top: 7px;
border-radius: 10px;
margin: 10px;
}
.container {
width: 1200px;
height: 220px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.imageone {
width: 300px;
height: 95px;
background-image: url(https://s5.postimg.org/jvxgya1jr/html5-css3-javascript-responsive-web-design.png);
background-repeat: no-repeat;
background-size: 300px;
padding: 0;
margin: 8px;
}
.imagetwo {
width: 300px;
height: 120px;
background-image: url(https://s5.postimg.org/vl1gmmxrr/php-training-in-lagos-nigeria.png);
background-repeat: no-repeat;
background-size: 300px;
padding: 0;
margin: 8px;
}
.imagethree {
width: 350px;
height: 200px;
background-image: url(https://s5.postimg.org/63j22mvcn/dj-react.png);
background-repeat: no-repeat;
background-size: 300px;
padding: 0;
margin: 8px;
}
.secondcontainer {
width: 900px;
height: 300px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.image {
width: 300px;
height: 240px;
background-image: url(https://s5.postimg.org/70phblu13/java.png);
background-repeat: no-repeat;
background-size: 300px;
padding: 0;
margin: 8px;
}
.images {
width: 300px;
height: 120px;
background-image: url(https://s5.postimg.org/959ucvqkn/python-logo-master.png);
background-repeat: no-repeat;
background-size: 300px;
padding: 0;
margin: 8px;
}
footer h3 {
width: 1200px;
height: 20px;
margin: 0;
font-size: 12px;
text-align: center
}
Raw
styless.css
body {
background-color: #000000;
color: white;
font-family: arial serif sans-serif monospace;
}
.mainsection {
width: 100%;
height: 500px;
}
.header {
width: 1200px;
height: 30px;
text-align: right;
margin-top: 20px;
padding-top: 15px;
text-decoration-line: none;
}
.link {
width: 100px;
height: 50px;
padding-right: 30px;
color: white;
text-decoration-line: none;
padding-left: 30px;
font-family: Cookie;
font-size: 20px;
}
.link:hover {
text-decoration-line: underline;
}
.link:active{
background-color: red;
text-align: center;
border-radius: 3px;
padding-left: 20px;
}
.link:visited {
color: brown;
}
address {
width: auto;
height: auto;
margin-left: 20px;
margin-top: 100px;
}
footer h3 {
width: 1200px;
height: 20px;
margin: 0;
font-size: 12px;
text-align: center
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment