add main page

css/style.css

@@ -80,6 +80,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);
@@ -88,6 +100,7 @@ header {
 .logo {
   font-size: 24px;
   color: rgb(2, 2, 120);
+  font-weight: 600;
 }
 
 .header {
@@ -129,4 +142,179 @@ 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;
+}
+.settings-rest {
+  width: 33.3%;
+  display: flex;
+  justify-content: space-between;
+}
+.settings .sort {
+  color: rgb(103, 103, 103);
+}
+.settings .sort span {
+  color: rgba(1, 1, 81, 0.711);
+  text-decoration: underline;
+}
+.settings .calendar {
+  position: relative;
+  cursor: pointer;
+}
+.settings .calendar::before {
+  content: url("../icons/calendar1.svg");
+  position: absolute;
+  top: -2px;
+  left: -20px;
+  width: 15px;
+  height: 15px;
+}
+.settings .ended {
+  position: relative;
+  cursor: pointer;
+  text-align: end;
+}
+.settings .ended::before {
+  content: url("../icons/toggle_off.svg");
+  position: absolute;
+  top: -6px;
+  left: -30px;
+}
+
+.cards {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 40px;
+}
+
+.card {
+  width: 240px;
+  font-size: 12px;
+  margin: 15px 0;
+}
+.card__image {
+  width: 240px;
+}
+.card__title {
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+.card__describe {
+  min-height: 84px;
+}
+.card-inf {
+  display: flex;
+  justify-content: space-between;
+  margin: 15px 0 10px 13px;
+}
+.card-inf__item {
+  font-size: 10px;
+  position: relative;
+  color: rgb(103, 103, 103);
+}
+.card-inf__item::before {
+  content: url("../icons/clock.svg");
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  left: -13px;
+}
+.card-inf .date::before {
+  content: url("../icons/calendar2.svg");
+}
+.card .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;
+}
+.card .subscribe:hover {
+  color: white;
+  background-color: rgba(1, 1, 81, 0.711);
+}
+.card .more {
+  text-decoration: underline;
+}
+.card .themes {
+  margin: 5px 0;
+  font-size: 10px;
+  text-transform: uppercase;
+  display: flex;
+  color: rgba(255, 166, 0, 0.566);
+}
+.card .themes__name {
+  padding: 3px 2px;
+  border: 1px solid rgba(255, 166, 0, 0.566);
+  margin-left: 5px;
+}
+.card .themes 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;
+}
+.footer .text {
+  padding-top: 15px;
+  color: white;
+  width: 30%;
+}
+.footer .social {
+  display: flex;
+  justify-content: space-between;
+  width: 60%;
+}
+.footer .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;
+}
+.footer .item a:hover {
+  transform: scale(1.1);
+}
+.footer .item img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 15px;
+  height: 15px;
+}
+.footer .networks {
+  width: 20%;
+}
+.footer .networks .text {
+  width: 100%;
+  margin-bottom: 15px;
+}
+.footer .about {
+  padding-top: 15px;
+  color: white;
+  width: 30%;
+}
+.footer .about__column {
+  display: grid;
+  grid-template-columns: 40% 60%;
 }