IT3-opdracht1

In this example below you will see how to do a IT3-opdracht1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JohnLab, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JohnLab ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>IT3-opdracht1</title>
  <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>
  <div class="all">
  <div class="titel">
    <h2 class="smalltitel">Where rap bashes us or gets bashed</h2>
    <img class="banner" src="http://www.auxois-fm.fr/wp-content/uploads/2016/09/fight-1296057_960_720.png"></img>
    <img class="banner1" src="http://www.auxois-fm.fr/wp-content/uploads/2016/09/fight-1296057_960_720.png"></img>
    <h1>RapBash</h1>
  </div>
<nav>
  <ul class="nav">
            <li><a>Bashed</a></li>
            <li><a>Bashed us</a></li>
            <li><a>Classment</a></li>
            <li><a>Submit</a></li>
      </ul> 
</nav>
  <div class="boxes">
    <div class="box box1">
      <a class="bash">bashed us</a>
      <h3>Rap God</h3>
      <img src="https://i1.sndcdn.com/avatars-000096414927-0zh1gl-t500x500.jpg"></img>
    <h3>Eminem</h3>
      <p>The song references a line from the first Marshall Mathers LP, on the song "I'm Back", where he talks about the Columbine High School massacre, rapping "Seven kids from Columbine; Put 'em all in a line, add an AK-47, a revolver, and a nine." The verse was censored when originally released, and is included in "Rap God" to test public reaction. Eminem references the Lewinsky scandal in order to demonstrate his longevity as a dominant force in the rap industry, thus establishing himself as an "immortal god".

Additional references include a conflict between Fabolous and Ray J, Heavy D & the Boyz, planking, The Walking Dead,J. J. Fad's 1988 song "Supersonic", Tupac Shakur, Pharaohe Monch, Rakim, N.W.A, Eazy-E, Dr. Dre, DJ Yella, Ice Cube, MC Ren, Busta Rhymes, Lakim Shabazz and the 2007 Hotstylz song "Lookin Boy".

"Rap God"
Eminem raps 97 words in 15 seconds - an average of 6.5 words per second - which he describes as "supersonic speed" (7-22).
Problems playing this file? See media help.
In the verse that begins at 4:26, Eminem raps 97 words in 15 seconds — an average of 6.5 words per second — which he describes as "supersonic speed"</p>
    </div>
  <div class="box box2">
    <a class="bash">bashed</a>
      <h3>Life of Pablo</h3>
      <img src="https://i1.sndcdn.com/artworks-tMEgZSWKoLYh-0-t500x500.jpg"></img>
  <h3>Kanye West</h3>
      <p>The Life of Pablo is the eighth studio album by American rapper Kanye West. It was released on February 14, 2016, by Roc-A-Fella Records, GOOD Music and Def Jam Recordings. Recording sessions took place from 2013 to 2016, in Italy, Mexico, Canada and the United States. Production on the album was handled by West alongside a variety of producers such as Mike Dean, Noah Goldstein, Metro Boomin, Rick Rubin, Hudson Mohawke, and more. He also enlisted a wide array of guest vocalists, including Ty Dolla Sign, Desiigner, Kid Cudi, The-Dream, Chance the Rapper, Rihanna and Frank Ocean, among others. The album was preceded by the release of the promotional singles "Facts", "Real Friends", "No More Parties in LA", and "30 Hours" as part of West's GOOD Fridays giveaways.</p>
    </div>
<div class="box box1">
  <a class="bash">bashed us</a>
      <h3>This unruly mess I've made</h3>
      <img src="https://i1.sndcdn.com/artworks-000163289425-xpa8yr-t500x500.jpg"></img>
<h3>Macklemore</h3>
      <p>Following the success of the duo's debut album The Heist (2012), Macklemore revealed the album cover artwork to the follow-up album, titled This Unruly Mess I've Made, on January 15, 2016, with an Instagram post. The album was self-released on February 26, 2016. He also revealed an album trailer on his official website, which features him discussing about how the album was created and the inspiration for making new music.</p>
    </div>
  </div>
<footer>
		<br>Jonathan Labiche is bashing you<br>
	</footer>
</div>
</main>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/JohnLab/it3-opdracht1-PGbgam */
nav ul{
  /* flexbox magie */
  display: flex;
  /*justify-content: space-between;*/
  justify-content: space-around;
  /*flex-direction: row-reverse;*/
  /*flex-direction: column;*/
  /*flex-wrap: wrap;*/
  margin-bottom: 20px;
  cursor: pointer;
}
.all{
  width: 80%;
  margin: auto;
  background-color: rgb(03,240,12);
}
.titel{
  background-color: rgb(255,25,25);
  padding-top: 1px;
}
.smalltitel{
  color: rgb(256,256,256);
  margin-left: 2%;
  top: 3%;
}
.boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
} 
.box {
  background-color: rgb(256,256,256);
  cursor: pointer;
  border: 1px solid #CCC;
  padding: 10px;
  margin: 0 5px 10px 5px;
  flex:1; 
}
.box1:hover{
  background-color: rgb(0,127,21);
}
.box2:hover{
  background-color: rgb(240,0,0);
}
.banner{
  width: 3%;
  float: left;
  z-index: 30;
  left: 38%;
  position: relative;
}
.banner1{
  width: 3%;
  float: left;
  z-index: 30;
  left: 62%;
  position: relative;
}
img{
  max-width: 100%;
}
.bash{
  color: rgb(256,256,256);
}
a{
      font-family: 'Rock salt', cursive;
}
h1 {
      font-family: 'Shrikhand', cursive;
      font-size: 3em;
      font-weight: 700;
      margin-bottom: .5em;
      text-align: center;
}
h2 {
      font-family: 'Coiny', cursive;
      font-size: 1.2em;
      font-weight: 700;
      margin-top: 1em;
}
h3 {
      font-family: 'Luckiest Guy', cursive;
      font-size: 1.5em;
      font-weight: 700;
      margin-top: 1em;
}
p {
      font-family: 'Ubuntu Condensed', sans-serif;
      font-size: 1em;
      margin-top: 1em;
      line-height: 1.8em;
}
footer{
  text-align: center;
  padding-bottom: 2px;
  font-family: 'Luckiest Guy', cursive;
}

Comments