Improve home CSS

public/css/mapael.css

@@ -1,8 +1,19 @@
 .mapael .map {
-    background-color: #cddee0;
+    background-color: rgba(0, 0, 0, 0.3);
+    padding: 15px;
     margin-bottom: 10px;
     position: relative;
+    width: 60%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 10%;
 }
+
+.home_map {
+  font-size:1.2rem;
+  font-weight:bold;
+}
+
 /* For all zoom buttons */
 .mapael .zoomButton {
     background-color: #fff;
@@ -38,7 +49,7 @@
 }
 .mapael .mapTooltip {
     position: absolute;
-    background-color: #474c4b;
+    background-color: #1D1D1D;
     moz-opacity: 0.70;
     opacity: 0.70;
     filter: alpha(opacity=70);
@@ -48,4 +59,4 @@
     max-width: 200px;
     display: none;
     color: #fff;
-}
+}

public/css/style.css

@@ -22,6 +22,7 @@ btn-custom {
 #logo_home {
   width:30rem;
   margin: 0 auto;
+  margin-top: -15px;
   margin-bottom: 10px;
   text-align: center;
 }
@@ -69,6 +70,7 @@ li {
   font-size: 14px;
   opacity:0.97;
 }
+
 header.header {
   width: 389px;
   height: 259px;
@@ -96,30 +98,22 @@ header.header img {
   font-size: 26px;
 }
 
-.article {
-  width:auto;
-  height:auto;
-  font-size: 24px;
-}
-.article2 {
+.article .article2 {
   width:auto;
   height:auto;
   font-size: 24px;
 }
+
 .container {
   font-family: Arial, sans-serif;
-  height:auto; width:28rem;
-  text-align:center;border: 0px
 }
 
-.row {
-  width:28rem;
-  margin-left: -5.1rem;
-}
-
-.home_map {
-  font-size:1.2rem;
-  font-weight:bold;
+.container.home {
+  font-family: Arial, sans-serif;
+  height:auto;
+  width:60rem;
+  text-align:center;
+  border: 0px;
 }
 
 .profil_user {

src/Gmarche/views/index.twig

@@ -4,9 +4,9 @@
     Ğ1-Marché : Régions {% if page > 1 %}, page {{ page }} {% endif %}
 {% endblock %}
 {% block body %}
-    <div class="container">
+    <div class="container home">
         <img id="logo_home" src="\images\logo_home.jpg"/>
-        <div class="row card">
+
             <ul class="list-group list-group-flush">
                 <div class="mapcontainer">
                     <div class="map">
@@ -17,7 +17,7 @@
                 </div>
             </ul>
         </div>
-    </div>
+
     <script type="text/javascript">
         $(".container").mapael({
             map: {
@@ -27,14 +27,15 @@
                 },
                 defaultArea: {
                     attrs: {
-                        'fill': 'green',
-                        'stroke': '#99c7ff',
+                        'fill': '#517C2D',
+                        'stroke': '#F5D6C6',
                         'stroke-width': 0.6,
                         'cursor': 'pointer'
                     },
                     attrsHover: {
                         'stroke-width': 2.5,
-                        'fill': 'blue'
+                        'fill': '#3b7dd8',
+                        'animDuration' : 100
                     }
                 }
             },