main_webpage

images/Fire.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="25" viewBox="0 0 19 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6966 14.6372C18.4102 10.9087 16.6743 8.57221 15.1428 6.5104C13.7248 4.60161 12.5 2.95327 12.5 0.521725C12.5 0.326413 12.3906 0.147897 12.2172 0.0583953C12.0432 -0.0316437 11.8342 -0.0168976 11.676 0.0980438C9.37603 1.74384 7.45698 4.51772 6.78662 7.1644C6.32124 9.00703 6.25967 11.0785 6.25103 12.4466C4.127 11.993 3.64585 8.81582 3.64077 8.7812C3.61685 8.6164 3.51616 8.47299 3.36968 8.39468C3.22168 8.31738 3.04771 8.31176 2.89766 8.38603C2.78628 8.43994 0.163769 9.77246 0.0111815 15.0928C0.0004881 15.2698 0 15.4474 0 15.6249C0 20.7936 4.20581 24.9992 9.375 24.9992C9.38213 24.9997 9.38975 25.0007 9.39585 24.9992C9.3979 24.9992 9.3999 24.9992 9.40244 24.9992C14.5589 24.9844 18.75 20.7845 18.75 15.6249C18.75 15.3649 18.6966 14.6372 18.6966 14.6372ZM9.375 23.9576C7.65176 23.9576 6.25 22.4644 6.25 20.6289C6.25 20.5664 6.24951 20.5033 6.25405 20.426C6.2749 19.6519 6.42192 19.1235 6.58315 18.772C6.8853 19.421 7.42544 20.0176 8.30283 20.0176C8.59072 20.0176 8.82368 19.7846 8.82368 19.4968C8.82368 18.7553 8.83896 17.8998 9.02358 17.1277C9.18789 16.4432 9.58052 15.7148 10.078 15.131C10.2992 15.8888 10.7306 16.5021 11.1517 17.1008C11.7544 17.9572 12.3775 18.8427 12.4869 20.3527C12.4935 20.4422 12.5001 20.5323 12.5001 20.6289C12.5 22.4644 11.0982 23.9576 9.375 23.9576Z" fill="white"/>
+</svg>

images/row/right.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.26222 10.4789C1.34814 10.4928 1.4351 10.4992 1.52211 10.4981L16.3372 10.4981L16.0141 10.6484C15.6984 10.7978 15.4111 11.0012 15.1652 11.2494L11.0107 15.4039C10.4635 15.9262 10.3716 16.7665 10.7928 17.3948C11.2831 18.0643 12.2232 18.2096 12.8928 17.7194C12.9469 17.6798 12.9983 17.6366 13.0466 17.5901L20.5593 10.0774C21.1464 9.49093 21.147 8.53959 20.5605 7.95247C20.5601 7.9521 20.5597 7.95168 20.5593 7.9513L13.0466 0.438606C12.459 -0.147337 11.5077 -0.146023 10.9217 0.441565C10.8756 0.487814 10.8325 0.537022 10.7928 0.58886C10.3716 1.21716 10.4635 2.0574 11.0107 2.57972L15.1577 6.74176C15.3781 6.96244 15.6316 7.14749 15.909 7.29018L16.3597 7.49303L1.6048 7.49303C0.837233 7.46452 0.163813 8.0007 0.0196152 8.75516C-0.113218 9.57428 0.443098 10.346 1.26222 10.4789Z" fill="#DC7000"/>
+</svg>

index.html

@@ -13,27 +13,112 @@
     <div class="wrapper">
         <header class="container">
             <span class="logo">logo</span>
-            <nav>
+            <nav class="nav">
-                <ul>
+                <ul class="items">
-                    <li class="active">
+                    <li class="item active">
-                        <a href="#">Home</a>
+                        <a class="link" href="#">Home</a>
                     </li>
-                    <li><a href="#">About us</a></li>
+                    <li class="item"><a class="link" href="#">About us</a></li>
-                    <li><a href="#">Portfolio</a></li>
+                    <li class="item"><a class="link" href="#">Portfolio</a></li>
-                    <li><a href="#">News</a></li>
+                    <li class="item"><a class="link" href="#">News</a></li>
-                    <li class="btn"><a href="#">Contacts</a></li>
+                    <li class="item btn"><a class="link" href="#">Contacts</a></li>
                 </ul>
             </nav>
         </header>
