diff --git a/websites/travellly.html b/websites/WikiSpot.html similarity index 96% rename from websites/travellly.html rename to websites/WikiSpot.html index 7c3036c..e5a0f2c 100644 --- a/websites/travellly.html +++ b/websites/WikiSpot.html @@ -25,14 +25,15 @@ + -
+ \ No newline at end of file diff --git a/websites/styles.css b/websites/WikiSpotCSS.css similarity index 63% rename from websites/styles.css rename to websites/WikiSpotCSS.css index 836c1e5..d95e3b7 100644 --- a/websites/styles.css +++ b/websites/WikiSpotCSS.css @@ -1,7 +1,24 @@ +/* elements */ +body{ + background-color: #00B4D8; + margin: 0; +} +header{ + background-color:#0077B6; + padding-bottom: 23px; +} +img{ + padding-top: 25px; + padding-left: 25px; +} nav{ float: right; position: sticky; } +ul{ + margin: 0; + margin-left: 280px; +} li{ padding-top: 50px; padding-bottom: 48px; @@ -14,32 +31,24 @@ li{ transition: background-color 0.5s; position: relative; } -header{ - background-color:#0077B6; - padding-bottom: 23px; -} -body{ - background-color: #00B4D8; +#contact{ margin: 0; } -img{ - padding-top: 25px; - padding-left: 25px; -} li:hover{ background-color: rgba(79, 80, 80, 0.356); transition: ease-in-out; transition: background-color 0.5s; } -ul{ - margin: 0; - margin-left: 280px; +a{ + text-decoration: none; + color: #FFFFFF; } label{ visibility: collapse; user-select: none; } +/* classes */ .expandable{ visibility: collapse; display: block; @@ -60,6 +69,7 @@ label{ margin-top: 340px; margin-left: 150px; } +/* IDs */ #here{ margin-top: 150px; } @@ -92,34 +102,31 @@ label{ border-radius: 50%; } #phone, #ref, #ref2, #android{ - display: inline-block; + display: inline; float: left; } -a{ - text-decoration: none; - color: #FFFFFF; +#check{ + display: none; } +/* responsive */ @media (max-width: 1250px){ - li{ - font-size: 15px; - padding-top: 52px; - padding-bottom: 50.5px; - } ul{ - margin-top: -98px; - margin-left: 353.5px; + margin-top: 0px; + margin-left: 0px; } } -@media (max-width: 825px){ +@media (max-width: 955px){ + #check:checked ~ * .expandable{ + visibility: visible; + } ul{ visibility: collapse; padding: 0; } - label{ font-size: 40px; float: right; - margin-top: -86px; + margin-top: -90px; margin-right: 45px; position: relative; visibility: visible; @@ -135,10 +142,69 @@ a{ font-size: 20px; text-align: center; } + .menu{ + position: relative; + margin-left: -12em; + } + } -#check{ - display: none; +@media (max-width: 914px){ + label{ + font-size: 40px; + float: right; + margin-top: -90px; + margin-right: 45px; + position: relative; + } + .menu{ + margin-top: -97px; + } } -#check:checked ~ * .expandable{ - visibility: visible; +@media (max-width: 860px){ + label{ + font-size: 40px; + float: right; + margin-top: -90px; + margin-right: 45px; + position: relative; + } +} +@media (max-width: 840px){ + label{ + font-size: 40px; + float: right; + margin-top: -90px; + margin-right: 45px; + position: relative; + } +} +@media (max-width: 692px){ + label{ + font-size: 40px; + float: right; + margin-top: -90px; + margin-right: 45px; + position: relative; + } + .menu{ + margin-top: -217px; + } +} +@media (max-width: 635px){ + label{ + font-size: 40px; + float: right; + margin-top: -90px; + margin-right: 45px; + position: relative; + } +} +@media (max-width: 618px){ + label{ + font-size: 40px; + float: right; + margin-top: -90px; + margin-right: 45px; + position: relative; + } } \ No newline at end of file