html website
body{ font-family: Arial, Times, sens-serif, helvetica; background-color: white; margin: 0; } #callUsStyle{ color:#f55e51; float:right; padding: 10px; background-color: rgb(30%, 30%, 30%); } #searchForm{ color:#f55e51; margin-top: 15px; } .logoImg { height: 92px; } footer { margin-top: 25px; border: 2px solid #aaaaaa; color: #aaaaaa; background-color: white; padding: 15px; clear:both; } .footerElements{ padding: 4px; color: #f55e51; text-decoration: none; } .fixedNavBar{ position: fixed; top: 0; width: 100%; margin-top: 0; padding-left: 0; list-style-type: none; background-color: rgb(30%, 30%, 30%); display: inline-block; z-index: 3; } .fixedNavBar li { float: left; background-color:rgb(33%, 33%, 33%); border-right:1px solid #aaaaaa; } .fixedNavBar li a { color: white; display: block; text-align: center; padding-top: 14px; padding-bottom: 14px; padding-right: 17px; padding-left: 17px; text-decoration: none; } .fixedNavBar li a:hover{ color:#f55e51; background-color: rgb(45%, 45%, 45%); } .divFooter{ position: relative; } .pFooter{ color: grey; } .footerElementsRight{ position: absolute; top:0px; right:5px; padding:0px; color:#f55e51; text-decoration: none; } .footerElementsRightBottom5{ position: absolute; bottom:0px; right:5px; } .footerElementsRightBottom4{ position: absolute; bottom:0px; right:35px; } .footerElementsRightBottom3{ position: absolute; bottom:0px; right:65px; } .footerElementsRightBottom2{ position: absolute; bottom:0px; right:95px; } .footerElementsRightBottom1{ position: absolute; bottom:0px; right:125px; } .footerElementsCenter{ position: absolute; bottom: 0px; right: 600px; margin-bottom: 0px; } .currentPage { background-color: rgba(0%, 0%, 0%, 0.3); } /* Navigation bar code Please copy this code and place it at the begining of the body in your html files where is needed. <ul class="fixedNavBar"> <li><img src="GetATrip3.png" alt="GetATrip" class="logoImg"></li> <li><a class="currentPage" href="https://w1724104.users.ecs.westminster.ac.uk/mainPage.html">Home</a></li> <li><a href="http://w0000000.users.ecs.westminster.ac.uk/htmlFileName.html">Hotels</a></li> <li><a href="http://w0000000.users.ecs.westminster.ac.uk/htmlFileName.html">Gallery</a></li> <li><a href="http://w0000000.users.ecs.westminster.ac.uk/htmlFileName.html">Quiz</a></li> <li><a href="http://w0000000.users.ecs.westminster.ac.uk/htmlFileName.html">About us</a></li> <li><a href="https://w1724104.users.ecs.westminster.ac.uk/queryForm.html">Contact us</a></li> <li id="callUsStyle">Call us and book a holiday: 020 9853 1097<br> <form id="searchForm"> <label for="search">Search: </label> <input type="search" id="search" name="search" placeholder="Search for anything..."> <input type="button" name="send" value="Search"> </form> </li> </ul> <div id="topImgDiv"></div> Footer code Please copy this code and place it at the end of the body in your html files where is needed. <footer > <div class="divFooter"> <a class="footerElements" href="#backToTop">Back To Top |</a> <a class="footerElements" href="https://w1724104.users.ecs.westminster.ac.uk/pageEditor.html">Page Editor |</a> <a class="footerElements" href="https://w1724104.users.ecs.westminster.ac.uk/termsAndConditions.html">Terms And Conditions |</a> <a class="footerElements" href="https://w1724104.users.ecs.westminster.ac.uk/privacyPolicy.html">Privacy Policy |</a> <a class="footerElements" href="https://w1724104.users.ecs.westminster.ac.uk/cookiePolicy.html">Cookie Policy |</a> <a class="footerElements" href="http://w0000000.users.ecs.westminster.ac.uk/htmlFileName.html">Site Map |</a><br> <p class="pFooter"> Latest travel advice on: <a style="color:#f55e51" href="https://www.gov.uk/foreign-travel-advice">https://www.gov.uk/foreign-travel-advice</a></p> <a class="footerElementsRight" href="https://w1724104.users.ecs.westminster.ac.uk/queryForm.html">| Contact us |</a> <h5 style="color:grey"> NEED HELP?</h5> <p class="pFooter"> Call us: 020 9853 1097</p> <img class="footerElementsRightBottom1" src="facebook.png" alt="facebook" width="25" height="25"> <img class="footerElementsRightBottom2" src="twitter.png" alt="twitter" width="25" height="25"> <img class="footerElementsRightBottom3" src="instagram.png" alt="instagram" width="25" height="25"> <img class="footerElementsRightBottom4" src="pinterest.png" alt="pinterest" width="25" height="25"> <img class="footerElementsRightBottom5" src="youTube.png" alt="youTube" width="25" height="25"> <h6 class="footerElementsCenter">Copyright © 2021 GetATrip. All rights reserved.</h6> </div> </footer> To follow the consistency of the style in the pages here are some color codes I used in the main page: #555555 #F5F5F5 #f55e51 #ECECEC #dddddd #db0007 #aaaaaa rgb(30%, 30%, 30%) rgb(33%, 33%, 33%) rgb(45%, 45%, 45%) rgba(0%, 0%, 0%, 0.3) */