Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<header class="container header">
		<div>
			<a href="../index.html"><img src="#" alt="Logo"></a>
		</div>
	</header>
	<div class="container main">
		<div class="row">
			<div class="col col__aside">
				[Меню]
		</div>
		    <div class="col col__article">
          <input type="text" id="myInput" onkeyup="myFunction()"                                                 placeholder="Быстрый поиск..">
                          <div class="nums__wrapper">
                          	  <ul class="nums" id="fltr">
                          		<li><a href="#">1</a></li>
                          		<li><a href="#">2</a></li>
                          		<li><a href="#">3</a></li>
                              <li><a href="#">4</a></li>
                          		<li><a href="#">5</a></li>
                          		<li><a href="#">6</a></li>
                              <li><a href="#">7</a></li>
                          		<li><a href="#">8</a></li>
                          		<li><a href="#">9</a></li>
                              <li><a href="#">10</a></li>
                          		<li><a href="#">11</a></li>
                          		<li><a href="#">12</a></li>
                              <li><a href="#">13</a></li>
                              <li><a href="#">14</a></li>
                          		<li><a href="#">15</a></li>
                              <li><a href="#">16</a></li>
                          		<li><a href="#">17</a></li>
                          		<li><a href="#">18</a></li>
                              <li><a href="#">19</a></li>
                          		<li><a href="#">20</a></li>
                          		<li><a href="#">21</a></li>
                              <li><a href="#">22</a></li>
                          		<li><a href="#">23</a></li>
                          		<li><a href="#">24</a></li>
                              <li><a href="#">25</a></li>
                          		<li><a href="#">26</a></li>
                          		<li><a href="#">27</a></li>
                              <li><a href="#">28</a></li>
                              <li><a href="#">29</a></li>
                          		<li><a href="#">30</a></li>
                              <li><a href="#">31</a></li>
                          		<li><a href="#">32</a></li>
                          		<li><a href="#">33</a></li>
                              <li><a href="#">34</a></li>
                          		<li><a href="#">35</a></li>
                          		<li><a href="#">36</a></li>
                              <li><a href="#">37</a></li>
                          		<li><a href="#">38</a></li>
                          		<li><a href="#">39</a></li>
                              <li><a href="#">40</a></li>
                          		<li><a href="#">41</a></li>
                          		<li><a href="#">42</a></li>
                              <li><a href="#">43</a></li>
                              <li><a href="#">44</a></li>
                          		<li><a href="#">45</a></li>
                              <li><a href="#">46</a></li>
                          		<li><a href="#">47</a></li>
                          		<li><a href="#">48</a></li>
                              <li><a href="#">49</a></li>
                          		<li><a href="#">50</a></li>
                          		<li><a href="#">51</a></li>
                              <li><a href="#">52</a></li>
                          		<li><a href="#">53</a></li>
                          		<li><a href="#">54</a></li>
                              <li><a href="#">55</a></li>
                          		<li><a href="#">56</a></li>
                          		<li><a href="#">57</a></li>
                              <li><a href="#">58</a></li>
                              <li><a href="#">59</a></li>
                          		<li><a href="#">60</a></li>
                          	</ul>
                         </div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, quidem! Itaque voluptatum at culpa ut vel ex sequi, distinctio ipsum esse inventore maxime neque facere illo voluptatem deleniti, sunt dolores dicta. Vitae, ratione natus est pariatur odio ducimus temporibus deleniti, officiis aliquid eum sapiente dignissimos nam minus quidem quis veritatis iure porro! Iste, ipsam magni aspernatur esse, delectus exercitationem dolorem necessitatibus debitis harum, id sunt? Numquam quis officia modi quos mollitia minus aperiam a magni magnam beatae recusandae possimus repudiandae facilis placeat voluptate, quidem quam odit nesciunt excepturi molestiae vitae eveniet nisi cum tempora. Sit itaque reiciendis cumque, maiores corporis, ex provident inventore blanditiis perspiciatis rerum maxime veniam deserunt necessitatibus id, aliquid accusantium iure tempore totam recusandae voluptatum harum nostrum illum magni ut. Quaerat sint iure voluptatem error optio autem ea ullam ipsa, molestias exercitationem ab nostrum repellendus voluptas illo temporibus magni in debitis. Laboriosam dolores error, nobis quos sapiente animi excepturi assumenda nisi odio, provident expedita? Laboriosam beatae repellat amet molestiae ipsa corrupti non nostrum dolore, odio cupiditate tenetur at rem, necessitatibus eaque error commodi molestias esse libero laborum ex? Veritatis reiciendis temporibus nisi consequatur, similique ab tenetur, repellendus voluptate amet id delectus, distinctio necessitatibus repudiandae minima saepe? Iure quidem commodi eveniet nulla odit cumque, similique voluptates ipsam sapiente cum natus assumenda dolor enim labore deleniti ipsa alias animi veritatis tenetur quasi! Rerum voluptates suscipit sit. Doloribus ipsa nisi id laborum officia nesciunt non voluptates excepturi sit expedita minima molestiae, vel iusto quaerat dolor deserunt! Ab, perferendis cum. Numquam sequi nihil aperiam enim doloremque perspiciatis, officiis quasi autem unde tempore iste aliquid sit ullam adipisci temporibus saepe aut vero labore, fugiat nesciunt! Asperiores magnam et excepturi nulla! Ut asperiores perspiciatis nulla libero illum autem necessitatibus voluptas sed, nam, culpa repellat numquam, labore incidunt qui sapiente harum non fuga quos. Similique iure adipisci itaque. Voluptatum natus iure aut consectetur voluptates nihil ipsam magni, deleniti, enim accusamus doloribus consequuntur itaque officia, recusandae sit tenetur libero ab dolores quam et! A magni incidunt aut voluptate quia dignissimos necessitatibus. Eligendi, omnis molestias neque optio, a excepturi ipsam numquam cupiditate reprehenderit, autem eaque quibusdam quos recusandae vitae nulla amet doloremque voluptate inventore at tempore? Quod cumque itaque nulla, facere, alias et exercitationem, voluptatem fuga repellat pariatur magnam! Possimus maxime quas veniam explicabo ducimus cum incidunt ipsam consequatur eos nobis, voluptatem laborum corporis architecto quod ex exercitationem perspiciatis ullam placeat, error vero similique perferendis. Voluptas pariatur modi alias sint officiis velit vel distinctio minus ducimus possimus ratione nesciunt, dolores inventore nihil quas fugiat sequi eveniet nisi provident obcaecati ex. Et ut sed non molestiae iusto aperiam fuga aliquid blanditiis ipsa! Amet officia eum sequi non labore possimus reiciendis iste et porro ut obcaecati minus reprehenderit, rem, modi vitae est illum temporibus nemo aut voluptas blanditiis dolorem. Commodi ad est quasi molestiae laborum assumenda, architecto, dolorem vel sunt cumque et totam adipisci quam? Quia maiores nostrum atque deserunt neque! Repellendus, soluta, nemo maiores aspernatur doloremque fugit quaerat amet blanditiis vitae dignissimos voluptatem nobis aut modi rem velit alias illum, nam non eligendi facilis asperiores. Numquam aperiam facilis earum aliquam, ratione ullam hic exercitationem quis et? Minima veniam fugiat pariatur numquam blanditiis corporis eligendi, et quia accusantium praesentium quidem asperiores qui iusto id esse non animi libero, molestias quos! Quae laudantium nobis numquam earum eveniet animi labore fuga facere? Illum, totam consectetur itaque similique corrupti soluta ex temporibus sit magnam ipsam placeat voluptate quam fuga quasi illo fugit, libero distinctio numquam eligendi saepe voluptates alias natus nostrum in? Qui molestias dicta quod cupiditate hic expedita aliquam perferendis repudiandae earum in. Blanditiis inventore, natus aliquid eum obcaecati deserunt fugiat sed ex. Dolores, quis. Cumque facere quasi voluptas soluta cupiditate architecto? Temporibus nisi eos facere. Perferendis, quod laboriosam optio quaerat atque quis alias commodi, harum ex quas suscipit quasi vitae dignissimos voluptatem. Dolorem recusandae animi blanditiis quibusdam sint, atque neque ipsum beatae ut corrupti? Culpa itaque ea et, suscipit quo commodi voluptate labore reprehenderit nihil necessitatibus in. Amet distinctio eius ex blanditiis, aliquid cum reprehenderit autem nam illo quia dolore inventore assumenda odit tempore eos perferendis adipisci corporis. Nemo, temporibus perspiciatis, nulla reiciendis quibusdam rerum minima, doloremque aperiam harum reprehenderit deserunt natus repellendus pariatur! Modi, velit magnam aut non aliquid inventore perferendis saepe mollitia beatae quasi ad veritatis necessitatibus numquam, possimus aperiam commodi aliquam reiciendis exercitationem alias unde eum architecto ab quod? Blanditiis, ipsa nobis inventore perferendis eos laudantium architecto quisquam repellat, maxime dolores at non necessitatibus aliquam cum officiis pariatur consectetur soluta tenetur facilis in autem. Obcaecati atque officia quae amet accusamus eveniet omnis quidem in necessitatibus sapiente exercitationem ipsa dignissimos incidunt illo autem ipsum nesciunt alias consectetur sit, eligendi laudantium sunt labore harum doloribus! Magni minima quod, corrupti assumenda temporibus libero modi voluptate. Reprehenderit eius harum, perspiciatis fugit repellat aspernatur voluptatibus veniam delectus mollitia numquam vero autem eligendi deserunt voluptate, non distinctio neque voluptates tenetur facere? Illo dolore inventore, dolores numquam doloribus veritatis odit sequi est excepturi officiis natus illum molestiae pariatur quae totam animi eos quo debitis impedit nam repellat? In iusto perferendis quis corporis commodi nisi, odit optio. Deserunt, ullam repellendus? Nemo, ea, repudiandae voluptatum, hic nostrum nihil ducimus ipsum recusandae aliquid reprehenderit eaque blanditiis architecto minus molestias vero iusto! Tempore quod maxime ex quam accusantium nobis veritatis nam, suscipit corrupti facere reprehenderit labore eaque, at, repudiandae nisi possimus sunt quasi voluptas asperiores quisquam minus ut quibusdam voluptatem! Dolores, sit amet architecto voluptatem harum, omnis fuga odit, eius cum perspiciatis voluptates nam quo facilis? Culpa quisquam sit natus obcaecati, aperiam praesentium iste facere aspernatur similique in, maxime accusamus itaque. Odit, rem quo facilis quod non illo consequuntur asperiores maiores, reprehenderit deleniti dignissimos distinctio autem. Reiciendis, fuga sapiente? Labore numquam impedit, libero inventore distinctio culpa omnis veritatis repellendus voluptatibus beatae quo maxime voluptates molestias nostrum sit quasi! Perspiciatis debitis eum magni. Quasi ipsam itaque iure ad, nulla inventore facilis culpa eligendi voluptas labore magni explicabo vel asperiores ducimus provident officiis, corrupti eos dicta eum repudiandae. Excepturi vero minima quo numquam soluta, voluptatibus asperiores exercitationem officiis ipsa, provident fugit consectetur dolorem nobis velit officia quibusdam nemo, quod maxime. Porro, laboriosam id earum neque veritatis vero expedita, aliquid ex itaque repudiandae quis voluptatem rerum, officiis explicabo ducimus eius magni perspiciatis? Eaque et dolore tempora ad, consectetur deserunt harum consequuntur debitis magni quia, dolor, laudantium cupiditate quam. Minima alias impedit expedita nobis obcaecati commodi quae fuga numquam tempora. Veritatis pariatur necessitatibus voluptas reprehenderit repellendus dolorum repudiandae neque eaque doloribus cumque, corrupti animi id ducimus quaerat illum accusantium, magnam beatae! Eaque amet omnis, dolorum ut assumenda, temporibus distinctio neque nam delectus consequatur accusamus tempora impedit cupiditate facilis! Maxime amet aut consectetur eum repudiandae temporibus mollitia iure deleniti nisi id reprehenderit quibusdam incidunt ipsam, ex exercitationem laudantium eius odio repellat rem ad at sunt dolor? Iusto laboriosam quos id voluptas eaque tempore explicabo nesciunt impedit. Necessitatibus nemo sit ipsum quis expedita ipsa ducimus magnam non architecto? Eum, laboriosam earum. Maiores minus doloribus ipsam. Harum aspernatur quasi iure amet reiciendis veniam placeat! Aspernatur libero eos cum consectetur. Commodi vitae rerum recusandae praesentium, tempora officiis, porro, sunt voluptatibus modi vel nihil corporis voluptates dignissimos qui laborum facere impedit ipsum dolorum soluta enim veniam. Aspernatur, voluptates? Enim, officiis corrupti molestias iste cupiditate quasi dignissimos ipsa aliquam illum libero eos dicta sunt, recusandae similique, a architecto rerum? Excepturi nesciunt repellendus, deserunt dolores magnam accusamus cum hic eum ab perferendis fuga? Magni voluptatem, minus deserunt quo ut ducimus perspiciatis vero quisquam inventore! Dicta ipsam vitae itaque quo cupiditate excepturi ducimus sequi vero recusandae necessitatibus inventore rerum, temporibus soluta, veritatis sint? Nobis explicabo rem quam, numquam aspernatur cupiditate laborum itaque neque magnam, quo porro quasi officia dicta labore praesentium nisi doloremque blanditiis dolorem libero consequatur dolores quae architecto voluptates expedita! Doloribus iusto soluta voluptate alias necessitatibus incidunt unde, voluptatem quos, possimus dignissimos veritatis dolores minus nostrum in explicabo, esse perspiciatis quia dolorem ut ratione excepturi! Repellat assumenda reprehenderit officia veniam dolorem repellendus eos reiciendis iure nihil est molestias quas, esse, tempore adipisci accusamus ut ipsam odio necessitatibus sed. Nihil delectus explicabo tenetur possimus laboriosam, velit ut repellat eligendi optio iure totam asperiores, sed saepe ipsa obcaecati! Qui soluta aspernatur numquam asperiores unde sunt iste saepe omnis quod? Eum perferendis tempora velit. Nisi perferendis sunt eligendi iusto maiores saepe voluptatum commodi expedita sint, nihil ratione numquam dicta impedit? Corporis aperiam eius neque incidunt magnam ut unde eos, rem, culpa corrupti quaerat quo qui saepe mollitia! Ullam aliquid laudantium sit vero totam eius itaque tempora, error fugiat praesentium voluptatibus debitis quasi voluptates molestias necessitatibus nam quis doloribus quae quam quibusdam. Doloremque quis recusandae architecto vitae vel, sint eveniet excepturi suscipit voluptatum illo nisi assumenda nostrum impedit facilis amet nam! Nostrum aut placeat quis praesentium illo cum consequuntur, ut et earum dicta suscipit quae nam error aspernatur a, exercitationem similique natus facere quaerat molestiae. A odio quidem odit provident consequuntur accusamus praesentium. Ut impedit laboriosam sequi numquam minima sapiente id aperiam. Beatae, error aliquam libero magnam voluptas temporibus perspiciatis sit vel quam tenetur et deleniti, dignissimos nemo eligendi rerum eius dolorum? Molestias libero delectus labore neque, minus quo asperiores, quas repudiandae aspernatur beatae ratione saepe accusantium a perferendis expedita, quibusdam deleniti velit rerum? Consequuntur debitis aliquam vitae dolorum nesciunt reprehenderit eius minus, commodi assumenda a maiores numquam. Magnam delectus vitae reiciendis nesciunt similique voluptate expedita porro rem quibusdam tempore quasi molestiae necessitatibus eveniet quaerat totam, aliquam rerum deserunt nisi officia distinctio! Repellendus minus ad laudantium nihil unde tempora nam laboriosam fugit cumque. Dolorem maxime iusto labore hic incidunt minima amet aut, possimus perspiciatis. Dolorum esse quisquam aspernatur commodi architecto? Cum culpa dolor labore omnis earum doloribus voluptatem voluptate nobis velit. Voluptates eligendi sint ea quis, aliquam ducimus quaerat autem impedit cupiditate. Quam architecto ducimus perspiciatis labore suscipit ad dolorum sequi exercitationem veniam ratione, animi corporis earum qui natus dolor eligendi, nisi quidem? Illum excepturi ut minima inventore autem possimus, cum laboriosam maxime id rem minus tempora. Sit officiis quo repudiandae ipsum officia deleniti, at, ab, sequi excepturi obcaecati maiores vel molestias nulla laboriosam ratione voluptatem. Corporis facere eos quidem delectus quo ab saepe ad beatae autem veritatis quaerat aspernatur itaque, cumque similique eveniet, officiis ducimus exercitationem! Reprehenderit, a ad ut veniam blanditiis provident necessitatibus minus deleniti explicabo officia non magni? Quo voluptatem beatae corporis non, pariatur quae minus quidem inventore sed doloribus laboriosam officiis mollitia sapiente aut ab? Inventore at, ducimus aliquid et sit non, expedita doloremque vero quis fugiat tempore fuga vitae dolore cum voluptate quia. Ab expedita inventore illum aliquid nostrum, aut nemo dolore, aspernatur amet corporis ipsam ducimus maxime! Ipsum, iusto! Inventore molestiae non, id tempore unde maxime assumenda officia nemo? Inventore omnis ad ullam itaque dolor consectetur, magnam beatae magni eaque enim, id accusamus nobis maxime corrupti odit placeat labore libero sed voluptas ea laborum harum alias! Et aliquam temporibus dolorem magni, nesciunt accusantium! Aperiam itaque, et deleniti at, nam sequi voluptas odio placeat quae officia aliquid quis. Consequuntur officiis magni ea rem. Iusto quae temporibus modi hic vero molestiae odit error est ullam dolores! Itaque reiciendis qui ipsum, nisi at perspiciatis sequi cumque dolore eaque! Voluptas vel excepturi possimus! Placeat fugit doloremque eos praesentium aliquam, eligendi harum doloribus quas modi dolorem odit temporibus porro obcaecati perferendis. Sapiente vitae aspernatur blanditiis dolor dolorem quam, vero numquam nesciunt, quaerat iure a error incidunt maiores necessitatibus deserunt laboriosam voluptatem consectetur! Natus commodi quo autem magnam fugit in sequi, blanditiis sit aut consequatur necessitatibus provident numquam corporis eligendi suscipit sunt tenetur debitis quisquam doloremque. Et excepturi hic dolor recusandae tempora, consequatur nobis corporis odit enim, est cumque neque eos illum reiciendis ratione veniam laborum. Sint provident, illo facilis dolore fuga et, placeat suscipit quasi consectetur nostrum distinctio sequi voluptatem aliquid harum. Enim, non distinctio necessitatibus ipsum maxime soluta suscipit laborum expedita nulla voluptatum! Delectus perspiciatis animi ipsa omnis! Beatae, voluptates earum? Fuga alias commodi minima labore nemo impedit, perferendis similique quibusdam! Doloribus voluptatibus atque doloremque quasi rerum explicabo enim dolor suscipit hic! Quo quibusdam laboriosam qui sit quam, corrupti eaque cum earum tempore asperiores quis facere distinctio esse dignissimos.
           <div class="to-up">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E">
                      </div>
                </div>
            </div>
       </div>
	   <footer class="container footer">
		<div class="row">
				<div class="col col__footer">
					[Подвал]
			   </div>
	      </div>
	  </footer> 	
