From 32a10f361c2adf7e9c6e0568dca2d2986535af6e Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Tue, 31 Jan 2017 01:36:40 +0500
Subject: [PATCH] styling

---
 css/style.css | 55 +++++++++++++++++++++++++++++++++++----------------
 slots.html    | 15 +++++++-------
 2 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/css/style.css b/css/style.css
index c3eba26..e7284ab 100644
--- a/css/style.css
+++ b/css/style.css
@@ -20,41 +20,62 @@ body {
 
 .logo {
 	text-align: center;
-	margin-bottom: 100px;
+	margin-bottom: 50px;
+}
+
+.logo img {
+	filter: drop-shadow(0px 12px 20px rgba(255,48,0,0.5));
 }
 
 .jSlots-wrapper {
-    overflow: hidden;
-    height: 100px;
-    display: inline-block; /* to size correctly, can use float too, or width*/
-    /*border: 2px solid #999;*/
-    transform: translateZ(0);
+	overflow: hidden;
+	height: 100px;
+	display: inline-block; /* to size correctly, can use float too, or width*/
+	transform: translateZ(0);
 	background-color: #212121;
 	padding: 0 5px;
 }
 
-.slots {
-	box-shadow: 0 0 10px 1px #000 inset;
-	font-size: 0;
+.jSlots-wrapper:before,
+.jSlots-wrapper:after {
+	content: '';
+	position: absolute;
+	left: 0;
+	right: 0;
+	box-shadow: 0 0 10px 3px #000;	
+	z-index: 10;
+}
+
+.jSlots-wrapper:before {
+	top: 0;
+}
+
+.jSlots-wrapper:after {
+	bottom: 0;
 }
 
 ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
+	padding: 0;
+	margin: 0;
+	list-style: none;
 }
 
 .slot {
-    float: left;
+	float: left;
+	margin: 0 10px;
+	box-shadow: 0 0 10px 2px #ff3000;
 }
 
 .slot li {
 	text-align: center;
 	padding: 0 30px;
-	margin: 0 10px;
 	line-height: 100px;
 	font-size: 2rem;
-	border-left: 2px solid #ccc;
-	border-right: 2px solid #ccc;
-	background-color: #424242;
+	background-color: #616161;
+	color: #ffa52e;
+	font-family: monospace;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	text-shadow: #ff3000 0px 0px 25px;
+
 }
diff --git a/slots.html b/slots.html
index 3808e19..ffd90c9 100644
--- a/slots.html
+++ b/slots.html
@@ -12,14 +12,13 @@
         <div class="logo">
             <img src="img/logo.svg" alt="">
         </div>
-        <div class="slots">
-            <ul class="slot">
-                <li>Водка</li>
-                <li>Гренадин</li>
-                <li>Пусиджус</li>
-                <li>Текила</li>
-            </ul>
-        </div>
+        <ul class="slot">
+            <li>Водка</li>
+            <li>Гренадин</li>
+            <li>Текила</li>
+            <li>Пусиджус</li>
+            <li>Сопли</li>
+        </ul>
     </div>
 
     <script src="js/jquery.min.js"></script>