Skip to content

Commit a934c18

Browse files
Vipullakum007Vipullakum007
committed
Merge branch 'all-easy-gfg-solution' of https://github.com/Vipullakum007/codeharborhub into all-easy-gfg-solution
2 parents 9f7b1b9 + d1e0cd1 commit a934c18

File tree

61 files changed

+7694
-90
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+7694
-90
lines changed

‎.github/workflows/deploy.yml

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
# Review gh actions docs if you want to further define triggers, paths, etc
8+
# https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
9+
10+
jobs:
11+
build:
12+
name: Build CodeHarborHub
13+
runs-on: ubuntu-latest
14+
steps:
15+
- uses: actions/checkout@v4
16+
with:
17+
fetch-depth: 0
18+
- uses: actions/setup-node@v4
19+
with:
20+
node-version: 18
21+
cache: npm
22+
23+
- name: Install dependencies
24+
run: npm install --frozen-lockfile
25+
- name: Build website
26+
run: npm run build
27+
28+
- name: Upload Build Artifact
29+
uses: actions/upload-pages-artifact@v3
30+
with:
31+
path: build
32+
33+
deploy:
34+
name: Deploy to GitHub Pages
35+
needs: build
36+
37+
# Grant GITHUB_TOKEN the permissions required to make a Pages deployment
38+
permissions:
39+
pages: write # to deploy to Pages
40+
id-token: write # to verify the deployment originates from an appropriate source
41+
42+
# Deploy to the github-pages environment
43+
environment:
44+
name: github-pages
45+
url: ${{ steps.deployment.outputs.page_url }}
46+
47+
runs-on: ubuntu-latest
48+
steps:
49+
- name: Deploy to GitHub Pages
50+
id: deployment
51+
uses: actions/deploy-pages@v4

‎.github/workflows/test-deploy.yml

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
name: Test deployment
2+
3+
on:
4+
pull_request:
5+
branches:
6+
- main
7+
# Review gh actions docs if you want to further define triggers, paths, etc
8+
# https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
9+
10+
jobs:
11+
test-deploy:
12+
name: Test deployment
13+
runs-on: ubuntu-latest
14+
steps:
15+
- uses: actions/checkout@v4
16+
with:
17+
fetch-depth: 0
18+
- uses: actions/setup-node@v4
19+
with:
20+
node-version: 18
21+
cache: npm
22+
23+
- name: Install dependencies
24+
run: npm install --frozen-lockfile
25+
- name: Test build website
26+
run: npm run build