</body>
              
            
!

CSS

              
                /*Обнуление*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: column;
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
}

/*//////////////////////////////////////////*/
/* контейнер */
.container {
  width: 100%;
  max-width: 1200px;
  padding-right: 15px;
  padding-left: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* flex-контейнер */
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* CSS настройки flex-элементов */
.col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* ширина блоков article и aside по умолчанию */
.col__article,
.col__aside {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

/* ширина блоков article и aside для больших экранов */
@media (min-width: 992px) {
  /* 2/3 от ширины контейнера */
  .col__article {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  /* 1/3 от ширины контейнера */
  .col__aside {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

.header {
  background-color: #2f4f4f;
  flex: 0 0 auto;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
}

.col__article {
  background-color: #fff8e1;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}

.col__aside {
  background-color: #dcedc8;
  padding-top: 20px;
}

.main {
  flex: 1 0 auto;
  display: flex;
}

.main .row {
  flex-grow: 1;
}

.footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  text-align: center;
  background-color: #2f4f4f;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
}
/****************************************/
.nums__wrapper {
  display: flex;
}

.nums__title {
  flex-shrink: 0;
  margin-right: 5px;
  margin-bottom: 5px;
  border: 1px solid transparent;
  padding: 4px 2px 4px 0;
  color: #7B68EE;
  font-size: 16px;
  font-weight: 600;
  width: 66px;
}

.nums {
  display: flex;
  flex-wrap: wrap;
}

.nums a {
  display: block;
  border: 1px solid black;
  padding: 4px 0;
  border-radius: 8px;
  text-align: center;
  background-color: #f0fff0;
  color: black;
  margin-right: 5px;
  margin-bottom: 5px;
  width: 50px;
}

.nums > li:last-child > a {
  margin-right: 0;
}

.nums a:hover {
  color: red;
  background: #ffe4e1;
}

@media screen and (max-width: 600px) {
  .nums__wrapper{
   display: block;
  }
}
#myInput {
  border: 1px solid red;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 5px; 5px;
}


.to-up {
  position: fixed; /* фиксированная позиция */
  color: #fff; /* цвет текста */
  background-color: #3aa111; /* цвет заднего фона */
  right: 20px; /* расстояние от правого края */
  bottom: 40px; /* расстояние от нижнего края */
  padding: 12px 12px; /* отступы до содержимого блока */
  font-size: 20px; /* размер шрифта (иконки) */
  /*border-top-left-radius: 6px; /* скругление верхнего левого угла */
  /*border-top-right-radius: 6px; /* скругление верхнего правого угла */
  border-radius: 100%; 
  cursor: pointer; /* форма курсора */
  display: none; /* не отображать элемент */
  text-align: center; /*выравнивание содержимого элемента по центру */
}
div.to-up:hover {
  background-color: orange; /* цвет заднего фона при наведении */
}
              
            
!

JS

              
                
function myFunction() {
  // Объявлять переменные
  var input, filter, ul, li, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("fltr");
  li = ul.getElementsByTagName('li');

  // Выполните цикл по всем элементам списка и скройте те, которые не соответствуют запросу поиска
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase() === filter) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {

    let toTopBtn = document.querySelector('.to-up');

    window.onscroll = function () {
        if (window.pageYOffset > 580) {
            toTopBtn.style.display = 'block'
        } else {
            toTopBtn.style.display = 'none'
        }
    }

    // плавный скролл наверх
    toTopBtn.addEventListener('click', function () {
        window.scrollBy({
            top: -document.documentElement.scrollHeight,
            behavior: 'smooth'
        });
    });
});
              
            
!
999px

Console