Moon and Cloud

Moon and Cloud code:

1.index.html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset=»UTF-8″>

    <title>Moon and Cloud</title>

    <link rel=»stylesheet» href=»style.css»>

</head>

<body>

  <div class=»container»>

    <div class=»center»>

      <div class=»moon»></div>

      <div class=»cloud»>

        <span></span>

        <span></span>

        <span></span>

      </div>

      <div class=»cloud cloud2″>

        <span></span>

        <span></span>

        <span></span>

      </div>

    </div>

  </div>

</body>

</html>

2.style.css:

body

{

  margin: 0;

  padding: 0;

  background: blue;

}

.container

{

  position: relative;

  width: 100%;

  height: 640px;

  overflow: hidden;

}

.center

{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

}

.moon

{

  position: relative;

  width: 150px;

  height: 150px;

  background: white;

  border-radius: 50%;

}

.moon::before

{

  content: »;

  position: absolute;

  top: -15px;

  right: -15px;

  background: blue;

  width: 100%;

  height: 100%;

  border-radius: 50%;

}

.moon::after

{

  content: »;

  position: absolute;

  top: 0;

  left: -325px;

  height: 100%;

  width: 400px;

  background: linear-gradient(to left, rgba(0,0,0,0.4)0%, rgba(0,0,0,0)100%);

  transform-origin: right;

  transform: rotate(-45deg);

  z-index: -2;

}

.cloud

{

  position: absolute;

  width: 300px;

  height: 100px;

  background: white;

  border-radius: 50px;

  top: -100px;

  left: -300px;

}

.cloud span

{

  position: absolute;

  width: 120px;

  height: 120px;

  background: white;

  border-radius: 50%;

  display: block;

}

.cloud span:nth-child(1)

{

  top: -50px;

  left: 30px;

}

.cloud span:nth-child(2)

{

  top: -30px;

  left: 140px;

}

.cloud span:nth-child(3)

{

  top: -80px;

  left: 80px;

}

.cloud::after

{

  content: »;

  position: absolute;

  top: -110px;

  left: -368px;

  width: 560px;

  height: 240px;

  background: linear-gradient(to left, rgba(0,0,0,0.4)0%, rgba(0,0,0,0)100%);

  transform-origin: right;

  transform: rotate(-45deg);

  z-index: -2;

}

.cloud2

{

  top: 150px;

  left: 200px;

}

Оставьте комментарий

Ваш адрес email не будет опубликован.