From 58819b0aa9af99077e0e4d3e5b73b21477ac6ebe Mon Sep 17 00:00:00 2001 From: ajay-dhangar Date: Fri, 31 May 2024 01:07:11 +0530 Subject: [PATCH] Adde d Contact page --- .../02_Variables_and_Data_Types.md | 0 .../03_Operators_and_Expressions.md | 0 .../_category_.json | 0 .../cpp-syntax-basics.md} | 4 +- .../_category_.json | 0 .../setting-up-your-cpp-environment.md} | 0 .../what-is-cpp.md} | 2 +- .../why-learn-cpp.md} | 2 +- docs/html/tables/creating-tables.md | 2 +- docs/html/{ => tables}/html-tables.md | 2 +- docs/html/tables/table-attributes.md | 2 +- docs/html/tables/table-structure.md | 2 +- docs/html/text-formatting/headings.md | 54 +++--- docs/html/text-formatting/paragraphs.md | 6 +- docs/html/text-formatting/text-formatting.md | 4 +- docusaurus.config.js | 2 +- src/pages/contact/Contact.module.css | 154 ++++++++++++++++ src/pages/contact/index.tsx | 166 ++++++++++++++++++ 18 files changed, 365 insertions(+), 37 deletions(-) rename docs/cpp/{02_Basic_Syntax_and_Structure => basic-syntax-and-structure}/02_Variables_and_Data_Types.md (100%) rename docs/cpp/{02_Basic_Syntax_and_Structure => basic-syntax-and-structure}/03_Operators_and_Expressions.md (100%) rename docs/cpp/{02_Basic_Syntax_and_Structure => basic-syntax-and-structure}/_category_.json (100%) rename docs/cpp/{02_Basic_Syntax_and_Structure/01_Cpp_Syntax_Basics.md => basic-syntax-and-structure/cpp-syntax-basics.md} (84%) rename docs/cpp/{01_Introduction_to_Cpp => introduction-to-cpp}/_category_.json (100%) rename docs/cpp/{01_Introduction_to_Cpp/03_Setting_up_Your_Cpp_Environment.md => introduction-to-cpp/setting-up-your-cpp-environment.md} (100%) rename docs/cpp/{01_Introduction_to_Cpp/01_What_is_Cpp.md => introduction-to-cpp/what-is-cpp.md} (82%) rename docs/cpp/{01_Introduction_to_Cpp/02_Why_Learn_Cpp.md => introduction-to-cpp/why-learn-cpp.md} (89%) rename docs/html/{ => tables}/html-tables.md (99%) create mode 100644 src/pages/contact/Contact.module.css create mode 100644 src/pages/contact/index.tsx diff --git a/docs/cpp/02_Basic_Syntax_and_Structure/02_Variables_and_Data_Types.md b/docs/cpp/basic-syntax-and-structure/02_Variables_and_Data_Types.md similarity index 100% rename from docs/cpp/02_Basic_Syntax_and_Structure/02_Variables_and_Data_Types.md rename to docs/cpp/basic-syntax-and-structure/02_Variables_and_Data_Types.md diff --git a/docs/cpp/02_Basic_Syntax_and_Structure/03_Operators_and_Expressions.md b/docs/cpp/basic-syntax-and-structure/03_Operators_and_Expressions.md similarity index 100% rename from docs/cpp/02_Basic_Syntax_and_Structure/03_Operators_and_Expressions.md rename to docs/cpp/basic-syntax-and-structure/03_Operators_and_Expressions.md diff --git a/docs/cpp/02_Basic_Syntax_and_Structure/_category_.json b/docs/cpp/basic-syntax-and-structure/_category_.json similarity index 100% rename from docs/cpp/02_Basic_Syntax_and_Structure/_category_.json rename to docs/cpp/basic-syntax-and-structure/_category_.json diff --git a/docs/cpp/02_Basic_Syntax_and_Structure/01_Cpp_Syntax_Basics.md b/docs/cpp/basic-syntax-and-structure/cpp-syntax-basics.md similarity index 84% rename from docs/cpp/02_Basic_Syntax_and_Structure/01_Cpp_Syntax_Basics.md rename to docs/cpp/basic-syntax-and-structure/cpp-syntax-basics.md index 1d67734ab..99d24c2d0 100644 --- a/docs/cpp/02_Basic_Syntax_and_Structure/01_Cpp_Syntax_Basics.md +++ b/docs/cpp/basic-syntax-and-structure/cpp-syntax-basics.md @@ -1,7 +1,7 @@ --- id: cpp-syntax-basics -title: C++ Syntax Basics -sidebar_label: C++ Syntax Basics +title: Basics Syntax and Structure of C++ +sidebar_label: Syntax and Structure sidebar_position: 1 tags: [ diff --git a/docs/cpp/01_Introduction_to_Cpp/_category_.json b/docs/cpp/introduction-to-cpp/_category_.json similarity index 100% rename from docs/cpp/01_Introduction_to_Cpp/_category_.json rename to docs/cpp/introduction-to-cpp/_category_.json diff --git a/docs/cpp/01_Introduction_to_Cpp/03_Setting_up_Your_Cpp_Environment.md b/docs/cpp/introduction-to-cpp/setting-up-your-cpp-environment.md similarity index 100% rename from docs/cpp/01_Introduction_to_Cpp/03_Setting_up_Your_Cpp_Environment.md rename to docs/cpp/introduction-to-cpp/setting-up-your-cpp-environment.md diff --git a/docs/cpp/01_Introduction_to_Cpp/01_What_is_Cpp.md b/docs/cpp/introduction-to-cpp/what-is-cpp.md similarity index 82% rename from docs/cpp/01_Introduction_to_Cpp/01_What_is_Cpp.md rename to docs/cpp/introduction-to-cpp/what-is-cpp.md index aa5078713..9d595be6f 100644 --- a/docs/cpp/01_Introduction_to_Cpp/01_What_is_Cpp.md +++ b/docs/cpp/introduction-to-cpp/what-is-cpp.md @@ -3,6 +3,6 @@ id: what-is-cpp title: What is C++? sidebar_label: What is C++? sidebar_position: 1 -tags: [c++, what-is-c++, introduction-to-c++] +tags: [c++, what is c++, introduction to c++] description: In this tutorial, you will learn about the C++ programming language, what it is, its features, and its applications. --- \ No newline at end of file diff --git a/docs/cpp/01_Introduction_to_Cpp/02_Why_Learn_Cpp.md b/docs/cpp/introduction-to-cpp/why-learn-cpp.md similarity index 89% rename from docs/cpp/01_Introduction_to_Cpp/02_Why_Learn_Cpp.md rename to docs/cpp/introduction-to-cpp/why-learn-cpp.md index 254b5fb68..7a1db0850 100644 --- a/docs/cpp/01_Introduction_to_Cpp/02_Why_Learn_Cpp.md +++ b/docs/cpp/introduction-to-cpp/why-learn-cpp.md @@ -3,6 +3,6 @@ id: why-learn-cpp title: Why Learn C++? sidebar_label: Why Learn C++? sidebar_position: 2 -tags: [c++, why-learn-c++] +tags: [c++, why learn c++] description: In this tutorial, you will learn about the many applications of the C++ programming language and the benefits of learning it. --- \ No newline at end of file diff --git a/docs/html/tables/creating-tables.md b/docs/html/tables/creating-tables.md index 47d6bc22d..891f2b8cc 100644 --- a/docs/html/tables/creating-tables.md +++ b/docs/html/tables/creating-tables.md @@ -2,7 +2,7 @@ id: creating-tables title: Creating Tables in HTML sidebar_label: Creating Tables -sidebar_position: 1 +sidebar_position: 2 tags: [html, web-development, tables] 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. --- \ No newline at end of file diff --git a/docs/html/html-tables.md b/docs/html/tables/html-tables.md similarity index 99% rename from docs/html/html-tables.md rename to docs/html/tables/html-tables.md index 71a60b54d..76ba6aa18 100644 --- a/docs/html/html-tables.md +++ b/docs/html/tables/html-tables.md @@ -2,7 +2,7 @@ id: html-tables title: HTML Tables sidebar_label: HTML Tables -sidebar_position: 2 +sidebar_position: 1 tags: [html, tables, web development, markup language, structure, data presentation, web design, web pages, websites, table attributes, table structure] 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. --- diff --git a/docs/html/tables/table-attributes.md b/docs/html/tables/table-attributes.md index 95a4d0592..f041e4de0 100644 --- a/docs/html/tables/table-attributes.md +++ b/docs/html/tables/table-attributes.md @@ -2,7 +2,7 @@ id: table-attributes title: Table Attributes in HTML sidebar_label: Table Attributes -sidebar_position: 3 +sidebar_position: 4 tags: [html, web-development, table-attributes, tables] 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. --- \ No newline at end of file diff --git a/docs/html/tables/table-structure.md b/docs/html/tables/table-structure.md index 0cb6815e5..8c2206dd4 100644 --- a/docs/html/tables/table-structure.md +++ b/docs/html/tables/table-structure.md @@ -2,7 +2,7 @@ id: table-structure title: Table Structure in HTML sidebar_label: Table Structure -sidebar_position: 2 +sidebar_position: 3 tags: [html, web-development, tables, table-structure] 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. --- \ No newline at end of file diff --git a/docs/html/text-formatting/headings.md b/docs/html/text-formatting/headings.md index 7bb679111..84c6fd4ad 100644 --- a/docs/html/text-formatting/headings.md +++ b/docs/html/text-formatting/headings.md @@ -7,9 +7,7 @@ tags: [html, web-development, headings] 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. --- -# Heading into HTML: A Comprehensive Guide to HTML Headings - -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. +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. ## What Are Headings? @@ -32,24 +30,38 @@ Here’s a quick look at each heading level: Creating headings in HTML is straightforward. Here’s an example of how to use each heading level: -```html - - - - - - HTML Headings Example - - -

This is an H1 Heading

-

This is an H2 Heading

-

This is an H3 Heading

-

This is an H4 Heading

-
This is an H5 Heading
-
This is an H6 Heading
- - -``` + + + ```html + + + + + + HTML Headings Example + + +

This is an H1 Heading

+

This is an H2 Heading

+

This is an H3 Heading

+

This is an H4 Heading

+
This is an H5 Heading
+
This is an H6 Heading
+ + + ``` + + + +

This is an H1 Heading

+

This is an H2 Heading

+

This is an H3 Heading

+

This is an H4 Heading

+
This is an H5 Heading
+
This is an H6 Heading
+ + + In this example, each heading level is displayed, showing the hierarchical structure and relative size differences. diff --git a/docs/html/text-formatting/paragraphs.md b/docs/html/text-formatting/paragraphs.md index b9c6b49fe..660656bfc 100644 --- a/docs/html/text-formatting/paragraphs.md +++ b/docs/html/text-formatting/paragraphs.md @@ -1,15 +1,13 @@ --- id: paragraphs -title: The Art of the HTML Paragraph +title: The Paragraph in HTML sidebar_label: Paragraphs sidebar_position: 2 tags: [html, web-development, paragraphs] 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. --- -# The Art of the HTML Paragraph: Crafting Text with Precision and Flair - -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 `

` tag is essential. So, let’s embark on this journey to master the art of the HTML paragraph! +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 `

` tag is essential. So, let’s embark on this journey to master the art of the HTML paragraph! ## What Are HTML Paragraphs? diff --git a/docs/html/text-formatting/text-formatting.md b/docs/html/text-formatting/text-formatting.md index 3833ba577..4710374e8 100644 --- a/docs/html/text-formatting/text-formatting.md +++ b/docs/html/text-formatting/text-formatting.md @@ -7,9 +7,7 @@ tags: [html, web-development, text-formatting, formatting] 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. --- -# The Magic of Text Formatting in HTML: Make Your Content Pop! - -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! +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! ## What is Text Formatting? diff --git a/docusaurus.config.js b/docusaurus.config.js index b83a963ae..1eb12dbee 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -273,7 +273,7 @@ const config = { }, { label: "Contact", - to: "#", + to: "/contact/", }, { label: "Careers", diff --git a/src/pages/contact/Contact.module.css b/src/pages/contact/Contact.module.css new file mode 100644 index 000000000..6f967a8b9 --- /dev/null +++ b/src/pages/contact/Contact.module.css @@ -0,0 +1,154 @@ +.main__contact { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: auto 1rem; +} + +.main__contact_child1 { + width: 100%; + display: flex; +} + +.main__contact_child2 { + width: 100%; + display: flex; +} + +.main__contact_container{ + width: 100%; + display: flex; + justify-content: space-between; + padding: 2rem; +} + +.main__contact_contains { + display: flex; + justify-content: space-between; + padding: 1rem; + width: 100%; +} + +.main__contact_contains_left{ + width: 100%; +} + +.main__contact_ud_wrapper { + margin-top: 1rem; + align-items: center; +} + +.ud_contact_title { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.contact_us { + font-size: 1rem; + font-weight: 600; + color: #816bd1; +} + +.contact_heading { + font-size: 2rem; + font-weight: 700; + margin: 1.5rem auto; + line-height: 1.5; +} + +.contact_info { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin: 8rem auto auto auto; + +} + +.contact_info_item { + display: flex; + margin-bottom: 1rem; +} + +.contact_info .contact_info_item .icon { + font-size: 1.5rem; + margin-right: 1rem; +} + +.contact_info .icon .fill_current { + fill: #816bd1; +} + +.contact_info .contact_info_item .location_heading, .contact_info .contact_info_item .help_heading { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.location_text, .help_text { + font-size: 1rem; + font-weight: 400; + margin-bottom: 1rem; +} + +.main__contact_contains_right { + width: 70%; +} + +.main__contact_contains_right .form_container { + padding: 2rem; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.main__contact_contains_right .form_container .form_heading { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.main__contact_contains_right .form_container .form_group { + margin-bottom: 1rem; +} + +.main__contact_contains_right .form_container .form_group .form_label { + font-size: 1rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.main__contact_contains_right .form_container .form_group .form_input { + width: 100%; + padding: 0.5rem; + border: 1px solid #ccc; + border-radius: 5px; +} + +.main__contact_contains_right .form_container .form_group .form_textarea { + width: 100%; + padding: 0.5rem; + border: 1px solid #ccc; + border-radius: 5px; +} + +.main__contact_contains_right .form_container .form_group .form_button { + width: 100px; + padding: 0.5rem; + border: none; + border-radius: 5px; + background-color: #816bd1; + color: #fff; + font-size: 1rem; + font-weight: 600; + cursor: pointer; +} + +@media screen and (max-width: 768px) { + .main__contact_contains { + flex-direction: column; + } + + .main__contact_contains_right { + width: 100%; + } +} \ No newline at end of file diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx new file mode 100644 index 000000000..f5f94f408 --- /dev/null +++ b/src/pages/contact/index.tsx @@ -0,0 +1,166 @@ +import Layout from "@theme/Layout"; +import styles from "./Contact.module.css"; +import React, { useState, ChangeEvent, FormEvent } from "react"; + +interface FormValues { + fullName: string; + email: string; + phone: string; + message: string; +} + +/** + * Renders the contact page component. + * @returns {JSX.Element} A JSX element for the contact page. + */ +export default function Contact(): JSX.Element { + const [formValues, setFormValues] = useState({ + fullName: "", + email: "", + phone: "", + message: "", + }); + + const handleInputChange = ( + e: ChangeEvent + ) => { + const { name, value } = e.target; + setFormValues({ + ...formValues, + [name]: value, + }); + }; + + const handleSubmit = (e: FormEvent) => { + e.preventDefault(); + // Handle form submission logic + console.log("Form submitted:", formValues); + }; + return ( + +

+
+
+
+
+
+
+
+ + CONTACT US + +

+ Let's talk about your problem. +

+
+
+
+
+ + + + +
+
+
Our Location
+

+ Mandsaur, Madhya Pradesh, India - 458002 +

+
+
+
+
+ + + +
+
+
How Can We Help?
+

+ ajaydhyangar49@gmail.com +

+
+
+
+
+
+
+
+

Send us a Message

+
+
+ + +
+
+ + +
+
+ + +
+
+ +