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

              
                <!-- задание 10 -->
<div class="wrapper">
    <h1 class="title">Заголовок сайта</h1>
    <div class="row">
      <div class="block">
        <img class="block__picture" src="img/monkey.jpg" alt="Monkey">
        <p class="block__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia tortor nisi, sed faucibus mauris lacinia in. Duis sagittis hendrerit dui, eu dignissim dolor porttitor dignissim. Pellentesque auctor dignissim sapien. Pellentesque quis mauris turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus elementum viverra est, ut accumsan orci dapibus ac. Proin tincidunt consequat nisi, a blandit mauris hendrerit pharetra.</p>
      </div>
      <div class="block">
        <img class="block__picture" src="img/monkey.jpg" alt="Monkey">
        <p class="block__paragraph">Nulla sit amet diam eget lacus aliquam iaculis ac et metus. Quisque eget tortor condimentum, semper felis quis, aliquet quam. Nam luctus laoreet dui nec tristique. Vestibulum in sollicitudin odio. Pellentesque malesuada nulla sit amet congue fermentum. Maecenas vehicula urna non libero rhoncus, vel sagittis tortor vehicula. Mauris faucibus sem id fermentum malesuada. Mauris mollis pellentesque sem, vitae cursus nulla posuere a. Vestibulum congue pellentesque elit, et bibendum ipsum aliquet id.</p>
      </div>
      <div class="block">
        <img class="block__picture" src="img/monkey.jpg" alt="Monkey">
        <p class="block__paragraph">Maecenas tincidunt erat sit amet metus placerat, id porttitor tortor hendrerit. Maecenas at erat dolor. Nam imperdiet diam nec nibh vulputate finibus. Proin ut porta orci. Sed ac placerat lectus. Nunc non erat at dui vehicula sagittis eget a nunc. Ut cursus mauris vitae orci luctus feugiat. Donec ultricies nec nibh ac aliquam.</p>
      </div>
      <div class="block">
        <img class="block__picture" src="img/monkey.jpg" alt="Monkey">
        <p class="block__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia tortor nisi, sed faucibus mauris lacinia in. Duis sagittis hendrerit dui, eu dignissim dolor porttitor dignissim. Pellentesque auctor dignissim sapien. Pellentesque quis mauris turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus elementum viverra est, ut accumsan orci dapibus ac. Proin tincidunt consequat nisi, a blandit mauris hendrerit pharetra.</p>
      </div>
      <div class="block">
        <img class="block__picture" src="img/monkey.jpg" alt="Monkey">
        <p class="block__paragraph">Nulla sit amet diam eget lacus aliquam iaculis ac et metus. Quisque eget tortor condimentum, semper felis quis, aliquet quam. Nam luctus laoreet dui nec tristique. Vestibulum in sollicitudin odio. Pellentesque malesuada nulla sit amet congue fermentum. Maecenas vehicula urna non libero rhoncus, vel sagittis tortor vehicula. Mauris faucibus sem id fermentum malesuada. Mauris mollis pellentesque sem, vitae cursus nulla posuere a. Vestibulum congue pellentesque elit, et bibendum ipsum aliquet id.</p>
      </div>
      <div class="block">
        <img class="block__picture" src="img/monkey.jpg" alt="Monkey">
        <p class="block__paragraph">Maecenas tincidunt erat sit amet metus placerat, id porttitor tortor hendrerit. Maecenas at erat dolor. Nam imperdiet diam nec nibh vulputate finibus. Proin ut porta orci. Sed ac placerat lectus. Nunc non erat at dui vehicula sagittis eget a nunc. Ut cursus mauris vitae orci luctus feugiat. Donec ultricies nec nibh ac aliquam.</p>
      </div>
      <div class="block">
        <img class="block__picture" src="img/monkey.jpg" alt="Monkey">
        <p class="block__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia tortor nisi, sed faucibus mauris lacinia in. Duis sagittis hendrerit dui, eu dignissim dolor porttitor dignissim. Pellentesque auctor dignissim sapien. Pellentesque quis mauris turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus elementum viverra est, ut accumsan orci dapibus ac. Proin tincidunt consequat nisi, a blandit mauris hendrerit pharetra.</p>
      </div>
      <div class="block">
        <img class="block__picture" src="img/monkey.jpg" alt="Monkey">
        <p class="block__paragraph">Nulla sit amet diam eget lacus aliquam iaculis ac et metus. Quisque eget tortor condimentum, semper felis quis, aliquet quam. Nam luctus laoreet dui nec tristique. Vestibulum in sollicitudin odio. Pellentesque malesuada nulla sit amet congue fermentum. Maecenas vehicula urna non libero rhoncus, vel sagittis tortor vehicula. Mauris faucibus sem id fermentum malesuada. Mauris mollis pellentesque sem, vitae cursus nulla posuere a. Vestibulum congue pellentesque elit, et bibendum ipsum aliquet id.</p>
      </div>
    </div>
  </div>
              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font: 10px/1.8 Arial, Helvetica, sans-serif;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

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

.block:not(:nth-child(3n)) {
  margin-right: 2%;
}

.block {
  max-width: 32%;
  border: 1px solid green;
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font: 700 5.5rem "Times New Room";
  text-align: center;
}

.block__paragraph {
  font-size: 1.5rem;
  text-align: justify;
}

@media screen and (min-width: 900px) and (max-width: 1710px) {
  .block__picture {
  width: 100%;
  }
}

@media screen and (max-width: 900px) {
  .block {
    max-width: 100%;
  }

  .title {
    font-size: 4.5rem;
  }
}

@media screen and (max-width: 550px) {
  .block__picture {
    width: 100%;
  }

  .title {
    font-size: 3.2rem;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console