League of Legends

Tutorials of (League of legends) by Wind

<!DOCTYPE html>
<html >
<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/ */
* {
    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;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( League of Legends ) is write by Wind, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Wind