diff --git a/html-ideas/css/style.css b/html-ideas/css/style.css index fa21137093b3043fc84e8022ecf0dcaad7142386..8cc7e31db09d5ca9ecf12c765a0695f028282b22 100644 --- a/html-ideas/css/style.css +++ b/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 { diff --git a/html-ideas/home.html b/html-ideas/home.html index 7c4f6cee604ad30653ceba5a76b85ab593c69dbd..5a576891b7aa7063b6f251f0d6aa503bd795c88c 100644 --- a/html-ideas/home.html +++ b/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> diff --git a/html-ideas/images/trails.jpg b/html-ideas/images/trails.jpg new file mode 100644 index 0000000000000000000000000000000000000000..20481a4f8a914ae8b272f490e2006dd0afaa5a2b Binary files /dev/null and b/html-ideas/images/trails.jpg differ