Skip to content

Commit bf1a2da

Browse files
efiopesefiopes
authored
Add files via upload
0 parents  commit bf1a2da

File tree

3 files changed

+410
-0
lines changed

3 files changed

+410
-0
lines changed

‎paint.css

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
body{
2+
margin:0;
3+
padding:0;
4+
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
5+
'Arial', sans-serif;
6+
7+
}
8+
.container {
9+
display: flex;
10+
height: 100vh;
11+
width: 100%;
12+
background-color: greenyellow;
13+
14+
position: relative;
15+
align-items: center;
16+
}
17+
.screen
18+
{
19+
height: 500px;
20+
width: 500px;
21+
border: 1px solid black;
22+
background-color: white;
23+
margin: auto;
24+
padding: 5px;
25+
26+
27+
28+
}
29+
.side-menu
30+
{
31+
height: 100%;
32+
width: 15%;
33+
border: 1px solid black;
34+
background-color: grey;
35+
position: relative;
36+
justify-items: center;
37+
align-items: center;
38+
display: flex;
39+
flex-direction: column;
40+
41+
}
42+
.colors{
43+
display: flex;
44+
flex-direction: column;
45+
align-items: center;
46+
}
47+
.row{
48+
display: flex;
49+
flex-direction:row;
50+
width: 100%;;
51+
}
52+
.color
53+
{
54+
height: 60px;
55+
width: 60px;
56+
border-radius: 100%;
57+
margin:5px 10px;
58+
59+
}
60+
.blue
61+
{
62+
background-color: blue;
63+
}
64+
.red
65+
{
66+
background-color: red;
67+
}
68+
.green
69+
{
70+
background-color: green;
71+
}
72+
.black
73+
{
74+
background-color: black;
75+
}
76+
.orange
77+
{
78+
background-color: orange;
79+
}
80+
.yellow
81+
{
82+
background-color: yellow;
83+
}
84+
.size
85+
{
86+
height: 100px;
87+
width: 100%;
88+
text-align: center;
89+
position: relative;
90+
justify-items: center;
91+
align-items: center;
92+
display: flex;
93+
flex-direction: column;
94+
95+
}
96+
.button{
97+
width: 40%;
98+
height: 26%;
99+
font-size: 15px;
100+
text-align: center;
101+
margin: 2px;
102+
}
103+
.text{
104+
width: 100%;
105+
height: 10px;
106+
font-size: 20px;
107+
text-align: center;
108+
}
109+
.one{
110+
width: 38%;
111+
height: 20px;
112+
font-size: 15px;
113+
text-align: center;
114+
margin: 2px;
115+
}
116+
.two
117+
{
118+
height: 20px;
119+
width: 50px;
120+
}
121+
.eraser{
122+
background-color: white;
123+
width: 40%;
124+
height: 6%;
125+
border: 1px solid black;
126+
align-items: center;
127+
text-align: center;
128+
position: relative;
129+
justify-items: center;
130+
margin: 8px;
131+
}
132+
.eraseAll{
133+
background-color: white;
134+
width: 40%;
135+
height: 6%;
136+
border: 1px solid black;
137+
align-items: center;
138+
text-align: center;
139+
position: relative;
140+
justify-items: center;
141+
margin: 8px;
142+
}
143+
144+
.canvas-size
145+
{
146+
height: 40px;
147+
width: 20px;
148+
text-align: center;
149+
position: relative;
150+
justify-items: center;
151+
margin-top: 5px;
152+
153+
}
154+
.width{
155+
width: 60px;
156+
}
157+
.heigth{
158+
width: 60px;
159+
}
160+
161+
.shapes
162+
{
163+
height: 75px;
164+
width: 150px;
165+
display: flex;
166+
flex-direction: column;
167+
align-items: center;
168+
margin-top: 7px;
169+
}
170+
.shape{
171+
height: 20px;
172+
width: 144px;
173+
display: flex;
174+
align-items: center;
175+
justify-content: space-evenly;
176+
177+
}
178+
.shapetext{
179+
height: 25px;
180+
width: 100px;
181+
text-align: center;
182+
}
183+
.icons
184+
{
185+
height: 17px;
186+
width: 30px;
187+
text-align: center;
188+
align-items: center;
189+
justify-content: center;
190+
}

‎paint.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Paint</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
<link rel="stylesheet" href="./paint.css">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="side-menu">
14+
<div class="colors" id="colors">
15+
<div class="row" id="row1">
16+
<div class="color blue" id="blue"> </div>
17+
<div class="color red" id="red"> </div>
18+
</div>
19+
<div class="row" id="row2">
20+
<div class="color green" id="green"> </div>
21+
<div class="color black" id="black"> </div>
22+
</div>
23+
<div class="row" id="row3">
24+
<div class="color yellow" id="yellow"> </div>
25+
<div class="color orange" id="orange"> </div>
26+
</div>
27+
</div>
28+
29+
<div class="size" id="siz">
30+
<p class="text">Brush size</p>
31+
32+
<input list="sizes" name="sizess" class="one">
33+
<datalist id="sizes" class="two">
34+
<option id="1" value="5px">
35+
<option id="2" value="10px">
36+
<option id="3" value="15px">
37+
<option id="4" value="20px">
38+
<option id="5" value="30px">
39+
</datalist>
40+
41+
<button id="sub" class="button" type="button">Submit</button>
42+
</div>
43+
44+
<button class="eraser" id="eraser">Eraser </button>
45+
<button class="eraseAll" id="eraseAll">EraserAll </button>
46+
47+
<div class="canvas_size" id="canvas_size">
48+
Canvas width:<br>
49+
<input type="number" id="width" class="width" maxlength="10">
50+
<br>
51+
Canvas heigth:<br>
52+
<input type="number" id="heigth" class="heigth" maxlength="10">
53+
<br>
54+
<button id="canvasz" type="button">Submit</button>
55+
56+
</div>
57+
58+
<div class="shapes" id="shapes">
59+
<div class = "shapetext"> Brush Shape </div>
60+
61+
<div class="shape" id="shape">
62+
<div class ="icons" id= "boxx"><i class="far fa-square"></i> </div>
63+
<div class ="icons" id= "cir"> <i class="far fa-circle"></i> </div>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<div class="screen" id="scren">
69+
</div>
70+
71+
</div>
72+
73+
<script src="./paint.js"></script>
74+
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
75+
</body>
76+
77+
</html>

0 commit comments

Comments
 (0)