‎docs/CSS/css-borders.md

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
# CSS Borders
2+
3+
```css
4+
div.all-borders {
5+
border: 1px solid black;
6+
}
7+
```
8+
9+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
10+
<div class="all-borders" style={{border: "1px solid black", padding: "10px"}}>
11+
I have borders on all sides.
12+
</div>
13+
</BrowserWindow>
14+
```css
15+
div.bottom-border {
16+
border-bottom: 1px solid red;
17+
}
18+
```
19+
20+
#### Output
21+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
22+
<div class="bottom-border" style={{borderBottom: "1px solid red", padding: "10px"}}>
23+
I have a red bottom border.
24+
</div>
25+
</BrowserWindow>
26+
```css
27+
div.rounded-borders {
28+
border: 1px solid black;
29+
border-radius: 10px;
30+
}
31+
```
32+
33+
#### Output
34+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
35+
<div class="rounded-borders" style={{border: "1px solid black", borderRadius: "10px", padding: "10px"}}>
36+
I have rounded borders.
37+
</div>
38+
</BrowserWindow>
39+
```css
40+
div.left-border {
41+
border-left: 1px solid blue;
42+
}
43+
```
44+
45+
#### Output
46+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
47+
<div class="left-border" style={{borderLeft: "1px solid blue", padding: "10px"}}>
48+
I have a blue left border.
49+
</div>
50+
</BrowserWindow>
51+
### CSS Border Style
52+
53+
```css
54+
p.dotted { border-style: dotted; }
55+
p.dashed { border-style: dashed; }
56+
p.solid { border-style: solid; }
57+
p.double { border-style: double; }
58+
p.groove { border-style: groove; }
59+
p.ridge { border-style: ridge; }
60+
p.inset { border-style: inset; }
61+
p.outset { border-style: outset; }
62+
p.none { border-style: none; }
63+
p.hidden { border-style: hidden; }
64+
p.mix { border-style: dotted dashed solid double; }
65+
```
66+
67+
#### Output
68+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
69+
<p class="dotted" style={{borderStyle: "dotted"}}>A dotted border.</p>
70+
<p class="dashed" style={{borderStyle: "dashed"}}>A dashed border.</p>
71+
<p class="solid" style={{borderStyle: "solid"}}>A solid border.</p>
72+
<p class="double" style={{borderStyle: "double"}}>A double border.</p>
73+
<p class="groove" style={{borderStyle: "groove"}}>A groove border. The effect depends on the border-color value.</p>
74+
<p class="ridge" style={{borderStyle: "ridge"}}>A ridge border. The effect depends on the border-color value.</p>
75+
<p class="inset" style={{borderStyle: "inset"}}>An inset border. The effect depends on the border-color value.</p>
76+
<p class="outset" style={{borderStyle: "outset"}}>An outset border. The effect depends on the border-color value.</p>
77+
<p class="none" style={{borderStyle: "none"}}>No border.</p>
78+
<p class="hidden" style={{borderStyle: "hidden"}}>A hidden border.</p>
79+
<p class="mix" style={{borderStyle: "dotted dashed solid double"}}>A mixed border.</p>
80+
</BrowserWindow>
81+
### CSS Border Width
82+
83+
```css
84+
p.one {
85+
border-style: solid;
86+
border-width: 5px;
87+
}
88+
89+
p.two {
90+
border-style: solid;
91+
border-width: medium;
92+
}
93+
94+
p.three {
95+
border-style: dotted;
96+
border-width: 2px;
97+
}
98+
99+
p.four {
100+
border-style: dotted;
101+
border-width: thick;
102+
}
103+
```
104+
105+
#### Output
106+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
107+
<p class="one" style={{borderStyle: "solid", borderWidth: "5px"}}>5px border-width</p>
108+
<p class="two" style={{borderStyle: "solid", borderWidth: "medium"}}>Medium border-width</p>
109+
<p class="three" style={{borderStyle: "dotted", borderWidth: "2px"}}>2px border-width</p>
110+
<p class="four" style={{borderStyle: "dotted", borderWidth: "thick"}}>Thick border-width</p>
111+
</BrowserWindow>
112+
### CSS Border Color
113+
114+
```css
115+
p.one {
116+
border-style: solid;
117+
border-color: red;
118+
}
119+
120+
p.two {
121+
border-style: solid;
122+
border-color: green;
123+
}
124+
125+
p.three {
126+
border-style: dotted;
127+
border-color: blue;
128+
}
129+
```
130+
131+
#### Output
132+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
133+
<p class="one" style={{borderStyle: "solid", borderColor: "red"}}>Red border</p>
134+
<p class="two" style={{borderStyle: "solid", borderColor: "green"}}>Green border</p>
135+
<p class="three" style={{borderStyle: "dotted", borderColor: "blue"}}>Blue border</p>
136+
</BrowserWindow>
137+
### CSS Border - Individual Sides
138+
139+
```css
140+
p {
141+
border-top-style: dotted;
142+
border-right-style: solid;
143+
border-bottom-style: dotted;
144+
border-left-style: solid;
145+
}
146+
```
147+
148+
#### Output
149+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
150+
<p style={{borderTopStyle: "dotted", borderRightStyle: "solid", borderBottomStyle: "dotted", borderLeftStyle: "solid"}}>
151+
Different Border Styles
152+
</p>
153+
</BrowserWindow>
154+
```css
155+
p {
156+
border-style: dotted solid;
157+
}
158+
```
159+
160+
#### Output
161+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
162+
<p style={{borderStyle: "dotted solid"}}>
163+
Different Border Styles
164+
</p>
165+
</BrowserWindow>
166+
### CSS Border - Shorthand Property
167+
168+
```css
169+
p {
170+
border: 5px solid red;
171+
}
172+
```
173+
174+
#### Output
175+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
176+
<p style={{border: "5px solid red"}}>
177+
Some text
178+
</p>
179+
</BrowserWindow>
180+
```css
181+
p {
182+
border-left: 6px solid red;
183+
}
184+
```
185+
186+
#### Output
187+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
188+
<p style={{borderLeft: "6px solid red"}}>
189+
Some text
190+
</p>
191+
192+
```css
193+
p {
194+
border-bottom: 6px solid red;
195+
}
196+
```
197+
</BrowserWindow>
198+
#### Output
199+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
200+
<p style={{borderBottom: "6px solid red"}}>
201+
Some text
202+
</p>
203+
</BrowserWindow>
204+
### CSS Rounded Borders
205+
206+
```css
207+
p {
208+
border: 2px solidred;
209+
border-radius: 5px;
210+
}
211+
```
212+
213+
#### Output
214+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
215+
<p style={{border: "2px solid red", borderRadius: "5px"}}>
216+
Normal border
217+
</p>
218+
</BrowserWindow>
219+
```css
220+
p {
221+
border: 2px solid red;
222+
border-radius: 15px;
223+
}
224+
```
225+
226+
#### Output
227+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
228+
<p style={{border: "2px solid red", borderRadius: "15px"}}>
229+
Round border
230+
</p>
231+
</BrowserWindow>
232+
```css
233+
p {
234+
border: 2px solid red;
235+
border-radius: 25px;
236+
}
237+
```
238+
239+
#### Output
240+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
241+
<p style={{border: "2px solid red", borderRadius: "25px"}}>
242+
Rounder border
243+
</p>
244+
</BrowserWindow>
245+
```css
246+
p {
247+
border: 2px solid red;
248+
border-radius: 50px;
249+
}
250+
```
251+
252+
#### Output
253+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
254+
<p style={{border: "2px solid red", borderRadius: "50px"}}>
255+
Roundest border
256+
</p>
257+
</BrowserWindow>

0 commit comments

Comments
 (0)