diff --git a/images/Fire.svg b/images/Fire.svg new file mode 100644 index 0000000..cd2ff1f --- /dev/null +++ b/images/Fire.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/Group 1321.svg b/images/Gameplay.svg similarity index 100% rename from images/Group 1321.svg rename to images/Gameplay.svg diff --git a/images/Games/1.png b/images/Games/1.png new file mode 100644 index 0000000..e15b314 Binary files /dev/null and b/images/Games/1.png differ diff --git a/images/Games/2.png b/images/Games/2.png new file mode 100644 index 0000000..7fea125 Binary files /dev/null and b/images/Games/2.png differ diff --git a/images/Games/3.png b/images/Games/3.png new file mode 100644 index 0000000..293f4f0 Binary files /dev/null and b/images/Games/3.png differ diff --git a/images/Games/4.png b/images/Games/4.png new file mode 100644 index 0000000..cfa229d Binary files /dev/null and b/images/Games/4.png differ diff --git a/images/banner.png b/images/banner.png new file mode 100644 index 0000000..14144fd Binary files /dev/null and b/images/banner.png differ diff --git a/images/bcg.png b/images/bcg.png new file mode 100644 index 0000000..49ab1b3 Binary files /dev/null and b/images/bcg.png differ diff --git a/images/row/cube.png b/images/row/cube.png new file mode 100644 index 0000000..a6a827c Binary files /dev/null and b/images/row/cube.png differ diff --git a/images/row/monitor.png b/images/row/monitor.png new file mode 100644 index 0000000..baf511c Binary files /dev/null and b/images/row/monitor.png differ diff --git a/images/row/pc.png b/images/row/pc.png new file mode 100644 index 0000000..ef9ff4e Binary files /dev/null and b/images/row/pc.png differ diff --git a/images/row/phone.png b/images/row/phone.png new file mode 100644 index 0000000..2ec0499 Binary files /dev/null and b/images/row/phone.png differ diff --git a/images/row/ps4.png b/images/row/ps4.png new file mode 100644 index 0000000..e576a98 Binary files /dev/null and b/images/row/ps4.png differ diff --git a/images/row/right.svg b/images/row/right.svg new file mode 100644 index 0000000..c00e03b --- /dev/null +++ b/images/row/right.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/row/vr.png b/images/row/vr.png new file mode 100644 index 0000000..8965feb Binary files /dev/null and b/images/row/vr.png differ diff --git a/index.html b/index.html index 1923324..06bf515 100644 --- a/index.html +++ b/index.html @@ -13,27 +13,112 @@
-
-
-

3D game Dev

-

Work that we produce for our clients

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

+

3D game Dev

+

Work that we produce for our clients

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

- img + img +
+
+ SEE ALL +

Currently Trending Games

+ +
+ +
+ game1 + fire40 Followers +
+ +
+ game2 + fire40 Followers +
+ +
+ game3 + fire40 Followers +
+ +
+ game4 + fire40 Followers +
+
+
+
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

+
+ +
+ +
+
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. +

+

+ 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, +

+
+ +
+ img1 +

Mobile Game Development

+ right +
+ +
+ img1 +

PC Game Development

+ right +
+ +
+ img1 +

PS4 Game Development

+ right +
+ +
+ img1 +

AR/VR Solutions

+ right +
+
+ +
+ img1 +

AR/ VR design

+ right +
+ +
+ img1 +

3D Modelings

+ right +
+
+
diff --git a/style.css b/style.css index d3b8dca..f58894e 100644 --- a/style.css +++ b/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; } \ No newline at end of file