here`s the jsfiddle link of my code :
https://jsfiddle.net/meemtech/4e5h3mvy/
<pre><pre><!Doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=Irish+Grover&display=swap" rel="stylesheet">
<style>
</style>
</head>
<body>
<!--
<div class="nav-main">
<div class="row">
Home </div>
<div class="row">
Best Games ^__i class="fa fa-star" style="font-size: 20px"__^</i__^
</div>
<div class="row">
New Games ^__i class="fa fa-plus-circle" style="font-size: 20px"__^
</div>
<div class="row">
WebGL ^__i class="fa fa-cogs" style="font-size: 20px"__^
</div>
<div class="row">
MAtch 3 ^__i class="fa fa-link" style="font-size: 20px"__^
</div>
<div class="row">
Racing ^__i class="fa fa-car" style="font-size: 20px"__^
</div>
<div class="row">
Summer Games ^__i class="fa fas fa-sun" style="font-size: 20px"__^
</div>
<div class="row">
Soccer^__i class="fas fa-futbol" style="font-size: 20px"__^
</div>
<div class="row">
Girls ^__i class="fa fa-female" style="font-size: 20px"__^
</div>
<div class="row">
Sports ^__i class="fas fa-table-tennis" style="font-size: 20px"__^
</div>
<div class="row">
Multiplayer ^__i class="fas fa-users" style="font-size: 20px"__^
</div>
<div class="row">
Puzzle ^__i class="fas fa-puzzle-piece" style="font-size: 20px"__^
</div>
<div class="row">
Bubble Shooter ^__i class="fas fa-circle" style="font-size: 20px"__^
</div>
<div class="row">
Cards ^__i class="fa fa-th-large" style="font-size: 20px"__^
</div>
<div class="row">
Bubble Shooter ^__i class="fas fa-circle" style="font-size: 20px"__^
</div>
<div class="row">
Cards ^__i class="fa fa-th-large" style="font-size: 20px"__^
</div>
<div class="row">
Quiz ^__i class="fa fa-question-circle" style="font-size: 20px"__^
</div>
<div class="row">
Skill ^__i class="fa fa-bullseye" style="font-size: 20px"__^
</div>
<div class="row">
Action ^__i class="fa fa-rocket" style="font-size: 20px"__^
</div>
<div class="row">
Time & Srategy^__i class="fa fa-clock" style="font-size: 20px"__^
</div>
<div class="row">
Arcade ^__i class="fa fa-gamepad" style="font-size: 20px"__^
</div>
<div class="row">
Mahjong ^__i class="fas fa-yen-sign" style="font-size: 20px"__^
</div>
<div class="row">
Educational ^__i class="fa fa-graduation-cap" style="font-size: 20px"__^
</div>
<div class="row">
Board Games ^__i class="fas fa-chess-board" style="font-size: 20px"__^
</div>
<div class="row">
Platform ^__i class="fa fa-cubes" style="font-size: 20px"__^
</div>
<div class="row">
Casino ^__i class="fa fa-money-bill-alt" style="font-size: 20px"__^
</div>
</div>
<!--
<!--
<div class="relative">
<button class=pleft>
Best
</button>
<button class=pright>
More >>
</button>
<div class='main container cf-display-container'>
<div class='s1 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%; position:absolute">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
<p class="dhover cf-shadowr">Exclusive</p>
</div>
<div class='s2 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
<p class="dhover cf-shadow" style="width: 30px;">New</p>
</div>
<div class='s3 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
</div>
<div class='s4 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
</div>
<div class='s5 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
</div>
<div class='s6 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
</div>
<div class='s7 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
</div>
<div class='s8 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
</div>
</div>
</div>
<!--
<!--
<div class="relative">
<button class=pleft>
Best
</button>
<button class=pright>
More >>
</button>
<div class='main cf-display-container'>
<div class='s1 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%; position:absolute">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
<p class="dhover cf-shadowr">Exclusive</p>
</div>
<div class='s2 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
<p class="dhover cf-shadow" style="width: 30px;">New</p>
</div>
<div class='s3 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
</div>
<div class='s4 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"__^</button></a>
</div>
<div class='s5 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"></button></a>
</div>
<div class='s6 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"></button></a>
</div>
<div class='s7 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"></button></a>
</div>
<div class='s8 c-shadow'>
<img src="https://img.cdn.famobi.com/portal/html5games/images/tmp/BubbleWoodsTeaser.jpg" alt="Bubble Wood" style="height:100%; width:100%;">
<a href="https://play.famobi.com/bubble-woods/A-MOI9T"><button class="play">Play ^__i class="fa fa-soccer-ball-o cf-spin"></button></a>
</div>
</div>
</div>
<!--
</body>
</html>
/pre>
<pre>body {
background-color: DarkOrchid;
}
* {
font-family: Irish Grover, Balsamiq Sans, cursive;
}
.relative {
position: relative;
display: block;
max-width: 400px;
margin: auto;
}
.container {
border: solid 1px #ff0000;
zoom: 1;
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.pleft {
display: inline-block;
margin-left: 10px;
font-size: 30px;
background-color: transparent;
border: none;
color: white;
}
.pright {
position: absolute;
display: inline-block;
right: 10px;
font-size: 30px;
background-color: transparent;
border: none;
color: white;
}
.main {
position: absolute;
height: 400px;
width: 98%;
background-color: white;
margin: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cf-shadow {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.play {
position: absolute;
bottom: 40%;
padding: 10px 10px;
border-radius: 15px;
color: red;
background-color: white;
font-size: 20px;
text-align: center;
display: none;
}
.play:hover {
background-color: red;
color: white;
}
.play:hover .cf-spin {
animation: cf-spin 2s infinite linear;
}
@keyframes cf-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.dhover {
position: absolute;
display: block;
bottom: 0px;
width: 65px;
color: white;
background-color: OrangeRed;
padding: 4px;
text-align: center;
border-right: 3px solid white;
}
.s1 {
position: absolute;
top: 0px;
left: 0px;
height: 49%;
width: 65%;
margin: 2px;
overflow: hidden;
}
.s1:hover {
opacity: 0.6;
}
.s1:hover .play {
display: block;
}
.s1:hover .dhover {
display: none;
}
.s2 {
position: absolute;
top: 0px;
right: 0px;
height: 24%;
width: 32%;
margin: 2px;
overflow: hidden;
}
.s2:hover {
opacity: 0.6;
}
.s2:hover .play {
display: block;
}
.s2:hover .dhover {
display: none;
}
.s3 {
position: absolute;
top: 25%;
right: 0px;
height: 24%;
width: 32%;
margin: 2px;
overflow: hidden;
}
.s3:hover {
opacity: 0.6;
}
.s3:hover .play {
display: block;
}
.s3:hover .dhover {
display: none;
}
.s4 {
position: absolute;
top: 50%;
right: 0px;
height: 24%;
width: 32%;
margin: 2px;
overflow: hidden;
}
.s4:hover {
opacity: 0.6;
}
.s4:hover .play {
display: block;
}
.s4:hover .dhover {
display: none;
}
.s5 {
position: absolute;
top: 50%;
left: 33%;
height: 24%;
width: 32%;
margin: 2px;
overflow: hidden;
}
.s5:hover {
opacity: 0.6;
}
.s5:hover .play {
display: block;
}
.s5:hover .dhover {
display: none;
}
.s6 {
position: absolute;
top: 50%;
left: 0px;
height: 24%;
width: 32.5%;
margin: 2px;
overflow: hidden;
}
.s6:hover .play {
display: block;
}
.s6:hover .dhover {
display: none;
}
.s6:hover {
opacity: 0.6;
}
.s7 {
position: absolute;
bottom: 0px;
height: 24.3%;
width: 65%;
margin: 2px;
overflow: hidden;
}
.s7:hover {
opacity: 0.6;
}
.s7:hover .play {
display: block;
}
.s7:hover .dhover {
display: none;
}
.s8 {
position: absolute;
bottom: 0;
right: 0px;
height: 24%;
width: 32%;
margin: 2px;
overflow: hidden;
}
.s8:hover {
opacity: 0.6;
}
.s8:hover .play {
display: block;
}
.s8:hover .dhover {
display: none;
}
img {
display: block;
position: absolute;
margin: 2px;
border: 2px solid Cyan;
}
.nav-main {
position: relative;
display: block;
max-width: 170px;
height: 400px;
background-color: black;
float: left;
}
.row {
display: block;
background-color: DarkOrchid;
height: 25px;
width: 170px;
border: 1px solid gold;
margin-top: 1px;
color: white;
font-family: Irish Grover, Balsamiq Sans, Cursive;
}
.row:hover {
background-color: gold;
color: black;
}
i {
float: right;
}
What I have tried:
<pre>.container {
border: solid 1px #ff0000;
zoom: 1;
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}