Skip to content

Commit 2897308

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #298 from CodeHarborHub/dev-3
Added contact page
2 parents 693e3f6 + 58819b0 commit 2897308

18 files changed

+365
-37
lines changed

‎docs/cpp/02_Basic_Syntax_and_Structure/02_Variables_and_Data_Types.md renamed to ‎docs/cpp/basic-syntax-and-structure/02_Variables_and_Data_Types.md

File renamed without changes.

‎docs/cpp/02_Basic_Syntax_and_Structure/03_Operators_and_Expressions.md renamed to ‎docs/cpp/basic-syntax-and-structure/03_Operators_and_Expressions.md

File renamed without changes.

‎docs/cpp/02_Basic_Syntax_and_Structure/_category_.json renamed to ‎docs/cpp/basic-syntax-and-structure/_category_.json

File renamed without changes.

‎docs/cpp/02_Basic_Syntax_and_Structure/01_Cpp_Syntax_Basics.md renamed to ‎docs/cpp/basic-syntax-and-structure/cpp-syntax-basics.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: cpp-syntax-basics
3-
title: C++ Syntax Basics
4-
sidebar_label: C++ Syntax Basics
3+
title: Basics Syntax and Structure of C++
4+
sidebar_label: Syntax and Structure
55
sidebar_position: 1
66
tags:
77
[

‎docs/cpp/01_Introduction_to_Cpp/_category_.json renamed to ‎docs/cpp/introduction-to-cpp/_category_.json

File renamed without changes.

‎docs/cpp/01_Introduction_to_Cpp/03_Setting_up_Your_Cpp_Environment.md renamed to ‎docs/cpp/introduction-to-cpp/setting-up-your-cpp-environment.md

File renamed without changes.

‎docs/cpp/01_Introduction_to_Cpp/01_What_is_Cpp.md renamed to ‎docs/cpp/introduction-to-cpp/what-is-cpp.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ id: what-is-cpp
33
title: What is C++?
44
sidebar_label: What is C++?
55
sidebar_position: 1
6-
tags: [c++, what-is-c++, introduction-to-c++]
6+
tags: [c++, what is c++, introduction to c++]
77
description: In this tutorial, you will learn about the C++ programming language, what it is, its features, and its applications.
88
---

‎docs/cpp/01_Introduction_to_Cpp/02_Why_Learn_Cpp.md renamed to ‎docs/cpp/introduction-to-cpp/why-learn-cpp.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ id: why-learn-cpp
33
title: Why Learn C++?
44
sidebar_label: Why Learn C++?
55
sidebar_position: 2
6-
tags: [c++, why-learn-c++]
6+
tags: [c++, why learn c++]
77
description: In this tutorial, you will learn about the many applications of the C++ programming language and the benefits of learning it.
88
---

‎docs/html/tables/creating-tables.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: creating-tables
33
title: Creating Tables in HTML
44
sidebar_label: Creating Tables
5-
sidebar_position: 1
5+
sidebar_position: 2
66
tags: [html, web-development, tables]
77
description: In this tutorial, you will learn how to create tables in HTML. Tables are used to display data in rows and columns, making it easier to organize and present information on web pages.
88
---

‎docs/html/html-tables.md renamed to ‎docs/html/tables/html-tables.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: html-tables
33
title: HTML Tables
44
sidebar_label: HTML Tables
5-
sidebar_position: 2
5+
sidebar_position: 1
66
tags: [html, tables, web development, markup language, structure, data presentation, web design, web pages, websites, table attributes, table structure]
77
description: This guide will introduce you to HTML tables, their importance, and how to use them to organize data on web pages. You'll learn about creating tables, structuring rows and columns, and customizing tables with HTML attributes.
88
---

‎docs/html/tables/table-attributes.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: table-attributes
33
title: Table Attributes in HTML
44
sidebar_label: Table Attributes
5-
sidebar_position: 3
5+
sidebar_position: 4
66
tags: [html, web-development, table-attributes, tables]
77
description: In this tutorial, you will learn about table attributes in HTML. Table attributes define the appearance, behavior, and structure of tables on web pages.
88
---

‎docs/html/tables/table-structure.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: table-structure
33
title: Table Structure in HTML
44
sidebar_label: Table Structure
5-
sidebar_position: 2
5+
sidebar_position: 3
66
tags: [html, web-development, tables, table-structure]
77
description: In this tutorial, you will learn about the structure of tables in HTML. Tables are used to display data in rows and columns, making it easier to organize and present information on web pages.
88
---

‎docs/html/text-formatting/headings.md

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@ tags: [html, web-development, headings]
77
description: In this tutorial, you will learn about headings in HTML. Headings are used to define the structure of a web page and are used to provide a hierarchy of information.
88
---
99

10-
# Heading into HTML: A Comprehensive Guide to HTML Headings
11-
12-
Hello, fellow web adventurers! Today, we’re setting off on an exciting journey to explore one of the fundamental building blocks of HTML: headings. Whether you’re a coding novice or a seasoned developer, understanding how to use headings effectively can transform your web pages from bland to grand. So, grab a comfy seat, maybe a snack, and let’s dive headfirst into the world of HTML headings.
10+
Today, we’re setting off on an exciting journey to explore one of the fundamental building blocks of HTML: headings. Whether you’re a coding novice or a seasoned developer, understanding how to use headings effectively can transform your web pages from bland to grand. So, grab a comfy seat, maybe a snack, and let’s dive headfirst into the world of HTML headings.
1311

1412
## What Are Headings?
1513

@@ -32,24 +30,38 @@ Here’s a quick look at each heading level:
3230

3331
Creating headings in HTML is straightforward. Here’s an example of how to use each heading level:
3432

35-
```html
36-
<!DOCTYPE html>
37-
<html lang="en">
38-
<head>
39-
<meta charset="UTF-8">
40-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
41-
<title>HTML Headings Example</title>
42-
</head>
43-
<body>
44-
<h1>This is an H1 Heading</h1>
45-
<h2>This is an H2 Heading</h2>
46-
<h3>This is an H3 Heading</h3>
47-
<h4>This is an H4 Heading</h4>
48-
<h5>This is an H5 Heading</h5>
49-
<h6>This is an H6 Heading</h6>
50-
</body>
51-
</html>
52-
```
33+
<Tabs>
34+
<TabItem value="HTML">
35+
```html
36+
<!DOCTYPE html>
37+
<html lang="en">
38+
<head>
39+
<meta charset="UTF-8">
40+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
41+
<title>HTML Headings Example</title>
42+
</head>
43+
<body>
44+
<h1>This is an H1 Heading</h1>
45+
<h2>This is an H2 Heading</h2>
46+
<h3>This is an H3 Heading</h3>
47+
<h4>This is an H4 Heading</h4>
48+
<h5>This is an H5 Heading</h5>
49+
<h6>This is an H6 Heading</h6>
50+
</body>
51+
</html>
52+
```
53+
</TabItem>
54+
<TabItem value="Output">
55+
<BrowserWindow url ="http://127.0.0.1:5500/index.html">
56+
<h1>This is an H1 Heading</h1>
57+
<h2>This is an H2 Heading</h2>
58+
<h3>This is an H3 Heading</h3>
59+
<h4>This is an H4 Heading</h4>
60+
<h5>This is an H5 Heading</h5>
61+
<h6>This is an H6 Heading</h6>
62+
</BrowserWindow>
63+
</TabItem>
64+
</Tabs>
5365

5466
In this example, each heading level is displayed, showing the hierarchical structure and relative size differences.
5567

‎docs/html/text-formatting/paragraphs.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
---
22
id: paragraphs
3-
title: The Art of the HTML Paragraph
3+
title: The Paragraph in HTML
44
sidebar_label: Paragraphs
55
sidebar_position: 2
66
tags: [html, web-development, paragraphs]
77
description: In this tutorial, you will learn about paragraphs in HTML. Paragraphs are used to group text content together and are used to separate different sections of a web page.
88
---
99

10-
# The Art of the HTML Paragraph: Crafting Text with Precision and Flair
11-
12-
Welcome, web wizards and aspiring developers! Today, we're going to dive into the fundamental yet fascinating world of HTML paragraphs. Think of paragraphs as the building blocks of your web content—each one a mini masterpiece that, when combined, forms the symphony of your webpage. Whether you’re a newbie or a seasoned coder, understanding the power and versatility of the `<p>` tag is essential. So, let’s embark on this journey to master the art of the HTML paragraph!
10+
Today, we're going to dive into the fundamental yet fascinating world of HTML paragraphs. Think of paragraphs as the building blocks of your web content—each one a mini masterpiece that, when combined, forms the symphony of your webpage. Whether you’re a newbie or a seasoned coder, understanding the power and versatility of the `<p>` tag is essential. So, let’s embark on this journey to master the art of the HTML paragraph!
1311

1412
## What Are HTML Paragraphs?
1513

‎docs/html/text-formatting/text-formatting.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@ tags: [html, web-development, text-formatting, formatting]
77
description: In this tutorial, you will learn about text formatting in HTML. Text formatting is used to style text content on a web page, such as making text bold, italic, or underlined.
88
---
99

10-
# The Magic of Text Formatting in HTML: Make Your Content Pop!
11-
12-
Hey there, web adventurers! Welcome back to another exciting blog post, where today, we’re going to delve into the enchanting world of text formatting in HTML. If you've ever felt that your web content was lacking that extra bit of pizzazz, then this is the guide for you. We’ll explore what text formatting is, how to use it in your code, and when it’s appropriate to sprinkle some formatting magic on your text. So, put on your wizard hat, and let’s start casting some HTML spells!
10+
Welcome back to another exciting blog post, where today, we’re going to delve into the enchanting world of text formatting in HTML. If you've ever felt that your web content was lacking that extra bit of pizzazz, then this is the guide for you. We’ll explore what text formatting is, how to use it in your code, and when it’s appropriate to sprinkle some formatting magic on your text. So, put on your wizard hat, and let’s start casting some HTML spells!
1311

1412
## What is Text Formatting?
1513

‎docusaurus.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ const config = {
273273
},
274274
{
275275
label: "Contact",
276-
to: "#",
276+
to: "/contact/",
277277
},
278278
{
279279
label: "Careers",

‎src/pages/contact/Contact.module.css

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
.main__contact {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: space-between;
5+
padding: auto 1rem;
6+
}
7+
8+
.main__contact_child1 {
9+
width: 100%;
10+
display: flex;
11+
}
12+
13+
.main__contact_child2 {
14+
width: 100%;
15+
display: flex;
16+
}
17+
18+
.main__contact_container{
19+
width: 100%;
20+
display: flex;
21+
justify-content: space-between;
22+
padding: 2rem;
23+
}
24+
25+
.main__contact_contains {
26+
display: flex;
27+
justify-content: space-between;
28+
padding: 1rem;
29+
width: 100%;
30+
}
31+
32+
.main__contact_contains_left{
33+
width: 100%;
34+
}
35+
36+
.main__contact_ud_wrapper {
37+
margin-top: 1rem;
38+
align-items: center;
39+
}
40+
41+
.ud_contact_title {
42+
font-size: 1.5rem;
43+
font-weight: 600;
44+
margin-bottom: 1rem;
45+
}
46+
47+
.contact_us {
48+
font-size: 1rem;
49+
font-weight: 600;
50+
color: #816bd1;
51+
}
52+
53+
.contact_heading {
54+
font-size: 2rem;
55+
font-weight: 700;
56+
margin: 1.5rem auto;
57+
line-height: 1.5;
58+
}
59+
60+
.contact_info {
61+
display: flex;
62+
flex-wrap: wrap;
63+
gap: 10px;
64+
margin: 8rem auto auto auto;
65+
66+
}
67+
68+
.contact_info_item {
69+
display: flex;
70+
margin-bottom: 1rem;
71+
}
72+
73+
.contact_info .contact_info_item .icon {
74+
font-size: 1.5rem;
75+
margin-right: 1rem;
76+
}
77+
78+
.contact_info .icon .fill_current {
79+
fill: #816bd1;
80+
}
81+
82+
.contact_info .contact_info_item .location_heading, .contact_info .contact_info_item .help_heading {
83+
font-size: 1.5rem;
84+
font-weight: 600;
85+
margin-bottom: 1rem;
86+
}
87+
88+
.location_text, .help_text {
89+
font-size: 1rem;
90+
font-weight: 400;
91+
margin-bottom: 1rem;
92+
}
93+
94+
.main__contact_contains_right {
95+
width: 70%;
96+
}
97+
98+
.main__contact_contains_right .form_container {
99+
padding: 2rem;
100+
border-radius: 10px;
101+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
102+
}
103+
104+
.main__contact_contains_right .form_container .form_heading {
105+
font-size: 1.5rem;
106+
font-weight: 600;
107+
margin-bottom: 1rem;
108+
}
109+
110+
.main__contact_contains_right .form_container .form_group {
111+
margin-bottom: 1rem;
112+
}
113+
114+
.main__contact_contains_right .form_container .form_group .form_label {
115+
font-size: 1rem;
116+
font-weight: 600;
117+
margin-bottom: 0.5rem;
118+
}
119+
120+
.main__contact_contains_right .form_container .form_group .form_input {
121+
width: 100%;
122+
padding: 0.5rem;
123+
border: 1px solid #ccc;
124+
border-radius: 5px;
125+
}
126+
127+
.main__contact_contains_right .form_container .form_group .form_textarea {
128+
width: 100%;
129+
padding: 0.5rem;
130+
border: 1px solid #ccc;
131+
border-radius: 5px;
132+
}
133+
134+
.main__contact_contains_right .form_container .form_group .form_button {
135+
width: 100px;
136+
padding: 0.5rem;
137+
border: none;
138+
border-radius: 5px;
139+
background-color: #816bd1;
140+
color: #fff;
141+
font-size: 1rem;
142+
font-weight: 600;
143+
cursor: pointer;
144+
}
145+
146+
@media screen and (max-width: 768px) {
147+
.main__contact_contains {
148+
flex-direction: column;
149+
}
150+
151+
.main__contact_contains_right {
152+
width: 100%;
153+
}
154+
}

0 commit comments

Comments
 (0)