HTML-3

/*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;
}