Skip to content

Commit 3662d70

Browse files
ajay-dhangarajay-dhangar
authored
Merge branch 'main' into dev-3
2 parents ff6dd85 + a3efb0d commit 3662d70

Some content is hidden

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

54 files changed

+14136
-84
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,11 @@ This project is licensed under the [MIT License](LICENSE).
8989

9090
## Contributors
9191

92+
<!--
9293
[![Contributors](https://contributors-img.web.app/image?repo=codeharborhub/codeharborhub)](https://github.com/CodeHarborHub/codeharborhub/graphs/contributors)
94+
-->
95+
96+
![Contributors](https://opencollective.com/codeharborhub/contributors.svg?button=false&avatarHeight=50&width=600)
9397

9498
## Chat with us
9599

‎docs/CSS/css-basics/Box-Model.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
2+
# Box Model
3+
4+
The box model is a foundational concept in CSS (Cascading Style Sheets) used to understand and control the layout of HTML elements on a web page. It defines how the different parts of an element (content, padding, border, and margin) are arranged and interact with each other.
5+
6+
You can view the box-model :
7+
8+
![BoxModel](https://tse4.mm.bing.net/th?id=OIP.XbRDNkJ1LH70kC-Pq0EDwgHaFL&pid=Api&P=0&h=180)
9+
10+
It consists of:
11+
- Content
12+
- Padding
13+
- Borders
14+
- Margins
15+
16+
**Explanation**
17+
18+
1. Content :
19+
20+
This is the innermost part of the box and contains the actual content of the element, such as text or images.
21+
The size of the content box can be controlled using properties like `width` and `height`.
22+
23+
2. Padding:
24+
25+
Padding is the space between the content and the border.
26+
It creates space inside the element, around the content.
27+
The size of the padding can be adjusted using the `padding` property (e.g., `padding: 10px;`), or individual properties for each side (e.g., `padding-top`, `padding-right`, `padding-bottom`, `padding-left`).
28+
29+
30+
3. Border:
31+
32+
The border wraps around the padding (if any) and content.
33+
It is defined by the `border` property (e.g., `border: 1px solid black;`), or individual properties for each side (e.g., `border-top`, `border-right`, `border-bottom`, `border-left`).
34+
35+
4. Margin:
36+
37+
Margin is the outermost part of the box and creates space outside the border, between the element and other elements.
38+
It can be set using the `margin` property (e.g., `margin: 10px;`), or individual properties for each side (e.g., `margin-top`, `margin-right`, `margin-bottom`, `margin-left`).
39+
40+
41+
42+
#### Box-Sizing Property
43+
The box-sizing property is used to alter the default CSS box model used to calculate widths and heights of elements.
44+
45+
content-box: This is the default value. The `width` and `height` properties apply only to the content of the element. Padding and border are added outside the `width` and `height`.
46+
47+
border-box: The `width` and `height` properties include the padding and border, but not the margin. This makes it easier to set the size of an element, since padding and border are included in the total size.
48+
49+
```css
50+
.element {
51+
box-sizing: border-box;
52+
width: 200px;
53+
padding: 10px;
54+
border: 5px solid black;
55+
}
56+
```
57+
In this example, the total width of `.element` would still be 200px because the padding and border are included within the specified width.

‎docs/CSS/css-basics/Colors-and-Backgrounds.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# Colors and Background
2+
3+
In CSS, controlling colors and background properties is fundamental for styling web pages. This includes setting text colors, background colors, images, gradients, and more. Below are the main properties and techniques for handling colors and backgrounds in CSS.
4+
5+
**1. Text Color**
6+
7+
The color property sets the color of the text. Colors can be defined using various formats, such as named colors, HEX codes, RGB, RGBA, HSL, and HSLA.
8+
9+
Hex - Codes :
10+
11+
<img src="https://tse4.mm.bing.net/th?id=OIP.9ipFzqjVN-PlJKwrpuAiuQHaFM&pid=Api&P=0&h=180" alt="HexCode" height="200cm" width="200cm"/>
12+
13+
RGB (Red-Green-Blue):
14+
15+
<img src="https://tse4.mm.bing.net/th?id=OIP.zBlyNAyf8fFyqp7_vdv2mgHaCx&pid=Api&P=0&h=180" alt="RGB"/>
16+
17+
HSL (Hue-Saturation-Lightness):
18+
19+
<img src="https://giggster.com/guide/static/fed42130c194b0c240a4ec10408adf97/8282f/hsl-cover-2.png" alt="HSL"/>
20+
21+
```css
22+
/* Named color */
23+
p {
24+
color: red;
25+
}
26+
27+
/* HEX code */
28+
h1 {
29+
color: #ff5733;
30+
}
31+
32+
/* RGB */
33+
div {
34+
color: rgb(255, 87, 51);
35+
}
36+
37+
/* RGBA (with opacity) */
38+
span {
39+
color: rgba(255, 87, 51, 0.8);
40+
}
41+
42+
/* HSL */
43+
a {
44+
color: hsl(11, 100%, 60%);
45+
}
46+
47+
/* HSLA (with opacity) */
48+
footer {
49+
color: hsla(11, 100%, 60%, 0.8);
50+
}
51+
```
52+
53+
**2. Background Color**
54+
55+
The `background-color` property sets the background color of an element.
56+
57+
```css
58+
/* Named color */
59+
body {
60+
background-color: lightblue;
61+
}
62+
63+
/* HEX code */
64+
header {
65+
background-color: #333333;
66+
}
67+
68+
/* RGB */
69+
section {
70+
background-color: rgb(240, 240, 240);
71+
}
72+
73+
/* RGBA (with opacity) */
74+
nav {
75+
background-color: rgba(0, 0, 0, 0.5);
76+
}
77+
78+
/* HSL */
79+
article {
80+
background-color: hsl(210, 100%, 95%);
81+
}
82+
83+
/* HSLA (with opacity) */
84+
aside {
85+
background-color: hsla(210, 100%, 95%, 0.8);
86+
}
87+
```
88+
89+
**3. Background Image**
90+
91+
The `background-image` property sets an image as the background of an element. You can also control its position, size, repeat behavior, and more.
92+
93+
```css
94+
/* Background image */
95+
body {
96+
background-image: url('path/to/image.jpg');
97+
background-repeat: no-repeat; /* Prevents image from repeating */
98+
background-size: cover; /* Scales image to cover the entire element */
99+
background-position: center; /* Centers the image */
100+
}
101+
102+
/* Gradient background */
103+
div {
104+
background-image: linear-gradient(to right, red, yellow);
105+
}
106+
```
107+
108+
**4. Background Repeat**
109+
110+
The `background-repeat` property controls if/how a background image repeats.
111+
112+
```css
113+
div {
114+
background-image: url('path/to/image.jpg');
115+
background-repeat: no-repeat; /* Do not repeat the image */
116+
background-repeat: repeat-x; /* Repeat the image horizontally */
117+
background-repeat: repeat-y; /* Repeat the image vertically */
118+
background-repeat: round; /* Repeat the image, but rescale to fit */
119+
background-repeat: space; /* Repeat the image, but add space between repetitions */
120+
}
121+
```
122+
123+
**5. Background Size**
124+
125+
The `background-size` property specifies the size of the background image.
126+
127+
```css
128+
section {
129+
background-image: url('path/to/image.jpg');
130+
background-size: auto; /* Default, original size */
131+
background-size: cover; /* Scale the image to cover the element */
132+
background-size: contain; /* Scale the image to be contained within the element */
133+
background-size: 100px 200px; /* Specify exact size */
134+
background-size: 50% 50%; /* Specify size as a percentage */
135+
}
136+
```
137+
138+
**6. Background Position**
139+
140+
The `background-position` property sets the starting position of the background image.
141+
142+
```css
143+
header {
144+
background-image: url('path/to/image.jpg');
145+
background-position: left top; /* Align image to top left */
146+
background-position: center; /* Center the image */
147+
background-position: 50% 50%; /* Center the image using percentages */
148+
background-position: 10px 20px; /* Set position using exact values */
149+
}
150+
```

‎docs/CSS/css-basics/Typography.md

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
# Typography
2+
3+
Typography in CSS is an essential aspect of web design, as it greatly influences the readability, aesthetics, and overall user experience of a website. Here are the key concepts and properties related to typography in CSS:
4+
5+
**1. Font Family**
6+
7+
The `font-family` property specifies the typeface for the text. It can include a specific font name and one or more generic font families.
8+
9+
```css
10+
body {
11+
font-family: 'Arial', sans-serif;
12+
}
13+
```
14+
15+
**2. Font Size**
16+
17+
The font-size property controls the size of the text. It can be set in various units like pixels (`px`), em units (`em`), rem units (`rem`), percentages (`%`), and more.
18+
19+
```css
20+
p {
21+
font-size: 16px;
22+
}
23+
24+
h1 {
25+
font-size: 2em; /* 2 times the current font size */
26+
}
27+
```
28+
You can check the relation between units
29+
30+
| Unit | Description |
31+
| :--------: | :--------: |
32+
| `em` | Calculated relative to the current font size. For example, 2em indicates 2 times larger size than current element's font size. |
33+
| `px` | `px` stands for "pixels." It's a unit of measurement commonly used in digital design and web development to define the size of elements on a screen. |
34+
| `%` | Percentage (`%`) is a relative unit of measurement that expresses a value as a fraction of the parent element's size or the viewport's dimensions.For example, 50% of the width of the container. |
35+
| `rem` | Relative to font size of the root-element. |
36+
| `vw` | Viewport width (`vw`) is a relative unit of measurement that expresses a value as a fraction of the width of the browser viewport. `1vw` is equal to 1% of the width of the viewport. |
37+
| `vh` | Viewport height (`vh`) is a relative unit of measurement that expresses a value as a fraction of the height of the browser viewport. `1vh` is equal to 1% of the height of the viewport. |
38+
39+
40+
**3. Font Weight**
41+
42+
The `font-weight` property defines the thickness of the characters. Common values include `normal`, `bold`, `bolder`, `lighter`, or numerical values ranging from 100 to 900.
43+
44+
```css
45+
strong {
46+
font-weight: bold;
47+
}
48+
49+
p.light {
50+
font-weight: 300;
51+
}
52+
```
53+
54+
**4. Font Style**
55+
56+
The `font-style` property allows you to italicize the text.
57+
58+
```css
59+
em {
60+
font-style: italic;
61+
}
62+
63+
p.oblique {
64+
font-style: oblique;
65+
}
66+
```
67+
68+
**5. Font Variant**
69+
70+
The `font-variant` property is used for small-caps and other typographic features.
71+
72+
```css
73+
p {
74+
font-variant: small-caps;
75+
}
76+
```
77+
78+
**6. Text Transform**
79+
80+
The `text-transform` property changes the case of the text.
81+
82+
```css
83+
h1 {
84+
text-transform: uppercase;
85+
}
86+
87+
p {
88+
text-transform: capitalize;
89+
}
90+
```
91+
92+
**7. Text Alignment**
93+
94+
The `text-align` property sets the horizontal alignment of the text.
95+
96+
```css
97+
div {
98+
text-align: center;
99+
}
100+
101+
p {
102+
text-align: justify;
103+
}
104+
```
105+
106+
**8. Text Decoration**
107+
108+
The `text-decoration` property adds decorations to the text, such as underlines, overlines, and line-throughs.
109+
110+
```css
111+
a {
112+
text-decoration: none; /* Removes underline from links */
113+
}
114+
115+
del {
116+
text-decoration: line-through;
117+
}
118+
```
119+
120+
**9. Text Shadow**
121+
122+
The `text-shadow` property adds a shadow effect to the text.
123+
124+
```css
125+
h1 {
126+
text-shadow: 2px 2px 5px gray;
127+
}
128+
```

‎docs/NextJs/_category_.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Next",
3+
"position": 12,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "Next is a JavaScript library for building user interfaces. It is maintained by a community of individual developers and companies."
7+
}
8+
}

‎docs/NextJs/emty.png

2.15 KB
Loading

0 commit comments

Comments
 (0)