#html #css #optimization #media-queries
#HTML #CSS #оптимизация #медиа-запросы
Вопрос:
Я работаю над школьным проектом и оптимизируюсь для мобильных устройств. Когда я захожу на сайт, я вижу белый пробел в правой части экрана (см. Скриншот). Я пытался провести исследование, но все, что я нашел, не работает. Веб-сайт iPhone. Может ли кто-нибудь помочь направить меня в правильном направлении? Я никогда раньше не создавал веб-сайт, и я просто вообще не понимаю, как оптимизировать веб-сайт, ха-ха
header{ background-image: url(banner1.png); background-repeat: no-repeat; background-size: 100% 100%; background-color: #FACABC; background-position: center; display: block; position: relative; } h1, h2, h3, footer{ text-align: center; } h1{ color: #FACABC; font-family: RedRock, "Times New Roman", sans-sarif; line-height: 5px; } .title{ font-size: 500%; } h2{ font-family: primer, "Times New Roman", sans-sarif; font-size: 200%; text-shadow: 1px 1px 2px #FACABC; color: #987b74; } #homelink{ text-align: left; text-decoration: none; padding-left: 2%; font-size: 135%; font-family: RedRock, "Times New Roman", sans-sarif; color: #FACABC; text-shadow: 1px 1px 2px black; } ion-icon{ padding-left: 6em; font-size: 41px; color: #987b74; } ion-icon:hover{ color: #FACABC; transition: all 0.5s ease; } body{ font-family: RedRock, "Times New Roman", sans-sarif; margin: 0; /* test and see if this works wit/without below two things*/ overflow-x: hidden; overflow-y: scroll; } .container{ position: sticky; top: 0; position: -webkit-sticky; background: #FACABC; z-index:1; } /* Nav bar*/ .container nav{ width: 100%; height: 76px; font-size: 48px; } .container nav a{ text-align: center; text-decoration: none; color: #987b74; } .container nav ul{ width: 100%; height: 100%; margin: 0 auto; list-style-type: none; transition: all 0.5s ease; } .container nav ul li{ width: 10%; float: left; text-align: center; color: #987b74; font-size: 41px; font-weight: bold; transition: all 0.5s ease; position: sticky; cursor: pointer; top: 0; } .container nav ul li:hover{ color: #5E4C47; } .container nav ul li ul.sub-nav { position: absolute; background-color: #FACABC; /* Background of drop down */ width: 75%; height: 110px; box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14); top: 74px; left: 0; visibility: hidden; opacity: 0; } .container nav ul li ul.sub-nav li{ font-size: 31px; font-family: primer, "Times New Roman", sans-sarif; width: 75%; } .container nav ul li:hover ul.sub-nav{ /* Drop down menu visibility */ visibility: visible; opacity: 75%; margin-top: 2px; } .container li{ display: inline-block; } .container nav ul li ul.sub-nav a:hover{ color: #5E4C47; transition: all 0.5s ease; } .container nav ul li ul.sub-nav a{ padding: 0; } main h2{ padding-right: 10em; padding-left: 10em; } main .learn-more{ border-radius: 2px; background-color: #FACABC; border: none; color: #987b74; text-align: center; font-size: 28px; padding: 20px; width: 275px; transition: all 0.5s; cursor: pointer; margin: 0; position: absolute; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: primer, "Times New Roman", sans-sarif; } main .learn-more span{ cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } main .learn-more span:after{ content: '0bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } main .learn-more:hover span{ padding-right: 25px; } main .learn-more:hover span:after{ opacity: 1; right: 0; } .video-trailer{ background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8); } main ul li{ list-style-type: none; display: inline; padding-left: 2%; padding-right: 0%; } main h1{ font-size: 60px; } footer{ color: #987b74; } .backgroundcolor{ /* To get that cream color background!*/ background-color: #f8f8f8; } table { font-family: primer, "Times New Roman", sans-sarif; color: #987b74; font-weight: bold; border-collapse: collapse; width: 50%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 640px) { body, html{ overflow-x: hidden; padding: 0.8em 0; } } lt;!DOCTYPE htmlgt; lt;htmlgt; lt;div id="wrapper"gt; lt;titlegt;HighItsKylt;/titlegt; lt;link href="highitsky.css" rel="stylesheet"gt; lt;link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet"gt; lt;link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"gt; lt;bodygt; lt;headergt; lt;a id="homelink" href="index.html"gt; lt;h2 id="homelink"gt;HighItsKylt;/h2gt; lt;/agt; lt;brgt;lt;brgt;lt;brgt;lt;brgt; lt;span class="title"gt;lt;h1gt;HighItsKylt;/h1gt;lt;/spangt; lt;h2gt;part time streamer, full time vibelt;/h2gt; lt;brgt;lt;brgt; lt;a href="https://www.twitch.tv/highitsky/" target="_blank"gt;lt;ion-icon name="logo-twitch"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://discord.gg/M2umXEhkNq" target="_blank"gt;lt;ion-icon name="logo-discord"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://youtube.com/highitsky" target="_blank"gt;lt;ion-icon name="logo-youtube"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://www.instagram.com/highitsky_/" target="_blank"gt;lt;ion-icon name="logo-instagram"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://www.tiktok.com/@highitsky" target="_blank"gt;lt;ion-icon name="logo-tiktok"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://www.twitter.com/highitsky_/" target="_blank"gt;lt;ion-icon name="logo-twitter"gt;lt;/ion-icongt;lt;/agt; lt;script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"gt;lt;/scriptgt; lt;script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"gt;lt;/scriptgt; lt;brgt;lt;brgt;lt;brgt;lt;brgt;lt;brgt; lt;/headergt; lt;div class="container"gt; lt;navgt; lt;ul class="tabs"gt; lt;a href="index.html"gt; lt;ligt;Homelt;/ligt; lt;/agt; lt;li style="white-space: nowrap;"gt;About Me lt;ul class="sub-nav"gt; lt;a href="AboutMe.html"gt; lt;ligt;ABOUTlt;/ligt; lt;/agt; lt;a href="Cloves.html"gt; lt;ligt;CLOVESlt;/ligt; lt;/agt; lt;/ulgt; lt;/ligt; lt;ligt;Socials lt;ul class="sub-nav"gt; lt;a href="Socials.html"gt; lt;ligt;SOCIALSlt;/ligt; lt;/agt; lt;a href="Contact.html"gt; lt;ligt;CONTACTlt;/ligt; lt;/agt; lt;/ulgt; lt;/ligt; lt;a href="Community.html"gt; lt;ligt;Communitylt;/ligt; lt;/agt; lt;a href="Partnerships.html"gt; lt;ligt;Partnershipslt;/ligt; lt;/agt; lt;ligt;Support lt;ul class="sub-nav"gt; lt;a href="Donate.html"gt; lt;ligt;DONATElt;/ligt; lt;/agt; lt;a href="Merch.html"gt; lt;ligt;MERCHlt;/ligt; lt;/agt; lt;a href="Causes.html"gt; lt;ligt;CAUSESlt;/ligt; lt;/agt; lt;/ulgt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;div class="header"gt;lt;/divgt; lt;/divgt; lt;maingt; lt;div class="backgroundcolor"gt; lt;brgt;lt;brgt; lt;h1gt;High, I'm Kylt;/h1gt; lt;brgt; lt;h2gt;I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content! Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . lt;/h2gt; lt;brgt; lt;a href="AboutMe.html"gt;lt;button class="learn-more"gt;lt;spangt;LEARN MORE lt;/spangt;lt;/buttongt;lt;/agt; lt;brgt;lt;brgt;lt;brgt;lt;brgt;lt;brgt; lt;/divgt; lt;div class="video-trailer"gt; lt;brgt;lt;brgt; lt;h2gt;My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...lt;/h2gt; lt;brgt;lt;brgt; lt;centergt; lt;video controls height="64%" width="62%" style='border: 2px solid #FACABC;'gt; lt;source src="trailer.mp4" srclang="en" type="video/mp4"gt; lt;/videogt; lt;brgt;lt;brgt; lt;h2gt;what matters is that I get to spend time with the people that I love; my community!lt;/h2gt; lt;brgt;lt;brgt; lt;/divgt; lt;div class="backgroundcolor"gt; lt;brgt;lt;brgt; lt;h1gt;High-lightslt;/h1gt; lt;brgt;lt;brgt; lt;hr size="2" color="#987b74"gt; lt;brgt;lt;brgt; lt;ulgt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;brgt;lt;brgt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;/ulgt; lt;brgt;lt;brgt; lt;hr size="2" color="#987b74"gt; lt;footergt;HighItsKy amp;copy; 2020 lt;/footergt; lt;/divgt; lt;/maingt; lt;/htmlgt; Комментарии:
1. Попробуйте добавить
* { box-shadow: inset 0 0 1px rgba(0,0,0,.5) }в контур все элементы на странице. Более чем вероятно, что-то вызывает выброс при более низких разрешениях. Один элемент, который шире, чем окно просмотра.body {overflow-x: hidden}можно было бы использовать, чтобы исправить это, но было бы лучше докопаться до сути проблемы и исправить элемент, вызывающий выброс, а не устранять симптомы.2. @admcfajn как ни странно, когда я это делаю, тень коробки вообще не отображается. Хотя я прекрасно вижу это на ПК
3. Может быть, тогда попробуем использовать границу? Кроме того, если вы тестируете на ПК, используя мобильное представление инспектора элементов, чтобы преодолеть минимальную ширину браузера, это может помочь вам воспроизвести результат. Текущий ответ, скорее всего, решит проблему, но было бы лучше, имхо, устранить основную проблему. Это также может зависеть от того, какую версию iphone вы используете, поскольку они поддерживают разные версии safari.
Ответ №1:
Вы должны добавить ширину своему телу
@media screen and (max-width: 640px) { body, html{ width: 100vw; overflow-x: hidden; padding: 0.8em 0; } } header{ background-image: url(banner1.png); background-repeat: no-repeat; background-size: 100% 100%; background-color: #FACABC; background-position: center; display: block; position: relative; } h1, h2, h3, footer{ text-align: center; } h1{ color: #FACABC; font-family: RedRock, "Times New Roman", sans-sarif; line-height: 5px; } .title{ font-size: 500%; } h2{ font-family: primer, "Times New Roman", sans-sarif; font-size: 200%; text-shadow: 1px 1px 2px #FACABC; color: #987b74; } #homelink{ text-align: left; text-decoration: none; padding-left: 2%; font-size: 135%; font-family: RedRock, "Times New Roman", sans-sarif; color: #FACABC; text-shadow: 1px 1px 2px black; } ion-icon{ padding-left: 6em; font-size: 41px; color: #987b74; } ion-icon:hover{ color: #FACABC; transition: all 0.5s ease; } body{ font-family: RedRock, "Times New Roman", sans-sarif; margin: 0; /* test and see if this works wit/without below two things*/ overflow-x: hidden; overflow-y: scroll; } .container{ position: sticky; top: 0; position: -webkit-sticky; background: #FACABC; z-index:1; } /* Nav bar*/ .container nav{ width: 100%; height: 76px; font-size: 48px; } .container nav a{ text-align: center; text-decoration: none; color: #987b74; } .container nav ul{ width: 100%; height: 100%; margin: 0 auto; list-style-type: none; transition: all 0.5s ease; } .container nav ul li{ width: 10%; float: left; text-align: center; color: #987b74; font-size: 41px; font-weight: bold; transition: all 0.5s ease; position: sticky; cursor: pointer; top: 0; } .container nav ul li:hover{ color: #5E4C47; } .container nav ul li ul.sub-nav { position: absolute; background-color: #FACABC; /* Background of drop down */ width: 75%; height: 110px; box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14); top: 74px; left: 0; visibility: hidden; opacity: 0; } .container nav ul li ul.sub-nav li{ font-size: 31px; font-family: primer, "Times New Roman", sans-sarif; width: 75%; } .container nav ul li:hover ul.sub-nav{ /* Drop down menu visibility */ visibility: visible; opacity: 75%; margin-top: 2px; } .container li{ display: inline-block; } .container nav ul li ul.sub-nav a:hover{ color: #5E4C47; transition: all 0.5s ease; } .container nav ul li ul.sub-nav a{ padding: 0; } main h2{ padding-right: 10em; padding-left: 10em; } main .learn-more{ border-radius: 2px; background-color: #FACABC; border: none; color: #987b74; text-align: center; font-size: 28px; padding: 20px; width: 275px; transition: all 0.5s; cursor: pointer; margin: 0; position: absolute; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: primer, "Times New Roman", sans-sarif; } main .learn-more span{ cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } main .learn-more span:after{ content: '0bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } main .learn-more:hover span{ padding-right: 25px; } main .learn-more:hover span:after{ opacity: 1; right: 0; } .video-trailer{ background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8); } main ul li{ list-style-type: none; display: inline; padding-left: 2%; padding-right: 0%; } main h1{ font-size: 60px; } footer{ color: #987b74; } .backgroundcolor{ /* To get that cream color background!*/ background-color: #f8f8f8; } table { font-family: primer, "Times New Roman", sans-sarif; color: #987b74; font-weight: bold; border-collapse: collapse; width: 50%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 640px) { body, html{ width: 100vw; overflow-x: hidden; padding: 0.8em 0; } } lt;!DOCTYPE htmlgt; lt;htmlgt; lt;div id="wrapper"gt; lt;titlegt;HighItsKylt;/titlegt; lt;link href="highitsky.css" rel="stylesheet"gt; lt;link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet"gt; lt;link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"gt; lt;bodygt; lt;headergt; lt;a id="homelink" href="index.html"gt; lt;h2 id="homelink"gt;HighItsKylt;/h2gt; lt;/agt; lt;brgt;lt;brgt;lt;brgt;lt;brgt; lt;span class="title"gt;lt;h1gt;HighItsKylt;/h1gt;lt;/spangt; lt;h2gt;part time streamer, full time vibelt;/h2gt; lt;brgt;lt;brgt; lt;a href="https://www.twitch.tv/highitsky/" target="_blank"gt;lt;ion-icon name="logo-twitch"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://discord.gg/M2umXEhkNq" target="_blank"gt;lt;ion-icon name="logo-discord"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://youtube.com/highitsky" target="_blank"gt;lt;ion-icon name="logo-youtube"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://www.instagram.com/highitsky_/" target="_blank"gt;lt;ion-icon name="logo-instagram"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://www.tiktok.com/@highitsky" target="_blank"gt;lt;ion-icon name="logo-tiktok"gt;lt;/ion-icongt;lt;/agt; lt;a href="https://www.twitter.com/highitsky_/" target="_blank"gt;lt;ion-icon name="logo-twitter"gt;lt;/ion-icongt;lt;/agt; lt;script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"gt;lt;/scriptgt; lt;script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"gt;lt;/scriptgt; lt;brgt;lt;brgt;lt;brgt;lt;brgt;lt;brgt; lt;/headergt; lt;div class="container"gt; lt;navgt; lt;ul class="tabs"gt; lt;a href="index.html"gt; lt;ligt;Homelt;/ligt; lt;/agt; lt;li style="white-space: nowrap;"gt;About Me lt;ul class="sub-nav"gt; lt;a href="AboutMe.html"gt; lt;ligt;ABOUTlt;/ligt; lt;/agt; lt;a href="Cloves.html"gt; lt;ligt;CLOVESlt;/ligt; lt;/agt; lt;/ulgt; lt;/ligt; lt;ligt;Socials lt;ul class="sub-nav"gt; lt;a href="Socials.html"gt; lt;ligt;SOCIALSlt;/ligt; lt;/agt; lt;a href="Contact.html"gt; lt;ligt;CONTACTlt;/ligt; lt;/agt; lt;/ulgt; lt;/ligt; lt;a href="Community.html"gt; lt;ligt;Communitylt;/ligt; lt;/agt; lt;a href="Partnerships.html"gt; lt;ligt;Partnershipslt;/ligt; lt;/agt; lt;ligt;Support lt;ul class="sub-nav"gt; lt;a href="Donate.html"gt; lt;ligt;DONATElt;/ligt; lt;/agt; lt;a href="Merch.html"gt; lt;ligt;MERCHlt;/ligt; lt;/agt; lt;a href="Causes.html"gt; lt;ligt;CAUSESlt;/ligt; lt;/agt; lt;/ulgt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;div class="header"gt;lt;/divgt; lt;/divgt; lt;maingt; lt;div class="backgroundcolor"gt; lt;brgt;lt;brgt; lt;h1gt;High, I'm Kylt;/h1gt; lt;brgt; lt;h2gt;I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content! Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . lt;/h2gt; lt;brgt; lt;a href="AboutMe.html"gt;lt;button class="learn-more"gt;lt;spangt;LEARN MORE lt;/spangt;lt;/buttongt;lt;/agt; lt;brgt;lt;brgt;lt;brgt;lt;brgt;lt;brgt; lt;/divgt; lt;div class="video-trailer"gt; lt;brgt;lt;brgt; lt;h2gt;My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...lt;/h2gt; lt;brgt;lt;brgt; lt;centergt; lt;video controls height="64%" width="62%" style='border: 2px solid #FACABC;'gt; lt;source src="trailer.mp4" srclang="en" type="video/mp4"gt; lt;/videogt; lt;brgt;lt;brgt; lt;h2gt;what matters is that I get to spend time with the people that I love; my community!lt;/h2gt; lt;brgt;lt;brgt; lt;/divgt; lt;div class="backgroundcolor"gt; lt;brgt;lt;brgt; lt;h1gt;High-lightslt;/h1gt; lt;brgt;lt;brgt; lt;hr size="2" color="#987b74"gt; lt;brgt;lt;brgt; lt;ulgt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;brgt;lt;brgt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;ligt; lt;iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt; lt;/iframegt; lt;/ligt; lt;/ulgt; lt;brgt;lt;brgt; lt;hr size="2" color="#987b74"gt; lt;footergt;HighItsKy amp;copy; 2020 lt;/footergt; lt;/divgt; lt;/maingt; lt;/htmlgt;