Informatik#Final-Mod-TOPICS

In this example below you will see how to do a Informatik#Final-Mod-TOPICS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MGK_888, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MGK_888 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Informatik#Final-Mod-TOPICS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="Whole1">
<div class="Main">
  <h3>Main</h3>
</div>

<div class="Vergangenheit">
  <h3>Vergangenheit</h3>
</div>
  
</div>

<div class="Whole2">
<div class="Praesens">
  <h3>Jetzt</h3>
</div>

<div class="Zukunft">
  <h3>Zukunft</h3>
</div>
  
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MGK_888/informatikfinal-mod-topics-pRJMrz */
@import url('https://fonts.googleapis.com/css?family=Yatra+One');

* {
  font-family: 'Yatra One', cursive;
  font-size: 30px;
  color: black;
}

.Praesens, .Zukunft {
  margin-top: 7px;
}

.Main {
  width: 49%;
  height: 300px;
  color: white;
  float: left;
  text-align: center;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5)
}

.Vergangenheit {
  width: 49%;
  height: 300px;
  float: right;
  text-align: center;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5)
}

.Praesens {
  width: 49%;
  height: 300px;
  float: left;
  text-align: center;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5)
}

.Zukunft {
  width: 49%;
  height: 300px;
  float: right;
  text-align: center;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5)
}

h3 {
  padding: 100px;
}

h3:hover {
  color: white;
  font-size: 33px;
  overflow: hidden;
  text-shadow: 10px 10px 20px rgba(255, 255, 255, 0.7)
}

.Main:hover {
  background: url("http://i.giphy.com/xT8qBfjJhOmNPTVWU0.gif");
}

.Praesens:hover {
  background: url("http://i.giphy.com/xT8qBfjJhOmNPTVWU0.gif");
}

.Zukunft:hover {
  background: url("http://i.giphy.com/xT8qBfjJhOmNPTVWU0.gif");
}

.Vergangenheit:hover {
  background: url("http://i.giphy.com/xT8qBfjJhOmNPTVWU0.gif");
}

Comments