League of Legends

In this example below you will see how to do a League of Legends with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>League of Legends</title>
  <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav>
    <ul> <img src="http://img11.hostingpics.net/thumbs/mini_130684LOLico.png">
        <li>Le jeu</li>
        <li>Univers</li>
        <li>Actualités</li>
        <li>E-sport</li>
        <li>Forum</li>
        <li>Communauté</li>
        <li>Produits dérivés</li>
        <li>Support</li>
    </ul>
</nav>

<body>
    <div id="accueil"> 
    </div>
    
    <div class="format" id="nouveautes">
        <h2>Nouveautés ></h2>
        
        <div class="vignettes" id="vignette1">
            <div class="basvi" id="basvi1">
            </div>
        </div>
        
        
        <div class="vignettes" id="vignette2">
            <div class="basvi" id="basvi2">
            </div>
        </div>
        
        <div class="vignettes" id="vignette3">
            <div class="basvi" id="basvi3">
            </div>
        </div>
        
        <div class="vignettes" id="vignette4">
            <div class="basvi" id="basvi4">
            </div>
        </div>
        
        <div class="vignettes" id="vignette5">
            <div class="basvi" id="basvi5">
            </div>
        </div>
        
        <div class="vignettes" id="vignette6">
            <div class="basvi" id="basvi6">
            </div>
        </div>
    </div>
    
    <div id="actualites">
        <h2>Actualités ></h2>
        <div class="actus" id="actu1">
        </div>
        
        <div class="actus" id="actu2">
        </div>
        
        <div class="actus" id="actu3">
        </div>
    </div>
    
    <footer>
        <div id="footer">
        </div>
    </footer>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/WindGhost/league-of-legends-aBaEzK */
* {
    padding: 0;
    margin: 0;
    font-family: 'Comfortaa';
}

.format {
    min-height: 100vh;
    width: 60%;
    margin-left: 20%;
}

/* nav */

nav {
    background-color: #121212;
    height: 6vh;
}

nav ul img {
    padding: 0vh 0vh 0vh 8vh;
    width: 6vh;
    float: left;
}

nav ul li:nth-child(2) {
    padding-left: 8vh;
}

nav ul li {
    display: inline-block;
    color: #c9aa71;
    padding: 1.2vh 0vh 0vh 6vh;
    font-size: 2.5vh;
}

nav ul li:hover {
    color: #f1e6d0;
}

/* body */

body {
    background-color: #2a2a2a;
}

/* accueil */

#accueil {
    height: 94vh;
    background-image: url(http://zupimages.net/up/16/50/785t.jpg);
    background-size: cover;
    background-position: 50%;
}

/* nouveautés */

#nouveautes h2 {
    color: #ff9c00;
    font-size: 5vh;
    font-weight: normal;
    padding: 2.5vh 0vh 2.5vh 0vh; 
}

.vignettes {
    display: inline-block;
    width: 30%;
    height: 300px;
    background-color: #b89c68;
}

#vignette1 {
    display: block;
    float: left;
}

#vignette2 {
    margin-left: 4%;
}

#vignette3 {
    display: block;
    float: right;
}

#vignette4 {
    display: block;
    float: left;
}

#vignette5 {
    margin-left: 4%;
}

#vignette6 {
    display: block;
    float: right;
}

#vignette4, #vignette5, #vignette6 {
    margin-top: 8%;
}

.basvi {
    display: inline-block;
    width: 100%;
    height: 30%;
    background-color: #f1e6d0;
    margin-top: 88%;
}

/* Actualités */

#actualites {
    min-height: 75vh;
    width: 60%;
    margin-left: 20%;
}

.actus {
    display: inline-block;
    width: 100%;
    height: 130px;
    background-color: #f1e6d0;
}

#actualites h2 {
    color: #ff9c00;
    font-size: 5vh;
    font-weight: normal;
    padding: 2.5vh 0vh 2.5vh 0vh; 
}

#actu2, #actu3 {
    margin-top: 1.5%;
}

/* footer */

#footer {
    display: inline-block;
    width: 100%;
    min-height: 25vh;
    background-color: #b89c68;
}

Comments