Skip to content

Commit 14b4996

Browse files
razaahmad333Dun-sin
razaahmad333
authored and
Dun-sin
committed
fix(src/style.css, index.html): fixed generator card's images stretching
The images on generator card look stretched so I fixed this issue and changed image on border-gradient generator fix #81
1 parent 6447de5 commit 14b4996

File tree

2 files changed

+275
-340
lines changed

2 files changed

+275
-340
lines changed

‎index.html

Lines changed: 29 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8" />
56
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -13,14 +14,14 @@
1314
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1415
<link
1516
href="https://fonts.googleapis.com/css2?family=Exo+2: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"
16-
rel="stylesheet"
17-
/>
17+
rel="stylesheet" />
1818

1919
<!-- Scripts -->
2020
<script type="module" src="./src/main.ts" defer></script>
2121

2222
<title>Trick Generator</title>
2323
</head>
24+
2425
<body>
2526
<nav>
2627
<h1 id="head">Trick Generator</h1>
@@ -38,59 +39,35 @@ <h1 id="head">Trick Generator</h1>
3839
<!-- Generator Card -->
3940
<div class="generators">
4041
<div class="generator" data-gen="pic-text">
41-
<img
42-
src="https://user-images.githubusercontent.com/78784850/177135924-aec3794a-8bd8-48ec-bd5a-4aee074c7a16.png"
43-
alt="Picture-Text Generator"
44-
loading="lazy"
45-
/>
42+
<img src="https://user-images.githubusercontent.com/78784850/177135924-aec3794a-8bd8-48ec-bd5a-4aee074c7a16.png"
43+
alt="Picture-Text Generator" loading="lazy" />
4644
<div>
4745
<h2>Pic-Text</h2>
48-
<img
49-
src="./assets/bi_arrow-right-square-fill.svg"
50-
alt="Right Icon"
51-
/>
46+
<img src="./assets/bi_arrow-right-square-fill.svg" alt="Right Icon" />
5247
</div>
5348
</div>
5449
<div class="generator" data-gen="gradient-text">
55-
<img
56-
src="https://user-images.githubusercontent.com/78784850/179534667-c5de2a54-5eee-49d3-a7b6-6404e1cde5de.png"
57-
alt="Gradient Text Generator"
58-
loading="lazy"
59-
/>
50+
<img src="https://user-images.githubusercontent.com/78784850/179534667-c5de2a54-5eee-49d3-a7b6-6404e1cde5de.png"
51+
alt="Gradient Text Generator" loading="lazy" />
6052
<div>
6153
<h2>Gradient Text</h2>
62-
<img
63-
src="./assets/bi_arrow-right-square-fill.svg"
64-
alt="Right Icon"
65-
/>
54+
<img src="./assets/bi_arrow-right-square-fill.svg" alt="Right Icon" />
6655
</div>
6756
</div>
6857
<div class="generator" data-gen="gradient-border">
69-
<img
70-
src="https://user-images.githubusercontent.com/78784850/181470923-7693a5fd-6519-472a-9edd-a31667a14187.png"
71-
alt="Gradient Border"
72-
loading="lazy"
73-
/>
58+
<img src="https://user-images.githubusercontent.com/50910798/183639196-f0feb476-cfa3-4396-8556-b251666d7ead.jpg"
59+
alt="Gradient Border" loading="lazy" />
7460
<div>
7561
<h2>Gradient Border</h2>
76-
<img
77-
src="./assets/bi_arrow-right-square-fill.svg"
78-
alt="Right Icon"
79-
/>
62+
<img src="./assets/bi_arrow-right-square-fill.svg" alt="Right Icon" />
8063
</div>
8164
</div>
8265
<div class="generator" data-gen="gradient-background">
83-
<img
84-
src="https://user-images.githubusercontent.com/78784850/183375805-478b002f-4ef2-4ab8-8b1b-da50482b45ff.png"
85-
alt="Gradient Background"
86-
loading="lazy"
87-
/>
66+
<img src="https://user-images.githubusercontent.com/78784850/183375805-478b002f-4ef2-4ab8-8b1b-da50482b45ff.png"
67+
alt="Gradient Background" loading="lazy" />
8868
<div>
8969
<h2>Gradient Background</h2>
90-
<img
91-
src="./assets/bi_arrow-right-square-fill.svg"
92-
alt="Right Icon"
93-
/>
70+
<img src="./assets/bi_arrow-right-square-fill.svg" alt="Right Icon" />
9471
</div>
9572
</div>
9673
</div>
@@ -99,20 +76,13 @@ <h2>Gradient Background</h2>
9976
<div class="modal-generator">
10077
<div class="modal-header">
10178
<p id="heading-text-modal"></p>
102-
<img
103-
src="./assets/close-square-fill.svg"
104-
alt="close button"
105-
id="close-modal"
106-
/>
79+
<img src="./assets/close-square-fill.svg" alt="close button" id="close-modal" />
10780
</div>
10881
<div class="modal-main-content" data-modal="pic-text">
10982
<div class="input">
11083
<div>
111-
<textarea
112-
id="pic-text-text"
113-
placeholder="Enter the text you want(Optional)"
114-
class="input-bar"
115-
></textarea>
84+
<textarea id="pic-text-text" placeholder="Enter the text you want(Optional)"
85+
class="input-bar"></textarea>
11686
<p class="count"><span>0</span>/400</p>
11787
</div>
11888
<input type="file" id="pic-text-file" required />
@@ -139,11 +109,7 @@ <h2>Gradient Background</h2>
139109
</div>
140110
<div class="modal-main-content" data-modal="gradient-text">
141111
<div class="input">
142-
<input
143-
type="text"
144-
id="gradient-text-text"
145-
placeholder="Enter the text"
146-
/>
112+
<input type="text" id="gradient-text-text" placeholder="Enter the text" />
147113

