Skip to content

Commit 4a6a9b0

Browse files
MDJAminMDJAmin
committed
Soup (Form maker)
1 parent a3b70f8 commit 4a6a9b0

4 files changed

Lines changed: 439 additions & 0 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"cSpell.words": [
3+
"Tagproperty"
4+
]
5+
}

‎css/style.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,900;1,900&display=swap");
2+
3+
* {
4+
padding: 0%;
5+
margin: 0%;
6+
box-sizing: border-box;
7+
}
8+
9+
:root {
10+
--main-bg: #f8f8f8;
11+
--box-bg: #ffffff;
12+
--name-color: #232323;
13+
--card-bg-text: #343434;
14+
}
15+
16+
.dark:root {
17+
--main-bg: #131313;
18+
--box-bg: #232323;
19+
--name-color: #f8f8f8;
20+
--card-bg-text: #ffffff;
21+
}
22+
23+
body {
24+
margin: 10px;
25+
background: var(--main-bg);
26+
font-family: "Poppins", sans-serif;
27+
justify-content: center;
28+
align-items: center;
29+
text-align: center;
30+
min-height: 100vh;
31+
transition: all 0.5s;
32+
}
33+
34+
.mode-switch {
35+
background-color: transparent;
36+
border: none;
37+
padding: 0;
38+
color: var(--name-color);
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
transition: all 0.5s;
43+
}
44+
45+
input {
46+
margin: 0.8rem;
47+
border: 0;
48+
padding: 4px;
49+
border-bottom: 0.7px solid;
50+
border-right: 0.2px solid rgba(0, 0, 0, 0.663);
51+
border-left: 0.1px solid rgba(0, 0, 0, 0.119);
52+
border-top: 0.1px solid rgba(0, 0, 0, 0.063);
53+
background-color: var(--name-color);
54+
color: var(--main-bg);
55+
transition: all 0.6s;
56+
57+
}
58+
select {
59+
margin: 1rem;
60+
border: 0;
61+
padding: 4px;
62+
border-bottom: 0.7px solid;
63+
border-right: 0.2px solid rgba(0, 0, 0, 0.663);
64+
border-left: 0.1px solid rgba(0, 0, 0, 0.119);
65+
border-top: 0.1px solid rgba(0, 0, 0, 0.063);
66+
background-color: var(--name-color);
67+
color: var(--main-bg);
68+
transition: all 0.6s;
69+
}
70+
71+
.btn-add {
72+
margin: 0.5rem;
73+
padding: 7px;
74+
border: none;
75+
border-radius: 5px;
76+
color: var(--main-bg);
77+
background-color: var(--name-color);
78+
transition: all 0.5s;
79+
cursor: pointer;
80+
}
81+
.btn-add:hover {
82+
background-color: rgb(0, 254, 89);
83+
scale: 1.06;
84+
}
85+
#add-element {
86+
color: var(--name-color);
87+
transition: all 0.5s;
88+
}
89+
label{
90+
color: var(--name-color);
91+
transition: all 0.5s;
92+
}
93+
.item {
94+
width: 200px;
95+
height: 200px;
96+
margin: 10px;
97+
display: flex;
98+
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5);
99+
border-radius: 15px;
100+
background-color: var(--name-color);
101+
transition: all 0.5s;
102+
}
103+
.item p {
104+
padding-top: 42%;
105+
text-align: center;
106+
color: var(--box-bg);
107+
transition: all 0.5s;
108+
}
109+
#Moon {
110+
position: absolute;
111+
right: 10px;
112+
top: 10px;
113+
}
114+
input{
115+
border-radius: 8px;
116+
}
117+
.container{
118+
display: flex;
119+
justify-content: center;
120+
flex-wrap: wrap;
121+
}

‎index.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="css/style.css">
7+
<title>Soup laziz mamamia mamasita marchelo!</title>
8+
</head>
9+
10+
<body>
11+
12+
<button id="Moon" class="mode mode-switch" title="Switch Theme">
13+
<svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
14+
width="36" height="36" viewBox="0 0 24 24">
15+
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
16+
</svg>
17+
</button>
18+
19+
<div class="inputs">
20+
<input type="text" id="Tag" placeholder=" Text" autocomplete="off">
21+
<input type="text" id="style" placeholder=" Style" autocomplete="off">
22+
<input type="text" id="attr" placeholder=" Attribute" autocomplete="off">
23+
<input type="text" id="class" placeholder=" Class Name" autocomplete="off">
24+
<select name="" id="option">
25+
</select>
26+
27+
<button class="btn-add">Confirm</button>
28+
29+
</div>
30+
<div id="location">
31+
<label class="radio">
32+
<input type="radio" id="append" name="aaa">
33+
Append
34+
</label>
35+
<label class="radio">
36+
<input type="radio" id="prepend" name="aaa">
37+
Prepend
38+
</label>
39+
<label class="radio">
40+
<input type="radio" id="before" name="aaa">
41+
Before
42+
</label>
43+
<label class="radio">
44+
<input type="radio" id="after" name="aaa">
45+
After
46+
</label>
47+
</div>
48+
<div class="container">
49+
<div class="item card">
50+
51+
</div>
52+
<div class="item card">
53+
54+
</div>
55+
<div class="item card">
56+
57+
</div>
58+
<div class="item card">
59+
60+
</div>
61+
<div class="item card">
62+
63+
</div>
64+
<div class="item card">
65+
66+
</div>
67+
<div class="item card">
68+
69+
</div>
70+
<div class="item card">
71+
72+
</div>
73+
<div class="item card">
74+
75+
</div>
76+
<div class="item card">
77+
78+
</div>
79+
<div class="item card">
80+
81+
</div>
82+
<div class="item card">
83+
84+
</div>
85+
<div class="item card">
86+
87+
</div>
88+
<div class="item card">
89+
90+
</div>
91+
<div class="item card">
92+
93+
</div>
94+
<div class="item card">
95+
96+
</div>
97+
<div class="item card">
98+
99+
</div>
100+
<div class="item card">
101+
102+
</div>
103+
<div class="item card">
104+
105+
</div>
106+
<div class="item card">
107+
108+
</div>
109+
<div class="item card">
110+
111+
</div>
112+
</div>
113+
<script src="js/script.js"></script>
114+
</body>
115+
116+
</html>

0 commit comments

Comments
 (0)