Skip to content

Instantly share code, notes, and snippets.

@ohsoren

ohsoren/index.html

Created November 27, 2016 17:35
Show Gist options
  • Save ohsoren/af8b635f6f75d9ae29645e3c9e25babf to your computer and use it in GitHub Desktop.
Save ohsoren/af8b635f6f75d9ae29645e3c9e25babf to your computer and use it in GitHub Desktop.
Download ZIP
pNwWyY
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Asian Casino</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<!-- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">-->
<meta name="viewport" content="width=device-width">
</head>
<body>
<section class="grid">
<div class="grid-item header">
<div class="grid-item-content">
<img src="images/mobile-header.png" alt="hi lo" class="iph6" />
<img src="images/mobile-header-6plus.png" alt="hi lo" class="iph6plus" />
</div>
</div>
<div class="grid-item main-banner">
<div class="grid-item container">
<img src="images/girls.png" alt="girls" class="girls" />
<div class="circle-one"></div>
<div class="circle-two"></div>
<div class="circle-three"></div>
<div class="circle-four"></div>
<div class="circle-five"></div>
<div class="circle-six"></div>
<div class="circle-severn"></div>
<div class="circle-eight"></div>
<div class="circle-nine"></div>
<div class="circle-ten"></div>
</div>
<div class="grid-item title">
<div class="grid-item-content">
<h1>Live Casino</h1>
<p>Play with live dealers and get 0.4% rebate on all games</p>
<a href="#" class="btn">Play Now</a>
</div>
</div>
</div>
<div class="grid-item feature-banner">
<div class="grid-item-content">
<div class="heading">
<p>Live</p>
<h2>Baccarat</h2>
</div>
<img src="images/baccarat.png" alt="baccarat" />
</div>
</div>
<div class="grid-item feature-banner">
<div class="grid-item-content">
<div class="heading">
<p>Live</p>
<h2>Sic Bo</h2>
</div>
<img src="images/sic-bo.png" alt="sic bo" />
</div>
</div>
<div class="grid-item banner">
<div class="grid-item-content">
<div class="heading">
<p>Live</p>
<h2>Hi Lo</h2>
</div>
<img src="images/hi-lo.png" alt="hi lo" />
</div>
</div>
<div class="grid-item banner">
<div class="grid-item-content">
<div class="heading">
<p>Live</p>
<h2>Roulette</h2>
</div>
<img src="images/roulette.png" alt="hi lo" />
</div>
</div>
<div class="grid-item banner">
<div class="grid-item-content">
<div class="heading">
<p>Live</p>
<h2>Blackjack</h2>
</div>
<img src="images/blackjack.png" alt="hi lo" />
</div>
</div>
<div class="grid-item desktop-banner">
<div class="grid-item-content">
<div class="heading">
<h2 class="subtitle">Also available on desktop</h2>
<p>Play Blackjack, Roulette and Baccarat</p>
<a href="#" class="btn">More Details</a>
</div>
<img src="images/girls-sm-banner.png" class="girls-sm-banner" />
</div>
</div>
<div class="grid-item vip">
<div class="grid-item-content">
<div class="align-centre">
<h2>Vip</h2>
<p class="subtitle">scheme</p>
</div>
<p class="rewards">Rewards for playing</p>
</div>
</div>
<div class="grid-item games-title">
<div class="grid-item-content">
<h2>Other Games</h2>
<a href="#">View more games</a>
</div>
</div>
<div class="grid-item game">
<div class="grid-item-content">
<img src="images/wu-long.png" alt="hi lo" />
<div class="game-name">Wu Long</div>
</div>
</div>
<div class="grid-item game">
<div class="grid-item-content">
<img src="images/fortune-jump.png" alt="hi lo" />
<div class="game-name">Fortune Jump</div>
</div>
</div><div class="grid-item game">
<div class="grid-item-content">
<img src="images/lucky-pirates.png" alt="hi lo" />
<div class="game-name">Lucky Pirates</div>
</div>
</div>
<div class="grid-item game">
<div class="grid-item-content">
<img src="images/zhao-cai-jin-bao.png" alt="hi lo" />
<div class="game-name">Zhao Cai Jin Bao</div>
</div>
</div>
</section>
</body>
</html>
Raw
style.scss
body {
margin: 0;
padding: 0;
background: #731616;
font-family: futura, sans-serif;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.grid {
box-sizing: border-box;
margin-left: -6px;
font-size: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
position: relative;
}
.grid-item {
box-sizing: inherit;
padding-left: 6px;
display: inline-block;
transition: all ease-in-out 0.3s;
-webkit-transition: all ease-in-out 0.3s;
-webkit-flex: 1 1 50%;
position: relative;
flex: 1 1 50%;
-webkit-flex: 1 1 50%;
vertical-align: top;
margin-bottom: 6px;
}
.grid-item-content img {
width: 100%;
}
.heading {
overflow: auto;
margin: auto;
position: absolute;
top: 10%;
left: 0;
right: 0;
}
.heading h2,
.heading p {
text-align: center;
font-weight: normal;
margin: 0;
padding: 0;
}
.heading p {
color: #fff;
font-size: 13px;
line-height: 13px;
}
.heading h2 {
color: #FFAD00;
text-transform: uppercase;
font-size: 20px;
}
.btn {
width: 110px;
height: 25px;
border: 1px solid #FDBB48;
border-radius: 2px;
display: inline-block;
color: #FDBB48;
text-transform: uppercase;
font-size: 12px;
text-decoration: none;
line-height: 23px;
font-weight: normal;
text-align: center;
}
.girls {
width: 230px;
top: 20px;
z-index: 10;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.circle-one {
filter: blur(2px);
-webkit-filter: blur(2px);
width: 10px;
height: 10px;
background: #732121;
position: absolute;
top: 10%;
left: 10%;
border-radius: 100%;
opacity: 0.5;
-webkit-animation: flashing-lights 3s cubic-bezier(0.6, -0.28, 0.74, 0.05) alternate infinite;
animation: flashing-lights 3s cubic-bezier(0.6, -0.28, 0.74, 0.05) alternate infinite;
}
.circle-two {
filter: blur(4px);
-webkit-filter: blur(4px);
width: 40px;
height: 40px;
background: #9a3d2d;
position: absolute;
top: 8%;
left: 40%;
border-radius: 100%;
opacity: 0.5;
animation-delay: 2s;
-webkit-animation-delay: 2s;
-webkit-animation: flashing-lights 3.5s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 3.5s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
.circle-three {
filter: blur(3px);
-webkit-filter: blur(3px);
width: 25px;
height: 25px;
background: rgba(247, 114, 54, 0.17);
position: absolute;
top: 10%;
right: 44%;
border-radius: 100%;
opacity: 0.5;
animation-delay: 1s;
-webkit-animation-delay: 1s;
-webkit-animation: flashing-lights 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
.circle-four {
-webkit-filter: blur(4px);
width: 30px;
height: 30px;
background: #9a2c2c;
position: absolute;
top: 38%;
right: 40%;
border-radius: 100%;
opacity: 0.5;
animation-delay: 4s;
-webkit-animation-delay: 4s;
-webkit-animation: flashing-lights 2.5s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 2.5s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
.circle-five {
-webkit-filter: blur(3px);
width: 25px;
height: 25px;
background: #732121;
position: absolute;
bottom: 28%;
right: 11%;
border-radius: 100%;
opacity: 1;
animation-delay: 3s5t;
-webkit-animation-delay: 3s;
-webkit-animation: flashing-lights 3s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 3s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
.circle-five {
-webkit-filter: blur(3px);
width: 35px;
height: 35px;
background: #731d12;
position: absolute;
bottom: 28%;
right: 11%;
border-radius: 100%;
opacity: 1;
animation-delay: 3s;
-webkit-animation-delay: 3s;
-webkit-animation: flashing-lights 3s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 3s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
.circle-six {
-webkit-filter: blur(2px);
width: 15px;
height: 15px;
background: #651d1d;
position: absolute;
top: 28%;
right: 11%;
border-radius: 100%;
opacity: 1;
animation-delay: 0s;
-webkit-animation-delay: 0s;
-webkit-animation: flashing-lights 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
.circle-severn {
-webkit-filter: blur(2px);
width: 20px;
height: 20px;
background: #742622;
position: absolute;
top: 38%;
left: 13%;
border-radius: 100%;
opacity: 1;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-webkit-animation: flashing-lights 2.5s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 2.5s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
.circle-eight {
-webkit-filter: blur(2px);
width: 35px;
height: 35px;
background: rgba(116, 43, 34, 0.49);
position: absolute;
top: 42%;
left: 7%;
border-radius: 100%;
opacity: 1;
animation-delay: 1s;
-webkit-animation-delay: 1s;
-webkit-animation: flashing-lights 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
.circle-nine {
-webkit-filter: blur(3px);
width: 40px;
height: 40px;
background: rgba(116, 43, 34, 0.91);
position: absolute;
top: 12%;
right: 18%;
border-radius: 100%;
opacity: 1;
animation-delay: 0s;
-webkit-animation-delay: 0s;
-webkit-animation: flashing-lights 4s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 4s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
.circle-ten {
-webkit-filter: blur(3px);
width: 30px;
height: 30px;
background: rgba(116, 43, 34, 1);
position: absolute;
top: 10%;
left: 18%;
border-radius: 100%;
opacity: 1;
animation-delay: 1s;
-webkit-animation-delay: 1s;
-webkit-animation: flashing-lights 4s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
animation: flashing-lights 4s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite;
}
@-webkit-keyframes flashing-lights {
0% {
opacity: 0.3;
}
50% {
opacity: 0.9;
}
100% {
opacity: 0.3;
}
}
@keyframes flashing-lights {
0% {
opacity: 0.3;
}
50% {
opacity: 0.9;
}
100% {
opacity: 0.3;
}
}
.feature-banner {
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
}
.header {
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
/*
position: fixed;
top: 0;
*/
z-index: 20;
text-align: center;
background: #151515;
margin: 0;
}
.header .grid-item-content {
margin: 0;
}
.header .grid-item-content img {
/* max-height: 94px;*/
max-width: 320px;
}
.header .grid-item-content .iph6plus {
display: none;
}
.main-banner {
position: relative;
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
}
.main-banner .container {
background-image: radial-gradient(30% 75%, #8C1E1A 20%, #4B0606 160%);
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
height: 150px;
}
.game {
flex: 1 1 50%;
-webkit-flex: 1 1 50%;
}
.games-title {
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
margin-top: 10px;
}
.games-title .grid-item-content {
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
display: flex;
flex-direction: row;
padding: 0 10px;
}
.games-title h2 {
font-size: 14px;
color: #FFFFFF;
line-height: 25px;
text-transform: uppercase;
flex: 1;
-webkit-flex: 1;
font-weight: normal;
margin: 0;
}
.games-title a {
font-family: -apple-system, verdana;
font-size: 12px;
color: #FFAD00;
line-height: 18px;
text-decoration: none;
flex: 1;
-webkit-flex: 1;
flex: initial;
align-self: center;
}
.game .grid-item-content {
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
display: flex;
font-size: 13px;
color: #FFAD00;
align-items: center;
text-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
font-weight: normal;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
align-content: center;
position: relative;
}
.game .grid-item-content {
overflow: hidden;
}
.game .grid-item-content img {
top: -20px;
position: relative;
}
.game-name {
font-family: -apple-system, verdana;
background: #5D0606;
height: 40px;
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
display: flex;
font-size: 13px;
color: #FFAD00;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
-ms-flex-align: center;
font-weight: normal;
width: 100%;
position: absolute;
bottom: 0;
font-weight: normal;
}
.title {
text-align: center;
flex: 1 1 100%;
-webkit-flex: 1 1 100%;
margin-bottom: 20px;
}
.title h1 {
color: #FFAD00;
text-transform: uppercase;
font-size: 24px;
margin: 10px 0 0;
font-weight: normal;
padding: 0;
}
.title p {
color: #fff;
font-size: 15px;
margin: 0 40px;
padding: 0;
line-height: 20px;
margin-bottom: 15px;
}
.vip {
position: relative;
}
.vip .grid-item-content {
background-image: -webkit-radial-gradient(20% 20%, #8c1e1a 0%, #4b0606 250%);
background-image: radial-gradient(20% 20%, #8c1e1a 0%, #4b0606 250%);
height: inherit;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
}
.vip .align-centre {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.vip .grid-item-content h2 {
font-size: 28px;
color: #FFAD00;
letter-spacing: 3.11px;
text-transform: uppercase;
font-weight: normal;
margin: 0;
text-align: center;
}
.vip .grid-item-content .subtitle {
font-size: 14px;
color: #FFFFFF;
letter-spacing: 6.53px;
margin: 0;
font-weight: normal;
line-height: 12px;
}
.vip .grid-item-content p {
font-size: 11px;
color: #FFFFFF;
letter-spacing: 0;
font-weight: normal;
}
.vip .grid-item-content .rewards {
margin: 0;
padding-bottom: 12px;
}
.desktop-banner {
display: none;
}
/* IPHONE 6 PLUS PORTRAIT */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
.header .grid-item-content .iph6 {
display: none;
}
.header .grid-item-content .iph6plus {
max-width: 414px;
display: block;
margin: 0 auto;
}
.title p {
margin: 0 50px 15px;
}
.title h1 {
margin-top: 0;
}
.heading p {
color: #fff;
font-size: 13px;
line-height: 15px;
}
.heading h2 {
color: #FFAD00;
text-transform: uppercase;
font-size: 22px;
}
.title h1 {
font-size: 28px;
padding: 0;
}
}
/* IPHONE 6 PLUS LANDSCAPE */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
.main-banner .container {
margin: 0;
}
.title {
flex: 1 1 100%;
-webkit-box-flex: 1 1 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
-ms-flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
-ms-flex-direction: column;
-ms-flex-pack: center;
-ms-flex-align: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
padding-left: 40px;
z-index: 999;
}
.title h1 {
font-size: 36px;
line-height: 30px;
margin-bottom: 15px;
letter-spacing: 1.6px;
}
.title p {
margin: 0 0 20px 0;
font-size: 16px;
width: 70%;
}
.title .grid-item-content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-justify-content: center;
-ms-flex-pack: center;
-ms-flex-align: center;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
text-align: left;
}
.main-banner .container {
height: 175px;
z-index: 0;
overflow: hidden;
}
.girls {
width: 295px;
margin: 0;
position: relative;
float: right;
margin-right: 40px;
top: 7px;
}
.feature-banner {
flex: 1 1 50%;
-webkit-flex: 1 1 50%;
}
.banner {
flex: 1 1 33%;
-webkit-flex: 1 1 33%;
}
.vip {
flex: 1 1 33%;
-webkit-flex: 1 1 33%;
}
.desktop-banner {
flex: 1 1 66%;
-webkit-flex: 1 1 66%;
height: 125px;
display: block;
background-image: -webkit-radial-gradient(right 46%, #8c1e1a 0%, #4b0606 70%);
background-image: radial-gradient(right 46%, #8c1e1a 0%, #4b0606 70%);
overflow: hidden;
}
.desktop-banner h2 {
text-align: left;
text-align: left;
font-size: 18px;
letter-spacing: 1.12px;
line-height: 22px;
}
.desktop-banner p {
text-align: left;
margin: 5px 0 10px;
}
.desktop-banner a {
font-size: 12px;
}
.desktop-banner .grid-item-content {
height: inherit;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
}
.desktop-banner .heading {
left: 16px;
top: auto;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
text-align: left;
}
.grid-item-content .girls-sm-banner {
width: 254px;
float: right;
position: relative;
right: -175px;
bottom: -10px;
}
.game {
flex: 1 1 25%;
-webkit-flex: 1 1 25%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment