<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AntenaGames</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<div class="header">
<div class="left-h">
<h1>Games</h1>
</div>
<div class="right-h">
<button class="btn btn-grid-list" onclick="addClassFunction()">
<i class="material-icons md-24" id="icon">view_list</i>
</button>
</div>
</div>
<div class="container">
<div class="col-3">
<div class="book">
<div class="first">
<p class="top-title">Cover</p>
</div>
<div class="second">
<p class="title top-title">Title</p>
<p class="quote top-title">Quote</p>
<p class="author top-title">Author</p>
</div>
<div class="footer">
<p class="top-title">Likes</p>
</div>
<!-- end footer -->
</div>
<!-- end book-box -->
</div>
<div class="col-3">
<div class="first-four book">
<div class="first">
<a href="http://www.antenagames.com" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1587646376/grid_list_kr5obn.svg" alt="book" style="width:40px;">
</a>
</div>
<div class="second">
<h5 class="title"><a href="http://www.antenagames.com" target="_blank">BallBoy - Ball and Cubes</a></h5>
<p class="quote">
It was a beautiful sunny day. BallBoy and his friend BallGirl enjoyed singing in the garden, when suddenly the sky darkened and strong noise filled the sky. Evil cubes suddenly appeared from neighbour village and kidnapped BallGirl. BallBoy was completely hopeless.
</p>
<p class="author">AntenaGames</p>
</div>
<div class="footer">
<div class="left">
<span class="star "><i class=" material-icons md-22">star</i></span>
<span class="star-num ">16</span>
</div>
<div class="right">
<button id="b1" class="btn-dropdown btn-right btn" onclick="dropdownFunction()">
<i class="material-icons md-24 dots">more_horiz</i>
</button>
</div>
</div>
<!-- end footer -->
</div>
<ul id="d1" class="dropdown-content">
<li><a href="#" class="list">Edit book details</a></li>
<li><a href="#" class="list">Duplicate book</a></li>
<li><a href="#" class="list">Move book</a></li>
<li><a href="#" class="list">Delete book
<br /><span class="sublist">Delete this book permanently</span></a>
</li>
</ul>
<!-- end book-box -->
</div>
<div class="col-3">
<div class="first-four book">
<div class="first">
<a href="http://www.antenagames.com" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1587646376/grid_list_kr5obn.svg" alt="book" style="width:40px;">
</a>
</div>
<div class="second">
<h5 class="title"><a href="http://www.antenagames.com" target="_blank">BallBoy Plus - Cubes</a></h5>
<p class="quote">
You can defeat evil cubes if the ball has the same color as evil cube when they collide. Touch/press left part of screen for moving the character(ball) left. Touch/press right part of screen for moving the character right.
</p>
<p class="author">AntenaGames Studio</p>
</div>
<div class="footer">
<div class="left">
<span class="star"><i class="material-icons md-22 ">star</i></span>
<span class="star-num ">28</span>
</div>
<div class="right">
<button id="b2" class="btn-dropdown btn" onclick="dropdownFunction()">
<i class="material-icons md-24 dots ">more_horiz</i>
</button>
</div>
</div>
<!-- end footer -->
</div>
<ul id="d2" class="dropdown-content">
<li><a href="#" class="list">Edit book details</a></li>
<li><a href="#" class="list">Duplicate book</a></li>
<li><a href="#" class="list">Move book</a></li>
<li><a href="#" class="list">Delete book
<br /><span class="sublist">Delete this book permanently</span></a>
</li>
</ul>
<!-- end book-box -->
</div>
<div class="col-3">
<div class="first-four book">
<div class="first">
<a href="http://www.antenagames.com" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1587646376/grid_list_kr5obn.svg" alt="book" style="width:40px;">
</a>
</div>
<div class="second">
<h5 class="title"><a href="http://www.antenagames.com" target="_blank">BallBoy Go - Ball and Cubes</a></h5>
<p class="quote">
BallBoy has to defeat evil cubes and save BallGirl. So help him on his mission.
</p>
<p class="author">AntenaGames</p>
</div>
<div class="footer">
<div class="left">
<span class="star"><i class="material-icons md-22 ">star</i></span>
<span class="star-num ">19</span>
</div>
<div class="right">
<button id="b3" class="btn-dropdown btn" onclick="dropdownFunction()">
<i class="material-icons md-24 dots ">more_horiz</i>
</button>
</div>
</div>
<!-- end footer -->
</div>
<!-- end book-box -->
<ul id="d3" class="dropdown-content">
<li><a href="#" class="list">Edit book details</a></li>
<li><a href="#" class="list">Duplicate book</a></li>
<li><a href="#" class="list">Move book</a></li>
<li><a href="#" class="list">Delete book
<br /><span class="sublist">Delete this book permanently</span></a>
</li>
</ul>
</div>
<div class="col-3">
<div class="first-four book">
<div class="first">
<a href="http://www.antenagames.com" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1587646376/grid_list_kr5obn.svg" alt="book" style="width:40px;">
</a>
</div>
<div class="second">
<h5 class="title"><a href="http://www.antenagames.com" target="_blank">BallBoy - Cubes and Ball</a></h5>
<p class="quote">
You can defeat evil cubes if the ball has the same color as evil cube when they collide. Touch/press left part of screen for moving the character(ball) left. Touch/press right part of screen for moving the character right. Cubes have four colors(blue, red, green and yellow).
</p>
<p class="author">AntenaGames Studio</p>
</div>
<div class="footer">
<div class="left">
<span class="star"><i class="material-icons md-22 ">star</i></span>
<span class="star-num ">8</span>
</div>
<div class="right">
<button id="b4" class="btn-dropdown btn" onclick="dropdownFunction()">
<i class="material-icons md-24 dots ">more_horiz</i>
</button>
</div>
</div>
<!-- end footer -->
</div>
<!-- end book-box -->
<ul id="d4" class="dropdown-content">
<li><a href="#" class="list">Edit book details</a></li>
<li><a href="#" class="list">Duplicate book</a></li>
<li><a href="#" class="list">Move book</a></li>
<li><a href="#" class="list">Delete book
<br /><span class="sublist">Delete this book permanently</span></a>
</li>
</ul>
</div>
<div class="col-3">
<div class="book">
<div class="first">
<a href="http://www.antenagames.com" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1587646376/grid_list_kr5obn.svg" alt="book" style="width:40px;">
</a>
</div>
<div class="second">
<h5 class="title"><a href="http://www.antenagames.com" target="_blank">BallBoy Plus - Colors</a></h5>
<p class="quote">
Evil cubes suddenly appeared from neighbour village and kidnapped BallGirl. BallBoy was completely hopeless. BallBoy has to defeat evil cubes and save BallGirl. So help him on his mission.
</p>
<p class="author">AntenaGames</p>
</div>
<div class="footer">
<div class="left">
<span class="star"><i class="material-icons md-22 ">star</i></span>
<span class="star-num ">11</span>
</div>
<div class="right">
<button id="b5" class="btn-dropdown btn" onclick="dropdownFunction()">
<i class="material-icons md-24 dots ">more_horiz</i>
</button>
</div>
</div>
<!-- end footer -->
</div>
<!-- end book-box -->
<ul id="d5" class="dropdown-content">
<li><a href="#" class="list">Edit book details</a></li>
<li><a href="#" class="list">Duplicate book</a></li>
<li><a href="#" class="list">Move book</a></li>
<li><a href="#" class="list">Delete book
<br /><span class="sublist">Delete this book permanently</span></a>
</li>
</ul>
</div>
<div class="col-3">
<div class="book">
<div class="first">
<a href="http://www.antenagames.com" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1587646376/grid_list_kr5obn.svg" alt="book" style="width:40px;">
</a>
</div>
<div class="second">
<h5 class="title"><a href="http://www.antenagames.com" target="_blank">BallBoy Go - Colors</a></h5>
<p class="quote">
Touch/press left part of screen for moving the character(ball) left. Touch/press right part of screen for moving the character right.
</p>
<p class="author">AntenaGames Studio</p>
</div>
<div class="footer">
<div class="left">
<span class="star"><i class="material-icons md-22 ">star</i></span>
<span class="star-num ">21</span>
</div>
<div class="right">
<button id="b6" class="btn-dropdown btn" onclick="dropdownFunction()">
<i class="material-icons md-24 dots ">more_horiz</i>
</button>
</div>
</div>
<!-- end footer -->
</div>
<!-- end book-box -->
<ul id="d6" class="dropdown-content">
<li><a href="#" class="list">Edit book details</a></li>
<li><a href="#" class="list">Duplicate book</a></li>
<li><a href="#" class="list">Move book</a></li>
<li><a href="#" class="list">Delete book
<br /><span class="sublist">Delete this book permanently</span></a>
</li>
</ul>
</div>
<div class="col-3">
<div class="book">
<div class="first">
<a href="http://www.antenagames.com" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1587646376/grid_list_kr5obn.svg" alt="book" style="width:40px;">
</a>
</div>
<div class="second">
<h5 class="title"><a href="http://www.antenagames.com" target="_blank">BallBoy - Color Ball</a></h5>
<p class="quote">
It was a beautiful sunny day. BallBoy and his friend BallGirl enjoyed singing in the garden, when suddenly the sky darkened and strong noise filled the sky.
</p>
<p class="author">AntenaGames</p>
</div>
<div class="footer">
<div class="left">
<span class="star"><i class="material-icons md-22 ">star</i></span>
<span class="star-num ">13</span>
</div>
<div class="right">
<button id="b7" class="btn-dropdown btn" onclick="dropdownFunction()">
<i class="material-icons md-24 dots ">more_horiz</i>
</button>
</div>
</div>
<!-- end footer -->
</div>
<!-- end book-box -->
<ul id="d7" class="dropdown-content">
<li><a href="#" class="list">Edit book details</a></li>
<li><a href="#" class="list">Duplicate book</a></li>
<li><a href="#" class="list">Move book</a></li>
<li><a href="#" class="list">Delete book
<br /><span class="sublist">Delete this book permanently</span></a>
</li>
</ul>
</div>
<div class="col-3">
<div class="book">
<div class="first">
<a href="http://www.antenagames.com" target="_blank">
<img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1587646376/grid_list_kr5obn.svg" alt="book" style="width:40px;">
</a>
</div>
<div class="second">
<h5 class="title"><a href="http://www.antenagames.com" target="_blank">BallBoy Plus - Ball and Cubes</a></h5>
<p class="quote">
You can defeat evil cubes if the ball has the same color as evil cube when they collide. Touch/press left part of screen for moving the character(ball) left. Touch/press right part of screen for moving the character right. Cubes have four colors(blue, red, green and yellow). The game has 45 awesome and well-designed levels.
</p>
<p class="author">AntenaGames Studio</p>
</div>
<div class="footer">
<div class="left">
<span class="star"><i class="material-icons md-22 ">star</i></span>
<span class="star-num ">18</span>
</div>
<div class="right">
<button id="b8" class="btn-dropdown btn" onclick="dropdownFunction()">
<i class="material-icons md-24 dots ">more_horiz</i>
</button>
</div>
</div>
<!-- end footer -->
</div>
<!-- end book-box -->
<ul id="d8" class="dropdown-content">
<li><a href="#" class="list">Edit book details</a></li>
<li><a href="#" class="list">Duplicate book</a></li>
<li><a href="#" class="list">Move book</a></li>
<li><a href="#" class="list">Delete book
<br /><span class="sublist">Delete this book permanently</span></a>
</li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
button:focus {
outline: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a:link {
text-decoration: none;
}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-22 { font-size: 22px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
@media (max-width: 780px) {
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
width: 50%;
}
}
@media (max-width: 480px) {
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
width: 100%;
}
}
.header {
width: 90%;
margin: auto;
display: -webkit-flex;
-webkit-justify-content: space-around;
display: flex;
justify-content: space-around;
justify-content:space-between;
-webkit-align-items: center;
align-items: center;
}
.header h1 {
font-size: 21px;
font-weight: 500;
}
.header .left-h {
margin-left: 15px;
}
.header .right-h {
margin-right: 10px;
}
.btn {
border-radius: 0;
border: none;
cursor: pointer;
background-color: transparent;
width: 100%;
height: 100%;
margin: 0;
}
.first p, .second p, .footer p {
padding-bottom: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
width: 90%;
margin-right: auto;
margin-left: auto;
}
.col-3 .book {
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
box-shadow: 0px 0px 1px 1px #ccc;
}
.col-3 .book > * {
padding: 10px;
flex: 1 100%;
}
.col-3 .book .first {
-webkit-flex: 1;
flex: 1;
background-color: #ff471a;
order: 1;
}
.col-3 .book .second {
display: flex;
flex-direction: column;
-webkit-flex: 4;
flex: 4;
background-color: #fff;
padding-top: 0;
padding-bottom: 0;
order: 2;
height: 250px;
}
.col-3 .book .second a {
color: #252525;
}
.col-3 .first-four .second{
height: 210px;
}
.col-3 .book .title {
font-size: 1em;
font-weight: 700;
margin: 15px 0;
color: #252525;
}
.col-3 .book .quote {
font-size: 0.85714em;
color: rgba(50, 50, 50, .8);
margin: 0 auto;
overflow: hidden;
}
.col-3 .book .author {
font-size: 0.78571em;
color: rgba(50, 50, 50, .6);
}
.col-3 .book .footer {
display: -webkit-flex;
display: flex;
flex-direction: row;
background-color: #ffff1a;
order: 3;
padding: 0;
}
.col-3 .footer .left {
text-align: left;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
-webkit-flex: 4;
flex: 4;
display: inline-flex;
color: #252525;
}
.star {
padding-right: 0;
cursor: pointer;
}
.star-num {
padding-left: 5px;
margin: auto 0;
font-size: 14px;
}
.col-3 .footer .right {
text-align: center;
-webkit-flex: 1;
flex: 1;
background-color: ;
justify-content: center;
align-items: center;
color: #252525;
}
.btn-dropdown {
border-radius: 0;
background-color: transparent;
cursor: pointer;
color: #252525;
justify-content: center;
align-items: center;
display: flex;
}
.dropdown-content {
display: none;
-webkit-flex: 1;
flex: 1;
flex-direction: column;
position: relative;
background-color: rgb(40, 40, 40);
overflow: none;
z-index: 999;
}
.dropdown-content a {
color: #fff;
text-align: right;
font-size: 0.92857em;
padding: 10px;
}
.dropdown-content a:first-child {
padding-top: 10px;
}
.dropdown-content .sublist {
font-size: 0.64285em;
padding-top: 0;
padding-bottom: 7px;
color: grey;
}
.dropdown-content a:hover {
background-color: rgb(50, 50, 50);
}
.col-3:first-child {
display: none;
}
.show {
display: block;
}
/***** List *****/
.list {
width: 100%;
padding: 0 15px;
}
.list > .book {
display: flex;
flex-direction: row;
box-shadow: 0px 0px 1px 1px #aaa;
height: 60px;
}
.list > .book > * {
padding: 0px !important;
flex: 1 100% ;
}
.list > .book .first {
order: 2;
flex: 1;
background-color: #ff471a;
justify-content: center;
padding: 0 5px;
text-align: center;
}
.list > .book .second {
display: flex;
flex-direction: row;
order: 1;
flex: 16;
padding-top: 12px !important;
padding-bottom: 12px !important;
height: 60px !important;
background-color: #fff;
}
.list > .book .title {
order: 1;
flex: 5;
font-size: 1em;
font-weight: 700;
padding-left: 20px;
margin: auto 0;
}
.list > .book .quote {
flex: 7;
order: 2;
font-size: 0.85714em;
color: rgba(50, 50, 50, .8);
line-height: 1.5em;
display: -webkit-box;
display: box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
overflow: hidden;
-moz-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.list > .book .author {
flex: 4;
order: 3;
font-size: 0.78571em;
color: rgba(50, 50, 50, .6);
text-align: right;
padding-right: 40px;
margin: auto 0;
}
.list > .book .footer {
display: flex;
order: 3;
flex: 4;
background-color: !important;
align-content: stretch;
}
.list .footer .left {
text-align: left;
padding-left: 20px;
-webkit-flex: 4;
flex: 5;
background-color: white;
height: 100%;
align-items: center;
}
.list .footer .right {
-webkit-flex: 1;
flex: 2;
background-color: white;
height: 100%;
}
.list:first-child {
display: block;
}
.list:first-child .book {
display: flex;
align-items: center;
height: 30px;
box-shadow: none;
margin: auto 0;
padding: auto 0;
}
.list:first-child .first,
.list:first-child .second,
.list:first-child .footer {
background-color: transparent !important;
}
.list:first-child .footer .top-title {
padding-left: 20px;
}
.list:first-child .top-title {
font-size: 0.85714em;
font-weight: 500 !important;
color: black;
margin: auto 0;
}
/* Dropdown */
var i=0;
var leftF = document.getElementsByClassName("left");
var rightF = document.getElementsByClassName("right");
function dropdownFunction() {
var buttonID = ['b1', 'b2','b3', 'b4','b5', 'b6','b7', 'b8'];
var dropdownID = ['d1', 'd2','d3', 'd4','d5', 'd6','d7', 'd8'];
var targetButton = event.target.id;
for (var i=0; i<buttonID.length; i++) {
var idButton = buttonID[i];
var idDropdown = dropdownID[i];
if (targetButton === idButton) {
var targetDropDown = document.getElementById(idDropdown);
targetDropDown.classList.add("show");
leftF[i].style.backgroundColor = '#55aacc';
leftF[i].style.color = 'white';
rightF[i].style.backgroundColor = 'rgb(40, 40, 40)';
rightF[i].style.color = 'white';
idButton=buttonID.length;
}
}
}
window.onclick = function(event) {
if (!event.target.matches('.btn-dropdown')) {
var dropdowns = document.getElementsByClassName('dropdown-content');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
leftF[i].style.backgroundColor = '#B2EBEF';
leftF[i].style.color = '#666666';
rightF[i].style.backgroundColor = '#B2EBEF';
rightF[i].style.color = '#666666';
}
}
}
}
/* Grid - List */
function addClassFunction() {
var listGrid = ['view_list', 'view_comfy'];
i++;
var element = document.getElementById("icon");
element.innerHTML = listGrid[i];
if (i == listGrid.length -1) {
i = -1;
}
var elementList = document.getElementsByClassName("col-3");
for (j = 0; j < elementList.length; j++) {
elementList[j].classList.toggle("list");
}
}
