Здравствуйте! Делаю портфолио для FCC столкнулся с такой проблемой, когда я захожу на сайт с мобильного телефона часть контента не прогружается с первого раза, после обновления страницы контент загружается полностью, как это пофиксить и с чем может быть связано?
Я могу залить сайт на облако или же дать на него ссылку, если это не нарушит правил SO
Так же если Вас не затруднит подскажите мне как новичку что мне подучить, чему уделить большее внимание, ибо я сам вижу CSS код на 800 строк, мне кажется это не очень хорошо.
Прикрепляю всю разметку и JS скрипты
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tvarinsky Klondike</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/scroll.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
<div class="header">
<div class="topmenu">
<div class="col-xs-offset-1">
<div class="deactivatemenu">
<i class="fa fa-times"></i>
<p class="mobiletext">Close</p>
<div class="col-xs-12">
<a href="#home" class="mobilemenu">Home</a>
<a href="#about" class="mobilemenu">About me</a>
<a href="#portfolio" class="mobilemenu">Portfolio</a>
<a href="#comments" class="mobilemenu">Comments</a>
</div>
</div>
<div class="activatemenu">
<i class="fa fa-bars"></i>
<p class="mobiletext">Menu</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-11">
<nav>
<div class="col-md-2 col-xs-12">
<p class="onheader">TVARINSKY</p>
</div>
<div class="col-md-8 col-xs-12">
<!--Adaptive Menu-->
<!--PC menu-->
<div id="menu">
<a href="#home" class="top bottomline">Home</a>
<a href="#about" class="top bottomline">About me</a>
<a href="#portfolio" class="top bottomline">Portfolio</a>
<a href="#comments" class="top bottomline">Comments</a>
</div>
<!--PC menu-->
</div>
<div class="col-md-2 col-xs-10">
<div class="icons">
<a href="#" target="_blank"><i class="fa fa-vk topvk iconmargin fa-lg"></i></a>
<a href="#" target="_blank"><i class="fa fa-twitter topvk iconmargin fa-lg"></i></a>
<a href="#" target="_blank"><i class="fa fa-facebook topvk iconmargin fa-lg"></i></a>
</div>
</div>
</nav>
</div>
<div class="col-md-6 col-xs-5 col-md-offset-4" id="home">
<h1 class="main">TVARINSKY</h1>
</div>
<div class="col-md-4 col-xs-12 col-md-offset-4">
<h3 class="main">Front-end developer <br>UI/UX designer</h3>
</div>
<div class="arrow">
<div class="col-xs-12 col-md-1 col-md-offset-5">
<a href="#about"><i class="fa fa-long-arrow-up bottomarrow fa-flip-vertical fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="content" id="about">
<div class="row">
<div class="col-xs-12 col-md-9 col-md-offset-4">
<div class="col-xs-12 col-md-2">
<p class="main">About me</p>
</div>
<div class="col-xs-12 col-md-1">
<div class="line"></div>
</div>
<div class="col-xs-12 col-md-2">
<p class="text">Hello! I'm Ivan.<br> I'm Front-end developer,<br> UI/UX designer.</p>
</div>
</div>
<div class="root col-md-10 col-xs-12 col-md-5 col-md-offset-3">
<div class="col-xs-4 col-md-3 col-md-offset-1">
<i class="fa fa-heart-o fa-3x" aria-hidden="true"></i>
<p class="onblock">My life</p>
</div>
<div class="root col-xs-4 col-md-3 col-md-offset-1">
<i class="fa fa-toggle-on fa-3x"></i>
<p class="onblock">It's worked</p>
</div>
<div class="root col-md-4 col-xs-4 col-md-3 col-md-offset-1">
<i class="fa fa-thumbs-o-up fa-3x" aria-hidden="true"></i>
<p class="onblock">Seems good</p>
</div>
<div class="horizontal"></div>
</div>
<div class="col-xs-12 col-md-9 col-md-offset-4">
<div class="col-xs-12 col-md-2">
<p class="main">Portfolio</p>
</div>
<div id="portfolio">
<div class="col-xs-12 col-md-1">
<div class="line"></div>
</div>
<div class="col-xs-12 col-md-2">
<p class="text">Are provided below<br> the works performed by me.<br> You can estimate them.</p>
</div>
</div>
</div>
<div class="movegallery">
<div class="root col-md-10 col-xs-12 col-md-5 col-md-offset-3">
<img src="img\portfolio\2.png" class="galleryphoto small" alt="">
<img src="img\portfolio\3.png" class="galleryphoto small" alt="">
<img src="img\portfolio\4.png" class="galleryphoto small" alt="">
<img src="img\portfolio\7.png" class="galleryphoto small" alt="">
<img src="img\portfolio\6.png" class="galleryphoto small" alt="">
<img src="img\portfolio\5.png" class="galleryphoto small" alt="">
<img src="img\portfolio\1.png" class="galleryphoto small" alt="">
<img src="img\portfolio\8.png" class="galleryphoto small" alt="">
</div>
</div>
<div class="col-xs-12 col-md-9 col-md-offset-4 margin2">
<div class="col-xs-12 col-md-2">
<div ID="comments"></div>
<p class="main pmargin">Testimonials</p>
</div>
<div class="col-xs-12 col-md-1">
<div class="line"></div>
</div>
<div class="col-xs-12 col-md-2">
<p class="text">Hello! I'm Ivan.<br> I'm Front-end developer,<br> UI/UX designer.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div class="horizontal2"></div>
<h4 class="comments">Comments (2)</h4>
<br><br>
<textarea name="comment" placeholder="Input message text..." maxlength="300" wrap="hard"></textarea>
<a href="#"><i class="fa fa-smile-o fa-2x" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i></a>
<!-- Первый комментарий -->
<p class="commentfont">Ekaterina</p>
<p class="date">2017.02.11 18:33</p>
<p class="comment">Excellent work, Ivan! I have executed everything even before the discussed terms,<br> I helped with the database, I imposed, the excellent adaptive web site!</p>
<!-- Первый комментарий -->
<!-- Второй комментарий -->
<p class="commentfont">Nikita</p>
<p class="date">2016.11.07 21:40</p>
<p class="comment">Ivan is an excellent expert, I have made everything quickly<br> and qualitatively. P.S. The functionality has been in addition realized
<BR>which was initially not discussed, but at the same time the performer has made <br>everything and didn't demand a payment top. I recommend!
</p>
<!-- Второй комментарий -->
<!-- Показать еще -->
<a href="#" class="vmore">View more</a>
<!-- Показать еще -->
<div class="horizontal2"></div>
</div>
</div>
<div class="footer">
<div class="col-xs-12 col-md-2">
<b><p class="onfooter cmargin">TVARINSKY</p></b>
<br><p class="copyright">© 2017 Tvarinsky dev.</p>
<br><p class="end">Greetings, Traveler!</p>
</div>
</div>
</div>
<div id="scrollup"><i class="fa toparrow fa-long-arrow-up" aria-hidden="true"></i></div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Raleway:200');
html,
body {
margin: 0;
padding: 0;
background: #fff;
overflow-x: hidden;
}
:active,
:hover,
:focus {
outline: 0;
outline-offset: 0;
}
h1, h2, h3, h4, p {
cursor: default;
}
::selection {
background: #f7f7f7;
}
::-moz-selection {
background: #f7f7f7;
}
.topmenu {
position: absolute;
width: 100%;
height: 9rem;
background: #000;
opacity: 0.7;
z-index: auto;
}
.onheader {
font-family: 'Roboto', sans-serif;
font-size: 2em;
color: #eee;
display: inline-block;
position: relative;
line-height: 1.5;
margin-top: 15%;
}
h3.main {
font-family: 'Roboto', sans-serif;
font-size: 2.250em;
color: #eee;
display: inline-block;
position: relative;
line-height: 1.5;
text-align: center;
right: 3%;
}
h1.main {
font-family: 'Oswald', sans-serif;
position: relative;
display: inline-block;
font-size: 5em;
color: #eee;
line-height: 0.5;
margin-top: 40%;
letter-spacing: -2px;
right: 1.5%;
}
.header {
background: url('../img/header.png');
-moz-background-size: 100%;
/* Firefox 3.6+ */
-webkit-background-size: 100%;
/* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%;
/* Opera 9.6+ */
background-size: 100%;
/* Современные браузеры */
background-repeat: no-repeat;
height: 100%;
}
.bottomarrow {
color: #eee;
position: relative;
left: 3.5%;
margin-top: 20%;
border: 1px solid #b1b1b1;
padding-left: 12px;
padding-right: 12px;
padding-top: 5px;
padding-bottom: 5px;
transition: 0.35s
}
.toparrow {
color: #404040;
position: relative;
left: 3.5%;
margin-top: 20%;
transition: 0.35s;
font-size: 1.5em;
}
.bottomarrow:hover {
color: #d1d1d1;
border: 1px solid #249cce;
position: relative;
transition: 0.35s;
}
p.main {
font-family: 'Raleway', sans-serif;
font-size: 3.000em;
color: #404040;
letter-spacing: -2px;
display: inline-block;
position: relative;
}
.line {
width: 1px;
background-color: #626060;
height: 75px;
display: inline-block;
position: relative;
margin-bottom: 3%;
}
p.text {
font-family: 'Raleway', sans-serif;
font-size: 1.125em;
color: #404040;
display: inline-block;
position: relative;
text-align: center;
}
.pmargin {
right: 15%;
}
.fa-heart-o {
border: 5px solid #242424;
padding: 10px;
border-radius: 40px;
border-width: thin;
margin-top: 70px;
transition: 0.25s;
}
.fa-heart-o:hover {
color: #249cce;
transition: 0.25s;
border: 1px solid #249cce;
}
.fa-toggle-on {
border: 5px solid #292929;
padding: 10px;
padding-left: 7px;
border-radius: 40px;
border-width: thin;
margin-top: 70px;
transition: 0.25s;
}
.fa-toggle-on:hover {
color: #249cce;
transition: 0.25s;
border: 1px solid #249cce;
}
.fa-thumbs-o-up {
border: 5px solid #292929;
padding: 10px;
padding-left: 15px;
border-radius: 40px;
border-width: thin;
margin-top: 70px;
text-align: center;
transition: 0.25s;
}
.fa-thumbs-o-up:hover {
color: #249cce;
transition: 0.25s;
border: 1px solid #249cce;
}
p.onblock {
font-family: 'Raleway', sans-serif;
font-size: 1.313em;
color: #404040;
display: block;
position: relative;
text-align: left;
}
.horizontal {
width: 100%;
background-color: #6a6a6a;
height: 1px;
display: inline-block;
position: relative;
left: 5%;
margin-bottom: 10%;
margin-top: 2%;
}
.horizontal2 {
width: 100%;
background-color: #6a6a6a;
height: 1px;
display: inline-block;
position: relative;
margin-bottom: 2%;
margin-top: 2%;
}
.galleryphoto:hover {
-webkit-filter: grayscale(0%) blur(0px);
transition: 0.35s;
}
.galleryphoto {
position: relative;
-webkit-filter: grayscale(100%) blur(2px);
transition: 0.35s;
border: 1px solid #404040;
margin-top: 15%;
}
.small {
width: 14rem;
height: 25rem;
margin: 15px;
}
.medium {
width: 14rem;
height: 25rem;
margin: 15px;
}
.big {
width: 30rem;
height: 40rem;
margin: 15px;
}
.movegallery {
margin-left: 2.5%;
padding-top: 25%;
}
.margin {
position: relative;
margin-top: 25%;
}
.margin2 {
position: relative;
margin-top: 5.5%;
}
h4.comments {
font-family: 'Oswald', sans-serif;
font-size: 1.625em;
color: #676666;
display: inline-block;
position: relative;
border-bottom: 1px solid #676666;
padding-bottom: 5px;
left: 3%;
}
.fa-smile-o {
position: relative;
border: 1px solid #dddddd;
padding: 12px;
border-radius: 5px;
bottom: 17px;
color: #b1b1b1;
transition: 0.35s;
left: 3%;
}
.fa-smile-o:hover {
color: #249cce;
transition: 0.35s;
}
.fa-paper-plane {
position: relative;
border: 1px solid #dddddd;
padding: 12px;
border-radius: 5px;
bottom: 17px;
color: #b1b1b1;
transition: 0.35s;
left: 3%;
}
.fa-paper-plane:hover {
color: #249cce;
transition: 0.35s;
}
textarea {
padding: 12px;
position: relative;
left: 3%;
width: 80%;
height: 53px;
resize: none;
border: 1px solid #dddddd;
border-radius: 5px;
font-size: 14px;
color: #888585;
font-family: 'TimesNewRoman', sans-serif;
transition: 0.25s;
overflow: hidden;
}
textarea:focus {
border: 1px solid #ececec;
color: #404040;
transition: 0.25s;
height: 83px;
}
.commentfont {
position: relative;
color: #249cce;
font-size: 1.575em;
font-family: 'Oswald', sans-serif;
display: inline-block;
left: 5%;
margin-top: 2%;
}
.date {
position: relative;
color: #a4a4a4;
font-size: 1.005em;
font-family: 'Oswald', sans-serif;
display: inline-block;
left: 6%;
margin-top: 2%;
}
.comment {
position: relative;
color: #676666;
font-size: 1.000em;
font-family: 'TimesNewRoman', sans-serif;
display: block;
left: 5%;
}
.vmore {
border: 1px solid #575757;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
margin-top: 5%;
left: 40%;
position: relative;
color: #575757;
font-size: 1.250em;
font-family: 'Oswald', sans-serif;
display: inline-block;
transition: 0.35s;
}
.vmore:hover {
text-decoration: none;
border: 1px solid #249cce;
transition: 0.35s;
color: #249cce;
}
.main2 {
font-family: 'Raleway', sans-serif;
font-size: 3.000em;
color: #404040;
letter-spacing: -1px;
display: inline-block;
position: relative;
margin-top: 7%;
left: 4%;
}
.iconmargin {
margin-top: 20%;
padding-left: 5%;
}
.topvk {
color: #e1e1e1 !important;
display: inline-block;
position: relative;
left: 5%;
opacity: 0.6;
transition: 0.35s;
margin-left: 1.5%;
font-size: 1.650em;
}
.topvk:hover{
transition: 0.35s;
opacity: 1;
}
.vk {
display: inline-block;
position: relative;
color: #404040;
transition: 0.35s;
font-size: 2.375em;
opacity: 0.6;
}
.fa-vk:hover {
transition: 0.35s;
opacity: 1;
}
.facebook {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
opacity: 0.6;
}
.fa-facebook:hover {
transition: 0.35s;
opacity: 1;
}
.twitter {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
opacity: 0.6;
}
.fa-twitter:hover {
transition: 0.35s;
opacity: 1;
}
.github {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
opacity: 0.6;
}
.fa-github:hover {
transition: 0.35s;
opacity: 1;
}
.envelope {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
opacity: 0.6;
}
.envelope:hover {
transition: 0.35s;
opacity: 1;
}
.footer {
margin-top: 7%;
background: #323232;
width: 100%;
height: 150px;
}
.onfooter {
position: relative;
color: #b4b4b4;
font-size: 2em;
font-family: 'roboto', sans-serif;
display: inline-block;
left: 20%;
text-decoration: none !important;
margin-top: 20%;
transition: 0.35s;
}
.copyright {
position: relative;
color: #b4b4b4;
font-size: 1.1em;
font-family: 'Oswald', sans-serif;
display: inline-block;
left: 25%;
text-decoration: none !important;
transition: 0.35s;
}
.cmargin {
margin-top: 10%;
}
.onfooter:hover{
transition: 0.35s;
color: #249cce;
}
.end {
font-family: 'Georgia', sans-serif;
position: relative;
color: #b4b4b4;
font-size: 0.9em;
display: block;
left: 32%;
text-decoration: none !important;
transition: 0.35s;
}
a.top {
list-style-type: none;
display: inline-block;
margin-left: 6%;
margin-top: 4%;
color: #e6e6e6;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
transition: 0.35s;
text-decoration: none;
}
.mobiletext {
display: inline-block;
color: #e6e6e6;
font-size: 1.5em;
font-family: 'Oswald', sans-serif;
transition: 0.35s;
text-decoration: none;
position: relative;
}
.mobilemenu {
display: block;
color: #e6e6e6 !important;
font-size: 2em;
font-family: 'roboto', sans-serif;
transition: 0.35s;
text-decoration: none !important;
position: relative;
border: 1px solid #404040;
padding-right: 20%;
padding-left: 20%;
text-align: center;
}
.bottomline {
position: relative;
color: #ff3296;
cursor: pointer;
}
.bottomline:after {
display: block;
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background-color: #249cce;
content: "";
transition: width 0.2s;
}
.bottomline:hover {
color: #fff;
}
.bottomline:hover:after {
width: 100%;
}
.fa-bars {
text-decoration: none;
color: #e6e6e6;
position: relative;
}
.fa-times {
text-decoration: none;
color: #e6e6e6;
position: relative;
}
.menubg {
visibility: hidden;
height: 100%;
width: 100%;
background: #404040;
}
.deactivatemenu {
display: none;
}
.activatemenu {
display: inline;
}
#scrollup {
position: fixed; /* фиксированная позиция */
opacity: 0; /* прозрачность */
padding: 5px 15px 10px; /* отступы */
background: none;
border: 1px solid #b1b1b1;
border-radius: 40px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
right: 15%; /* отступ слева */
bottom: 5%; /* отступ снизу */
display: none; /* спрятать блок */
cursor: pointer;
}
/* ПК */
@media (min-width: 1200px) {
.fa-bars, .mobiletext {
display: none;
}
}
/* Планшеты */
@media (min-width: 768px) and (max-width: 979px) {
a.top, .bottomline, .onheader {
display: none;
}
a.top {
display: block;
}
.line {
display: inline;
}
nav {
display: none;
}
.topmenu, .mobiletext, .icons {
display: none;
}
}
/* Телефоны и планшеты */
@media (max-width: 767px) and (min-width: 500px) {
a.top, .bottomline, .onheader, .icons {
display: none;
}
h1.main {margin-left:15%;}
.header {
-moz-background-size: 400%;
/* Firefox 3.6+ */
-webkit-background-size: 400%;
/* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 400%;
/* Opera 9.6+ */
background-size: 400%;
/* Современные браузеры */
height: 100%;}
.pmargin {
right: 0%;
}
.line {
display: none;
}
a.top{
margin-top: 15px;
}
.fa-heart-o, .fa-toggle-on .fa-thumbs-o-up {
font-size: 2em;
}
}
/* Маленькие телефоны */
@media (max-width: 480px) {
a.top, .bottomline, .onheader, .icons {
display: none;
}
h1.main {
margin-left:5%;
margin-top: 60%;
font-size: 3em;
text-align: left;
}
h3.main {
font-size: 1.5em;
margin-left:5%;
text-align: left;
}
.header {
-moz-background-size: 175%;
/* Firefox 3.6+ */
-webkit-background-size: 175%;
/* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 175%;
/* Opera 9.6+ */
background-size: 175%;
/* Современные браузеры */
height: 40%;}
.line {
display: none;
}
.vmore {
left: 32.5%;
}
.topmenu {
height: 3rem;
opacity: 1;
}
.fa-bars {
font-size: 1.5em;
z-index: 5;
}
.fa-times {
font-size: 1.5em;
z-index: 5;
}
.bottomarrow{
display: none;
}
.iconmargin {
margin-left: 8%;
}
.pmargin {
right: 0%;
}
.onheader {
background: #303030;
border-radius: 2px;
padding-right: 10px;
padding-left: 10px;
}
p.main {
margin-top: 5%;
font-size: 2.250em;
margin-left: 5%;
}
p.text {
margin-left: 10%;
text-align: left;
}
.fa-heart-o, .fa-toggle-on, .fa-thumbs-o-up {
font-size: 2em;
}
.horizontal {
left: 0%;
}
.comment {
max-width: 28rem;
}
textarea {
width: 60%;
}
#scrollup {
position: fixed; /* фиксированная позиция */
opacity: 0; /* прозрачность */
padding: 5px 15px 10px; /* отступы */
background: none;
border: 1px solid #b1b1b1;
border-radius: 40px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
right: 10%; /* отступ слева */
bottom: 5%; /* отступ снизу */
cursor: pointer;
}
.root{
text-align:center;
}
.root p{
text-align:center;
}
MENU JS:
$(document).ready(function() {
$('.activatemenu').click(function(){
$('.deactivatemenu').css("position", "absolute");
$('.topmenu').animate({ height: "200%"}, 500);
$('.deactivatemenu').animate({ top: "5%"}, 500);
$('.activatemenu').fadeOut(250);
$('.deactivatemenu').fadeIn(1000);
$("html,body").css("overflow", "hidden");
$('.deactivatemenu').css("z-index", "5");
$('.activatemenu').css("z-index", "5");
$('.topmenu').css("z-index", "5");
});
$('.deactivatemenu').click(function(){
$('.topmenu').animate({ height: "3rem"}, 500);
$('.activatemenu').fadeIn(1000);
$('.deactivatemenu').fadeOut(250);
$("html,body").css("overflow","auto");
$("html,body").css("overflow-x","hidden");
$('.deactivatemenu').css("z-index", "5");
$('.activatemenu').css("z-index", "5");
$('.topmenu').css("z-index", "5");
});
});
Scroll JS:
$(document).ready(function(){
$("#menu").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
});
$(document).ready(function(){
$(".deactivatemenu").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
});
$(document).ready(function(){
$(".arrow").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
});
window.onload = function() {
var scrollUp = document.getElementById('scrollup');
scrollUp.onmouseover = function() {
scrollUp.style.opacity= 0.8;
scrollUp.style.filter = 'alpha(opacity=30)';
};
scrollUp.onmouseout = function() {
scrollUp.style.opacity = 1;
scrollUp.style.filter = 'alpha(opacity=50)';
};
scrollUp.onclick = function() {
$('html, body').animate({scrollTop:0}, 1500);
};
window.onscroll = function () {
if ( window.pageYOffset >= 200 ) {
$(scrollup).stop().animate({opacity:'1.0'},100);
scrollup.style.display = 'block';
} else {
$(scrollup).stop().animate({opacity:'0.0'},100);
scrollup.style.display = 'none';
}
};
};
<link rel="stylesheet" href="css/font-awesome.css" /> <link rel="stylesheet" href="css/font-awesome.min.css" />
?body.nav .deactivatemenu ...