Делаем разметку:
Пишем стиль:
Результат:
HTML:
<header>
<nav class="top-naviagation">
<ul class="fire_games-nav" role="navigation">
<li class="fire_games_logo">
<a href="#">
<i class="fas fa-fire"></i> Games
</a>
</li>
<li class="fire_games_search">
<input placeholder="Search Fire Games..." />
<i class="fas fa-search"></i>
</li>
<li class="new_games">
<a href="#">
<i class="fas fa-fingerprint"></i> New Games
</a>
</li>
<li class="cats">
<a href="#">
<i class="fas fa-globe"></i> Categories
</a>
</li>
<li class="register" id="register" onclick="onProgress();">
<a href="#">Register</a>
</li>
<li class="login" id="login" onclick="onProgress();">
<a href="#">Log in</a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="page_categories">
<div class="fighting_games gallery">
<h1><i class="fas fa-helicopter"></i> Fighting Games</h1>
</div>
<div class="sports_games gallery">
<h1><i class="fas fa-futbol"></i> Sports Games</h1>
</div>
<div class="girls_games gallery">
<h1><i class="fab fa-gitlab"></i> Girls Games</h1>
</div>
<div class="racing_games gallery">
<h1><i class="fas fa-flag-checkered"></i> Racing Games</h1>
</div>
<div class="shooting_games gallery">
<h1><i class="fas fa-fighter-jet"></i> Shooting Games</h1>
</div>
<div class="RBG_games gallery">
<h1><i class="fab fa-accusoft"></i> RPG Games</h1>
</div>
</div>
<!-- POPULAR SECTION -->
<div class="popular_games">
<div class="sports popular-card">
<img class="img_container" src="https://img.huffingtonpost.com/asset/55ad22d62a000028007af9e5.jpeg?ops=scalefit_720_noupscale" alt="">
<h4 class="game_title">FIFA16</h4>
<button class="download_button" href="#">
<i class="fas fa-download"></i> Play Now
</button>
</div>
<div class="shooting popular-card">
<img class="img_container" src="https://static.giantbomb.com/uploads/scale_small/8/87790/2314075-box_rsquad.png" alt="">
<h4 class="game_title">Raven Squad</h4>
<button class="download_button" href="#">
<i class="fas fa-download"></i> Free
</button>
</div>
<div class="girls popular-card">
<img class="img_container" src="https://m.media-amazon.com/images/M/MV5BODEzMmIxOGMtY2RhYS00YTFiLThkZmYtMDlmZGJlYzg0NWEzXkEyXkFqcGdeQXVyNjk1Njg5NTA@._V1_UX182_CR0,0,182,268_AL_.jpg" alt="">
<h4 class="game_title">Princess Mulan</h4>
<button class="download_button" href="#">
<i class="fas fa-download"></i> Play Now
</button>
</div>
<div class="racing popular-card">
<img class="img_container" src="https://images-na.ssl-images-amazon.com/images/I/81mE8WEnsAL._SX342_.jpg" alt="">
<h4 class="game_title">Need for Speed</h4>
<button class="download_button" href="#">
<i class="fas fa-download"></i> Free
</button>
</div>
<div class="RBG popular-card">
<img class="img_container" src="https://vignette.wikia.nocookie.net/elderscrolls/images/0/09/Skyrim_Special_Edition_North_America_Cover.png/revision/latest?cb=20160624053923" alt="">
<h4 class="game_title">Skyrim</h4>
<button class="download_button" href="#">
<i class="fas fa-download"></i> Free
</button>
</div>
<div class="fighting popular-card">
<img class="img_container" src="https://i.pinimg.com/736x/6f/03/74/6f0374cf9d91ae925bd998849d122a77--fighting-games-pc-games.jpg" alt="">
<h4 class="game_title">Street Fighter</h4>
<button class="download_button" href="#">
<i class="fas fa-download"></i> Play Now
</button>
</div>
</div>
</div>
CSS:
body, html {
margin: 0;
padding: 0;
font-family: 'Comfortaa', cursive;
}
.fire_games-nav {
color: #fff;
width: 100%;
height: 80px;
border: none;
z-index: 10;
display: flex;
position: fixed;
font-size: 1.0em;
background: rgba(255,255,255,0.9);
margin-top: -1px;
margin-left: -30px;
align-items: center;
box-shadow: 0px 0px 10px rgba(0,0,0 ,0.3)
}
.fire_games_logo a {
color: #fa3380;
margin-left: 3px;
font-size: 30px;
}
ul li {
list-style: none;
}
ul li a {
color: #666;
margin-left: 25px;
text-decoration: none;
transition: 400ms ease-in-out;
}
ul li a:hover {
color: #fa3380;
}
.new_games, .cats{
margin: 5px;
padding: 20px 30px 20px 5px;
background: #f1f1f1;
border-radius: 10px;
}
.register a{
color: #fff;
margin: 5px;
padding: 20px;
background: #f857a6;
background: -webkit-linear-gradient(to right, #ff5858, #f857a6);
background: linear-gradient(to right, #ff5858, #f857a6);
border-radius: 10px;
}
.register a:hover {
color: #fff;
background: #FF512F;
background: -webkit-linear-gradient(to right, #DD2476, #FF512F);
background: linear-gradient(to right, #DD2476, #FF512F);
}
.login a{
color: #666;
margin: 5px;
padding: 20px;
background: #f1f1f1;
border-radius: 10px;
}
.new_games,.cats, .login a, .register a {
box-shadow: 0px 0px 10px rgba(0,0,0 ,0.3);
transition: 300ms ease-in-out;
}
.new_games:hover,.cats:hover, .login a:hover, .register a:hover {
box-shadow: 0px 0px 10px rgba(0,0,0 ,0.5)
}
.fa-fingerprint, ,fa-shopware {
margin-right: 5px;
}
.fire_games_search {
padding-left: 20px;
margin-right: auto;
}
.fire_games_search input {
width: 130%;
outline: none;
border: none;
padding: 20px 0px 20px 50px;
position: relative;
font-size: 15px;
background: #f1f1f1;
border-radius: 7px;
box-shadow: 0px 0px 10px rgba(0,0,0 ,0.3);
transition: 400ms ease-in-out;
}
.fire_games_search input:hover {
box-shadow: 0px 0px 10px rgba(0,0,0 ,0.6);
}
.fire_games_search input:focus {
color: #fff;
background: #222;
box-shadow: 0px 0px 10px rgba(0,0,0 ,0.6);
}
.fa-search {
top: 32px;
color: #bbb;
position: absolute;
font-size: 20px;
margin-left: 15px;
}
/* PAGE GALLERY */
.wrapper {
top: 120px;
width: 100%;
text-align: center;
position: absolute;
}
.page_categories {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.gallery {
width: 175px;
height: 60px;
margin: 10px;
padding: 0 5px 0 10px;
border-radius: 4px;
transition: 200ms ease-in-out;
}
.gallery:hover {
cursor: pointer;
margin-top: 2px;
}
.gallery h1{
color: #fff;
font-size: 15px;
font-weight: 100;
margin-top: 22px;
}
.fighting_games {
background: #9CECFB;
background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);
background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);
box-shadow: 0 10px 20px lightblue;
}
.sports_games {
background: #ee0979;
background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);
background: linear-gradient(to right, #ff6a00, #ee0979);
box-shadow: 0 3px 40px tomato;
}
.girls_games {
background: #ff00cc;
background: -webkit-linear-gradient(to right, #333399, #ff00cc);
background: linear-gradient(to right, #333399, #ff00cc);
box-shadow: 0 10px 50px violet;
}
.racing_games {
background: #56ab2f;
background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);
background: linear-gradient(to right, #a8e063, #56ab2f);
box-shadow: 0 10px 40px lightgreen;
}
.shooting_games {
background: #FFB75E;
background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E);
background: linear-gradient(to right, #ED8F03, #FFB75E);
box-shadow: 0 3px 50px orange;
}
.RBG_games {
background: #00C9FF;
background: -webkit-linear-gradient(to right, #92FE9D, #00C9FF);
background: linear-gradient(to right, #92FE9D, #00C9FF);
box-shadow: 0 0px 50px aqua;
}
/* BOTTOM CARDS */
.popular_title {
margin-top: 40px;
}
.popular_games {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.popular-card {
width: 190px;
height: 300px;
margin: 10px;
background: #000;
border-radius: 4px;
transition: 200ms ease-in-out;
}
.popular-card:hover {
margin-top: -1px;
}
.popular_games {
width: 100%;
margin-top: 50px;
}
.shooting {
background: #FFB75E;
background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E);
background: linear-gradient(to right, #ED8F03, #FFB75E);
box-shadow: 0 3px 20px orange;
}
.sports {
background: #ee0979;
background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);
background: linear-gradient(to right, #ff6a00, #ee0979);
box-shadow: 0 3px 40px tomato;
}
.fighting {
background: #9CECFB;
background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);
background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB);
box-shadow: 0 10px 20px lightblue;
}
.racing {
background: #56ab2f;
background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);
background: linear-gradient(to right, #a8e063, #56ab2f);
box-shadow: 0 10px 40px lightgreen;
}
.girls {
background: #ff00cc;
background: -webkit-linear-gradient(to right, #333399, #ff00cc);
background: linear-gradient(to right, #333399, #ff00cc);
box-shadow: 0 10px 40px violet;
}
.RBG {
background: #00C9FF;
background: -webkit-linear-gradient(to right, #92FE9D, #00C9FF);
background: linear-gradient(to right, #92FE9D, #00C9FF);
box-shadow: 0 0px 50px aqua;
}
.img_container {
width: 120px;
height: 120px;
margin: 30px auto;
border-radius: 100px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0px 30px rgba(0,0,0,0.5);
}
.game_title {
color: #fff;
font-size: 20px;
margin-top: -20px;
font-weight: 100;
}
.download_button {
color: #fff;
width: 65%;
border: none;
padding: 15px;
outline: none;
background: rgba(225,225,225,0.2);
margin-top: 10px;
font-size: 15px;
border-radius: 9px;
text-decoration: none;
box-shadow: 0 0px 20px rgba(0,0,0,0.2);
transition: 200ms ease-in-out;
}
.download_button:hover {
cursor: pointer;
transform: scale(1.1);
background: rgba(225,225,225,0.4);
}
@media only screen and (max-width: 1105px) {
.new_games {
display: none;
}
}
@media only screen and (max-width: 913px) {
.cats {
display: none;
}
}
@media only screen and (max-width: 737px) {
.register {
display: none;
}
}
@media only screen and (max-width: 617px) {
.login {
display: none;
}
}
@media only screen and (max-width: 450px) {
.fire_games_search input {
width: 90%;
}
}
@media only screen and (max-width: 490px) {
.fire_games_search input, .fa-search {
display: none;
}
.fire_games_logo {
width: 100%;
text-align: center;
}
}
/* FOLLOW*/
.Follow { background:url("https://pbs.twimg.com/profile_images/959092900708544512/v4Db9QRv_bigger.jpg")no-repeat center / contain;
width: 50px;
height: 50px;
bottom: 9px;
right: 20px;
display:block;
position:fixed;
border-radius:50%;
z-index:999;
animation: rotation 10s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}