first commit

2026-01-06 15:05:11 +03:00
commit 4e6c98a771
5 changed files with 150 additions and 0 deletions
--- a/images/Group
+++ b/images/Group
--- a/index.html
+++ b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Figma</title>
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header class="container">
+            <span class="logo">logo</span>
+            <nav>
+                <ul>
+                    <li class="active">
+                        <a href="#">Home</a>
+                    </li>
+                    <li><a href="#">About us</a></li>
+                    <li><a href="#">Portfolio</a></li>
+                    <li><a href="#">News</a></li>
+                    <li class="btn"><a href="#">Contacts</a></li>
+                </ul>
+            </nav>
+        </header>
+
+        <div class="hero container">
+            <div class="hero_info">
+                <h2>3D game Dev </h2>
+                <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>
+                <button class="btn">Get more details</button>
+            </div>
+            <img src="images/Group 1321.svg" alt="img">
+        </div>
+    </div>
+
+    <script src="main.js"></script>
+</body>
+</html>
--- a/main.js
+++ b/main.js
--- a/reset.css
+++ b/reset.css
@@ -0,0 +1,18 @@
+*{padding: 0;margin: 0;border: 0;}
+*,*:before,*:after{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
+:focus,:active{outline: none;}
+a:focus,a:active{outline: none;}
+nav,footer,header,aside{display: block;}
+html,body{
+  height:100%;width:100%;
+  font-size:100%;line-height:1;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
+input,button,textarea{font-family:inherit;}
+input::-ms-clear{display: none;}
+button{cursor: pointer;}
+button::-moz-focus-inner{padding:0;border:0;}
+a,a:visited{text-decoration: none;}
+a:hover{text-decoration: none;}
+ul li{list-style: none;}
+img{vertical-align: top;}
+h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: inherit;}
+a{color:inherit;}
--- a/style.css
+++ b/style.css
@@ -0,0 +1,66 @@
+/*------------------------------ base options------------------------------- */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');
+
+body {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    color: white;
+}
+
+img {
+    max-width: 100%;
+}
+
+.wrapper {
+    background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(74, 40, 0, 1) 100%);
+    width: 100%;
+}
+
+/* --------------------------------HEADER----------------------------- */
+
+.container {
+    width: 700px;
+    margin: 0 auto;
+}
+header {
+    padding: 50px 0;
+}
+.logo {
+    text-transform: uppercase;
+    font-weight: 800;
+    font-size: 29px;
+}
+nav {
+    float: right;
+    width: 50%;
+}
+ul {
+    display: flex;
+    justify-content: space-between;
+}
+li {
+    display: inline-block;
+}
+a {
+    color: #fff;
+}
+header nav ul li:not(.active):not(.btn) a:hover {
+    border-bottom: 5px solid #DC7000;
+}
+.active {
+}
+.btn a{
+    background: #FA9021;
+    padding: 9px 17px;
+    border-radius: 5px;
+    transition: all 500ms ease;
+}
+.btn a:hover {
+    background: #a02604;
+}
+
+/* --------------------------------HERO----------------------------------- */
+.hero {
+}
+.hero_info {
+}