CodePen Embed - ZEpGQZw

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 <title>CANNABINOL4IK </title>
</head>
  <body>
 <div class="content!">


 <header>
 <img src="2QQj.gif" alt="logotype" class="logotype"><span class="xxx"><h1>CANNABINOL<span><strong>4</strong></span>IK</h1></span><div class="settings"></div>
 </header>
 
 <nav class="topmenu">
 <ul class="menu"> 
 <li>главная</li>
 <li>о нас</li> 
 <li class="dropdown">наш продукт 
 <ul class="dropdown-content">
 <li><a href="">шишки</a></li>
 <li><a href="">гашиш</a></li>
 <li><a href="">зерна</a></li>
 <li><a href="">девайсы</a></li>
 <li><a href="">оборудование</a></li>
 <li><a href="">масло</a></li>
 </ul>
 </li>
 <li>новости</li>
 </ul>
 </nav>
 
 <article>
 </article>
 <section class="content1">
 <div class="picture">
 </div>
 </section >
 <section class="content2">
 <div class="text">
 <p>Наша компания является одним из первопроходцев Израиля на рынке товаров каннабиса и сопутствующих товаров.Мы являемся лидером по продаже медицинской марихуаны и наш товар имеет эксклюзивное качество!Мы заботимся о наших клиентах и их потребностях. 
 </div>
 <div class="gif">
 </div>
 </section>
 <section class="content3">
 
 <div class="part1"><p>Наша сеть магазинов находится по всему Израилю:Тель-Авив,Нетания,Рамат-Ган,Раанана,Эйлат,Петах-Тиква,а также бесплатная доставка от 1000 шекелей  в любое место этой прекрасной страны.Мы позаботимся чтобы наш клиент всегда был доволен.Более сотни сотрудеиков трудятся в компании обеспечивая вас необходимым продуктом!<p></div>
 <div class="part2"><a href="">Бонги<br>тут</a></div>
 <div class="part3"><img src="" alt=""></div>
 </section>
 <aside class="reklama">
 </aside>
 <a id="button"></a>
 
 
 <footer>

 </footer>
 </div> 
 <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>    
</body>

html{
 width:100%;
 background-color:#2F4F4F;
 overflow-x: hidden;
 overflow-Y:scroll;
 }

 
 header {
 display:flex;
 line-height:0;
 font-size:33px;
 background-color:black;
 color:green;
 margin-top:-6;
 margin-left:-10;
 margin-right:-10;
 text-align:center;
 font-family:georgia;
 vertical-align:middle;
 
}
 img {
 margin:2%;
 width:8%;
 height:15%;
 }
 h1 {
 float:right;
 padding:10px 0 0 0;
vertical-align:middle; 
}
 .settings {
 border:2px solid yellow;
 width:27%;
 }
 .xxx {
 color:green;
 } 
 .xxx:hover {
 color:yellow;
 } 
 .xxx:hover span {
 color:green;  
 } 
 .xxx span {
 color:yellow;
 } 
 li {
 list-style:none;
 margin:0 1.2%;
 font-family:cursive;
 text-shadow:1px 1px 1px black;
 }
 li:hover {
 text-decoration:underline;
 text-decoration-skip-ink:none;
 } 
 .menu {
 display:flex;
 color:yellow;
 font-size:30px;
 background-color:#556B2F;
 text-shadow:0.2px 0.2px 0.2px black;
 margin-bottom:0;
 margin-left:0;
 margin-top:0; 
}
 .dropdown {
 position:relative;
 display:inline-block;
 } .dropdown-content {
 position:absolute;
 display:none;
 } .dropdown-content a {
 color:orange;
 }
 .dropdown:hover .dropdown-content {
 display:block;
 position:absolute;
 }
 .picture {
 background:url("depositphotos_15334457-stock-photo-marijuana.jpg");
 display:block;
 background-image:cover;
 width:100%;
 height:38%;
 } 
 .content2 {
 display:flex;
 border:3px solid green;
 }
 .text {
 border:3px solid red;
 width:50%;
 font-size:25px;
 font-family:cursive;
 background:url("picture2.jpg");
 color:#00FF00;
 text-shadow:1px 1px 1px black;
 background-size:cover; padding:1%;
 }
 .gif {
 border:3px solid orange;
 width:50%;
 background:URL("XBJZ.gif");
 background-size:cover;
 }
 #button {   
   display: inline-block;   
   background-color: #FF9800;   
   width: 50px;   
   height: 50px;   
   text-align: center;   
   border-radius: 4px;   
   margin: 30px;   
   position: fixed;   
   bottom: 30px;   
   right: 30px;   
   transition: background-color .3s;   
   z-index: 1000; 
} 
#button:hover {   
   cursor: pointer;   
   background-color: #333; 
} 
#button:active {   
   background-color: #555; 
} 
 
#button::after {
   content: "\f077";
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   font-size: 2em;
   line-height: 50px;
   color: #fff; 
} 
.qqq {
font-size:50;
}
.content3 {
display:flex;
border:3px solid blue;
width:100%;
}
.part1 {
width:40%;
border:3px solid orange;
color:orange;
font-size:25px;
}
.bong {
background-size:cover;

}
.part2 {
border:3px solid green;
width:30%;
background:url("1uxz.gif");
background-size:cover;
font-size:60px;
text-align:center;
padding:10% 0;
 text-transform: uppercase;

}
.part3 {
width:30%;
border:3px solid yellow;
}

jQuery(document).ready(function() {
  var btn = $('#button');  
  $(window).scroll(function() {     
    if ($(window).scrollTop() > 300) {
       btn.addClass('show');
     } else {
       btn.removeClass('show');
     }
   });
   btn.on('click', function(e) {
     e.preventDefault();
     $('html, body').animate({scrollTop:0}, '300');
   });
});

This Pen is owned by ilya on CodePen.

See more by @ilyaaa on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.