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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="0.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="1.css"><link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />

  </head>
  <body>
    <section id="section0">
<p class="p"><span class="span">THE</span> <span class="span0">MOON</span></p>
<div class="div">
  <aside class="aside">
  <p class="p0">ПОЛЕТЫ НА ЛУНУ <span class="span1">С 40% СКИДКОЙ</span></p>
    <p class="p1">Узнайте первыми об уникальном предложении и получите возможность
  заказать десятидневный тур по цене пятидневного</p>
    <a href="#" >ПРИНЯТЬ УЧАСТИЕ</a>

  </aside>
</div>

    </section>


<section id="section1">
  <div class="slider">
    <div>
      <img src="http://placehold.it/250x250" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/250x250" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/250x250" alt="" />
    </div>

  </div>
  <div id='div'><img src="http://media.lpgenerator.ru/images/245037/bezimeni-10_fPO5E8V.png#size_25x45" alt="" class="left">
    <img src="http://media.lpgenerator.ru/images/245037/bezimeni-9_excx7Mu.png#size_24x45" alt="" class="right"></div>


</section>

<section id="section2">


  <p class="p">ПОЧЕМУ <span>ИМЕННО МЫ?</span></p>
<div class="grid">
<div class="">
  <img src="https://media.lpgenerator.ru/images/57561/i1_SlAtGvo.png#size_45x44" alt="">
  <p>Опишите одно из самых
  выдающихся
  преимуществ вашего
  предложения</p>
</div>
<div class="">
  <img src="https://media.lpgenerator.ru/images/57561/i2_KF1GZb3.png#size_43x34" alt="">
  <p>Сообщите о второй
  по важности черте
  вашего продукта
  или сервиса</p>

</div>
<div class="">
  <img src="https://media.lpgenerator.ru/images/57561/i3_OaFkVCV.png#size_45x45" alt="">

  <p>Обратите внимание
  на еще один факт
  касательно вашего
  предложения</p>

</div>
<div class="">
  <img src="https://media.lpgenerator.ru/images/57561/i4_dGwNQmg.png#size_33x48" alt="">
  <p>Расскажите о вашей
  компании, обозначив
  ее сильные стороны
  и преимущества</p>

</div>
</div>

</section>
<section id="section3">
<div class="div">
<span>ОСТАВЬТЕ СВОЙ E-MAIL</span>и попадите в список пассажиров
<div class="div1">
<input type="text" name="" value="" placeholder="Ваш email...">
<a href="#">ПРИНЯТЬ УЧАСТИЕ</a>
</div>
</div>
</section>


<section id="section4">
  <p class="p">КАК МЫ <span>РАБОТАЕМ?</span></p>
  <section class="">
    <div class="div">
     <div class="img" alt=""></div>
  <article class="">
    <div class="wrap">

      <p class="p1"> </p>

    </div>
  <p class="p2">1</p>
  <p class="p3">Заполните
    <br> форму</p>
</article>
  <article class="">
    <div class="wrap">

      <p class="p1"> </p>

    </div>  <p class="p2">2</p>
  <p class="p3">Получите приглашение
    <br> по e-mail</p>
</article>
  <article class="">
    <div class="wrap">

      <p class="p1"> </p>

    </div>
     <p class="p2">3</p>
        <p class="p3">Оплатите
          <br> полет</p>
  </article>
  <article class="">
    <div class="wrap">

      <p class="p1"> </p>

    </div>    <p class="p2">4</p>
    <p class="p3">Наслаждайтесь
      <br>путешествием!</p>
</article>
    </div>
  </section>


</section>


<footer>

  <p class="p" id="p"><span class="span">THE</span> <span class="span0">MOON</span></p>

</footer>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <script src="0.js"></script>

  </body>
</html>

              
            
!

CSS

              
                *{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  overflow-x: hidden;

  font-weight: 200;
font-family: 'Open Sans', sans-serif;
color: white;
}
span{
  font-weight: 800;
}
a:hover, span:hover{
  background: red !important;
  color: black !important;
}

#section0{
  background: url(https://images.wallpaperscraft.ru/image/luna_noch_zvezdy_134696_3840x2400.jpg) no-repeat center/cover;

background-attachment: fixed ;
overflow-y: hidden;
height: 100vh;
}#section0 .p, #section2 .p, footer .p{
  text-align: center;
  font-size: 34px;
  margin-top: 5%;
}#section0 .span, footer .span{
  border: 3px solid #fff;
  padding:0 5px;
font-weight: 200;
}
  #section0 .span0, footer .span0{
    font-weight: 800;
  }  #section0 .div{
    margin-top: 20px;
    display: flex;
    align-items: center;
justify-content: center;
  }

  #section0 .aside{

