matowdev
diff --git a/‎core-courses/4-web-layout-advanced-level/7-pre-postprocessors/7-3(4)-intro-to-sass/index.html‎
Lines changed: 11 additions & 4 deletions b/‎core-courses/4-web-layout-advanced-level/7-pre-postprocessors/7-3(4)-intro-to-sass/index.html‎
Lines changed: 11 additions & 4 deletions
diff --git a/‎core-courses/4-web-layout-advanced-level/7-pre-postprocessors/7-3(4)-intro-to-sass/style.css‎
Lines changed: 36 additions & 0 deletions b/‎core-courses/4-web-layout-advanced-level/7-pre-postprocessors/7-3(4)-intro-to-sass/style.css‎
Lines changed: 36 additions & 0 deletions
diff --git a/‎core-courses/4-web-layout-advanced-level/7-pre-postprocessors/7-3(4)-intro-to-sass/style.css.map‎
Lines changed: 1 addition & 0 deletions b/‎core-courses/4-web-layout-advanced-level/7-pre-postprocessors/7-3(4)-intro-to-sass/style.css.map‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎core-courses/4-web-layout-advanced-level/7-pre-postprocessors/7-3(4)-intro-to-sass/style.scss‎
Lines changed: 39 additions & 0 deletions b/‎core-courses/4-web-layout-advanced-level/7-pre-postprocessors/7-3(4)-intro-to-sass/style.scss‎
Lines changed: 39 additions & 0 deletions
@@ -8,10 +8,17 @@
   <link rel="stylesheet" href="./style.css">
 </head>
 
-<body>
-  <h1>Lorem, ipsum dolor.</h1>
-  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis labore, iste reiciendis aperiam blanditiis
-    dolore!</p>
+<body class="page">
+  <div class="page__container">
+    <h1 class="page__header">Lorem, ipsum dolor.</h1>
+    <p class="page__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis labore, iste reiciendis
+      aperiam blanditiis dolore!</p>
+  </div>
+  <section class="section page__section">
+    <p class="section__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo totam nisi, commodi vel
+      repudiandae animi!</p>
+    <span class="section__info">2025</span>
+  </section>
 </body>
 
 </html>
@@ -0,0 +1,39 @@
+$main-background: #f2f2f2;
+$main-color: lightcoral;
+
+@mixin makeContainer {
+  margin: 0 auto;
+  padding: 20px;
+  background: darken($color: $main-background, $amount: 10%);
+}
+
+.page {
+  font-family: sans-serif;
+  font-size: 18px;
+  color: $main-color;
+  background: $main-background;
+
+  .page__header {
+    color: darkred;
+  }
+}
+
+.page__container {
+  @include makeContainer();
+}
+
+.section {
+  @include makeContainer();
+  background: darken($color: $main-background, $amount: 15%);
+  text-align: center;
+
+  &__text {
+    text-shadow: 0 1px 1px lightslategray;
+  }
+
+  &__info {
+    font-weight: bold;
+    font-size: 14px;
+    color: darken($color: $main-color, $amount: 30%);
+  }
+}