main_webpage

style.css

@@ -5,6 +5,7 @@ body {
     font-family: "Poppins", sans-serif;
     font-weight: 400;
     color: white;
+    font-size: 16px;
 }
 
 img {
@@ -19,7 +20,7 @@ img {
 /* --------------------------------HEADER----------------------------- */
 
 .container {
-    width: 700px;
+    width: 1200px;
     margin: 0 auto;
 }
 header {
@@ -30,24 +31,35 @@ header {
     font-weight: 800;
     font-size: 29px;
 }
-nav {
+.nav {
     float: right;
     width: 50%;
 }
-ul {
+.items {
+    position: relative;
     display: flex;
     justify-content: space-between;
+    z-index: 2;
 }
-li {
+.item {
     display: inline-block;
 }
-a {
+.link {
     color: #fff;
 }
-header nav ul li:not(.active):not(.btn) a:hover {
+header nav ul li:not(.active):not(.btn) .link:hover {
     border-bottom: 5px solid #DC7000;
 }
-.active {
+.active::after {
+    content: "";
+    display: block;
+    width: 40px;
+    height: 5px;
+    background-color: #DC7000;
+    border-radius: 10px;
+    position: relative;
+    top: 10px;
+    left: -15px;
 }
 .btn a{
     background: #FA9021;
@@ -61,6 +73,170 @@ header nav ul li:not(.active):not(.btn) a:hover {
 
 /* --------------------------------HERO----------------------------------- */
 .hero {
+    padding-bottom: 100px;
+    position: relative;
+    z-index: 1;
 }
 .hero_info {
+    width: 530px;
+    padding-top: 70px;
+}
+.hero_h2 {
+    font-size: 20px;
+    color: #E87D0E;
+    font-weight: 600;
+}
+.hero_h1 {
+    font-weight: 600;
+    font-size: 50px;
+}
+.hero_p {
+    font-weight: 500;
+    line-height: 170%;
+    margin: 30px 0;
+}
+button {
+    background: linear-gradient(90deg,rgba(250, 131, 5, 1) 0%, rgba(251, 158, 60, 1) 100%);
+    color: white;
+    border-radius: 50px;
+    padding: 15px 30px;
+    transition: all 500ms ease;
+    font-size: 17px;
+}
+button:hover {
+    cursor: pointer;
+    transform: scale(1.1);
+}
+.hero_img {
+    position: absolute;
+    top: -250px;
+    right: -30px;
+}
+
+/* --------------------------------GAMES------------------------------------------- */
+
+.container {
+}
+.trending {
+    padding-top: 50px;
+}
+.see_h3 {
+    font-weight: 600;
+    font-size: 31px;
+}
+.see-all {
+    color: white;
+    background-color: rgba(255, 255, 255, 0.11);
+    border-radius: 5px;
+    padding: 12px 23px;
+    float: right;
+    display: block;
+    transition: all 500ms ease;
+}
+.see-all:hover {
+    transform: scale(1.1);
+}
+.games {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 50px 0;
+}
+.block {
+}
+.block_img {
+
+}
+.span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+}
+span img {
+    margin-right: 7px;
+}
+
+/* ------------------------------------BIF-TEXT----------------------------------------- */
+
+.container {
+
+}
+.big-text {
+    padding: 50px 0;
+    font-size: 35px;
+    font-weight: 600;
+    text-align: center;
+    width: 800px;
+}
+
+/* ------------------------------------BANNER------------------------------------------------- */
+
+.container {
+}
+.banner {
+    padding: 80px 0;
+}
+.banner_h3 {
+    font-size: 30px;
+    font-weight: 600;
+    margin-bottom: 30px;
+}
+.banner_p {
+    line-height: 170%;
+    margin-bottom: 30px;
+    width: 550px;
+}
+.img_banner {
+    width: 100%;
+    margin-bottom: 30px;
+}
+
+/* -------------------------------------FEATURE---------------------------------------------------- */
+
+.features {
+    background: url("images/bcg.png") no-repeat center center fixed;
+    background-size: cover;
+    padding: 80px 0;
+}
+.container {
+}
+.features_h3 {
+    font-size: 30px;
+    font-weight: 600;
+    margin-bottom: 30px;
+    text-align: center;
+    max-width: 830px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.features_p {
+    font-weight: 400;
+    text-align: center;
+    max-width: 830px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.feature_info {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.feature_block {
+    text-align: center;
+    width: 20%;
+    margin: 30px 2%;
+}
+.blocks_down {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+.block_img {
+    margin-bottom: 20px;
+}
+.block_p {
+}
+.img_block {
+    margin-top: 15px;
 }