148114
<p>Pick Your Colors:</p>
149115

@@ -158,12 +124,7 @@ <h2>Gradient Background</h2>
158124
</label>
159125
<label id="degree">
160126
<span>Slide to change the degree</span>
161-
<input
162-
type="range"
163-
max="360"
164-
min="0"
165-
id="gradient-text-degree"
166-
/>
127+
<input type="range" max="360" min="0" id="gradient-text-degree" />
167128
</label>
168129
<div class="btn" data-button="gradient-text">Get Text</div>
169130
</div>
@@ -187,31 +148,18 @@ <h2>Gradient Background</h2>
187148
<p>Pick Your Colors:</p>
188149

189150
<label for="colorPicker">
190-
<input
191-
type="color"
192-
value="#1DB8CE"
193-
id="gradient-border-color1"
194-
/>
151+
<input type="color" value="#1DB8CE" id="gradient-border-color1" />
195152
<span>First Color</span>
196153
</label>
197154

198155
<label for="colorPicker">
199-
<input
200-
type="color"
201-
value="#1DB4CE"
202-
id="gradient-border-color2"
203-
/>
156+
<input type="color" value="#1DB4CE" id="gradient-border-color2" />
204157
<span>Second Color</span>
205158
</label>
206159

207160
<label id="degree">
208161
<span>Slide to change the degree</span>
209-
<input
210-
type="range"
211-
max="360"
212-
min="0"
213-
id="gradient-border-degree"
214-
/>
162+
<input type="range" max="360" min="0" id="gradient-border-degree" />
215163
</label>
216164

217165
<div class="btn" data-button="gradient-border">Get Result</div>
@@ -230,31 +178,18 @@ <h2>Gradient Background</h2>
230178
<p>Pick Your Colors:</p>
231179

232180
<label for="colorPicker">
233-
<input
234-
type="color"
235-
value="#1DB8CE"
236-
id="gradient-background-color1"
237-
/>
181+
<input type="color" value="#1DB8CE" id="gradient-background-color1" />
238182
<span>First Color</span>
239183
</label>
240184

241185
<label for="colorPicker">
242-
<input
243-
type="color"
244-
value="#1DB4CE"
245-
id="gradient-background-color2"
246-
/>
186+
<input type="color" value="#1DB4CE" id="gradient-background-color2" />
247187
<span>Second Color</span>
248188
</label>
249189

250190
<label id="degree">
251191
<span>Slide to change the degree</span>
252-
<input
253-
type="range"
254-
max="360"
255-
min="0"
256-
id="gradient-background-degree"
257-
/>
192+
<input type="range" max="360" min="0" id="gradient-background-degree" />
258193
</label>
259194

260195
<div class="btn" data-button="gradient-background">
@@ -277,11 +212,10 @@ <h2>Gradient Background</h2>
277212
<footer>
278213
<p>
279214
Contribute to the Project
280-
<a href="https://github.com/Dun-sin/trick-generator" target="_blank"
281-
>Click Here</a
282-
>
215+
<a href="https://github.com/Dun-sin/trick-generator" target="_blank">Click Here</a>
283216
</p>
284217
<p>Made with 💘 by the community</p>
285218
</footer>
286219
</body>
287-
</html>
220+
221+
</html>

0 commit comments

Comments
 (0)