-
         <div class="hero container">
             <div class="hero_info">
-                <h2>3D game Dev </h2>
+                <h2 class="hero_h2">3D game Dev </h2>
-                <h1>Work that we produce for our clients</h1>
+                <h1 class="hero_h1">Work that we produce for our clients</h1>
-                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
+                <p class="hero_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
                 <button class="btn">Get more details</button>
             </div>
-            <img src="images/Group 1321.svg" alt="img">
+            <img class="hero_img" src="images/Gameplay.svg" alt="img">
+        </div>
+        <div class="container trending">
+            <a href="#" class="see-all">SEE ALL</a>
+            <h3 class="see_h3">Currently Trending Games</h3>
+
+            <div class="games">
+                <!-- 1 -->
+                <div class="block">
+                    <img class="block_img" src="images/Games/1.png" alt="game1">
+                    <span class="span"><img src="images/Fire.svg" alt="fire">40 Followers</span>
+                </div>
+                <!-- 2 -->
+                <div class="block">
+                    <img class="block_img" src="images/Games/2.png" alt="game2">
+                    <span class="span"><img src="images/Fire.svg" alt="fire">40 Followers</span>
+                </div>
+                <!-- 3 -->
+                <div class="block">
+                    <img class="block_img" src="images/Games/3.png" alt="game3">
+                    <span class="span"><img src="images/Fire.svg" alt="fire">40 Followers</span>
+                </div>
+                <!-- 4 -->
+                <div class="block">
+                    <img class="block_img" src="images/Games/4.png" alt="game4">
+                    <span class="span"><img src="images/Fire.svg" alt="fire">40 Followers</span>
+                </div>
+            </div>
+        </div>
+        <div class="container big-text">
+            <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+        </div>
+        <div class="container banner">
+            <h3 class="banner_h3">Lorem Ipsum</h3>
+            <p class="banner_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
+            <img class="img_banner" src="images/banner.png" alt="banner">
+        </div>
+    </div>
+
+    <div class="features">
+        <div class="container">
+            <h3 class="features_h3">
+               Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+            </h3>
+            <p class="features_p">
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+            </p>
+            <div class="feature_info">
+                <!-- 1 -->
+                <div class="feature_block">
+                    <img class="block_img" src="images/row/phone.png" alt="img1">
+                    <p class="block_p">Mobile Game Development</p>
+                    <img class="img_block" src="images/row/right.svg" alt="right">
+                </div>
+                <!-- 2 -->
+                <div class="feature_block">
+                    <img class="block_img" src="images/row/pc.png" alt="img1">
+                    <p class="block_p">PC Game Development</p>
+                    <img class="img_block" src="images/row/right.svg" alt="right">
+                </div>
+                <!-- 3 -->
+                <div class="feature_block">
+                    <img class="block_img" src="images/row/ps4.png" alt="img1">
+                    <p class="block_p">PS4 Game Development</p>
+                    <img class="img_block" src="images/row/right.svg" alt="right">
+                </div>
+                <!-- 4 -->
+                <div class="feature_block">
+                    <img class="block_img" src="images/row/vr.png" alt="img1">
+                    <p class="block_p">AR/VR Solutions</p>
+                    <img class="img_block" src="images/row/right.svg" alt="right">
+                </div>
+                <div class="blocks_down">
+                    <!-- 5 -->
+                    <div class="feature_block">
+                        <img class="block_img" src="images/row/monitor.png" alt="img1">
+                        <p class="block_p">AR/ VR design</p>
+                        <img class="img_block" src="images/row/right.svg" alt="right">
+                    </div>
+                    <!-- 6 -->
+                    <div class="feature_block">
+                        <img class="block_img" src="images/row/cube.png" alt="img1">
+                        <p class="block_p">3D Modelings</p>
+                        <img class="img_block" src="images/row/right.svg" alt="right">
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 

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;
 }