13 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/footer_main.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
2 |
3 | section{
4 | margin-bottom: 10vh;
5 | }
6 |
7 | .footer {
8 | /* position: fixed; */
9 | width: 100%;
10 | background: #212529;
11 | min-height: 10px;
12 | padding: 10px 50px;
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | flex-direction: column;
17 | bottom: 0px;
18 | z-index: 10;
19 | margin-top: 10vh;
20 | }
21 |
22 | .social-icon,
23 | .menu {
24 | position: relative;
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | margin: 10px 0;
29 | flex-wrap: wrap;
30 | }
31 |
32 | .social-icon__item,
33 | .menu__item {
34 | list-style: none;
35 | }
36 |
37 | .social-icon__link {
38 | font-size: 2rem;
39 | color: #fff;
40 | margin: 0 10px;
41 | display: inline-block;
42 | transition: 0.5s;
43 | }
44 | .social-icon__link:hover {
45 | transform: translateY(-10px);
46 | }
47 |
48 | .menu__link {
49 | font-size: 1.2rem;
50 | color: #fff;
51 | margin: 0 10px;
52 | display: inline-block;
53 | transition: 0.5s;
54 | text-decoration: none;
55 | opacity: 0.75;
56 | font-weight: 300;
57 | }
58 |
59 | .menu__link:hover {
60 | opacity: 1;
61 | }
62 |
63 | .footer p {
64 | color: #fff;
65 | margin: 15px 0 10px 0;
66 | font-size: 1rem;
67 | font-weight: 300;
68 | }
69 |
70 |
71 | @keyframes animateWaves {
72 | 0% {
73 | background-position-x: 1000px;
74 | }
75 | 100% {
76 | background-positon-x: 0px;
77 | }
78 | }
79 |
80 | @keyframes animate {
81 | 0% {
82 | background-position-x: -1000px;
83 | }
84 | 100% {
85 | background-positon-x: 0px;
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/infopage/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Web Button Design - Info
9 |
10 |
11 |
14 |
15 |
16 |
17 |
37 |
38 |
Information about Web Button Design
39 |
40 |
41 |
42 |
43 | About the App
44 | The Button Web Design app is meticulously crafted to delve into the intricate world of web buttons. Often
45 | overlooked, buttons play a crucial role in web development. Whether you're a novice or a seasoned developer,
46 | this platform aims to enrich your understanding of button design. It provides valuable tips, tutorials, and
47 | resources to ensure your web buttons are not only visually appealing but also highly functional.
48 |
49 |
50 |
51 | Why is This Made?
52 | In the expansive realm of web development, buttons are pivotal in user interaction. Recognizing the need for a
53 | dedicated resource, Swarnadeep Saha Poddar created this platform. Button Web Design fills the gap by offering a
54 | centralized space for developers to learn, share, and elevate their button design skills.
55 |
56 |
57 |
58 | About the Owner
59 | Swarnadeep Saha Poddar, a passionate BTech CSE student, is the visionary behind Button Web Design. His
60 | commitment to web development led him to acknowledge the importance of details like button design. Beyond being
61 | the creator of this platform, Swarnadeep is an avid learner and contributor to the developer community.
62 |
63 |
64 |
65 | Connect with Swarnadeep Saha Poddar
66 |
75 | Feel free to explore the platform, delve deeper into button web design, and connect with Swarnadeep Saha Poddar
76 | on LinkedIn and GitHub for insightful discussions and potential collaborations. Happy coding!
77 |
78 |
132 |
133 |
160 |
161 |
162 |
163 |
--------------------------------------------------------------------------------
/infopage/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Arial', sans-serif;
3 | margin: 0;
4 | padding: 0;
5 | background-color: #000000;
6 | color: #fff;
7 | }
8 |
9 | header {
10 | background-color: #1e1d1d;
11 | color: #fff;
12 | text-align: center;
13 | padding: 10px 10px;
14 | border-bottom: 1px solid white;
15 | }
16 |
17 | .container {
18 | max-width: 800px;
19 | margin: 100px;
20 | }
21 |
22 | section {
23 | background-color: black;
24 | padding: 20px;
25 | margin-bottom: 20px;
26 | border-radius: 8px;
27 | }
28 |
29 | h1, h2 {
30 | color: #f3703c;
31 | margin-right: auto;
32 | }
33 |
34 | p {
35 | line-height: 2;
36 | }
37 |
38 | a {
39 | color: #007BFF;
40 | text-decoration: none;
41 | font-weight: bold;
42 | }
43 |
44 | a:hover {
45 | text-decoration: underline;}
46 |
47 | .button-makers {
48 | display: flex;
49 | flex-direction: column;
50 | align-items:flex-start;
51 |
52 | }
53 |
54 | .person {
55 | display: flex;
56 | align-items: center;
57 | margin-bottom: 10px;
58 | gap: 1rem;
59 | }
60 |
61 | .person img {
62 | width: 30px;
63 | height: 30px;
64 | margin-right: 1px;
65 | }
66 |
67 | .person span {
68 | margin-left: 1px;
69 | }
70 |
71 | .head h3{
72 | text-align: center;
73 | color: darkseagreen;
74 | font-size: 1.89rem;
75 | font-weight: 600;
76 |
77 | }
78 | nav{
79 | display: flex;
80 | flex-wrap: wrap;
81 | justify-content: center;
82 | align-items: center;
83 | justify-content: space-between;
84 | font-family: "Audiowide", Cantarell;
85 | }
86 | .list{
87 | display: flex;
88 | list-style: none;
89 |
90 | }
91 | #toggler , label{
92 | display: none;
93 | }
94 | .left-nav{
95 | text-decoration: none;
96 | color: rgb(158, 210, 107);
97 | font-size: 1.34rem;
98 | }
99 | .left-nav:hover{
100 | text-decoration: none;
101 | color: rgb(30, 181, 131);
102 | }
103 | .right-nav ul{
104 | display: flex;
105 | justify-content: center;
106 | align-items: center;
107 |
108 | }
109 | .right-nav ul li{
110 | list-style: none;
111 | margin: 0 10px;
112 | }
113 | .right-nav ul li a{
114 | text-decoration: none;
115 | color: aliceblue;
116 | font-size: 1.20rem;
117 |
118 | }
119 | #info{
120 | color: #2b88ec;
121 | }
122 | #info:hover{
123 | color: rgb(182, 238, 219);
124 | }
125 | .right-nav ul li a:hover{
126 | color: rgb(182, 238, 219);
127 | }
128 | footer{
129 | background-color: #161515;
130 | border-top: 3px solid;
131 | text-align: center;
132 | }
133 | .foot-head{
134 | color: rgb(153, 187, 94);
135 | font-size: 1.35rem;
136 | font-weight: 500;
137 | }
138 | .connect a{
139 | color: rgb(136, 182, 182);
140 | font-size: 1.7rem;
141 | letter-spacing: 10px;
142 | }
143 | .connect a:hover{
144 | color: #2e6096;
145 | }
146 | .links a{
147 | color: rgb(136, 182, 182);
148 | font-size: 1.2rem;
149 | font-weight: 400;
150 | }
151 | .links ul li{
152 | list-style: none;
153 | }
154 | label i{
155 | color: white;
156 | }
157 | @media screen and (max-width: 650px) {
158 | .right-nav{
159 | width: 100%;
160 | max-height: 0;
161 | overflow: hidden;
162 | }
163 | label{
164 | display: inline-flex;
165 | }
166 | #toggler:checked~.right-nav{
167 | max-height: 100%;
168 | }
169 | .list{
170 | flex-direction: column;
171 | align-items: center;
172 | padding: 20px;
173 | }
174 | }
175 | @media (max-width:380px) {
176 | .container{
177 | margin: 0px;
178 | }
179 | }
180 | @media (max-width:430px) {
181 | .container{
182 | margin: 0px;
183 | }
184 | }
185 | @media (max-width:770px) {
186 | .container{
187 | margin: 0px;
188 | }
189 | }
190 | @media (max-width:1036px) {
191 | .container{
192 | margin: 0px;
193 | }
194 | }
195 |
--------------------------------------------------------------------------------
/loader.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | #preloader {
8 | background: #000 url(./Screen\ fingerprint.gif) no-repeat;
9 | background-position-x: center;
10 | background-position-y: center;
11 | background-size: 30rem;
12 | height: 100vh;
13 | width: 100%;
14 | position: fixed;
15 | z-index: 100;
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | }
20 |
21 | span{
22 | color: white;
23 | font-size: 3.5rem;
24 | letter-spacing: 1px;
25 | font-family: 'Courier New', Courier, monospace;
26 | position: relative;
27 | top: 25%;
28 | left: 3%;
29 | animation-name: animate;
30 | animation-timing-function: linear;
31 | animation-duration: 2s;
32 | animation-iteration-count: infinite;
33 | }
34 |
35 | @keyframes animate {
36 | 0%{
37 | opacity: 0;
38 | }
39 | 50%{
40 | opacity: 1;
41 | }
42 | 100%{
43 | opacity: 0;
44 | }
45 | }
--------------------------------------------------------------------------------
/loading.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Document
7 |
8 |
9 |
10 |
11 | Loading...
12 |
13 |
14 |
--------------------------------------------------------------------------------
/rateUs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Rate Us Section
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
😑
17 |
🙁
18 |
😐
19 |
😊
20 |
😄
21 |
22 |
23 |
Rating Score
24 |
1
25 |
2
26 |
3
27 |
4
28 |
5
29 |
30 |
31 |
User Mood
32 |
Very Unsatisfied
33 |
Unsatisfied
34 |
Neutral
35 |
Satisfied
36 |
Very Satisfied
37 |
38 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/rateUs.js:
--------------------------------------------------------------------------------
1 | let rate1 = document.querySelectorAll('.rate1');
2 | let rate2 = document.querySelectorAll('.rate2');
3 | let rate3 = document.querySelectorAll('.rate3');
4 | let rate4 = document.querySelectorAll('.rate4');
5 | let rate5 = document.querySelectorAll('.rate5');
6 |
7 | let arr = [rate1, rate2, rate3, rate4, rate5];
8 |
9 | Array.from(arr).forEach((rate) => {
10 |
11 | Array.from(rate).forEach((e) => {
12 | e.addEventListener('click', () => {
13 | Array.from(rate).forEach((ele) => {
14 | ele.style.color = "red";
15 | })
16 |
17 | Array.from(arr).forEach((r) => {
18 | if (r != rate) {
19 | Array.from(r).forEach((ele) => {
20 | ele.style.color = "black";
21 | })
22 | }
23 | })
24 | })
25 | })
26 | })
27 |
28 |
29 |
30 | let submit = document.querySelector('.submit-section');
31 |
32 | let result;
33 | submit.addEventListener('click', (e) => {
34 | Array.from(arr).forEach((rate) => {
35 | Array.from(rate).forEach((e) => {
36 | if (e.style.color == "red") {
37 | if (e.innerText) result = e.innerText;
38 | }
39 | })
40 | })
41 |
42 | if (result != undefined) {
43 | console.log(result);
44 | alert("FeedBack Submitted Successfully !");
45 | Array.from(arr).forEach((rate) => {
46 | Array.from(rate).forEach((e) => {
47 | e.style.color = "black";
48 | })
49 | })
50 | }
51 | else
52 | alert("Please Rate Properly before submitting !");
53 | })
--------------------------------------------------------------------------------
/rating.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 | *{
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: 'Poppins', sans-serif;
7 | }
8 | body{
9 | display: grid;
10 | height: 100%;
11 | place-items: center;
12 | text-align: center;
13 | background-image: url("images\ main.jpg");
14 | background-size: cover;
15 | background-position: center;
16 | background-repeat: no-repeat;
17 | min-height: 100vh;
18 | margin-top: 150px;
19 | }
20 | .container{
21 | position: relative;
22 | width: 400px;
23 | padding: 20px 30px;
24 | border: 1px solid white;
25 | border-radius: 5px;
26 | display: flex;
27 | align-items: center;
28 | justify-content: center;
29 | flex-direction: column;
30 | }
31 | .container .post{
32 | display: none;
33 | }
34 | .container .text{
35 | font-size: 25px;
36 | color: white;
37 | font-weight: 500;
38 | }
39 | .container .edit{
40 | position: absolute;
41 | right: 10px;
42 | top: 45px;
43 | font-size: 16px;
44 | color:white;
45 | font-weight: 500;
46 | cursor: pointer;
47 | }
48 | .container .Home{
49 | position: absolute;
50 | right: 10px;
51 | top: 5px;
52 | font-size: 16px;
53 | color: white;
54 | font-weight: 500;
55 | cursor: pointer;
56 | }
57 | .container .edit:hover{
58 | text-decoration: underline;
59 | }
60 | .container .star-widget input{
61 | display: none;
62 | }
63 | .star-widget label{
64 | font-size: 40px;
65 | color: white;
66 | padding: 10px;
67 | float: right;
68 | transition: all 0.2s ease;
69 | }
70 | input:not(:checked) ~ label:hover,
71 | input:not(:checked) ~ label:hover ~ label{
72 | color: #fd4;
73 | }
74 | input:checked ~ label{
75 | color: #fd4;
76 | }
77 | input#rate-5:checked ~ label{
78 | color: #fe7;
79 | text-shadow: 0 0 20px #952;
80 | }
81 | #rate-1:checked ~ form header:before{
82 | content: "I just hate it ";
83 | }
84 | #rate-2:checked ~ form header:before{
85 | content: "I don't like it ";
86 | }
87 | #rate-3:checked ~ form header:before{
88 | content: "It is awesome ";
89 | }
90 | #rate-4:checked ~ form header:before{
91 | content: "I just like it ";
92 | }
93 | #rate-5:checked ~ form header:before{
94 | content: "I just love it ";
95 | }
96 | .container form{
97 | display: none;
98 | }
99 | input:checked ~ form{
100 | display: block;
101 | }
102 | form header{
103 | width: 100%;
104 | font-size: 25px;
105 | color: #fe7;
106 | font-weight: 500;
107 | margin: 5px 0 20px 0;
108 | text-align: center;
109 | transition: all 0.2s ease;
110 | }
111 | form .textarea{
112 | height: 100px;
113 | width: 100%;
114 | overflow: hidden;
115 | }
116 | form .textarea textarea{
117 | height: 100%;
118 | width: 100%;
119 | outline: none;
120 | color: #eee;
121 | border: 1px solid #333;
122 | background: #222;
123 | padding: 10px;
124 | font-size: 17px;
125 | resize: none;
126 | }
127 | .textarea textarea:focus{
128 | border-color: #444;
129 | }
130 | form .btn{
131 | height: 45px;
132 | width: 100%;
133 | margin: 15px 0;
134 | }
135 | form .btn button{
136 | height: 100%;
137 | width: 100%;
138 | border: 1px solid #444;
139 | outline: none;
140 | background: #222;
141 | color: #999;
142 | font-size: 17px;
143 | font-weight: 500;
144 | text-transform: uppercase;
145 | cursor: pointer;
146 | transition: all 0.3s ease;
147 | }
148 | form .btn button:hover{
149 | background: #1b1b1b;
150 | }
151 | .navbar {
152 | position: fixed !important;
153 | top: 80px;
154 | left: 0;
155 | width: 100%;
156 | background-color: #00796b;
157 | overflow: visible;
158 | z-index: 1000;
159 |
160 | }
161 | .navlist:hover{
162 | background-color: #333;
163 | opacity: 0.75;
164 | border-radius: 1rem;
165 | }
166 | .navbar ul {
167 | list-style: none;
168 | margin: 0;
169 | padding: 0;
170 | display: flex;
171 | justify-content: center;
172 | font-size: 25px;
173 | width: 100%;
174 | }
175 |
176 | .navbar li {
177 | margin: 0;
178 | }
179 | .navbar a {
180 | text-decoration: none;
181 | color: #fff;
182 | padding: 1rem;
183 | display: block;
184 | }
185 |
186 | header {
187 | position: fixed;
188 | top: 0;
189 | left: 0;
190 | width: 100%;
191 | text-align: center;
192 | letter-spacing: 0.5em;
193 | font-weight: 900;
194 | background-color: #00bcd4;
195 | color: #fff;
196 | padding: 1rem 0;
197 | z-index: 1000;
198 | /* to Ensure the header is above other elements */
199 |
200 | }
201 | footer {
202 | background-color: #00796b;
203 | color: #fff;
204 | padding: 20px;
205 | text-align: center;
206 | bottom: 0;
207 | width: 100%;
208 | margin-top: auto; /* Set margin-top to auto to push the footer to the bottom */
209 | margin-bottom: 0;
210 | }
211 | .socials {
212 | margin-bottom: 10px;
213 | }
214 |
215 | .socials a {
216 | display: inline-block;
217 | margin-right: 10px;
218 | transition: transform 0.3s ease-in-out;
219 | }
220 |
221 | .socials a:hover {
222 | transform: scale(1.2);
223 | }
224 |
225 | .socials img {
226 | width: 30px;
227 | /* Adjust the size as needed */
228 | height: 30px;
229 | /* Adjust the size as needed */
230 | }
231 | #scrollToTopBtn {
232 | display: none;
233 | position: fixed;
234 | bottom: 20px;
235 | right: 20px;
236 | background-color: black;
237 | color: #fff;
238 | border: none;
239 | border-radius:50%;
240 | height: 5rem;
241 | width: 5rem;
242 | padding: 10px;
243 | cursor: pointer;
244 | }
245 |
246 | #scrollToTopBtn:hover {
247 | background-color: rgb(43, 43, 43);
248 | }
249 | .twitter-link {
250 | text-decoration: none;
251 | color: inherit;
252 | }
253 | .twitter-link i {
254 | color: inherit;
255 | }
256 | .twitter-link:hover {
257 | color: inherit;
258 | }
259 |
260 | .e-mail-link {
261 | text-decoration: none;
262 | color: inherit;
263 | }
264 | .e-mail-link i {
265 | color: inherit;
266 | }
267 | .e-mail-link:hover {
268 | color: inherit;
269 | }
270 |
271 | .github-link {
272 | text-decoration: none;
273 | color: inherit;
274 | }
275 | .github-link i {
276 | color: inherit;
277 | }
278 | .github-link:hover {
279 | color: inherit;
280 | }
281 |
282 | .linkedin-link {
283 | text-decoration: none;
284 | color: inherit;
285 | }
286 | .linkedin-link i {
287 | color: inherit;
288 | }
289 | .linkedin-link:hover {
290 | color: inherit;
291 | }
292 | .a {
293 | color: white;
294 | text-decoration: none;
295 |
296 | font-size: 15px;
297 | padding: 5px;
298 |
299 | }
300 | .a:hover {
301 | color: #00bcd4;
302 | background-color: none;
303 | text-decoration-color: grey;
304 | transition: 0.3s ease-out;
305 | }
306 | .menu-links a {
307 | display: block;
308 | padding: 10px;
309 | font-weight: bold;
310 | text-align: center;
311 | font-size: 1.5rem;
312 | color: rgb(255, 255, 255);
313 | text-decoration: none;
314 | transition: all 0.3 ease-in-out;
315 | }
--------------------------------------------------------------------------------
/rating.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Star Rating Form
6 |
7 |
8 |
9 |
10 |
11 |
12 |
Thanks for rating us!
13 |
EDIT
14 |
Home
15 |
16 |
36 |
37 |
56 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # 🎉 Welcome to Web Button Designs! 🎊
2 |
3 | An Open Source Website Where Developer's Can Get Pre-Designed Button's CSS Sheet .Just Can Copy the Design and Implement It
4 |
5 | [Project Repo](https://github.com/swarnade/webdesign-switch)
6 |
7 | [Project Website](https://webdesign.swarnadeepsahapoddar.in/)
8 |
9 | # Project Tech Stack
10 |
11 | This project is built using the following technologies:
12 |
13 | - **HTML**: HTML stands for HyperText Markup Language. It's a markup language that's used to design web pages. HTML is made up of a series of elements that tell the browser how to display the content.
14 |
15 | - **CSS**: CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML). This language contains coding elements and is composed of these “cascading style sheets” which are equally called CSS files
16 |
17 | - **JS**: JavaScript, often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries.
18 |
19 | - **Bootstrap**: Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
20 |
21 | ## Button Adding Procedure
22 |
23 | ### 1.Create a CSS File
24 |
25 | - Create a File In design_button Sub-Directory
26 | - CSS File Should Be Your Github Username
27 |
28 | ### 2.Paste The Code In HTML Document in Row Div
29 | ```
30 |
31 |
32 |
33 | Button
34 |
35 |
36 |
{Name Of The Designer}
37 |
45 |
46 |
47 | ```
48 | - Use Your Github Username As The Button Id And Css File Name
49 | - If You Have Contributed For Multiple Button Use userrname-1/userrname-2
50 | - Redirect To The CSS File Of The Button
51 | - Make Sure To Include Your Name/Github/Linkedin
52 |
53 |
54 | ## How to make a Pull Request?
55 |
56 | # Local installation Guide Video # - [Guide](https://drive.google.com/file/d/1ZePliQ80DbOlvZuxdRlcdkN_eYOgOrJO/view?usp=sharing)
57 |
58 | ### 1. Fork the Repository
59 |
60 | - Click on the "Fork" button in the top right corner of the repository page.
61 | - This will create a copy of the repository in your GitHub account.
62 |
63 | ### 2. Clone Your Fork
64 |
65 | - Open a terminal on your local machine.
66 | - Use the `git clone` command to clone your forked repository to your local machine.
67 | ```bash
68 | git clone https://github.com/your-username/repository.git
69 | cd repository
70 | ```
71 |
72 | 3. **Create a Branch**
73 | - Create a new branch:
74 | ```bash
75 | git checkout -b branch-name
76 | ```
77 |
78 | ### 4. Make Changes
79 |
80 | - Open the Markdown file and make your changes.
81 |
82 | ### 5. Commit Changes
83 |
84 | - Save changes and commit:
85 | ```bash
86 | git add .
87 | git commit -m "Describe changes"
88 | ```
89 |
90 | ### 6. **Push Changes**
91 |
92 | - Push changes to your fork:
93 | ```bash
94 | git push origin branch-name
95 | ```
96 |
97 | ### 7. **Create a Pull Request**
98 |
99 | - Visit your fork on GitHub.
100 | - Switch to your branch.
101 | - Click "New Pull Request."
102 |
103 | ### 8. **Compare Changes**
104 |
105 | - Ensure the base repository and branch are correct.
106 |
107 | ### 9. **Create Pull Request**
108 |
109 | - Add a title and description.
110 | - Click "Create Pull Request."
111 |
112 | ### 10. **Review and Merge**
113 |
114 | - Wait for review and merge by repository maintainers.
115 |
116 | ### 11. **Sync Your Fork (Optional)**
117 |
118 | - Periodically sync your fork:
119 | ```bash
120 | git fetch upstream
121 | git checkout main
122 | git merge upstream/main
123 | git push origin main
124 | ```
125 |
126 |
Congratulations! You've made your first contribution! 🙌🏼
127 |
--------------------------------------------------------------------------------
69 | 
72 | 
40 | 
43 |