add main page

style.scss

@@ -69,6 +69,18 @@ h6 {
   font-weight: 400;
 }
 
+body,
+html {
+  height: 100%;
+  font-family: arial;
+}
+
+.wrapper {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 header {
   height: 45px;
   border-bottom: 2px solid rgb(161, 137, 0);
@@ -77,6 +89,7 @@ header {
 .logo {
   font-size: 24px;
   color: rgb(2, 2, 120);
+  font-weight: 600;
 }
 
 .header {
@@ -123,4 +136,210 @@ header {
 .container {
   max-width: 1200px;
   margin: 0 auto;
+  padding: 0 20px;
+}
+
+main {
+  flex: 1 1 auto;
+}
+
+.settings {
+  padding-top: 15px;
+  display: flex;
+  justify-content: space-between;
+
+  &-rest {
+    width: 33.3%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .sort {
+    color: rgb(103, 103, 103);
+
+    span {
+      color: rgba(1, 1, 81, 0.711);
+      text-decoration: underline;
+    }
+  }
+
+  .calendar {
+    position: relative;
+    cursor: pointer;
+
+    &::before {
+      content: url("../icons/calendar1.svg");
+      position: absolute;
+      top: -2px;
+      left: -20px;
+      width: 15px;
+      height: 15px;
+    }
+  }
+
+  .ended {
+    position: relative;
+    cursor: pointer;
+
+    &::before {
+      content: url("../icons/toggle_off.svg");
+      position: absolute;
+      top: -6px;
+      left: -30px;
+    }
+    text-align: end;
+  }
+}
+
+.cards{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 40px;
+}
+
+.card {
+  width: 240px;
+  font-size: 12px;
+  margin: 15px 0;
+
+  &__image {
+    width: 240px;
+  }
+
+  &__title {
+    font-weight: 600;
+    margin-bottom: 5px;
+  }
+
+  &__describe{
+    min-height: 84px;
+  }
+
+  &-inf {
+    display: flex;
+    justify-content: space-between;
+    margin: 15px 0 10px 13px;
+
+    &__item {
+      font-size: 10px;
+      position: relative;
+      color: rgb(103, 103, 103);
+
+      &::before {
+        content: url("../icons/clock.svg");
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        left: -13px;
+      }
+    }
+
+    .date::before {
+      content: url("../icons/calendar2.svg");
+    }
+  }
+
+  .subscribe {
+    width: 100%;
+    border: 1px solid rgba(1, 1, 81, 0.711);
+    color: rgba(1, 1, 81, 0.711);
+    font-size: 10px;
+    height: 25px;
+    transition: 0.2s;
+
+    &:hover {
+      color: white;
+      background-color: rgba(1, 1, 81, 0.711);
+    }
+  }
+
+  .more {
+    text-decoration: underline;
+  }
+
+  .themes {
+    margin: 5px 0;
+    font-size: 10px;
+    text-transform: uppercase;
+    display: flex;
+    color: rgba(255, 166, 0, 0.566);
+
+    &__name {
+      padding: 3px 2px;
+      border: 1px solid rgba(255, 166, 0, 0.566);
+      margin-left: 5px;
+    }
+
+    li:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+footer {
+  padding: 15px 0;
+  background-color: rgba(141, 97, 2, 0.468);
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+
+  .text {
+    padding-top: 15px;
+    color: white;
+    width: 30%;
+  }
+
+  .social {
+    display: flex;
+    justify-content: space-between;
+    width: 60%;
+  }
+
+  .item {
+    a {
+      display: block;
+      width: 25px;
+      height: 25px;
+      border-radius: 3px;
+      border: 1px solid rgba(1, 1, 81, 0.711);
+      position: relative;
+      transition: 0.2s;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 15px;
+      height: 15px;
+    }
+  }
+
+  .networks {
+    width: 20%;
+
+    .text {
+      width: 100%;
+      margin-bottom: 15px;
+    }
+  }
+
+  .about {
+    padding-top: 15px;
+    color: white;
+    width: 30%;
+
+    &__column {
+      display: grid;
+      grid-template-columns: 40% 60%;
+    }
+  }
 }