Updated HTML ideas

html-ideas/css/style.css

@@ -7,53 +7,113 @@
     text-align: center;
 }
 body {
-    background-color: rgb(83, 27, 27);
-    margin: 2%;
+    background-color: rgb(41, 41, 41);
+    margin: 0%;
 }
 header {
-    background-color: blueviolet;
+    background-color: rgb(15, 15, 15);
+    padding-bottom: 20px;
+    box-shadow: 0 10px 20px black;
     .header1 {
         text-align: center;
-        padding: 10px;
-        margin: 0;    
+        padding: 10px 10px 0 10px;
+        margin: 0 50px 0 50px;    
+        letter-spacing: 10px;
+        font-size: 50px;
+        font-style: italic;
+        color: blueviolet;
+        text-shadow: black 3px 3px 5px;
+        border-bottom: 3px blueviolet solid;
     }
+}
+
+
+.mainTrails{
+    overflow: hidden;
+    position: relative;
+    height: 200px;
+    border-top: grey solid 2px;
+    border-bottom: grey solid 2px;
+    
+    
+    .background {
+        opacity: 0.6;
+        width: 100%;
+        left: 0;
+        top: 0;
+        position: absolute
+    
+    }
+    .bannerText{
+        position: absolute;
+        top:20%;
+        margin:0;
+        padding:0;
+        transform: translateX(25%);
+    }
+    .bigTitle {
+        color:white;
+        text-align: center;
+        position: relative;
+        font-size: 50px;
+        margin: 20px;
+        margin-bottom: 5px;
+    }
+    .smallTitle {
+        position: relative;
+        color:white;
+        text-align: center;
+        font-size: 20px;
+        margin: 20px;
+        margin-top: 5px;
+    }
+}
+.trailList {
     .ulHeader {
+        margin: 30px;
         display: flex;
         list-style: none;
         justify-content: center;
         padding: 0px;
+        border-bottom: solid black 5px;
 
         .liHeader {
+            
             flex: 1 1 0px;
             padding-left: 10px;
             padding-right: 10px;
-            background-color: white;
-            border: outset black 2px;
+            color: white;
             text-align: center;
         }
         .liHeader:hover {
-            background-color: rgb(66, 66, 66);
-            color: white;
-            border: inset black 2px;  
+            color: blueviolet;
+            border-bottom: solid blueviolet 2px;  
+        }
+        .selected {
+            flex: 1 1 0px;
+            padding-left: 10px;
+            padding-right: 10px;
+            color: rgb(154, 69, 234);
+            border-bottom: solid blueviolet 2px;
+            text-align: center;
         }
     }
-
+    
 }
-
 .mainBlock {
     display: flex;
-    min-width: 200px;
+    min-width: 300px;
     flex-wrap: wrap;
     margin-top: 20px;
     margin-bottom: 100px;
 }
 .mainBlock .trailStats{
-    background-color: rgb(253, 153, 173);
+    background-color: rgb(206, 153, 253);
     flex: 0 0 0px;
-    min-width: 350px;
-    min-height: 350px;
+    min-width: 400px;
+    height: 600px;
     margin: auto;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     box-shadow: 0px 0px 20px rgb(20, 20, 20);
     border-radius: 30px;
     .stats {
@@ -68,13 +128,13 @@ header {
     }
 }
 .mainBlock .trailInfo{
-    background-color: rgb(253, 153, 173);
+    background-color: rgb(206, 153, 253);
     flex: 0 0 0px;
-    min-width: 350px;
-    min-height: 350px;
+    min-width: 400px;
+    height: 600px;
     margin: auto;
-    margin-bottom: 10px;
-    box-shadow: 0px 0px 20px rgb(20, 20, 20);
+    margin-bottom: 20px;
+    box-shadow: 0px 10px 10px rgb(20, 20, 20);
     border-radius: 30px;
     .trailInfoTxt {
         margin: 15px;
@@ -95,18 +155,24 @@ header {
 }
 main .badgesBlock{
     bottom: 0%;
-    background-color: rgb(253, 227, 232);
+    background-color: rgb(222, 75, 255);
     flex: 0 0 0px;
     min-width: 500px;
     min-height: 100px;
     margin: auto;
     margin-bottom: 10px;
-    box-shadow: 0px 0px 20px rgb(20, 20, 20);
+    box-shadow: 0px 10px 10px rgb(20, 20, 20);
     border-radius: 30px;
 }
+.badgesList {
+    display: flex;
+}
 .badgeImg {
+    flex: 0 1 0px;
     width: 60px;
-    margin: 10px;
+    margin: auto;
+    margin-bottom: 20px;
+    
 }
 
 footer {

html-ideas/home.html

@@ -8,10 +8,18 @@
 
 <body>
     <header>
-        <h1 class="header1">SMART-CITIES</h1>
+        <h1 class="header1">SMART-TOWNS</h1>
     </header>
 
     <main>
+        <div class="mainTrails">
+            <img src="./images/trails.jpg" alt="Trails" class="background">
+            <div class="bannerText">
+                <h1 class="bigTitle">Smart Town Trails</h1>
+                <h2 class="smallTitle">Information about trails for your town</h2>
+            </div>
+        </div>
+
         <div class="trailList">
             <ul class="ulHeader">
                 <li class="liHeader">Trail 1</li>
@@ -20,6 +28,7 @@
                 <li class="liHeader">Trail 4</li>
             </ul>
         </div>
+
       <section class="mainBlock">
         <article class="trailStats">
             <h1 class="titleH1">Trail Stats</h1>