Hugging Face's logo

Spaces:
SopKit
/
tools
Running

App Files Community
sh20raj commited on
Commit
94604aa
·
1 Parent(s): a9c97bb

ui ready

Browse files
Files changed (3) hide show
  1. index.html +26 -4
  2. pic.avif +0 -0
  3. style.css +85 -17
index.html CHANGED
@@ -3,11 +3,33 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Document</title>
7
- <meta name="google-site-verification" content="ejU67Egz3oXmkyn1I01F_T2FDtFX-BdZwpMWD4IK2d4" />
8
  </head>
9
  <body>
10
- nujnjk
11
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </body>
13
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SopKit Tools</title>
7
+ <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
+ <nav>
11
+ <h1>SopKit<span>.</span></h1>
12
+
13
+ <ul>
14
+ <li><a href="#">Tools</a></li>
15
+ <li><a href="#">GitHub</a></li>
16
+ <li><a href="#">Contact</a></li>
17
+ <li><a href="#">Page</a></li>
18
+ <li><a href="#">Files</a></li>
19
+ </ul>
20
+ </nav>
21
+
22
+ <main class="container">
23
+ <section class="hero-section">
24
+ <div class="hero-container">
25
+ <h1>SopKit<span>.</span></h1>
26
+ <p>A JavaScript Tool Collection by SopKit for no price..... </p>
27
+ </div>
28
+ <div class="hero-image">
29
+ <!-- <img src="pic.avif" alt="" srcset=""> -->
30
+ </div>
31
+ </section>
32
+ </main>
33
+
34
  </body>
35
  </html>
pic.avif ADDED
style.css CHANGED
@@ -1,28 +1,96 @@
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
 
 
14
  margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
 
 
 
 
 
 
 
 
 
 
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ }
6
  body {
7
+
8
+ font-family: Poppins, sans-serif;
9
+ min-height: 100vh;
10
  }
11
 
12
+
13
+ nav {
14
+ background: #032a39;
15
+ color: aliceblue;
16
+ justify-content: flex-end;
17
+ display: flex;
18
+ align-items: center;
19
  }
20
 
21
+ nav h1 {
22
+ left: 0;
23
+ margin: 20px;
24
+ margin-right:auto ;
25
+ margin-top: 10px;
26
  margin-bottom: 10px;
27
+
28
+ }
29
+ nav span, .hero-section span {
30
+ color: rgb(126, 194, 49);
31
+ }
32
+
33
+ nav ul {
34
+ display: flex;
35
+ justify-content: space-between;
36
+ /* border: 2px solid red; */
37
+ height: 4rem;
38
+ }
39
+
40
+
41
+ nav ul li {
42
+ display: flex;
43
+ transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
44
+ }
45
+ nav ul li a {
46
+ padding: 10px;
47
+ margin: 10px;
48
+ border: 2px;
49
+ background: #a649144d;
50
+ color: aliceblue;
51
+ text-decoration: none;
52
+ transition: all 0.3s linear;
53
  }
54
+ nav ul li a:hover {
55
+ cursor: pointer;
56
+ background-color: rgba(255, 0, 0, 0.464);
57
+ border-bottom: 1px solid red;
58
+ }
59
+
60
+
61
+
62
+
63
+
64
 
65
+ .container {
66
+ color: aqua;
67
+ background-color: rgba(226, 159, 229, 0.321);
68
+ min-height: 100vh;
69
+ display: flex;
70
+ background: url(pic.avif) ;
71
+ background-repeat: no-repeat;
72
+ background-size: cover;
73
+
74
  }
75
 
76
+ .container .hero-section h1 {
77
+ color: aliceblue;
78
+ font-size: 40px;
79
+ margin: 20px;
80
+ margin-left: 0;
81
  }
82
+
83
+ .container .hero-section p {
84
+ color: rgb(205, 239, 184);
85
+ }
86
+
87
+ .container .hero-section {
88
+ /* background: red; */
89
+ width: 100%;
90
+ padding: 20px;
91
+ height: fit-content;
92
+ margin-top: 100px;
93
+ margin-left: 50px;
94
+
95
+
96
+ }