text-align: center;
color: black;
padding: 80px 140px ;
padding-bottom: 160px;
background: #fff;
width: 860px;
outline: 3px solid #fff;
outline-offset: 4px;

}#section0 .p0{
font-size: 30px;
margin-bottom: 5%;
  }
  #section0 .span1{
font-weight: 800;
color: orange;
  }  #section0 a{
position: relative;
top: 40px;
  }
   a{
padding: 14px 68px;
background: orange;
color: #fff;
font-weight: 900;
text-decoration: none;
font-size: 20px;
  }

#section1{
  height: 100vh;
  background: silver;
overflow-y: hidden;
}
#section2{
  height: 87vh;
  overflow-y: hidden;

}#section2 .grid{
  text-align: center;
  margin-left: 8%;
  margin-top: 100px;
  display: grid;
grid-template-columns: repeat(4, 1fr);
color: rgb(0, 0, 0);


}

#section2 .p{
color: black ;
margin-top: 100px;
}#section2 span{
  color: orange;

  }#section2 img{
  background: url(https://media.lpgenerator.ru/images/57561/romb_QZQOfXA.png#size_136x136) no-repeat center;
  padding: 52px;

}#section2 img:hover{
  animation: rotation .7s infinite linear;
}



#section3{
  overflow-y: hidden;
  height: 80vh;
  background: url(http://media.lpgenerator.ru/images/57561/fon2_XBYiU9d.jpg#size_3000x1500) no-repeat center center/cover;
  background-attachment: fixed ;
}#section3 .div{
  text-align: center;
  margin-top: 200px;
  font-size: 20px;
  }#section3 .div span{
    margin-right: 6px;

font-size: 30px;
font-weight: 800;
}#section3 .div1{
margin-top: 30px;

}#section3 input{
margin-right: 5px;
padding: 11px 116px;
padding-left: 13px;
font-size: 22px;
background: transparent;
border: 2px solid #eebc58;
}

#section3 input:focus{
outline: none;
border: 2px solid transparent;
box-shadow: 0 0 10px blue; /* Параметры тени */

}

#section4{
  color: black;
height: 82vh;
text-align: center;
}
#section4 .p{

  font-size: 35px;
  text-align: center;
  margin-top: 100px;
}
#section4 span{
  color: orange;

}#section4 section{
  position: relative;
  height: 20vh;
}
#section4 .div{
  margin: 0;
      position: absolute;
      top: 120%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
  display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0 50px;

}#section4 article{
position: relative;
bottom: 28.5px;

}#section4 .img{
  background: url(http://media.lpgenerator.ru/images/57561/line_zjwq74t.png#size_709x8) no-repeat center;
  grid-column-start: span 4;
height: 2vh;

}

#section4 .p2{
  color: orange;
  font-weight: 800;
font-size: 30px;
}
.wrap{
  position: relative;
  height: 7vh;
}
#section4 .p1{
background-position: 0% 0%;
background-repeat: no-repeat;
border-width: 0px;
border-radius: 0px;
border-color: #cccccc;
height: 19px;
width: 19px;
border-style: none;
background-color: #feb422;
border-radius: 50%;

  margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);

}
footer{
  position: relative;
  height: 35vh;
  overflow-y: hidden;
  background: linear-gradient(to right, #bc9db6, #d3c4d1 60%, #aba7a7);
}


footer #p{
  margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%)
    }
    @keyframes rotation {
      from {transform: rotate(0deg);}
  to   {transform: rotate(359deg);}
    }




@media (max-width: 613px) {
   a{
padding: 5px 10px !important;
  }#section4 {
    height: 110vh;
  }
  #section4 .div{
    display: flex;
    flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30%;
  }

}

@media (max-width: 800px) and (min-width: 520px) {
   a{
display: flow-root;
  }
}




@media (max-width: 913px) {
  #section2{
    height: auto;
  }
  #section2 .grid{
    display: flex;
    flex-direction: column;
justify-content: center;
align-items: center;

  }
  #section2 .grid div{
    width: 400px;
margin-top: 30px;
  }

}















.slider {
  width: 250px;
  margin: 0 auto;
  margin-top: 200px;
}

.left {

   float:left;
position:relative;
bottom: 194px;

}

.left:hover {
  cursor: pointer;
}

.right {
  float:right;
position:relative;
bottom: 194px;


}

.right:hover {
  cursor: pointer;
}


#div{
position: relative;
width: 350px;
  margin: 0 auto;
  }

              
            
!

JS

              
                $(document).ready(function() {
  $('.slider').slick({
    arrows: false
  })

  $('.left').click(function() {
    $('.slider').slick("slickPrev");
  })

  $('.right').click(function() {
    $('.slider').slick("slickNext");
  })
})
              
            
!
999px

Console