<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML-3</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!doctype html>
<html lang="en">
<head>
<title>My Webpage</title>
<link
rel="stylesheet"
href="style.css">
<meta chareset="UTF-8">
</head>
<body>
<div class="logo">
<img src="http://placehold.it/100x100/ff0000/ffffff?text=Logo">
</div>
<nav>
<ul
<nav class="nav-horizontal">
<ul class="links">
<li>
<a href="HTML-1.html">Home</a>
</li>
<li>
<a href="HTML-2.html">Work</a>
</li>
<li>
<a href="HTML-3.html">About</a>
</li>
<li>
<a href="HTML-4.html">Contact</a>
</li>
</li>
</ul>
</nav>
<div
class="wrapper">
<h1>About</h1>
<p class="desc">I am Design Designer studying at London South bank University, this Portfolio displays the work I have produced during the terms of the first and second semester of University.</p>
</div>
<nav>
</body>
</html>
</body>
</html>
/*Downloaded from https://www.codeseek.co/08jordang/html-3-xdrqoV */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body { background-color: #909CAD; }
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
.wrapper {
width:1120px;
margin: 0 auto;
}
img {
}
.links{
display: flex;
}
.logo {
display: flex;
justify-content: center;
padding: 3em;
}
.logo img {
width: auto;
}
.nav-links {
display: flex;
list-style: none;
width: 70%;
height: 3em;
justify-content: center;
align-items: center;
margin: 0 auto;
}
nav, ul, li, a {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
body {
font-family: verdana, sans-serif;
}
.courses{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.course{
width: 32%;
background: #DDDDDD;
margin-bottom: 20px;
display: flex;
border-radius: 10px 40px 10px 40px;
padding: 10px ;
box-shadow: 5px 5px 4px black;
}
h2{
margin-left: 20px;
}
.nav-horizontal li {
width: 120px; /* Width of link */
float: left; /*Line up the links horizontally*/
margin-right: 10px; /*Spacing between links*/
}
.nav-horizontal a {
color: white; /*The text color of the link*/
display: block; /*This is needed so that the link expands to the width and height of its parent*/
text-align: center;
background-color: grey; /* The background color of the link */
padding: 8px 0; /*Padding top and bottom is 8px*/
border-radius: 8px; /*Creates rounded corners on the links*/
}
.nav-horizontal a:hover {
background-color: black;
/*When you move the mouses over a link the background becomes black*/
}
/*This is needed to fix a side effect of floating an element*/
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
html {
height: 100%;
width: 100%;
background: url(http://img.wallpaperstock.net:81/blurred-placebo-wallpapers_34011_1920x1080.jpg) no-repeat center;
background-size: cover;
font-family: 'Roboto', sans-serif;
}
.metro {
width: 880px;
margin: 0 auto;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.sm {
position: relative;
width: 150px;
height: 150px;
background: #111;
margin: 5px;
overflow: hidden;
}
.md {
position: relative;
width: 300px;
height: 150px;
background: #111;
margin: 5px;
overflow: hidden;
}
.lg {
position: relative;
width: 400px;
height: 310px;
background: #111;
margin: 5px;
overflow: hidden;
}
.seeallmd {
width: 100px;
height: 150px;
background: #fff;
position: absolute;
right: -100px;
transition: all 1s;
z-index: 100;
}
.seeallmd h1 {
font-size: 6em;
text-align: center;
margin-top: 10px;
}
.seeallsm {
width: 150px;
height: 50px;
background: #fff;
position: absolute;
bottom: -50px;
transition: all 1s;
z-index: 100;
}
.seeallsm h1 {
font-size: 3em;
text-align: center;
margin-top: -10px;
}
.seealllg {
width: 400px;
height: 100px;
background: #fff;
position: absolute;
top: -100px;
transition: all 1s;
z-index: 100;
}
.seealllg h1 {
font-size: 6em;
text-align: center;
margin-top: -20px;
}
.content-tatoo {
position: relative;
left: 0;
height: 150px;
width: 300px;
background: url(http://hqscreen.com/wallpapers/m/53/tattoos_men_fingers_blurred_background_m52522.jpg) no-repeat center;
background-size: cover;
transition: all 1s;
z-index: 50;
}
.content-cars {
position: relative;
left: 0;
height: 150px;
width: 300px;
background: url(http://hqdesktop.net/wallpapers/m/13/children_macro_desks_izh_moskvich_blurred_background_m12855.jpg) no-repeat center;
background-size: cover;
transition: all 1s;
z-index: 50;
}
.content-water {
position: relative;
top: 0;
height: 150px;
width: 150px;
background: url(http://hqscreen.com/wallpapers/m/11/water_dark_waves_macro_blurred_background_sea_m10417.jpg) no-repeat center;
background-size: cover;
transition: all 1s;
z-index: 50;
}
.content-flower {
position: relative;
top: 0;
height: 150px;
width: 150px;
background: url(http://best-wallpaper.net/wallpaper/s/1209/Chamomile-close-up-blurred-background_s.jpg) no-repeat center;
background-size: cover;
transition: all 1s;
z-index: 50;
}
.content-fox {
position: relative;
top: 0;
height: 310px;
width: 400px;
background: url(http://hqscreen.com/wallpapers/m/67/animals_blurred_background_foxes_snow_m66899.jpg) no-repeat center;
background-size: cover;
transition: all 1s;
z-index: 50;
}
.cars:hover .content-cars, .tatoo:hover .content-tatoo {
left: -100px;
}
.cars:hover .seeallmd, .tatoo:hover .seeallmd{
right: 0;
}
.water:hover .content-water, .flower:hover .content-flower {
top: -50px;
}
.water:hover .seeallsm, .flower:hover .seeallsm {
bottom: 0;
}
.fox:hover .content-fox {
top: 100px;
}
.fox:hover .seealllg {
top: 0;
}