Skip to content

Commit b276d83

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1772 from Avdhesh-Varshney/lorem
[SSoC 2.0] Lorem Ipsum Generator Completed
2 parents 9bbe4de + fc43bc2 commit b276d83

7 files changed

Lines changed: 357 additions & 1 deletion

File tree

‎Projects/BuyMeaCoffee/public/Screencast.webm‎

14.6 MB
Binary file not shown.

‎Projects/Lorem-Ipsum-Generator/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# LOREM IPSUM GENERATOR
2+
3+
---
4+
5+
## **Description**
6+
7+
- This is a simple Loremipsum Generator generator which is developed using HTML, CSS and JavaScript.
8+
- Just input how many paragraphs you want and it will provide some different lorem ipsum paragraphs.
9+
10+
<br>
11+
12+
## **Tech Stack 🎮**
13+
14+
- HTML
15+
- CSS
16+
- JS
17+
18+
<br>
19+
20+
## **Screenshots 📸**
21+
22+
![Lorem-Ipsum-Generator](https://github.com/TusharKesarwani/Front-End-Projects/assets/114330097/96fd0142-2b62-432a-a534-f263e672eb32)
23+
24+
<br>
25+
26+
## **Created By 👦**
27+
28+
[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
29+
30+
<br>
31+
32+
### **Thanks for using this application 🎉**

‎Projects/Lorem-Ipsum-Generator/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!-- Logo of the website -->
9+
<link rel="shortcut icon"
10+
href="https://img.freepik.com/premium-vector/logo-lorem-ipsum-design-art-tagline_642953-552.jpg?w=2000"
11+
type="image/x-icon">
12+
13+
<!-- Title of the website -->
14+
<title>Lorem Ipsum</title>
15+
16+
<!-- Main stylesheet -->
17+
<link rel="stylesheet" href="./style.css">
18+
</head>
19+
20+
<body>
21+
<!-- Main container of the website -->
22+
<section class="section-center">
23+
<h3>lorem ipsum generator</h3>
24+
25+
<!-- Creator of the website -->
26+
<p>
27+
Created By <a href="https://github.com/Avdhesh-Varshney">Avdhesh Varshney</a>
28+
</p>
29+
30+
<!-- Input and output section for the user -->
31+
<form class="lorem-form">
32+
<label for="amount">paragraphs:</label>
33+
<input type="number" name="amount" id="amount" placeholder="5" />
34+
<button type="submit" class="btn">generate</button>
35+
</form>
36+
<article class="lorem-text"></article>
37+
</section>
38+
39+
<!-- Main javascript file -->
40+
<script src="./script.js"></script>
41+
</body>
42+
43+
</html>

‎Projects/Lorem-Ipsum-Generator/script.js‎

Lines changed: 41 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Projects/Lorem-Ipsum-Generator/style.css‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
/* Adding google font */
2+
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
3+
4+
/* Initialising global variables */
5+
:root {
6+
/* dark shades of primary color*/
7+
--clr-primary-1: hsl(205, 86%, 17%);
8+
--clr-primary-2: hsl(205, 77%, 27%);
9+
--clr-primary-3: hsl(205, 72%, 37%);
10+
--clr-primary-4: hsl(205, 63%, 48%);
11+
/* primary/main color */
12+
--clr-primary-5: #49a6e9;
13+
/* lighter shades of primary color */
14+
--clr-primary-6: hsl(205, 89%, 70%);
15+
--clr-primary-7: hsl(205, 90%, 76%);
16+
--clr-primary-8: hsl(205, 86%, 81%);
17+
--clr-primary-9: hsl(205, 90%, 88%);
18+
--clr-primary-10: hsl(205, 100%, 96%);
19+
/* darkest grey - used for headings */
20+
--clr-grey-1: hsl(209, 61%, 16%);
21+
--clr-grey-2: hsl(211, 39%, 23%);
22+
--clr-grey-3: hsl(209, 34%, 30%);
23+
--clr-grey-4: hsl(209, 28%, 39%);
24+
/* grey used for paragraphs */
25+
--clr-grey-5: hsl(210, 22%, 49%);
26+
--clr-grey-6: hsl(209, 23%, 60%);
27+
--clr-grey-7: hsl(211, 27%, 70%);
28+
--clr-grey-8: hsl(210, 31%, 80%);
29+
--clr-grey-9: hsl(212, 33%, 89%);
30+
--clr-grey-10: hsl(210, 36%, 96%);
31+
--clr-white: #fff;
32+
--clr-red-dark: hsl(360, 67%, 44%);
33+
--clr-red-light: hsl(360, 71%, 66%);
34+
--clr-green-dark: hsl(125, 67%, 44%);
35+
--clr-green-light: hsl(125, 71%, 66%);
36+
--clr-black: #222;
37+
--ff-primary: "Roboto", sans-serif;
38+
--ff-secondary: "Open Sans", sans-serif;
39+
--transition: all 0.3s linear;
40+
--spacing: 0.25rem;
41+
--radius: 0.5rem;
42+
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
43+
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
44+
--max-width: 1170px;
45+
--fixed-width: 620px;
46+
}
47+
48+
/* Global Styles */
49+
*,
50+
::after,
51+
::before {
52+
margin: 0;
53+
padding: 0;
54+
box-sizing: border-box;
55+
}
56+
57+
body {
58+
font-family: var(--ff-secondary);
59+
background: var(--clr-grey-10);
60+
color: var(--clr-grey-1);
61+
line-height: 1.5;
62+
font-size: 0.875rem;
63+
}
64+
65+
ul {
66+
list-style-type: none;
67+
}
68+
69+
a {
70+
text-decoration: none;
71+
color: var(--clr-grey-5);
72+
}
73+
74+
a:hover {
75+
text-decoration: underline;
76+
}
77+
78+
img:not(.logo) {
79+
width: 100%;
80+
}
81+
82+
img {
83+
display: block;
84+
}
85+
86+
h1,
87+
h2,
88+
h3,
89+
h4 {
90+
letter-spacing: var(--spacing);
91+
text-transform: capitalize;
92+
line-height: 1.25;
93+
margin-bottom: 0.75rem;
94+
font-family: var(--ff-primary);
95+
}
96+
97+
h1 {
98+
font-size: 3rem;
99+
}
100+
101+
h2 {
102+
font-size: 2rem;
103+
}
104+
105+
h3 {
106+
font-size: 1.25rem;
107+
}
108+
109+
h4 {
110+
font-size: 0.875rem;
111+
}
112+
113+
p {
114+
margin-bottom: 1.25rem;
115+
color: var(--clr-grey-5);
116+
}
117+
118+
/* Adding media queries */
119+
@media screen and (min-width: 800px) {
120+
h1 {
121+
font-size: 4rem;
122+
}
123+
124+
h2 {
125+
font-size: 2.5rem;
126+
}
127+
128+
h3 {
129+
font-size: 1.75rem;
130+
}
131+
132+
h4 {
133+
font-size: 1rem;
134+
}
135+
136+
body {
137+
font-size: 1rem;
138+
}
139+
140+
h1,
141+
h2,
142+
h3,
143+
h4 {
144+
line-height: 1;
145+
}
146+
}
147+
148+
/* global classes */
149+
150+
.btn {
151+
text-transform: uppercase;
152+
background: var(--clr-primary-5);
153+
color: var(--clr-primary-1);
154+
padding: 0.375rem 0.75rem;
155+
letter-spacing: 1px;
156+
display: inline-block;
157+
transition: var(--transition);
158+
font-size: 0.875rem;
159+
border: 2px solid var(--clr-primary-5);
160+
cursor: pointer;
161+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
162+
border-radius: var(--radius);
163+
}
164+
165+
.btn:hover {
166+
color: var(--clr-primary-5);
167+
background: var(--clr-primary-8);
168+
border-color: var(--clr-primary-8);
169+
}
170+
171+
/* section */
172+
.section {
173+
padding: 5rem 0;
174+
}
175+
176+
.section-center {
177+
width: 90vw;
178+
margin: 0 auto;
179+
max-width: 40rem;
180+
margin-top: 5rem;
181+
text-align: center;
182+
}
183+
184+
@media screen and (min-width: 992px) {
185+
.section-center {
186+
width: 95vw;
187+
}
188+
}
189+
190+
main {
191+
min-height: 100vh;
192+
display: grid;
193+
place-items: center;
194+
}
195+
196+
/* Lorem Ipsum */
197+
h3 {
198+
text-transform: uppercase;
199+
color: var(--clr-primary-1);
200+
}
201+
202+
.lorem-form {
203+
text-transform: capitalize;
204+
letter-spacing: var(--spacing);
205+
margin-top: 2rem;
206+
margin-bottom: 4rem;
207+
display: flex;
208+
justify-content: center;
209+
align-items: center;
210+
}
211+
212+
label {
213+
font-size: 1.25rem;
214+
color: var(--clr-primary-1);
215+
}
216+
217+
input {
218+
padding: 0.25rem 0.5rem;
219+
220+
width: 4rem;
221+
border-radius: var(--radius);
222+
border: none;
223+
margin: 0 0.5rem;
224+
font-size: 1.25rem;
225+
}
226+
227+
button {
228+
background: var(--clr-primary-10);
229+
}
230+
231+
.result {
232+
margin-bottom: 2rem;
233+
}

‎img/projects/Lorem-Ipsum-Generator.png‎

184 KB
Loading

‎projects.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1054,7 +1054,14 @@ const projects = [
10541054
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Sound_Equalizer",
10551055
"project-link":"Projects/Sound_Equalizer/index.html"
10561056
},
1057-
1057+
{
1058+
"title":"Lorem Ipsum Generator",
1059+
"tags":["HTML","CSS","JavaScript"],
1060+
"img":"img/projects/Lorem-Ipsum-Generator.png",
1061+
"description":"This project can generate random written paragraphs. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.",
1062+
"github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Lorem-Ipsum-Generator",
1063+
"project-link":"Projects/Lorem-Ipsum-Generator/index.html"
1064+
},
10581065
{ "title":"Carbon FootPrint Calculator",
10591066
"tags":["HTML","CSS","JavaScript"],
10601067
"img":"img/projects/carbonFootCalc.png",

0 commit comments

Comments
 (0)