├── .gitignore
├── CODE_OF_CONDUCT.md
├── Calculator
    ├── INdex.html
    └── style.css
├── MERN PROJECTS
    └── New Text Document.txt
├── PROJECT_5
    ├── index.html
    └── style.css
├── Python Projects
    ├── abc.docx
    └── utube_vdo_download.py
├── README.md
├── city project
    ├── .vscode
    │   └── settings.json
    ├── home.html
    ├── image
    │   ├── download (1).jfif
    │   ├── download (10).jfif
    │   ├── download (11).jfif
    │   ├── download (12).jfif
    │   ├── download (13).jfif
    │   ├── download (14).jfif
    │   ├── download (15).jfif
    │   ├── download (16).jfif
    │   ├── download (17).jfif
    │   ├── download (18).jfif
    │   ├── download (19).jfif
    │   ├── download (2).jfif
    │   ├── download (3).jfif
    │   ├── download (4).jfif
    │   ├── download (5).jfif
    │   ├── download (6).jfif
    │   ├── download (7).jfif
    │   ├── download (8).jfif
    │   ├── download (9).jfif
    │   ├── download.jfif
    │   ├── header-image.jpg
    │   ├── images (1).jfif
    │   ├── images.jfif
    │   └── shutterstock_481801648.webp
    ├── index.html
    ├── style.css
    ├── stylebytanuj.css
    └── thanks.html
├── mongo-config.yaml
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── manifest.json
    ├── ms-icon-144x144.png
    └── robots.txt
├── src
    ├── About.jsx
    ├── Alert.js
    ├── App.css
    ├── App.jsx
    ├── Card.jsx
    ├── Common.jsx
    ├── Contact.jsx
    ├── Footer.css
    ├── Footer.jsx
    ├── Home.jsx
    ├── Navbar.css
    ├── Navbar.jsx
    ├── Prefooter.css
    ├── Sdata.jsx
    ├── Service.jsx
    ├── about.css
    ├── card.css
    ├── chatBot.css
    ├── chatBot.jsx
    ├── common.css
    ├── contact.css
    ├── data.json
    ├── images
    │   ├── about.jpg
    │   ├── c1.jpg
    │   ├── c2.jpg
    │   ├── c3.jpg
    │   ├── home.jpg
    │   ├── i1.jpg
    │   ├── i2.jpg
    │   ├── i3.jpg
    │   ├── i4.jpg
    │   ├── i5.jpg
    │   ├── i6.jpg
    │   ├── icons8-send-25.png
    │   ├── img1.svg
    │   └── serviceImg.jpg
    ├── index.css
    ├── index.js
    └── reportWebVitals.js
└── web page design
    ├── imagebg.jpg
    ├── index.html
    └── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement.
 63 | All complaints will be reviewed and investigated promptly and fairly.
 64 | 
 65 | All community leaders are obligated to respect the privacy and security of the
 66 | reporter of any incident.
 67 | 
 68 | ## Enforcement Guidelines
 69 | 
 70 | Community leaders will follow these Community Impact Guidelines in determining
 71 | the consequences for any action they deem in violation of this Code of Conduct:
 72 | 
 73 | ### 1. Correction
 74 | 
 75 | *Community Impact*: Use of inappropriate language or other behavior deemed
 76 | unprofessional or unwelcome in the community.
 77 | 
 78 | *Consequence*: A private, written warning from community leaders, providing
 79 | clarity around the nature of the violation and an explanation of why the
 80 | behavior was inappropriate. A public apology may be requested.
 81 | 
 82 | ### 2. Warning
 83 | 
 84 | *Community Impact*: A violation through a single incident or series
 85 | of actions.
 86 | 
 87 | *Consequence*: A warning with consequences for continued behavior. No
 88 | interaction with the people involved, including unsolicited interaction with
 89 | those enforcing the Code of Conduct, for a specified period of time. This
 90 | includes avoiding interactions in community spaces as well as external channels
 91 | like social media. Violating these terms may lead to a temporary or
 92 | permanent ban.
 93 | 
 94 | ### 3. Temporary Ban
 95 | 
 96 | *Community Impact*: A serious violation of community standards, including
 97 | sustained inappropriate behavior.
 98 | 
 99 | *Consequence*: A temporary ban from any sort of interaction or public
100 | communication with the community for a specified period of time. No public or
101 | private interaction with the people involved, including unsolicited interaction
102 | with those enforcing the Code of Conduct, is allowed during this period.
103 | Violating these terms may lead to a permanent ban.
104 | 
105 | ### 4. Permanent Ban
106 | 
107 | *Community Impact*: Demonstrating a pattern of violation of community
108 | standards, including sustained inappropriate behavior,  harassment of an
109 | individual, or aggression toward or disparagement of classes of individuals.
110 | 
111 | *Consequence*: A permanent ban from any sort of public interaction within
112 | the community.
113 | 
114 | ## Attribution
115 | 
116 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
117 | version 2.0, available at
118 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
119 | 
120 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
121 | enforcement ladder](https://github.com/mozilla/diversity).
122 | 
123 | [homepage]: https://www.contributor-covenant.org
124 | 
125 | For answers to common questions about this code of conduct, see the FAQ at
126 | https://www.contributor-covenant.org/faq. Translations are available at
127 | https://www.contributor-covenant.org/translations.
128 | 


--------------------------------------------------------------------------------
/Calculator/INdex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <link rel="stylesheet" href="style.css">
 6 |    </head>
 7 | <body>
 8 | <div class="bubbles">
 9 |   <span class="one"></span>
10 |   <span class="two"></span>
11 |   <span class="three"></span>
12 |   <span class="four"></span>
13 |   <span class="five"></span>
14 |   <span class="six"></span>
15 |   <span class="seven"></span>
16 |   <span class="seven"></span>
17 | </div>
18 | <div class="bubbles">
19 |   <span class="one"></span>
20 |   <span class="two"></span>
21 |   <span class="three"></span>
22 |   <span class="four"></span>
23 |   <span class="five"></span>
24 |   <span class="six"></span>
25 |   <span class="seven"></span>
26 |   <span class="seven"></span>
27 | </div>
28 | <div class="bubbles">
29 |   <span class="one"></span>
30 |   <span class="two"></span>
31 |   <span class="three"></span>
32 |   <span class="four"></span>
33 |   <span class="five"></span>
34 |   <span class="six"></span>
35 |   <span class="seven"></span>
36 |   <span class="seven"></span>
37 | </div>
38 | <div class="bubbles">
39 |   <span class="one"></span>
40 |   <span class="two"></span>
41 |   <span class="three"></span>
42 |   <span class="four"></span>
43 |   <span class="five"></span>
44 |   <span class="six"></span>
45 |   <span class="seven"></span>
46 |   <span class="seven"></span>
47 | </div>
48 |  <div class="container">
49 |    <form action="#" name="forms">
50 |      <input type="text" name="answer">
51 |      <div class="buttons">
52 |        <input type="button" value="AC" onclick="forms.answer.value = ''">
53 |        <input type="button" value="DEL" onclick="forms.answer.value = forms.answer.value.substr(0 , forms.answer.value.length -1)">
54 |        <input type="button" value="%" onclick="forms.answer.value += '%'">
55 |        <input type="button" value="/" onclick="forms.answer.value += '/'">
56 |      </div>
57 |      <div class="buttons">
58 |        <input type="button" value="7" onclick="forms.answer.value += '7'">
59 |        <input type="button" value="8" onclick="forms.answer.value += '8'">
60 |        <input type="button" value="9" onclick="forms.answer.value += '9'">
61 |        <input type="button" value="*" onclick="forms.answer.value += '*'">
62 |      </div>
63 |      <div class="buttons">
64 |        <input type="button" value="4" onclick="forms.answer.value += '4'">
65 |        <input type="button" value="5" onclick="forms.answer.value += '5'">
66 |        <input type="button" value="6" onclick="forms.answer.value += '6'">
67 |        <input type="button" value="-" onclick="forms.answer.value += '-'">
68 |      </div>
69 |      <div class="buttons">
70 |        <input type="button" value="1" onclick="forms.answer.value += '1'">
71 |        <input type="button" value="2" onclick="forms.answer.value += '2'">
72 |        <input type="button" value="3" onclick="forms.answer.value += '3'">
73 |        <input type="button" value="+" onclick="forms.answer.value += '+'">
74 |      </div>
75 |      <div class="buttons">
76 |        <input type="button" value="0"  onclick="forms.answer.value += '0'">
77 |        <input type="button" value="00" onclick="forms.answer.value += '00'">
78 |        <input type="button" value="." onclick="forms.answer.value += '.'">
79 |        <input type="button" value="=" onclick="forms.answer.value = eval(forms.answer.value)">
80 |      </div>
81 |    </form>
82 |  </div>
83 | </body>
84 | </html>
85 | 
86 |         
87 |     


--------------------------------------------------------------------------------
/Calculator/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;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 |   height: 100vh;
 10 |   width: 100%;
 11 |   overflow: hidden;
 12 |   display: flex;
 13 |   justify-content: center;
 14 |   align-items: center;
 15 |   background: linear-gradient(#2196f3 , #e91e63);
 16 | }
 17 | .bubbles{
 18 |   position: absolute;
 19 |   bottom: -120px;
 20 |   display: flex;
 21 |   flex-wrap: wrap;
 22 |   margin-top: 70px;
 23 |   width: 100%;
 24 |   justify-content: space-around;
 25 | }
 26 | .bubbles span{
 27 |   height: 60px;
 28 |   width: 60px;
 29 |   background: rgba(255, 255, 255, 0.1);
 30 |   animation: move 10s linear infinite;
 31 |   position: relative;
 32 |   overflow: hidden;
 33 | }
 34 | @keyframes move {
 35 |   100%{
 36 |     transform: translateY(-100vh);
 37 |   }
 38 | }
 39 | .bubbles span.one{
 40 |   animation-delay: 2.2s;
 41 |   transform: scale(2.15)
 42 | }
 43 | .bubbles span.two{
 44 |   animation-delay: 3.5s;
 45 |   transform: scale(1.55)
 46 | }
 47 | .bubbles span.three{
 48 |   animation-delay: 0.2s;
 49 |   transform: scale(0.35)
 50 | }
 51 | .bubbles span.four{
 52 |   animation-delay: 6s;
 53 |   transform: scale(2.15)
 54 | }
 55 | .bubbles span.five{
 56 |   animation-delay: 7s;
 57 |   transform: scale(0.5)
 58 | }
 59 | .bubbles span.six{
 60 |   animation-delay: 4s;
 61 |   transform: scale(2.5)
 62 | }
 63 | .bubbles span.seven{
 64 |   animation-delay: 3s;
 65 |   
 66 | }
 67 | .bubbles span:before{
 68 |   content: ' ';
 69 |   position: absolute;
 70 |   left: 0;
 71 |   top: 0;
 72 |   height: 60px;
 73 |   width: 40%;
 74 |   transform: skew(45deg) translateX(150px);
 75 |   background: rgba(255, 255, 255, 0.15);
 76 |   animation: mirror 3s linear infinite;
 77 | }
 78 | @keyframes mirror {
 79 |   100%{
 80 |     transform: translateX(-450px);
 81 |   }
 82 | }
 83 | .bubbles span.one:before{
 84 |   animation-delay: 1.5s;
 85 | }
 86 | .bubbles span.two:before{
 87 |   animation-delay: 3.5s;
 88 | }
 89 | .bubbles span.three:before{
 90 |   animation-delay: 2.5s;
 91 | }
 92 | .bubbles span.four:before{
 93 |   animation-delay: 7.5s;
 94 | }
 95 | .bubbles span.five:before{
 96 |   animation-delay: 4.5s;
 97 | }
 98 | .bubbles span.six:before{
 99 |   animation-delay: 0.5s;
100 | }
101 | .bubbles span.seven:before{
102 |   animation-delay: 6s;
103 | }
104 | .container{
105 |   z-index: 12;
106 |   width: 360px;
107 |   padding: 15px;
108 |   border-radius: 12px;
109 |   background: rgba(255, 255, 255, 0.1);
110 |   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
111 |   border-top: 1px solid rgba(255, 255, 255, 0.5);
112 |   border-left: 1px solid rgba(255, 255, 255, 0.5);
113 | }
114 | .container input[type="text"]{
115 |   width: 100%;
116 |   height: 100px;
117 |   margin: 0 3px;
118 |   outline: none;
119 |   border: none;
120 |   color: #fff;
121 |   font-size: 20px;
122 |   text-align: right;
123 |   padding-right: 10px;
124 |   pointer-events: none;
125 |   background: transparent;
126 | }
127 | .container input[type="button"]{
128 |   height: 65px;
129 |   color: #fff;
130 |   width: calc(100% / 4 - 5px);
131 |   background: transparent;
132 |   border-radius: 12px;
133 |   margin-top: 15px;
134 |   outline: none;
135 |   border: none;
136 |   font-size: 20px;
137 |   cursor: pointer;
138 |   transition: all 0.3s ease;
139 | }
140 | .container input[type="button"]:hover{
141 |   background: rgba(255, 255, 255, 0.1);
142 | }


--------------------------------------------------------------------------------
/MERN PROJECTS/New Text Document.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/MERN PROJECTS/New Text Document.txt


--------------------------------------------------------------------------------
/PROJECT_5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Login Form</title>
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <h1>Login</h1>
13 |       <form action="#">
14 |         <div class="txt-field">
15 |           <input type="text" required placeholder="User Name or Email" />
16 |         </div>
17 |         <div class="txt-field">
18 |           <input type="text" required placeholder="Password" />
19 |         </div>
20 |         <div class="pass_forget"><a href="#">Forget Password</a></div>
21 |         <input type="submit" value="Login" />
22 |       </form>
23 |     </div>
24 |   </body>
25 | </html>


--------------------------------------------------------------------------------
/PROJECT_5/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap");
 2 | 
 3 | * {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   box-sizing: border-box;
 7 |   font-family: "poppins";
 8 | }
 9 | 
10 | body {
11 |   background: linear-gradient(45deg, #2980b9, #100b12);
12 |   height: 100vh;
13 | }
14 | 
15 | .container {
16 |   position: absolute;
17 |   top: 50%;
18 |   left: 50%;
19 |   transform: translate(-50%, -50%);
20 |   width: 400px;
21 |   height: 450px;
22 |   background: #fff;
23 |   border-radius: 10px;
24 | }
25 | 
26 | .container h1 {
27 |   text-align: center;
28 |   padding: 20px 0px;
29 |   border-bottom: 1px solid #ccc;
30 | }
31 | 
32 | .container form {
33 |   padding: 0 40px;
34 |   box-sizing: border-box;
35 | }
36 | 
37 | .container .txt-field {
38 |   position: relative;
39 |   margin: 30px 0px;
40 | }
41 | 
42 | .txt-field input {
43 |   width: 100%;
44 |   padding: 0px 5px;
45 |   height: 40px;
46 |   font-size: 16px;
47 | }
48 | 
49 | .pass_forget {
50 |   margin: -5px 0px 20px 5px;
51 | }
52 | 
53 | .pass_forget a {
54 |   margin: -5px 0px 20px 5px;
55 |   color: #a6a6a6;
56 |   cursor: pointer;
57 |   text-decoration: none;
58 | }
59 | 
60 | .pass_forget:hover {
61 |   text-decoration: underline;
62 | }
63 | 
64 | input[type="submit"] {
65 |   width: 100%;
66 |   height: 50px;
67 |   border: 1px solid;
68 |   background: #2691d9;
69 |   border-radius: 25px;
70 |   font-size: 18px;
71 |   color: #e9f4fb;
72 |   font-weight: 700;
73 |   outline: none;
74 |   cursor: pointer;
75 |   transition: 0.3s;
76 | }
77 | 
78 | input[type="submit"]:active
79 | {
80 |   transform: scale(0.95);
81 | }
82 | 
83 | 


--------------------------------------------------------------------------------
/Python Projects/abc.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/Python Projects/abc.docx


--------------------------------------------------------------------------------
/Python Projects/utube_vdo_download.py:
--------------------------------------------------------------------------------
 1 | # from pytube import YouTube
 2 | # SAVE_PATH = "F:/Courses/"
 3 | # link="https://www.youtube.com/watch?v=M576WGiDBdQ"
 4 | # try:
 5 | # 	yt = YouTube(link)
 6 | # except:
 7 | # 	print("Connection Error") 
 8 | # mp4files = yt.streams.filter(progressive=True, file_extension='mp4')
 9 | # # yt.streams.set_filename('Blockchain_python')
10 | # d_video = yt.(mp4files[-1].extension,mp4files[-1].resolution)
11 | # try:
12 | # 	d_video.download(SAVE_PATH)
13 | # except:
14 | # 	print("Some Error!")
15 | # print('Task Completed!')
16 | 
17 | 
18 | 
19 | 
20 | from pytube import YouTube
21 | import os
22 | 
23 | def downloadYouTube(videourl, path):
24 | 
25 |     yt = YouTube(videourl)
26 |     yt = yt.streams.filter(progressive=True, file_extension='mp4').order_by('resolution').desc().first()
27 |     if not os.path.exists(path):
28 |         os.makedirs(path)
29 |     yt.download(path)
30 | 
31 | downloadYouTube('https://www.youtube.com/watch?v=V2zaeqFSSTE', 'E:/DjangoAPI')
32 | 
33 | #https://www.youtube.com/watch?v=g1ruWGga_AM&list=PLLz6Bi1mIXhG7SJHsZjI42aKOLkLysjeZ&index=2


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #  HacktoberFest is here!!
 2 | 
 3 | Use this repository to make your first and easy contribution to open source world. Create and easy pull request by following the steps given below.
 4 | 
 5 | Celebrate [HacktoberFest](https://hacktoberfest.digitalocean.com/) by getting involved in the Open Source Community by completing some simple tasks in this project.
 6 | 
 7 | This repository is open to all members of the GitHub Community. Any member may contribute to this project without being a collaborator.
 8 | 
 9 | [https://github.com/sbmxc/hacktoberfest](https://github.com/sbmsc/hacktoberfest)
10 | 
11 |  Also, checkout other repositories of mine if you find you can improve something there. You are more than welcome to make PR there as well. Although, that would only be approved if you enhance the existing apps.
12 | 
13 | 
14 | ## What is Hacktoberfest and how many times it is organised in a year?
15 | A month-long celebration from October 1st - 31st sponsored by [Digital Ocean](https://hacktoberfest.digitalocean.com/) and [GitHub](https://github.com/blog/2433-celebrate-open-source-this-october-with-hacktoberfest) to get people involved in [Open Source](https://github.com/open-source). Create your very first Pull Request to any Public Repository on GitHub and contribute to the Open Source Developer Community.
16 | 
17 | [https://hacktoberfest.digitalocean.com/](https://hacktoberfest.digitalocean.com/)
18 | 
19 | 
20 | ## How Contribute to This Project
21 | Here is a simple way to contribut to the project.
22 | 
23 | 
24 | ## Getting Started
25 | * Fork this repository (Click the Fork button in the top right of this page, click your Profile Image)
26 | * Clone your fork down to your local machine
27 | ```markdown
28 | git clone <url> (given in clone or download button)
29 | ```
30 | * Run in your localhost
31 | ```markdown
32 | npm install
33 | ```
34 | ```markdown
35 | npm start
36 | ```
37 | 
38 | * Make your changes (Choose from any task below)
39 | * Commit and Push
40 | ```markdown
41 | git add .
42 | git commit -m 'commit message'
43 | go to your forked project and Sync fork
44 | git pull origin branch-name(main/master)
45 | git push origin branch-name(main/master)
46 | ```
47 | * Create a New Pull Request from your forked repository (Click the New Pull Request button located at the top of your repo)
48 | * Wait for your PR review and merge approval!
49 | * __Star this repository__ for higher chance of merge approval!
50 | 
51 | 
52 | ## Reference Links
53 | Here is a great tutorial for creating your first Pull Request by [Roshan Jossey](https://github.com/Roshanjossey)
54 | [https://github.com/Roshanjossey/first-contributions](https://github.com/Roshanjossey/first-contributions)
55 | 
56 | Managing your Forked Repo [https://help.github.com/articles/fork-a-repo/](https://help.github.com/articles/fork-a-repo/)
57 | 
58 | Syncing a Fork [https://help.github.com/articles/syncing-a-fork/](https://help.github.com/articles/syncing-a-fork/)
59 | 
60 | Keep Your Fork Synced [https://gist.github.com/CristinaSolana/1885435](https://gist.github.com/CristinaSolana/1885435)
61 | 
62 | Checkout this list for README examples - Awesome README [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
63 | 
64 | Github-Flavored Markdown [https://guides.github.com/features/mastering-markdown/](https://guides.github.com/features/mastering-markdown/)
65 | 
66 | ## Content courtesy
67 | [https://github.com/AliceWonderland/hacktoberfest](https://github.com/AliceWonderland/hacktoberfest) 
68 | 


--------------------------------------------------------------------------------
/city project/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/city project/home.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="stylesheet" href="./style.css">
  8 |     <script src="https://kit.fontawesome.com/fdee68bd50.js" crossorigin="anonymous"></script>  
  9 |     <script src="https://kit.fontawesome.com/fdee68bd50.js" crossorigin="anonymous"></script>  
 10 |     <title>GURUGRAM | HARYANA </title>
 11 | </head>
 12 | <body>
 13 |     <!-- NAV BAR  -->
 14 |     <nav class="navbar">
 15 |         <div class="navbar-container container">
 16 |             <input type="checkbox" name="" id="">
 17 |             <div class="hamburger-lines">
 18 |                 <span class="line line1"></span>
 19 |                 <span class="line line2"></span>
 20 |                 <span class="line line3"></span>
 21 |             </div>
 22 |             <h1 class="logo">Gurugram</h1>
 23 | 
 24 |             <ul class="menu-items">
 25 |                 <li><a href="#landing" class="nav-options bottom-border">Home</a></li>
 26 |                 <li><a href="#tourism" class="nav-options bottom-border">Tourism</a></li>
 27 |                 <li><a href="#food-showcase" class="nav-options bottom-border">Food</a></li>
 28 |                 <li><a href="#culture" class="nav-options bottom-border">Culture</a></li>
 29 |                 <li><a href="#signin" class="nav-options bottom-border">Sign in</a></li>
 30 |             </ul>
 31 |     </div>
 32 |     </nav>
 33 | 
 34 |     <!-- ########################## landing page #################### -->
 35 |     <section class="landing-page" id="landing">
 36 |         <div class="inner">
 37 | 
 38 |            <div class="lineup"></div>
 39 |            <div class="guru"> <h2 class="guru-heading">GURUGRAM</h2></div>
 40 |            <div class="linedown"></div>
 41 |            
 42 |            
 43 |                 <p class="welcome">Welcome to the<br/>CYEBR city<br/>of India</p> 
 44 |                 <a href="https://en.wikipedia.org/wiki/Gurgaon" class="button
 45 |                 primary"target="_blank">EXPLORE</a>
 46 |                 <div class="btn-box">
 47 |                   <a href="#tourism" class="more scrolly" >Learn More</a>
 48 |                 </div> 
 49 |                 <a href="#tourism" class=" arrow-icon"> <i class="fas fa-arrow-down"></i></a>
 50 |            
 51 |           
 52 |         </div>     
 53 |     </section>
 54 | 
 55 | 
 56 | 
 57 | 
 58 |     <!-- #################### TOURISM SECTION ########### -->
 59 |     <section id="tourism">
 60 |         <div class="tour1-box tour1">
 61 |             <div class="main-heading">
 62 |                 <h1 class="show-heading">## TOURISM ##</h1>
 63 |                 <h2 class="main-heading">Explore all the wonders of Gurugram</h2>
 64 |                 <h3 class="fingertip">Visit all the best places at your fingertips</h3>
 65 |                 <p class="click">Click the button below to explore </p>
 66 |                 <a href="#section1" class="button primary">EXPLORE</a>
 67 |             </div>
 68 |         </div>
 69 | 
 70 |         <!-- ##################### tourissm section #################### -->
 71 |         <section id="section1" class="wrapper alt style2">
 72 |             <!-- ############## Kingdom of dream ######### -->
 73 |             <section class="spotlight spot1">
 74 |                 <div class="image image1">
 75 |                     <img src="./images/kingdom.png" alt="" class="kod com-img" >
 76 |                 </div>
 77 |                 <div class="content1 content">
 78 |                     <h2 class="king-heading specify-head">Kingdom of dream</h2>
 79 |                     <p class="kingdom specify-para">The Kingdom of Dreams, also known as KOD <br> sits majestically in Gurugram  (Previously Gurgaon) and is India's first live entertainment, leisure and theatre destination.</p>
 80 |                     <a href="https://en.wikipedia.org/wiki/Kingdom_of_Dreams" class="button2" target="_blank">EXPLORE</a>
 81 |                 </div>
 82 |              </section>
 83 |              
 84 |              <!-- ################## aaravli hills ############ -->
 85 |             <section class="spotlight spot2">
 86 |                 <div class="content2 content">
 87 |                     <h2 class="king-heading specify-head">aravli  hills</h2>
 88 |                     <p class="kingdom specify-para">The Aravalli Range is a mountain range in Northern-Western India, running approximately 670 km in a south-west direction, starting near Delhi, passing through southern Haryana.</p>
 89 |                     <a href="https://en.wikipedia.org/wiki/Aravalli_Range" class="button2" target="_blank">EXPLORE</a>
 90 |                 </div>
 91 |                 <div class="image image2">
 92 |                     <img src="./images/aaravli.png" alt="" class="aaravli com-img" >
 93 |                 </div>
 94 |              </section>
 95 | 
 96 |             <!-- ################## Ambiance mall ############### -->
 97 |             <section class="spotlight spot3">
 98 |                 <div class="image image3">
 99 |                     <img src="./images/ambia.png" alt="" class="ambia com-img" >
100 |                 </div>
101 |                 <div class="content3 content">
102 |                     <h2 class="king-heading specify-head">The ambiance mall</h2>
103 |                     <p class="kingdom specify-para">It is a shopping mall in Gurgaon, Haryana, India. It contains a built-up area of 21 lakhs square feet and a retail area of 18 lakhs square feet. Most floors have a shopping area of 860 meters.</p>
104 |                     <a href="https://www.ambiencemalls.com/" class="button2" target="_blank">EXPLORE</a>
105 |                 </div>
106 |              </section>
107 |         </section> 
108 |     
109 |              <!-- #################### Damdama lake ############### -->
110 |             <section class="spotlight spot4 ">
111 |                <div class="content4 content">
112 |                     <h2 class="king-heading specify-head">Damdama lake</h2>
113 |                     <p class="kingdom specify-para">Damdama reservoir in Gurugram district in the Indian state of Haryana. Damdama Lake is a small lake in Haryana and was formed when a stone and earthen dam constructed by the British was commissioned for rain </p>
114 |                     <a href="https://www.holidify.com/places/gurgaon/damdama-lake-sightseeing-1912.html" class="button2" target="_blank">EXPLORE</a>
115 |                 </div>
116 |                 <div class="image image4">
117 |                     <img src="./images/damdma.png" alt="" class="damd com-img" >
118 |                 </div>
119 |              </section>
120 | 
121 |              <!-- ########################### Museum ######################33 -->
122 |             <section class="spotlight spot5">
123 |                 <div class="image image5">
124 |                     <img src="./images/musemu.png" alt="" class="museum com-img" >
125 |                 </div>
126 |                <div class="content5 content">
127 |                     <h2 class="king-heading specify-head">heritage transport museum</h2>
128 |                     <p class="kingdom specify-para">It is India's major museum dealing with the history of human transportation. It is located at Tauru in the Gurgaon, Haryana.It became India's largest private museum in 2013</p>
129 |                     <a href="https://www.tripadvisor.in/Attraction_Review-g6495768-d6377704-Reviews-Heritage_Transport_Museum-Taoru_Nuh_District_Haryana.html" class="button2" target="_blank">EXPLORE</a>
130 |                 </div>
131 |                
132 |              </section>
133 |         </section>
134 | 
135 |         <!-- ########################## FOOD PAGE ####################3 -->
136 |         <section id="food-showcase">
137 |             <div class="tour1-box tour2">
138 |                 <div class="main-heading">
139 |                     <h1 class="show-heading">## Food ##</h1>
140 |                     <h2 class="main-heading main">Explore the traditonal food of Gurugram Haryana</h2>
141 |                     <h3 class="fingertip"> Eat all the best items at your door-steps</h3>
142 |                     <p class="click">Click the button below to explore </p>
143 |                     <a href="#food" class="button primary food-btn">EXPLORE</a>
144 |                 </div>
145 |             </div>
146 | 
147 |             <!-- ############ section starts ########### -->
148 |             <section id="food">
149 |                 <div class="card-wrapper card1-3-wrapper">
150 |     
151 |                     <div class="card card1">
152 |                         <div class="card-img c1-img"></div>
153 |                         <div class="card-txt">
154 |                             <span class="name">Dahi Vada</span>
155 |                             <p>Dahi Vada are a popular street food from North India. “Dahi” means yogurt and “Vada” means deep fried fritters or dumplings</p>
156 |                         </div>
157 |                         <div class="card-btn">
158 |                             <a href="https://www.vegrecipesofindia.com/dahi-vada-recipe/" class="btn-c1 exp-btn" target="_blank">EXPLORE</a>
159 |                         </div>
160 |                     </div>
161 |               
162 |          
163 |                  
164 |                      <div class="card card2">
165 |                          <div class="card-img c2-img"></div>
166 |                          <div class="card-txt">
167 |                              <span class="name">Boora Roti</span>
168 |                              <p> Boora is normally very fine, white and sweet powder,mixed with ghee and is served with roti,</p>
169 |                          </div>
170 |                          <div class="card-btn">
171 |                              <a href="https://cookpad.com/in-hi/recipes/14851613-%E0%A4%AC%E0%A4%B0-%E0%A4%98-%E0%A4%B0%E0%A4%9F-bura-ghee-roti-recipe-in-hindi" class="btn-c2 exp-btn" target="_blank">EXPLORE</a>
172 |                          </div>
173 |                      </div>
174 |     
175 |     
176 |                      <div class="card card3">
177 |                          <div class="card-img c3-img"></div>
178 |                          <div class="card-txt">
179 |                              <span class="name">Kadhe Pakoda</span>
180 |                              <p>Kadhi is the gravy made from sour yoghurt and is thickened using gram flour. Pakoras are added to the gravy, which makes the kadhi so special</p>
181 |                          </div>
182 |                          <div class="card-btn">
183 |                              <a href="https://en.wikipedia.org/wiki/Kadhi#:~:text=Kadhi%20or%20karhi%20is%20a,with%20cooked%20rice%20or%20roti." class="btn-c3 exp-btn" target="_blank">EXPLORE</a>
184 |                          </div>
185 |                      </div>
186 |          
187 |                 </div>
188 | 
189 |                 <div class="card-wrapper card4-6-wrapper">
190 |     
191 |                     <div class="card card4">
192 |                         <div class="card-img c4-img"></div>
193 |                         <div class="card-txt">
194 |                             <span class="name">Mal-Pua</span>
195 |                             <p>Malpua is an Indian version of pancakes. They are fluffy and are served hot. Malpua is made and garnished in ghee. In some places, malpua is served with rabri.</p>
196 |                         </div>
197 |                         <div class="card-btn">
198 |                             <a href="https://en.wikipedia.org/wiki/Malpua" class="btn-c4 exp-btn" target="_blank">EXPLORE</a>
199 |                         </div>
200 |                     </div>
201 |               
202 |          
203 |                  
204 |                      <div class="card card5">
205 |                          <div class="card-img c5-img"></div>
206 |                          <div class="card-txt">
207 |                              <span class="name">mixed Dal</span>
208 |                              <p>Mixed Dal is good for satisfying both - your health and taste buds. It is a protein-rich recipe in which various dals are mixed with spices and are cooked in ghee. </p>
209 |                          </div>
210 |                          <div class="card-btn">
211 |                              <a href="https://hebbarskitchen.com/mix-dal-recipe-mix-dal-fry-recipe/#:~:text=firstly%2C%20in%20a%20cooker%20heat,till%20dal%20get%20cooked%20well." class="btn-c5 exp-btn" target="_blank">EXPLORE</a>
212 |                          </div>
213 |                      </div>
214 |     
215 |     
216 |                      <div class="card card6">
217 |                          <div class="card-img c6-img"></div>
218 |                          <div class="card-txt">
219 |                              <span class="name">Khichdi</span>
220 |                              <p>Haryana Khichri so popular is that instead of rice, Bajara is used. For preparing, bajara is soaked overnight. Then Moong daal and bajara are washed together and cooked in a pressure cooker.</p>
221 |                          </div>
222 |                          <div class="card-btn">
223 |                              <a href="https://www.indianhealthyrecipes.com/dal-khichdi-recipe/" class="btn-c6 exp-btn" target="_blank">EXPLORE</a>
224 |                          </div>
225 |                      </div>
226 |          
227 |                 </div>
228 | 
229 | 
230 |                 <div class="card-wrapper card7-9-wrapper">
231 |     
232 |                     <div class="card card7">
233 |                         <div class="card-img c7-img"></div>
234 |                         <div class="card-txt">
235 |                             <span class="name">Makkhan</span>
236 |                             <p>Butter is a yellowish substance made from cream which you spread on bread or use in cooking.</p>
237 |                         </div>
238 |                         <div class="card-btn">
239 |                             <a href="https://www.ruchiskitchen.com/homemade-white-butter-or-makhan/" class="btn-c7 exp-btn" target="_blank">EXPLORE</a>
240 |                         </div>
241 |                     </div>
242 |               
243 |          
244 |                  
245 |                      <div class="card card8">
246 |                          <div class="card-img c8-img"></div>
247 |                          <div class="card-txt">
248 |                              <span class="name">Churma</span>
249 |                              <p>Churma wahi wala is a popular Haryanvi.It is coarsely ground wheat crushed and cooked with ghee and sugar. In Haryana, churma is made by mashing up roti in ghee and jaggery.</p>
250 |                          </div>
251 |                          <div class="card-btn">
252 |                              <a href="https://recipes.timesofindia.com/recipes/churma/rs61603247.cms" class="btn-c8 exp-btn" target="_blank">EXPLORE</a>
253 |                          </div>
254 |                      </div>
255 |     
256 |     
257 |                      <div class="card card9">
258 |                          <div class="card-img c9-img"></div>
259 |                          <div class="card-txt">
260 |                              <span class="name">Bathua Raita</span>
261 |                              <p>Bathua Raita is a yogurt recipe that is very refreshing and gives added benefits to health. Bathua or chenopodium leaves are antioxidants and are rich in many vitamins. </p>
262 |                          </div>
263 |                          <div class="card-btn">
264 |                              <a href="https://www.archanaskitchen.com/bathua-raita-recipe#:~:text=Bathua%20Raita%20Recipe%20is%20a%20raita%20made%20out%20of%20a,bathua%20is%20added%20to%20it." class="btn-c9 exp-btn" target="_blank">EXPLORE</a>
265 |                          </div>
266 |                      </div>
267 |          
268 |                 </div>
269 |             </section>
270 |         </section>
271 | 
272 |         <section id="culture">
273 |             <div class="tour1-box tour3">
274 |                 <div class="main-heading">
275 |                     <h1 class="show-heading">## Culture ##</h1>
276 |                     <h2 class="main-heading">Haryana is one with the traditional culture in the country</h2>
277 |                     <p class="click">Haryana is one of the unique states in the country having developed culture and developing economy.</p>
278 |                     <p class="click">Click the button below to explore </p>
279 |                     <a href="#Culture-showcase  " class="button primary">EXPLORE</a>
280 |                 </div>
281 |             </div>
282 | 
283 |             <!-- ############ Slide show ########## -->
284 |             <div id="Culture-showcase" class="cultureback"  >
285 |                 <div class="culture-images"></div>
286 |             </div>
287 |         </section>
288 | 
289 | 
290 |         <!-- ####################### Sign in page ######################3 -->
291 |         <section id="signin">
292 |             <div class="why-sign-up">
293 |                 <h2>Get in touch with us !</h2>
294 |                 <h3>sign-In to get all the information and news about Gurugram</h3>
295 |                 <p>Read latest news in under 60 words related to  Gurugram, in English and Hindi</p>
296 |             </div>
297 | 
298 |            <div class="form-wrapper">
299 |                 <div class="form-section">
300 | 
301 |                     <form action="./thanx.html" method="GET" class="form" target="_blank">
302 |                        
303 |                        <div class="form-details">
304 |                             <div class="form-group">
305 |                                 <label for="username">Username</label>
306 |                                 <input type="text" name="" id="Username" placeholder="Name" required >
307 |                             </div>
308 |                             <div class="form-group">
309 |                                 <label for="E-mail">E-mail</label>
310 |                                 <input type="text" name="" id="E-mail" placeholder="E-mail" required>
311 |                             </div>
312 |                         </div>
313 |                             
314 |                         <div class="form-group">
315 |                             <textarea name="text" id="message" placeholder="Message"></textarea>
316 |                         </div>
317 |                      
318 |                         <button class="form-btn" >Submit</button> 
319 |                 </form>
320 |                
321 | 
322 |                 </div>
323 | 
324 |                 <div class="add-details">
325 |                    <div class="wrapper1">
326 |                     <div class="email">
327 |                         <h3 class="mail-head">Gmail</h3>
328 |                         <p class="mail-para">tanujkalonia2002@gmail.com</p>
329 |                     </div>
330 | 
331 |                     <div class="phone">
332 |                         <h3 class="phone-head">Phone</h3>
333 |                         <p class="phone-para">91-9599959651
334 |                         </p>
335 |                     </div>   
336 |                    </div>
337 | 
338 |                    <div class=" wrapper2">
339 |                     <div class="address">
340 |                         <h3 class="address-head">Location</h3>
341 |                         <P class="address-para">Gurugram, Haryana <br>
342 |                             India
343 |                     </div>
344 |                     <div class="mailing-link">
345 |                         <h3 class="mail-head">Social</h3>
346 |                         <p class="mail-para">
347 |                             <a href="https://www.instagram.com/tanuj_kalonia/">Instagram</a>
348 |                             <a href="https://www.facebook.com/dastan.popww.5/">Facebook</a>
349 |                             <a href="https://www.linkedin.com/in/tanuj-kalonia-070628216/">Linked In</a>
350 |                         </p>
351 |                     </div>
352 |                    </div>
353 | 
354 |                 </div>
355 |            </div>
356 |         </section>
357 |        
358 |         <!-- ################################3 smooth scroling ###################### -->
359 |         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
360 |         <script>
361 |         $(document).ready(function(){
362 |           // Add smooth scrolling to all links
363 |           $("a").on('click', function(event) {
364 |         
365 |             // Make sure this.hash has a value before overriding default behavior
366 |             if (this.hash !== "") {
367 |               // Prevent default anchor click behavior
368 |               event.preventDefault();
369 |         
370 |               // Store hash
371 |               var hash = this.hash;
372 |         
373 |               // Using jQuery's animate() method to add smooth page scroll
374 |               // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
375 |               $('html, body').animate({
376 |                 scrollTop: $(hash).offset().top
377 |               }, 800, function(){
378 |         
379 |                 // Add hash (#) to URL when done scrolling (default click behavior)
380 |                 window.location.hash = hash;
381 |               });
382 |             } // End if
383 |           });
384 |         });
385 |         </script>
386 |           
387 | </body>
388 | </html>


--------------------------------------------------------------------------------
/city project/image/download (1).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (1).jfif


--------------------------------------------------------------------------------
/city project/image/download (10).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (10).jfif


--------------------------------------------------------------------------------
/city project/image/download (11).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (11).jfif


--------------------------------------------------------------------------------
/city project/image/download (12).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (12).jfif


--------------------------------------------------------------------------------
/city project/image/download (13).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (13).jfif


--------------------------------------------------------------------------------
/city project/image/download (14).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (14).jfif


--------------------------------------------------------------------------------
/city project/image/download (15).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (15).jfif


--------------------------------------------------------------------------------
/city project/image/download (16).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (16).jfif


--------------------------------------------------------------------------------
/city project/image/download (17).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (17).jfif


--------------------------------------------------------------------------------
/city project/image/download (18).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (18).jfif


--------------------------------------------------------------------------------
/city project/image/download (19).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (19).jfif


--------------------------------------------------------------------------------
/city project/image/download (2).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (2).jfif


--------------------------------------------------------------------------------
/city project/image/download (3).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (3).jfif


--------------------------------------------------------------------------------
/city project/image/download (4).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (4).jfif


--------------------------------------------------------------------------------
/city project/image/download (5).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (5).jfif


--------------------------------------------------------------------------------
/city project/image/download (6).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (6).jfif


--------------------------------------------------------------------------------
/city project/image/download (7).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (7).jfif


--------------------------------------------------------------------------------
/city project/image/download (8).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (8).jfif


--------------------------------------------------------------------------------
/city project/image/download (9).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download (9).jfif


--------------------------------------------------------------------------------
/city project/image/download.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/download.jfif


--------------------------------------------------------------------------------
/city project/image/header-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/header-image.jpg


--------------------------------------------------------------------------------
/city project/image/images (1).jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/images (1).jfif


--------------------------------------------------------------------------------
/city project/image/images.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/images.jfif


--------------------------------------------------------------------------------
/city project/image/shutterstock_481801648.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/city project/image/shutterstock_481801648.webp


--------------------------------------------------------------------------------
/city project/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>alwar</title>
  8 |     <link rel="stylesheet" href="./style.css">
  9 | </head>
 10 | <body>
 11 | <header class="header">
 12 |                
 13 | <!-- nav bar -->
 14 | <nav class="navbar">
 15 |    <div class="container">
 16 |        <h1 class="lg-heading logo ">alwar</h1>
 17 |        <ul class="nav-items text-white">
 18 |        <li class="nav-item"> <a href="#home" target="_blank">HOME</a></li>
 19 |        <li class="nav-item"> <a href="#home" target="_blank">tourism</a>
 20 |        <div class="nav-subitems">
 21 |        <ul>
 22 |        <li><a href="https://www.google.com/search?q=bala+quila&sxsrf=AOaemvKzbVnUTW60_Ux2rRCLrvobDAz-6Q%3A1630509851581&ei=G5svYansIpndrQHClr-4Bw&oq=bala+quila&gs_lcp=Cgdnd3Mtd2l6EAEYADIFCAAQgAQyBQgAEIAEMgsILhCABBDHARCvATIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQ6BwgAEEcQsAM6BAgjECc6BQgAEJECOggILhCABBCxAzoFCC4QgAQ6BQgAELEDOgUILhCxAzoICAAQgAQQsQNKBQg8EgExSgQIQRgAUKOKA1jntgNgq8gDaAFwAngAgAHaBogByCmSAQsyLTEuMy4xLjMuMpgBAKABAcgBCMABAQ&sclient=gws-wiz">balakila</a></li>
 23 |       <li><a href="">moosi maharni ki chhatri</a></li>
 24 |       <li><a href="https://www.tripadvisor.in/Attraction_Review-g679018-d3913268-Reviews-Naldeshwar_Shrine-Alwar_Alwar_District_Rajasthan.html">nandeshwar sharine</a></li>
 25 |       <li><a href="https://www.navodaya.gov.in/nvs/nvs-school/Alwar/en/about_us/About-JNV/">navodaya school</a></li>
 26 |       <li><a href="https://steemit.com/steemitworldmap/@travelporn/bahangarh-asia-s-haunted-fort">bhangarh</a></li>
 27 |        </ul>
 28 |       </div></li>
 29 |       <li class="nav-item"><a href="#foods" target="_blank">food </a>
 30 |       <div class="nav-subitems">
 31 |         <ul>
 32 |           <li><a href="#foods">Makkhan</a></li>
 33 |           <li><a href="#foods">churma</a></li> 
 34 |           <li><a href="#foods">Bathua Raita</a></li>
 35 |           <li><a href="#foods">dahi vada</a>dahi vada</li>
 36 |           <li><a href="#foods">Boora roti</a></li>
 37 |           <li><a href="#foods">kadhi pakode</a></li>
 38 |           <li><a href="#foods">Mal-Pua</a></li>
 39 |           <li><a href="#foods">mix-dal</a></li>
 40 |           <li><a href="#foods">Khichdi</a></li>
 41 |         </ul>
 42 |       </div></li>
 43 |       <li class="nav-item"><a href="#cultures" >culture US</a></li>
 44 |       <li class="nav-item"><a href="#sign" >sign in</a></li>
 45 |        </ul>
 46 |       </div>
 47 |      </nav>
 48 | 
 49 | 
 50 |      <!-- landing page -->
 51 |      <div class="header-content  ">
 52 |          <div class="lineup"></div>
 53 |          <h2 class="lg-heading text-white alwar-heading">alwar</h2>
 54 |          <div class="linedown"></div><br>
 55 | 
 56 | 
 57 |          <p class="text-white welcome" >The singh davar <br> of rajasthan</p><br><br><br>
 58 |         <a href="https://www.google.com/search?q=alwar&oq=alwar&aqs=chrome..69i57j69i61j69i60.2936j0j7&sourceid=chrome&ie=UTF-8"  class="btn-primary primary">explore</a>
 59 |         <div class="btn-box">
 60 |           <a href="#tourism" class="more scrolly" >Learn More</a>
 61 |         </div> 
 62 |         <a href="#tourism" class=" arrow-icon"> <i class="fas fa-arrow-down"></i></a>
 63 |      </div>
 64 |  </header>
 65 | 
 66 | 
 67 | 
 68 | 
 69 | <!-- ################ history############### -->
 70 |  <section><div class="history">
 71 |      <div class="container"><br><br><br><br><br><br>
 72 |      <h1 class="lg-heading">## history ##</h1>
 73 |      <<br><br><h2 class="mg-heading">Ancient history</h2>
 74 |         <p> The ancient name of Alwar is Salva or Salwa (tribe).[2][3]Alwar was a part of the Matsya Kingdom, one of the 16 ancient Mahājanapadas.[4] In late Vedic texts (such as the Jaiminiya Brahmana), the Salva or Salvi tribe is described as a non-Vedic tribe that occupied Kurukshetra and conquered the Kuru Kingdom[5]</p>
 75 |         
 76 |         <br><br><br><h2 class="mg-heading">The Salvas</h2>
 77 |        <p> The Salvas settled along the Yamuna river and the Alwar province of Rajasthan after attacking the Kuru kingdom, and they later accepted Vedic culture by the end of the Vedic era as they converged with the remaining Kurus and the Surasena mahajanapada, near Matsya kingdom.[6]</p>
 78 |         
 79 |         <br><br><br><h2 class="mg-heading">Medieval history</h2>
 80 |         
 81 |        <p> The Darbar of Raja Bakhtawar Singh of Alwar in 1810
 82 |         From time to time, a different Rajput sub-clan came to rule Alwar. Examples include the Nikumbh, the Khanzada Rajputs, the Badgujar, and finally the Naruka (Kachwaha) Rajputs who took the control over this area. The Maratha Empire also ruled this region for a short period. A Rajput, Partap Singh, took the Alwar Fort from the Jat Raja of Bharatpur and laid down the foundation for modern day Alwar.
 83 |         
 84 |         Hemchandra Vikramaditya (Hemu), born in Machari, Rajgarh, a village in Alwar, was a Hindu emperor of North India during the 16th century. This was a period when the Mughals and Afghans were vying for power in the region. Hemu captured Delhi on 7 October, 1556 after defeating the Mughal forces in the Battle of Delhi in the Tughlaqabad area in Delhi, and became the de facto emperor. He won twenty-two battles in succession and became the last Hindu emperor of Delhi. In 1556, after his defeat in the Second Battle of Panipat, he was executed and Mughal regime was restored in North India.</p>
 85 |         
 86 |         <br><br><br><h2 class="mg-heading">Alwar State</h2> 
 87 |         
 88 |        <p> Neemrana
 89 |         Alwar State, a princely state established in 1770, was established by a Kachwaha Rajput named Pratap Singh who was earlier a jagirdar of "Dhai Gaon" (two-and-a-half villages) near Machari. His successor "Bakhtawar Singh Kachwaha" was defeated after launching an armed incursion into neighbouring Jaipur State (ruled by their Kachwaha seniors, erstwhile overlords of his predecessor) and being forced to accept the consequent treaty mediated by East India Company prohibiting him from political relations with other states without the consent of the colonial British.[7] According to the "Gazetteer of Ulwar" published by the British raj, Alwar State was subdivided into four regions:</p>
 90 |         
 91 |         <br><br><br><h2 class="mg-heading">Rath region:</h2> <p> current Behror and Neemrana, was ruled by Lah Chauhan rajput zamindar who had descended from Prithviraj Chauhan.[8] Sahesh Mal was a son of Raja Sangat Singh Chauhan. Sangat was the great grandson of Chahir Deo Chauhan, brother of famous king Prithviraj Chauhan.[9] In accordance with the pledge by the raja Sangat Singh Chauhan to his younger queen for marrying her in his old age, her two sons from him were bestowed the Rath area and its headquarter of Mandhan near Neemrana.[8] King Sangat Singh Chauhan's 19 sons from the older queen set out to seek their fortunes.[8] Of the 19 brothers, Harsh Dev Chauhan and Sahesh Mal Chauhan arrived in the Gurgaon district.[8] Lah Chauhan, the ruler of Rath, was a son of raja Sangat Singh Chauhan by the younger Rani whose two sons became inheritors of Raja Sangat Singh's territory of Rath with its headquarter at Mandhan when other 19 sons from the other wives were required to quit the kingdom as per the promise of Raja Sangat.[8][10][11][12]
 92 |         
 93 |         New residential Buildings in Neemrana Alwar
 94 |         Wai region: current Bansur and Thana Ghazi, was ruled by Shekhawat rajput zamindars.
 95 |         Narukhand region: current Rajgarh and Laxmangarh, was ruled by Naruka sub-branch of Kachwaha rajputs who were from the same branch as the ruling kings of the Alwar State
 96 |         Mewat region: current Palwal and Nuh districts, had the highest population of the Meo Muslims.
 97 |         Post-independence
 98 |         Alwar acceded to the dominion of India following the independence of India in 1947. On 18 March 1948, the state merged with three neighbouring princely states (Bharatpur, Dholpur and Karauli) to form the Matsya Union. On 15 May 1949, it was united with neighbouring princely states[which?] and the territory of Ajmer to form the present-day Indian state of Rajasthan. Alwar was designated as part of the National Capital Region, resulting in additional development projects including rapid-rail to Delhi and drinking water improvements.[13] The military cantonment of Itarana lies on the outskirts of Alwar.</P>
 99 |  </div></div>
100 | 
101 | 
102 | 
103 | 
104 |  <!-- ############ tourism ############ -->
105 |   <div class="tourism container"><br><br><br><br><br><br>
106 |      <div class="tourism-heading">
107 |     <h1 class="lg-heading">## tourism ##</h1><br><br><br>
108 |     <h2 class="mg-heading">Explore all the wonders of alwar</h2>
109 |     <h2>Visit all the best places at your fingertips</h2>
110 |     <h2>Click the button below to explore</h2><br>
111 |     <a href="#tour" class="btn-secondary">Explore</a><br><br></div>
112 |     <div class="row row1 " id="tour"> 
113 |         <div class="img-box">
114 |             <img src="./image/download (1).jfif" alt="" class="image">
115 |         </div>
116 |      <div class="text-box"><h2 class="mg-heading">balakila</h2>
117 |         
118 |         <p>Bala Quila, also known as the Alwar Fort, towers majestically over the hilltop in the city of Alwar. The fort was built by Hasan Khan Mewati in the year 1550 AD. The monument is famous for its masonry works and grandiose structural designs. There are six distinguished gates, namely Jai Pol, Laxman Pol, Surat Pol, Chand Pol, Andheri Gate and Krishna Gate, leading to the fort. </p>
119 |        <a href="" class="btn-secondary">Explore</a> 
120 |      </div>
121 |     </div>  
122 |    <div class="row row2">
123 |     <div class="img-box">
124 |         <img src="./image/download (2).jfif" alt="" class="image">
125 |     </div>
126 |        <div class="text-box">
127 |        <h2 class="mg-heading">Moosi Maharani Ki Chhatri </h2>
128 |        <p>Moosi Maharani Ki Chhatri is a striking cenotaph of historical significance. This double-storeyed structure was built by Vinay Singh in honour of Maharaja Bakhtawar Singh and his Queen Rani Moosi in the year 1815 AD. The architectural grandeur gives the monument a spectacular view. The elephant structural design based on pillars of red sandstone is an attention grabbing piece in the monument.</p>
129 |        <a href="" class="btn-secondary">Explore</a> 
130 |     </div>
131 |    </div>
132 |    <div class="row row1"> 
133 |     <div class="img-box">
134 |         <img src="./image/download.jfif" alt="" class="image">
135 |     </div>
136 |     <div class="text-box"><h2 class="mg-heading"> nandeshwar sharine</h2>
137 |        <p>The linga or, lingum symbolizes eternal energy of Lord Shiva. Since ages Hindu temples have witnessed the worship of Lord Shiva in the form of such lingas. The linga is often seen with yoni which symbolizes the Shakti of the womb. Worship of the linga dates back to the Puranic ages.
138 | 
139 |         In the 18th century, a temple was constructed to shelter a naturally formed Linga in a cave in the hills. It was later became the renowned Naldeshwar shrine.</p>
140 |         <a href="" class="btn-secondary">Explore</a> 
141 |     </div>
142 |    </div>  
143 |   <div class="row row2">
144 |     <div class="img-box">
145 |         <img src="./image/download (4).jfif" alt="" class="image">
146 |     </div>
147 |       <div class="text-box">
148 |       <h2 class="mg-heading">navodaya vidhalya </h2>
149 |       <p>The school campus covers around 27.4 acres of forested hillside with its buildings connected by steep and windy paths and offering spectacular views at every turn. These buildings include the beautiful old Quad, the modern state of art infrastructure and the newly-refurbished student hostels and staff houses.   The school is located on the lap of Aravali hills.</p>
150 |       <a href="" class="btn-secondary">Explore</a> 
151 |    </div>
152 |   </div><div class="row row1"> 
153 |     <div class="img-box">
154 |         <img src="./image/download (3).jfif" alt="" class="image">
155 |     </div>
156 |     <div class="text-box"><h2 class="mg-heading">bhangarh</h2>
157 |        <p>Hey there peeps . Today I want to share the story of Bahangarh fort which is situated in Rajasthan , India . It comes number one in the list of Asia's haunted places .
158 |         It is haunted by the curse of a tantrik(black magician) . He fell in love with the princess of bahangarh which lead to the death of the tantrik . He then cursed the village and till today it is considered haunted and entry is prohibited after 7 P.M . </p>
159 |         <a href="" class="btn-secondary">Explore</a>    
160 |     </div>
161 |    </div>  
162 |   </div>
163 |   <div class="food container"> <br><br><br><br><br><br>
164 |      <div class="food-heading">
165 |     <h1 class="lg-heading">## food ##</h1><br><br><br>
166 |       <h2 class="mg-heading">Explore the traditonal food of alwar rajasthan</h2><br><br>
167 |       <h2 class="mg-heading">Eat all the best items at your door-steps</h2><br>
168 |       <h2>Click the button below to explore</h3><br>
169 |       <a href="#foods" class="btn-secondary">Explore</a> <br><br>
170 |     </div>
171 |     <div class="container">
172 |       <div class="box-wraper" id="foods">
173 |         <div class="box box1">
174 |           <img src="./image/download (11).jfif" alt="">
175 |           <h2 class="mg-heading"> Makkhan</h2>
176 |           <p> Butter is a yellowish substance made from cream which you spread on bread or use in cooking.</p>
177 |           <a href="" class="btn-secondary">Explore</a>
178 |         </div>
179 |         <div class="box box2">
180 |           <img src="./image/images.jfif" alt="">
181 |           <h2 class="mg-heading">  Churma</h2>
182 |           <p> Churma wahi wala is a popular Haryanvi.It is coarsely ground wheat crushed and cooked with ghee and sugar. In Haryana, churma is made by mashing up roti in ghee and jaggery. </p>
183 |           <a href="" class="btn-secondary">Explore</a>
184 |         </div>
185 |             <div class="box box3">
186 |           <img src="./image/download (12).jfif" alt="">
187 |           <h2 class="mg-heading"> Bathua Raita</h2>
188 |           <p> Bathua Raita is a yogurt recipe that is very refreshing and gives added benefits to health. Bathua or chenopodium leaves are antioxidants and are rich in many vitamins.</p>
189 |           <a href="" class="btn-secondary">Explore</a></div>
190 |       <div class="box box4">
191 |         <img src="./image/download (5).jfif" alt="">
192 |           <h2 class="mg-heading">Dahi Vada</h2>
193 |           <p> Dahi Vada are a popular street food from North India. “Dahi” means yogurt and “Vada” means deep fried fritters or dumplings</p>
194 |           <a href="" class="btn-secondary">Explore</a>
195 |       </div>
196 |       <div class="box box5">
197 |         <img src="./image/download (6).jfif" alt="">
198 |         <h2 class="mg-heading">Boora Roti</h2>
199 |         <p>   Boora is normally very fine, white and sweet powder,mixed with ghee and is served with roti,</p>
200 |         <a href="" class="btn-secondary">Explore</a>
201 |       </div>
202 |       <div class="box box6">
203 |         <img src="./image/download (7).jfif" alt="">
204 |         <h2 class="mg-heading">Kadhi Pakoda</h2>
205 |         <p>   Kadhi is the gravy made from sour yoghurt and is thickened using gram flour. Pakoras are added to the gravy, which makes the kadhi so special</p>
206 |         <a href="" class="btn-secondary">Explore</a>
207 |       </div> 
208 |       <div class="box box7"> 
209 |         <img src="./image/download (8).jfif" alt="">
210 |           <h2 class="mg-heading">Mal-Pua</h2>
211 |         <p>  Malpua is an Indian version of pancakes. They are fluffy and are served hot. Malpua is made and garnished in ghee. In some places, malpua is served with rabri.</p>
212 |         <a href="" class="btn-secondary">Explore</a></div>
213 |       <div class="box box8">
214 |         <img src="./image/download (9).jfif" alt="">
215 |          <h2 class="mg-heading"> mixed Dal</h2>
216 |         <p> Mixed Dal is good for satisfying both - your health and taste buds. It is a protein-rich recipe in which various dals are mixed with spices and are cooked in ghee.</p>
217 |         <a href="" class="btn-secondary">Explore</a></div>
218 |       <div class="box box9">
219 |         <img src="./image/download (10).jfif" alt="">
220 |         <h2 class="mg-heading">Khichdi</h2>
221 |         <p> rajasthan Khichri so popular is that instead of rice, Bajara is used. For preparing, bajara is soaked overnight. Then Moong daal and bajara are washed together and cooked in a pressure cooker.
222 |         </p>
223 |         <a href="" class="btn-secondary">Explore</a></div> 
224 |   </div></div> </div>
225 | </section>
226 | 
227 | <!-- ########### culture ############# -->
228 | <section id="culture">
229 |   <div class="tour1-box tour3">
230 |       <div class="main-heading">
231 |           <h1 class="show-heading">## Culture ##</h1>
232 |           <h2 class="main-heading">Haryana is one with the traditional culture in the country</h2>
233 |           <p class="click">Haryana is one of the unique states in the country having developed culture and developing economy.</p>
234 |           <p class="click">Click the button below to explore </p>
235 |           <a href="#Culture-showcase  " class="button primary">EXPLORE</a>
236 |       </div>
237 |   </div>
238 | 
239 |   <!-- ############ Slide show ########## -->
240 |   <div id="Culture-showcase" class="cultureback"  >
241 |       <div class="culture-images"></div>
242 |   </div>
243 | 
244 | 
245 | 
246 | 
247 | <!-- ########### sign in ############# -->
248 | <footer> <section id="signin">
249 |   <div class="why-sign-up">
250 |       <h2 class="text-white">Get in touch with us !</h2>
251 |       <h3>sign-In to get all the information and news about Gurugram</h3>
252 |       <p>Read latest news in under 60 words related to  Gurugram, in English and Hindi</p>
253 |   </div>
254 | 
255 |  <div class="form-wrapper">
256 |       <div class="form-section">
257 | 
258 |           <form action="./thanx.html" method="GET" class="form" target="_blank">
259 |              
260 |              <div class="form-details">
261 |                   <div class="form-group">
262 |                       <label for="username" class="text-white">Username</label><tr></tr>
263 |                       <input type="text" name="" id="Username" placeholder="Name" required > <br>
264 |                   </div>
265 |                   <div class="form-group">
266 |                       <label for="E-mail" class="text-white">E-mail</label>
267 |                       <input type="text" name="" id="E-mail" placeholder="E-mail" required>
268 |                   </div>
269 |               </div>
270 |                   
271 |               <div class="form-group">
272 |                   <textarea name="text" id="message" placeholder="Message" class="text-white"></textarea>
273 |               </div>
274 |            
275 |               <button class="form-btn" >Submit</button> 
276 |       </form>
277 |      
278 | 
279 |       </div>
280 | 
281 |       <div class="add-details">
282 |          <div class="wrapper1">
283 |           <div class="email">
284 |               <h3 class="mail-head">Gmail</h3>
285 |               <p class="mail-para">tanujkalonia2002@gmail.com</p>
286 |           </div>
287 | 
288 |           <div class="phone">
289 |               <h3 class="phone-head">Phone</h3>
290 |               <p class="phone-para">91-9599959651
291 |               </p>
292 |           </div>   
293 |          </div>
294 | 
295 |          <div class=" wrapper2">
296 |           <div class="address">
297 |               <h3 class="address-head">Location</h3>
298 |               <P class="address-para">Gurugram, Haryana <br>
299 |                   India
300 |           </div>
301 |           <div class="mailing-link">
302 |               <h3 class="mail-head">Social</h3>
303 |               <p class="mail-para">
304 |                   <a href="https://www.instagram.com/tanuj_kalonia/">Instagram</a>
305 |                   <a href="https://www.facebook.com/dastan.popww.5/">Facebook</a>
306 |                   <a href="https://www.linkedin.com/in/tanuj-kalonia-070628216/">Linked In</a>
307 |               </p>
308 |           </div>
309 |          </div>
310 | 
311 |       </div>
312 |  </div></footer>
313 | </body>
314 | </html>


--------------------------------------------------------------------------------
/city project/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     padding: 0;
  3 |     margin: 0;
  4 |     box-sizing: border-box;
  5 | 
  6 | }
  7 | html{
  8 |    font-size: 62.5%;
  9 | }
 10 | body{
 11 |     font-family: Arial, Helvetica, sans-serif;
 12 |     line-height: 1.7;
 13 |     background-color: rgba(187, 102, 168, 0.603);
 14 | }
 15 | 
 16 | /* ############# utility classes ############ */
 17 | .container{
 18 |     max-width: 1200px;
 19 |     width: 90%;
 20 |     margin: 0 auto;
 21 | }
 22 | 
 23 | .text-black{
 24 |     color: black;
 25 | 
 26 | }
 27 | .text-white{
 28 |     color: white;
 29 | }
 30 | .text-gray{
 31 |     color: gray;
 32 | }
 33 | .lg-heading{
 34 |     font-size: 3.5rem;
 35 |     font-weight: bold;
 36 |     text-transform: uppercase;
 37 |     text-align: center;
 38 | }.mg-heading{
 39 |     font-size: 2.5rem;
 40 |     font-weight: bold;
 41 |     text-transform: uppercase;
 42 | }
 43 | p{
 44 |     font-size: 1.6rem;
 45 | }
 46 | .btn-primary{
 47 |     border: 2px solid white;
 48 |     border-radius: 0.5rem;
 49 |     /* background-color: white; */
 50 |     margin-top: 2.8rem;
 51 |     padding: 0.3rem 4rem;
 52 |     text-decoration: none;
 53 |     color: white;
 54 |     text-transform: uppercase;
 55 |     font-size: 1.3rem;
 56 |     letter-spacing: 0.3rem;
 57 |     transition: all 0.5s ease-in-out;
 58 |     opacity: 0;
 59 |     animation-name: visible;
 60 |     animation-duration: 2s;
 61 |     animation-delay: 1.1s;
 62 |     animation-fill-mode: forwards;
 63 |     animation-iteration-count: 1;
 64 |   
 65 |     position: relative;
 66 |     overflow: hidden;
 67 | }
 68 | .btn-primary:hover{
 69 |     background-color: coral;
 70 | 
 71 | }
 72 | .primary::before{
 73 |     bottom: 0;
 74 |     border-radius:  50% 50% 0 0;
 75 |   }
 76 |   .primary:hover::before{
 77 |     height: 180%;
 78 |   }
 79 | .button::before{
 80 |     content: "";
 81 |     position:absolute;
 82 |     left: 0;
 83 |     width: 100%;
 84 |     height: 0%;
 85 |     background: royalblue;
 86 |     z-index: -1;
 87 |     transition: 0.5s;
 88 |     
 89 |   }
 90 | .btn-secondary{
 91 |     border: 2px solid black;
 92 |     border-radius: 40px;
 93 |     background: rgb(139, 184, 138);
 94 |     font-size: 2.5rem;
 95 |     padding: 10px;
 96 |     text-transform: capitalize;
 97 |     text-align: center;
 98 | }
 99 | .btn-secondary:hover{
100 |     background-color: coral;
101 | 
102 | }
103 | 
104 | 
105 | 
106 | 
107 | 
108 | 
109 | 
110 | 
111 | .logo{
112 |     float: left;
113 | }
114 | .header{
115 |     height: 90vh;
116 |     width: 100vw;
117 |     position: relative;
118 |     background: url('../image/shutterstock_481801648.webp'); 
119 |     background-position: center;
120 |     background-repeat: no-repeat;
121 |     background-size:  cover;
122 | }
123 | .navbar{
124 |     position: fixed;
125 |     width: 100%;
126 |     padding: 1rem;
127 |     background: black;
128 |     opacity: 0.6;
129 |     z-index: 999;
130 |     color: white;
131 |     
132 | }
133 | .navbar a:link , .navbar a:visited{
134 |     color: white;
135 | }
136 | ul li{
137 |     list-style: none;
138 | }
139 | .nav-items{
140 |     float: right;
141 | }
142 | .nav-item{
143 |     display: inline-block;
144 |     text-transform: uppercase;
145 |     padding: 1rem ;
146 | }
147 | .navbar::after{
148 |     content: '';
149 |     display: block;
150 |     clear: both;
151 | }
152 | a{
153 |     text-decoration: none;
154 |     font-size: 1.6rem;
155 | }
156 | .navbar a:hover{
157 |     background-color: rgb(121, 72, 72);
158 |     
159 | }
160 | .nav-subitems{
161 |     display: none;
162 |     background-color: thistle;
163 |     
164 | }
165 | .navbar ul li:hover .nav-subitems{
166 |     display: block;
167 |     position: absolute;
168 |   }
169 | 
170 | 
171 | .header-content{
172 |     position: absolute;
173 |     top: 50%;
174 |     left: 50%;
175 |     transform: translate(-50%,-50%);
176 |     text-align: center;
177 | 
178 | }
179 | 
180 | .lineup{
181 |     opacity: 0;
182 |     border-top: 2px solid white;
183 |     background: white;
184 |     width: 30rem;
185 |     animation-name: line-grow;
186 |     animation-duration: 1s;
187 |     animation-fill-mode: forwards;
188 |     animation-iteration-count: 1;
189 |     animation-delay: 0.5s;
190 |     
191 |   }
192 |   .alwar-heading{
193 |     opacity: 0;
194 |     animation-delay: 0.3s;
195 |     animation-duration: 1s;
196 |     animation-name: guru-head;
197 |     animation-fill-mode: forwards;
198 |     animation-iteration-count: 1;
199 |     
200 |     
201 |   }
202 |   @keyframes guru-head {
203 |     0%{
204 |       opacity: 0;
205 |     }
206 |     100%{
207 |       opacity: 1;
208 |     }
209 |   }
210 |   .linedown{
211 |     opacity: 0;
212 |     border-top: 2px solid white;
213 |     width: 30rem;
214 |     margin-top: -0.5rem;
215 |     animation-name: line-grow;
216 |     animation-duration: 1s;
217 |     animation-fill-mode: forwards;
218 |     animation-iteration-count: 1;
219 |     animation-delay: 0.5s;
220 |     
221 |   }
222 |   @keyframes line-grow{
223 |     from{
224 |       width: 0px;
225 |       opacity: 0;
226 |     }
227 |     to{
228 |       width: 300px;
229 |       opacity: 1;
230 |     }
231 |   }
232 |   
233 |   .welcome {
234 |     margin-top: 2rem;
235 |     letter-spacing: 0.3rem;
236 |     text-align: center;
237 |     font-size: 300;
238 |     line-height: 2.5rem;
239 |     font-size: 1.5rem;
240 |     text-transform: uppercase;
241 |     opacity: 0;
242 |     animation-name: visible;
243 |     animation-duration: 2s;
244 |     animation-delay: 1.1s;
245 |     animation-fill-mode: forwards;
246 |     animation-iteration-count: 1;
247 |     
248 |   }
249 |   @keyframes visible {
250 |     from{
251 |       opacity: 0;
252 |     }
253 |     to{
254 |       opacity: 1;
255 |     }
256 |   }
257 |   .more{
258 |     position: absolute;
259 |     text-decoration:none;
260 |     color: aliceblue;
261 |     bottom: 12%;
262 |     left: 50%;
263 |     transform: translate(-50%,-50%);
264 |     text-transform: uppercase;
265 |     font-size: 1.5rem;  
266 |     transition: all 0.2s ease-out;
267 |   
268 |     opacity: 0;
269 |     animation-name: slide-down;
270 |     animation-duration: 1s;
271 |     animation-delay: 2.5s;
272 |     animation-fill-mode: forwards;
273 |     animation-iteration-count: 1;
274 |     animation-timing-function: ease-in-out;
275 |   }
276 |   @keyframes slide-down {
277 |     from{
278 |       top: 100%;
279 |       opacity: 1;
280 |     }
281 |     to{
282 |       top: 150%;
283 |       opacity: 1;
284 |     }
285 |   }
286 |   .arrow-icon{
287 |     text-decoration: none;
288 |     color: aliceblue;
289 |     position: absolute;
290 |     bottom: 10%;
291 |     transition: all 0.2s ease-out;
292 |     opacity: 0;
293 |     animation-name: slide-down-arrow;
294 |     animation-duration: 1s;
295 |     animation-delay: 2.5s;
296 |     animation-fill-mode: forwards;
297 |     animation-iteration-count: 1;
298 |     animation-timing-function: ease;
299 |     
300 |   }
301 |   .arrow-icon:hover{
302 |     transform:scale(1.1);
303 |   }
304 |   
305 |   @keyframes slide-down-arrow{
306 |     from{
307 |       top: 77%;
308 |       opacity: 1;
309 |     }
310 |     to{
311 |       top: 85%;
312 |       opacity: 1;
313 |     }
314 |   }
315 | 
316 | 
317 | 
318 | 
319 | 
320 | 
321 |   /* ############ tourism ################# */
322 |   
323 | .tourism-heading {
324 |   /* background: url('./image/download\ \(18\).jfif'); */
325 |   text-align: center;
326 | }
327 | 
328 | .tourism-heading img, .food-heading img,.culture-heading img{
329 |   display: inline-block;
330 |   height: 100%;
331 |   width: 100%;
332 |   object-fit: cover;
333 | }
334 | .row{
335 |     height: 350px;
336 |     background: #fff;
337 |     box-shadow: 0px 0px 20px 0px #aaa;
338 | }
339 | .row .text-box{
340 |     background: rgb(140, 214, 192);
341 |     height: 100%;
342 |     text-align: center;
343 | }
344 | .row1 .img-box, .row2 .text-box{
345 |     float: left;
346 |     width: 50%;
347 | }
348 | .row2 .img-box, .row1 .text-box{
349 |     float: right;
350 |     width: 50%;
351 | }
352 | .row2{
353 |     margin: 10rem 0;
354 | }
355 |  .row .img-box{ 
356 |      height: 100%;
357 |     
358 |  }
359 |  .row .text-box{
360 |      padding: 3rem;
361 |  }
362 |  .row .img-box img{
363 |      display: inline-block;
364 |      width: 100%;
365 |      height: 100%;
366 |      object-fit: cover;
367 |  }
368 |  .row::after{
369 |      content: '';
370 |      display: block;
371 |      clear: both;
372 |  }
373 | 
374 | 
375 | 
376 | 
377 | 
378 | 
379 |  /* ############### food ############################ */
380 |  .food-heading{
381 |   /* background: url('./image/download\ \(18\).jfif'); */
382 |   text-align: center;
383 | }
384 | .box-wraper{
385 |     display: flex;
386 |     flex-wrap: wrap;
387 |     justify-content: space-between;
388 |     align-content: space-between;
389 |     height: 1500px;
390 |      
391 | }
392 | .box{
393 |     width: 250px;
394 |  
395 |     text-align: center;
396 | }
397 | .box img{
398 |     width: 100%;
399 |     height: 40%;
400 |     object-fit: cover;
401 | }
402 | 
403 | 
404 | 
405 | 
406 | 
407 | 
408 | /* ############ culture ############### */
409 | .tour3{
410 |   background: url("./images/pexels-navneet-shanu-672630.jpg");
411 |   border-top: 1px solid black;
412 |   height: 70vh;
413 |   /* background-position: center; */
414 |   /* background-size: cover; */
415 |   background-repeat: no-repeat;
416 |   /* background:  linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); */
417 | }
418 | @keyframes content{
419 | 0%{
420 |   background: url('./image/download\ \(13\).jfif;');
421 |   background-position: center;
422 |   background-size: cover;
423 |   background-repeat: no-repeat;
424 | 
425 | }
426 | 14%{
427 |   background: url('./image/download\ \(14\).jfif');
428 |   background-position: center;
429 |   background-size: cover;
430 |   background-repeat: no-repeat;
431 | }
432 | 28%{
433 |   background: url('./image/download\ \(3\).jfif');
434 |   background-position: center;
435 |   ackground-size: cover;
436 |   background-repeat: no-repeat;
437 | }
438 | 42%{
439 |   background: url('./image/download\ \(16\).jfif');
440 |   background-position: center;
441 |   background-size: cover;
442 |   background-repeat: no-repeat;
443 | }
444 | 56%{
445 |   background: url('./image/download\ \(17\).jfif');
446 |   background-position: center;
447 |   background-size: cover;
448 |   background-repeat: no-repeat;
449 | }
450 | 70%{
451 |   background: url('./image/download\ \(18\).jfif');
452 |   background-position: center;
453 |   background-size: cover;
454 |   background-repeat: no-repeat;
455 | }
456 | 84%{
457 |   background: url('./image/download\ \(19\).jfif');
458 |   background-position: center;
459 |   background-size: cover;
460 |   background-repeat: no-repeat;
461 | }
462 | 98%{
463 |   background: url('./image/download\ \(2\).jfif');
464 |   background-position: center;
465 |   background-size: cover;
466 |   background-repeat: no-repeat;
467 | }
468 | 100%{
469 |   background: url('./images/1.jfif');
470 |   background-position: center;
471 |   background-size: cover;
472 |   background-repeat: no-repeat;
473 | 
474 | }
475 | }
476 | 
477 | .culture-images{
478 | width: 90%;
479 | height: 90vh;
480 | 
481 | animation-name: content;
482 | animation-iteration-count: infinite;
483 | animation-duration: 50s;
484 | border: 10px solid black;
485 | border-radius: 50px;
486 | margin-left:70px;
487 | margin-top: 5vh;
488 | margin-bottom: 3vh;
489 | 
490 | }
491 | .cultureback{
492 | background: url("./images/640990.jpg");
493 | background-position: center;
494 | background-size:cover; 
495 | background-repeat:no-repeat;
496 | /* width:100%;
497 | height:100vh;
498 | position: absolute;
499 | top:0px; */
500 | 
501 | 
502 | }
503 | 
504 | 
505 | 
506 | 
507 | /* ###################### sign-in ######################### */
508 | #signin{
509 |   background: #282b34 ;
510 |   height: 110vh;
511 |   text-align: center;
512 | }
513 | 
514 | .why-sign-up{
515 |   border: 2px solid #363941;
516 |   padding: 8rem 0 6rem 0;
517 | }
518 | .why-sign-up h2{
519 |   padding-bottom: 2rem;
520 |   letter-spacing: 0.2rem;
521 |   
522 | }
523 | 
524 | .why-sign-up h3,p{
525 |   letter-spacing: 0.2rem;
526 |   font-weight: 300;
527 |   color: #b1b4b9;
528 |   font-size: 1.5rem;
529 | }
530 | 
531 | /* ########### Form ######### */
532 | .form-wrapper{
533 |   display: flex;
534 |   justify-content: space-evenly;
535 |   margin-top: 6rem;
536 | }
537 | /* .form-group{
538 |   width: 40%;
539 | } */
540 | .form-section{
541 |   /* border: 2px solid white; */
542 |  
543 |   width: 45%;
544 | }
545 | .form{
546 |   display: flex;
547 |   flex-wrap: wrap;
548 |   flex-direction: column;
549 |   justify-content: space-evenly;
550 |   /* align-items: center; */
551 | }
552 | .form-details{
553 |   display: flex;
554 | }
555 | .form-group{
556 |   width: 50%;
557 | }
558 | .add-details{
559 |   border-left: 2px solid #363941;
560 |   width: 45%;
561 | }
562 | .form-group input{
563 |   text-decoration: none;
564 |   border-radius: 1rem;
565 |   width: 90%;
566 |   height: 4rem;
567 |   margin:1rem 0 1rem 0 ;
568 |   box-shadow: none;
569 |   border: none;
570 |   
571 | }
572 | .form-group input::placeholder{
573 |   padding-left: 2rem;
574 |   font-style: italic;
575 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
576 | }
577 | .form-group textarea{
578 |   margin-left: 1.7rem;
579 |   border-radius: 1rem;
580 |   width: 53rem;
581 |   height: 10rem;
582 | }
583 | .form-group textarea::placeholder{
584 |   padding-left: 2rem;
585 |   font-style: italic;
586 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
587 | }
588 | .form-btn{
589 |   border: none;
590 |   color: white;
591 |   text-transform: uppercase;
592 |   letter-spacing: 0.2rem;
593 |   border-radius: 1rem;;
594 |   margin: 2rem auto;
595 |   text-decoration: none;
596 |   /* border: 2px solid red; */
597 |   background : red;
598 |   height: 4rem;
599 |   width: 10rem;
600 |   transition: all 0.3s ease-in-out;
601 | }
602 | .form-btn:hover{
603 |   background: rgb(252, 79, 79);
604 |   transform: scale(1.1);
605 | }
606 | 
607 | /* ############## address details ########## */
608 | .add-details{
609 | width: 45%;
610 | }
611 | .mail-head, 
612 | .phone-head,
613 | .address-head{
614 |   font-size: 1.6rem;
615 |   color: #e97770;
616 | }
617 | .mail-para
618 | ,.phone-para
619 | ,.address-para{
620 |   color: #ffffff80;
621 |   font-size: 1.4rem;
622 | }
623 | .mail-para{
624 |   display: flex;
625 |   flex-direction: column;
626 | }
627 | .mail-para a{
628 |   text-decoration: none;
629 |   color:#ffffff80 ;
630 | }
631 | .wrapper1{
632 |   display: flex;
633 |   justify-content: space-evenly;
634 | }
635 | .wrapper2{
636 |   display: flex;
637 |   justify-content: space-evenly;
638 |   margin-top: 3rem;
639 | }
640 | 
641 | 


--------------------------------------------------------------------------------
/city project/stylebytanuj.css:
--------------------------------------------------------------------------------
   1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap");
   2 | 
   3 | * {
   4 |   padding: 0;
   5 |   margin: 0;
   6 |   box-sizing: border-box;
   7 | }
   8 | html {
   9 |   font-size: 62.5%;
  10 | }
  11 | body {
  12 |   color: #fff;
  13 |   font-family: "Open Sans", Helvetica, sans-serif;
  14 |   font-size: 15pt;
  15 |   font-weight: 400;
  16 |   letter-spacing: 0.075em;
  17 |   line-height: 1.65em;
  18 | }
  19 | 
  20 | /* ########################### Utility Classes ########################### */
  21 | .container {
  22 |   max-width: 1200px;
  23 |   width: 90%;
  24 |   margin: auto;
  25 | }
  26 | h1 {
  27 |   font-size: 4rem;
  28 |   font-weight: 500;
  29 |   letter-spacing: 0.3rem;
  30 | }
  31 | h2 {
  32 |   font-size: 3rem;
  33 |   font-weight: 700;
  34 |   letter-spacing: 0.3rem;
  35 | }
  36 | h3 {
  37 |   font-size: 2rem;
  38 |   font-weight: 300;
  39 | }
  40 | 
  41 | /* ########################### Nav Bar styling ########################### */
  42 | 
  43 | /* 1. For desktop  */
  44 | .navbar input[type="checkbox"],
  45 | .navbar .hamburger-lines {
  46 |   /* we cant see hamburger menu in desktop mode*/
  47 |   display: none;
  48 | }
  49 | 
  50 | .navbar {
  51 |   /* box-shadow: 0px 5px 10px #aaa; */
  52 |   position: fixed; /*will be visible all the time*/
  53 |   width: 100%; /* BY fixed position, it will be out of the flow document, so we have to again resize it*/
  54 |   background: #000;
  55 |   color: whitesmoke;
  56 |   opacity: 0.6; /* it will be slightly trasnparent*/
  57 |   z-index: 999; /*any content will be visible below the navbar*/
  58 | }
  59 | 
  60 | .navbar-container {
  61 |   display: flex;
  62 |   justify-content: space-between; /* aligns items in the main axis direction*/
  63 |   align-items: center; /* aligns items in the cross axis direction*/
  64 |   height: 6.4rem;
  65 | }
  66 | .menu-items {
  67 |   display: flex;
  68 | }
  69 | 
  70 | .menu-items li {
  71 |   list-style: none;
  72 |   margin: 1rem;
  73 |   font-size: 1.5rem;
  74 | }
  75 | .logo {
  76 |   font-size: 3rem;
  77 | }
  78 | 
  79 | .navbar a {
  80 |   color: aliceblue;
  81 |   text-decoration: none;
  82 |   transition: all 200ms ease-in-out;
  83 |   filter: none;
  84 | }
  85 | .navbar a:hover {
  86 |   color: rgb(218, 214, 214);
  87 |   border-bottom: 1px solid white;
  88 | }
  89 | 
  90 | /* ===================================== landing page =================================== */
  91 | .landing-page {
  92 |   /* border: 2px solid red; */
  93 |   height: 100vh;
  94 |   background: url("./images/Gurugram\ home\ pic.jpg");
  95 |   /* filter: blur(5px); */
  96 |   
  97 |   background-position: center;
  98 |   background-repeat: no-repeat;
  99 |   background-size: cover;
 100 |   /* text-align: center; */
 101 | }
 102 | .inner {
 103 |  
 104 |   display: flex;
 105 |   flex-direction: column;
 106 |   align-items: center;
 107 |   justify-content: center;
 108 |   height: 90%;
 109 |   background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
 110 | }
 111 | .guru {
 112 |   /* margin-top: 1rem; */
 113 |   font-weight: 800;
 114 |   padding: 1.8rem;
 115 |   width: 30rem;
 116 |   text-align: center;
 117 |   
 118 | }
 119 | .guru-heading{
 120 |   opacity: 0;
 121 |   animation-delay: 0.3s;
 122 |   animation-duration: 1s;
 123 |   animation-name: guru-head;
 124 |   animation-fill-mode: forwards;
 125 |   animation-iteration-count: 1;
 126 |   
 127 |   
 128 | }
 129 | @keyframes guru-head {
 130 |   0%{
 131 |     opacity: 0;
 132 |   }
 133 |   100%{
 134 |     opacity: 1;
 135 |   }
 136 | }
 137 | 
 138 | .lineup{
 139 |   opacity: 0;
 140 |   border-top: 2px solid white;
 141 |   background: white;
 142 |   width: 30rem;
 143 |   animation-name: line-grow;
 144 |   animation-duration: 1s;
 145 |   animation-fill-mode: forwards;
 146 |   animation-iteration-count: 1;
 147 |   animation-delay: 0.5s;
 148 |   
 149 | }
 150 | .linedown{
 151 |   opacity: 0;
 152 |   border-top: 2px solid white;
 153 |   width: 30rem;
 154 |   margin-top: -0.5rem;
 155 |   animation-name: line-grow;
 156 |   animation-duration: 1s;
 157 |   animation-fill-mode: forwards;
 158 |   animation-iteration-count: 1;
 159 |   animation-delay: 0.5s;
 160 |   
 161 | }
 162 | @keyframes line-grow{
 163 |   from{
 164 |     width: 0px;
 165 |     opacity: 0;
 166 |   }
 167 |   to{
 168 |     width: 300px;
 169 |     opacity: 1;
 170 |   }
 171 | }
 172 | 
 173 | 
 174 | 
 175 | .welcome {
 176 |   margin-top: 2rem;
 177 |   letter-spacing: 0.3rem;
 178 |   text-align: center;
 179 |   font-size: 300;
 180 |   line-height: 2.5rem;
 181 |   font-size: 1.5rem;
 182 |   text-transform: uppercase;
 183 |   opacity: 0;
 184 |   animation-name: visible;
 185 |   animation-duration: 2s;
 186 |   animation-delay: 1.1s;
 187 |   animation-fill-mode: forwards;
 188 |   animation-iteration-count: 1;
 189 |   
 190 | }
 191 | @keyframes visible {
 192 |   from{
 193 |     opacity: 0;
 194 |   }
 195 |   to{
 196 |     opacity: 1;
 197 |   }
 198 | }
 199 | 
 200 | .button {
 201 |   border: 2px solid white;
 202 |   border-radius: 0.5rem;
 203 |   /* background-color: white; */
 204 |   margin-top: 2.8rem;
 205 |   padding: 0.3rem 4rem;
 206 |   text-decoration: none;
 207 |   color: white;
 208 |   text-transform: uppercase;
 209 |   font-size: 1.3rem;
 210 |   letter-spacing: 0.3rem;
 211 |   transition: all 0.5s ease-in-out;
 212 |   opacity: 0;
 213 |   animation-name: visible;
 214 |   animation-duration: 2s;
 215 |   animation-delay: 1.1s;
 216 |   animation-fill-mode: forwards;
 217 |   animation-iteration-count: 1;
 218 | 
 219 |   position: relative;
 220 |   overflow: hidden;
 221 |   
 222 | }
 223 | .button:hover{
 224 |   color: white;
 225 | }
 226 | 
 227 | .button::before{
 228 |   content: "";
 229 |   position:absolute;
 230 |   left: 0;
 231 |   width: 100%;
 232 |   height: 0%;
 233 |   background: royalblue;
 234 |   z-index: -1;
 235 |   transition: 0.5s;
 236 |   
 237 | }
 238 | .primary::before{
 239 |   bottom: 0;
 240 |   border-radius:  50% 50% 0 0;
 241 | }
 242 | .primary:hover::before{
 243 |   height: 180%;
 244 | }
 245 | .more{
 246 |   position: absolute;
 247 |   text-decoration:none;
 248 |   color: aliceblue;
 249 |   bottom: 12%;
 250 |   left: 50%;
 251 |   transform: translate(-50%,-50%);
 252 |   text-transform: uppercase;
 253 |   font-size: 1.5rem;  
 254 |   transition: all 0.2s ease-out;
 255 | 
 256 |   opacity: 0;
 257 |   animation-name: slide-down;
 258 |   animation-duration: 1s;
 259 |   animation-delay: 2.5s;
 260 |   animation-fill-mode: forwards;
 261 |   animation-iteration-count: 1;
 262 |   animation-timing-function: ease-in-out;
 263 | }
 264 | @keyframes slide-down {
 265 |   from{
 266 |     top: 75%;
 267 |     opacity: 1;
 268 |   }
 269 |   to{
 270 |     top: 82%;
 271 |     opacity: 1;
 272 |   }
 273 | }
 274 | .arrow-icon{
 275 |   text-decoration: none;
 276 |   color: aliceblue;
 277 |   position: absolute;
 278 |   bottom: 10%;
 279 |   transition: all 0.2s ease-out;
 280 |   opacity: 0;
 281 |   animation-name: slide-down-arrow;
 282 |   animation-duration: 1s;
 283 |   animation-delay: 2.5s;
 284 |   animation-fill-mode: forwards;
 285 |   animation-iteration-count: 1;
 286 |   animation-timing-function: ease;
 287 |   
 288 | }
 289 | .arrow-icon:hover{
 290 |   transform:scale(1.1);
 291 | }
 292 | 
 293 | @keyframes slide-down-arrow{
 294 |   from{
 295 |     top: 77%;
 296 |     opacity: 1;
 297 |   }
 298 |   to{
 299 |     top: 85%;
 300 |     opacity: 1;
 301 |   }
 302 | }
 303 | /* ==================================================== */
 304 | /* ################### Tourism styling ######### */
 305 | /* ======================================================= */
 306 | #tourism{
 307 |   background:rgb(231, 227, 227) ;
 308 | }
 309 | 
 310 | .tour1{
 311 |   height: 90vh ;
 312 |   background: url("./images/pexels-riccardo-bertolo-4245826.jpg");
 313 |   background-position: center;
 314 |   background-repeat: no-repeat;
 315 |   background-size:cover ;
 316 |   color:aliceblue;
 317 | 
 318 |  border: 2px solid #4b6cb7;
 319 |   
 320 | }
 321 | .show-heading{
 322 |   margin-top: 3rem;
 323 | }
 324 | .main-heading{
 325 |   display: flex; 
 326 |   flex-direction: column;
 327 |   /* border:solid 2px red; */
 328 |   align-items: center;
 329 |   margin-top: 5rem;
 330 | }
 331 | .wonders, .fingertip, .click{
 332 |   margin-top: 1rem;
 333 | }
 334 | .show-heading{
 335 |   text-align: center;
 336 |   font-size: 3rem;
 337 | }
 338 | .show-heading {
 339 |   border-bottom: 2px solid #078d82;
 340 |   letter-spacing: 0.1rem;
 341 |   font-size: 2.5rem;
 342 |   padding-bottom: 2rem;
 343 |   width: 60rem;
 344 |   text-transform:uppercase ;
 345 | }
 346 | 
 347 | 
 348 | /* //////////////////// section 1 ///////////////////// */
 349 | /* ################# kingdom of dreams ############# */
 350 | .spotlight{
 351 |   display: flex;
 352 |   padding: 2rem 2rem;
 353 |   flex-wrap: wrap;
 354 |   text-align: center;
 355 | }
 356 | .com-img{
 357 |   display: block;
 358 |   width: 100%;
 359 |   height: 40rem;
 360 |   max-width: 100%;
 361 |   object-fit: cover;
 362 |   object-position: center;
 363 | }
 364 | .image{
 365 |   width: 50%;
 366 |   flex: 1 1 40rem ;
 367 |  
 368 | }
 369 | .content{
 370 |  
 371 |   background:linear-gradient(126deg,#f2709c, #ff9472);
 372 |   text-align: center;
 373 |   width: 50%;
 374 |   padding: 3rem;
 375 |   flex: 1 1 40rem;
 376 |   
 377 | 
 378 | }
 379 | .specify-para{
 380 |   font-size: 2rem;
 381 |   color: white;
 382 |   margin-bottom: 1.5rem;
 383 |   font-size: 1.5rem;
 384 |   letter-spacing: 0.3rem;
 385 | }
 386 | 
 387 | .specify-head{
 388 |   margin: 2rem auto;
 389 |   text-transform: uppercase ;
 390 |   padding: 3rem;
 391 | }
 392 | 
 393 | /* ################ aaravli hills ############ */
 394 | 
 395 | .content2{
 396 |   background:linear-gradient(126deg,#DC2424, #4A569D);
 397 |   text-align: center;
 398 |   width: 50%;
 399 |   padding: 3rem;
 400 | }
 401 | .content3{ 
 402 |   background:linear-gradient(126deg,#f857a6, #ff5858);
 403 |   text-align: center;
 404 |   width: 50%;
 405 |   padding: 3rem;
 406 | }  
 407 | .content4{ 
 408 |   background:linear-gradient(126deg,#833ab4, #fd1d1d, #fcb045);
 409 |   text-align: center;
 410 |   width: 50%;
 411 |   padding: 3rem;
 412 | }
 413 | .content5{ 
 414 |   background:linear-gradient(126deg,#f857a6, #ff5858);
 415 |   text-align: center;
 416 |   width: 50%;
 417 |   padding: 3rem;
 418 | }
 419 | .button2{
 420 |   border: 2px solid white;
 421 |   border-radius: 0.5rem;
 422 |   padding: 1rem;
 423 |   background: #4b6cb7;
 424 |   color: aliceblue;
 425 |   text-decoration: none;
 426 |   text-transform: uppercase;
 427 |   font-size: 1.3rem;
 428 |   letter-spacing: 0.3rem;
 429 |   transition: all 0.3s ease-in-out;
 430 | }
 431 | .button2:hover{
 432 |   background: #38579e;
 433 | }
 434 | 
 435 | 
 436 | /* ######################### FOOD SECTION ################### */
 437 | .tour2{
 438 |   margin-top: 0;
 439 |   margin-bottom: 1rem;
 440 |   border-top: 2px solid white;
 441 |   background:url("./images/foodcover.jpg");
 442 |   background-position: center;
 443 |   background-repeat: no-repeat;
 444 |   background-size: cover;
 445 |   color: white;
 446 |   height: 70vh;
 447 | }
 448 | .main-heading{
 449 |   background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
 450 | }
 451 | .primary2 {
 452 |   border: 2px solid royalblue;
 453 |   border-radius: 0.5rem;
 454 |   /* background-color: white; */
 455 |   margin-top: 2.8rem;
 456 |   padding: 0.3rem 4rem;
 457 |   text-decoration: none;
 458 |   color: royalblue;
 459 |   text-transform: uppercase;
 460 |   font-size: 1.3rem;
 461 |   letter-spacing: 0.3rem;
 462 |   transition: all 0.5s ease-in-out;
 463 |   opacity: 0;
 464 |   animation-name: visible;
 465 |   animation-duration: 2s;
 466 |   animation-delay: 1.1s;
 467 |   animation-fill-mode: forwards;
 468 |   animation-iteration-count: 1;
 469 | 
 470 |   position: relative;
 471 |   overflow: hidden;
 472 |   
 473 | }
 474 | .primary2:hover{
 475 |   color: white;
 476 | }
 477 | 
 478 | .primary2::before{
 479 |   content: "";
 480 |   position:absolute;
 481 |   left: 0;
 482 |   width: 100%;
 483 |   height: 0%;
 484 |   background: royalblue;
 485 |   z-index: -1;
 486 |   transition: 0.5s;
 487 |   
 488 | }
 489 | .primary2::before{
 490 |   bottom: 0;
 491 |   border-radius:  50% 50% 0 0;
 492 | }
 493 | .primary2:hover::before{
 494 |   height: 180%;
 495 | }
 496 | 
 497 | 
 498 | /* ###################### food section ############### */
 499 | 
 500 | /* ########### common for all ########### */
 501 | #food{
 502 |   background:rgb(235, 233, 233);
 503 | }
 504 | 
 505 | 
 506 | .card{
 507 |   display: grid;
 508 |   width: 23.7%;
 509 |   height: 50%;
 510 |   margin: 3rem;
 511 |   grid-template-columns: 30rem;
 512 |   grid-template-rows: 21rem 21rem 8rem;
 513 |   grid-template-areas: "image" "text" "btn";
 514 |   color: black;
 515 | 
 516 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 517 |   border-radius: 1.8rem;
 518 |   background: white;
 519 |   box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.5);
 520 |   text-align: center;
 521 | 
 522 |   transition: 0.3s ease-in-out all;
 523 | }
 524 | .card:hover{
 525 |   transform: scale(0.9);
 526 |   box-shadow: 0.5rem 0.5rem 0.5rem 0.8;
 527 | }
 528 | 
 529 | .card-img{
 530 |   grid-area: image;
 531 |   background: url("./images/dahi\ vada.png");
 532 |   border-top-right-radius: 1.5rem;
 533 |   border-top-left-radius: 1.5rem;
 534 |   background-size: cover;
 535 |   
 536 | }
 537 | .card-txt{
 538 |   grid-area: text;
 539 |   margin: 3rem;
 540 | }
 541 | .card-txt .name{
 542 |   color: rgb(225, 7, 110);
 543 |   font-size: 3rem;
 544 |   font-weight: 700;
 545 | }
 546 | .card-txt p{
 547 |   color: gray;
 548 |   font-size: 1.5rem;
 549 |   font-weight: 300;
 550 |   line-height: 2rem;
 551 | }
 552 | .card-txt h2{
 553 |   margin-top: 0;
 554 |   font-size: 2.8rem;
 555 | }
 556 | .card-btn{
 557 |   grid-area: btn ;
 558 |   background:rgb(225, 7, 110);
 559 |   border-bottom-left-radius: 1.5rem;
 560 |   border-bottom-right-radius: 1.5rem;
 561 |   text-align: center;
 562 |   
 563 | }
 564 | .exp-btn{
 565 |   display: block;
 566 |   width: 12rem;
 567 |   text-decoration: none;
 568 |   color: white;
 569 |   border: 2px solid white;
 570 |   border-radius: 0.5rem;
 571 |   padding: 0.2rem;
 572 |   /* margin-top: 1.5rem;
 573 |   margin-left: 6rem; */
 574 |   margin: 2rem 9rem;
 575 |   transition: 0.2s ease-in-out;
 576 | }
 577 | .exp-btn:hover{
 578 |   background: white;
 579 |   color: royalblue;
 580 | }
 581 | .food-btn{
 582 |   color: royalblue;
 583 |   border: 2px solid royalblue;
 584 |   background: white;
 585 | }
 586 | .card-wrapper{
 587 |   display: flex;
 588 |   justify-content: center;
 589 | }
 590 | .c2-img{
 591 |   background: url("./images/bora\ roti\ ghee.png");
 592 |   background-position: center;
 593 |   background-size: cover;
 594 | }
 595 | .c3-img{
 596 |   background: url("./images/pakoda.png");
 597 |   background-position: center;
 598 |   background-size: cover;
 599 | }
 600 | .c4-img{
 601 |   background: url("./images/malpua.png");
 602 |   background-position: center;
 603 |   background-size: cover;
 604 | }
 605 | .c5-img{
 606 |   background: url("./images/malai.png");
 607 |   background-position: center;
 608 |   background-size: cover;
 609 | }
 610 | .c6-img{
 611 |   background: url("./images/kichdoi.png");
 612 |   background-position: center;
 613 |   background-size: cover;
 614 | }
 615 | .c7-img{
 616 |   background: url("./images/makkhan.png");
 617 |   background-position: center;
 618 |   background-size: cover;
 619 | }
 620 | .c8-img{
 621 |   background: url("./images/churma.jfif");
 622 |   background-position: center;
 623 |   background-size: cover;
 624 | }
 625 | .c9-img{
 626 |   background: url("./images/bathua.png");
 627 |   background-position: center;
 628 |   background-size: cover;
 629 | }
 630 | 
 631 | 
 632 | /* ################# Culture #################### */
 633 | .tour3{
 634 |       background: url("./images/pexels-navneet-shanu-672630.jpg");
 635 |       border-top: 1px solid black;
 636 |       height: 70vh;
 637 |       /* background-position: center; */
 638 |       /* background-size: cover; */
 639 |       background-repeat: no-repeat;
 640 |       /* background:  linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); */
 641 | }
 642 | @keyframes content{
 643 |   0%{
 644 |       background: url('./images/1.png');
 645 |       background-position: center;
 646 |       background-size: cover;
 647 |       background-repeat: no-repeat;
 648 |   
 649 |   }
 650 |   14%{
 651 |       background: url('./images/1.png');
 652 |       background-position: center;
 653 |       background-size: cover;
 654 |       background-repeat: no-repeat;
 655 |   }
 656 |   28%{
 657 |       background: url('./images/2.jfif');
 658 |       background-position: center;
 659 |       ackground-size: cover;
 660 |       background-repeat: no-repeat;
 661 |   }
 662 |   42%{
 663 |       background: url('./images/4.jfif');
 664 |       background-position: center;
 665 |       background-size: cover;
 666 |       background-repeat: no-repeat;
 667 |   }
 668 |   56%{
 669 |       background: url('./images/5.jfif');
 670 |       background-position: center;
 671 |       background-size: cover;
 672 |       background-repeat: no-repeat;
 673 |   }
 674 |   70%{
 675 |       background: url('./images/6.png');
 676 |       background-position: center;
 677 |       background-size: cover;
 678 |       background-repeat: no-repeat;
 679 |   }
 680 |   84%{
 681 |       background: url('./images/7.jfif');
 682 |       background-position: center;
 683 |       background-size: cover;
 684 |       background-repeat: no-repeat;
 685 |   }
 686 |   98%{
 687 |       background: url('./images/8.jfif');
 688 |       background-position: center;
 689 |       background-size: cover;
 690 |       background-repeat: no-repeat;
 691 |   }
 692 |   100%{
 693 |       background: url('./images/1.jfif');
 694 |       background-position: center;
 695 |       background-size: cover;
 696 |       background-repeat: no-repeat;
 697 | 
 698 |   }
 699 | }
 700 | 
 701 |  .culture-images{
 702 |   width: 90%;
 703 |   height: 90vh;
 704 |  
 705 |     animation-name: content;
 706 |     animation-iteration-count: infinite;
 707 |     animation-duration: 50s;
 708 |     border: 10px solid black;
 709 |     border-radius: 50px;
 710 |     margin-left:70px;
 711 |     margin-top: 5vh;
 712 |     margin-bottom: 3vh;
 713 | 
 714 | }
 715 | .cultureback{
 716 |     background: url("./images/640990.jpg");
 717 |     background-position: center;
 718 |     background-size:cover; 
 719 |     background-repeat:no-repeat;
 720 |     /* width:100%;
 721 |     height:100vh;
 722 |     position: absolute;
 723 |     top:0px; */
 724 |     
 725 | 
 726 | }
 727 | 
 728 | /* ################################# Signin ################# */
 729 | #signin{
 730 |   background: #282b34 ;
 731 |   height: 110vh;
 732 |   text-align: center;
 733 | }
 734 | 
 735 | .why-sign-up{
 736 |   border: 2px solid #363941;
 737 |   padding: 8rem 0 6rem 0;
 738 | }
 739 | .why-sign-up h2{
 740 |   padding-bottom: 2rem;
 741 |   letter-spacing: 0.2rem;
 742 |   
 743 | }
 744 | 
 745 | .why-sign-up h3,p{
 746 |   letter-spacing: 0.2rem;
 747 |   font-weight: 300;
 748 |   color: #b1b4b9;
 749 |   font-size: 1.5rem;
 750 | }
 751 | 
 752 | /* ########### Form ######### */
 753 | .form-wrapper{
 754 |   display: flex;
 755 |   justify-content: space-evenly;
 756 |   margin-top: 6rem;
 757 | }
 758 | /* .form-group{
 759 |   width: 40%;
 760 | } */
 761 | .form-section{
 762 |   /* border: 2px solid white; */
 763 |  
 764 |   width: 45%;
 765 | }
 766 | .form{
 767 |   display: flex;
 768 |   flex-wrap: wrap;
 769 |   flex-direction: column;
 770 |   justify-content: space-evenly;
 771 |   /* align-items: center; */
 772 | }
 773 | .form-details{
 774 |   display: flex;
 775 | }
 776 | .form-group{
 777 |   width: 50%;
 778 | }
 779 | .add-details{
 780 |   border-left: 2px solid #363941;
 781 |   width: 45%;
 782 | }
 783 | .form-group input{
 784 |   text-decoration: none;
 785 |   border-radius: 1rem;
 786 |   width: 90%;
 787 |   height: 4rem;
 788 |   margin:1rem 0 1rem 0 ;
 789 |   box-shadow: none;
 790 |   border: none;
 791 |   
 792 | }
 793 | .form-group input::placeholder{
 794 |   padding-left: 2rem;
 795 |   font-style: italic;
 796 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 797 | }
 798 | .form-group textarea{
 799 |   margin-left: 1.7rem;
 800 |   border-radius: 1rem;
 801 |   width: 53rem;
 802 |   height: 10rem;
 803 | }
 804 | .form-group textarea::placeholder{
 805 |   padding-left: 2rem;
 806 |   font-style: italic;
 807 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 808 | }
 809 | .form-btn{
 810 |   border: none;
 811 |   color: white;
 812 |   text-transform: uppercase;
 813 |   letter-spacing: 0.2rem;
 814 |   border-radius: 1rem;;
 815 |   margin: 2rem auto;
 816 |   text-decoration: none;
 817 |   /* border: 2px solid red; */
 818 |   background : red;
 819 |   height: 4rem;
 820 |   width: 10rem;
 821 |   transition: all 0.3s ease-in-out;
 822 | }
 823 | .form-btn:hover{
 824 |   background: rgb(252, 79, 79);
 825 |   transform: scale(1.1);
 826 | }
 827 | 
 828 | /* ############## address details ########## */
 829 | .add-details{
 830 | width: 45%;
 831 | }
 832 | .mail-head, 
 833 | .phone-head,
 834 | .address-head{
 835 |   font-size: 1.6rem;
 836 |   color: #e97770;
 837 | }
 838 | .mail-para
 839 | ,.phone-para
 840 | ,.address-para{
 841 |   color: #ffffff80;
 842 |   font-size: 1.4rem;
 843 | }
 844 | .mail-para{
 845 |   display: flex;
 846 |   flex-direction: column;
 847 | }
 848 | .mail-para a{
 849 |   text-decoration: none;
 850 |   color:#ffffff80 ;
 851 | }
 852 | .wrapper1{
 853 |   display: flex;
 854 |   justify-content: space-evenly;
 855 | }
 856 | .wrapper2{
 857 |   display: flex;
 858 |   justify-content: space-evenly;
 859 |   margin-top: 3rem;
 860 | }
 861 | 
 862 | 
 863 | 
 864 | 
 865 |   
 866 | /* ####################################################################################################### */
 867 | /* ################################ MEDIA QUERRIES ###################################################### */
 868 | /* ################################################################################################### */
 869 | @media (max-width: 720px) {
 870 |     .navbar{
 871 |       opacity: 0.95;
 872 |     }
 873 |     .navbar-container input[type="checkbox"],
 874 |     .navbar-container .hamburger-lines{
 875 |       display: block;
 876 |     }
 877 | 
 878 |     .navbar-container {
 879 |       display: block;
 880 |       position: relative;
 881 |       height: 64px;
 882 |     }
 883 | 
 884 |     .navbar-container input[type="checkbox"]{
 885 |       position: absolute;
 886 |       display: block;
 887 |       height: 32px;
 888 |       width: 40px;
 889 |       top: 20px;
 890 |       left: 20px;
 891 |       z-index: 5;
 892 |       opacity: 0;
 893 |     }
 894 |     .navbar-container .hamburger-lines{
 895 |       display: block;
 896 |       height: 32px;
 897 |       width: 40px;
 898 |       position: absolute;
 899 |       top: 20px;
 900 |       left: 20px;
 901 |       z-index: 2;
 902 |       display: flex;
 903 |       flex-direction: column;
 904 |       justify-content: space-between;
 905 |     }
 906 |     .navbar-container .hamburger-lines .line{
 907 |       display: block;
 908 |       height: 4px;
 909 |       width: 100%;
 910 |       border-radius: 10px;
 911 |       background: #fff;
 912 |     }
 913 |     .navbar-container .hamburger-lines .line1{
 914 |       transform-origin: 0% 0%;
 915 |       transition: transform 0.4s ease-in-out;
 916 |     }
 917 |     .navbar-container .hamburger-lines .line2{
 918 |       transition: transform 0.4s ease-in-out;
 919 |     }
 920 |     .navbar-container .hamburger-lines .line3{
 921 |       transform-origin: 0% 100%;
 922 |       transition: transform 0.4s ease-in-out;
 923 |     }
 924 | 
 925 |     .navbar .menu-items{
 926 |       padding-top:100px;
 927 |       background: rgb(39, 38, 38);
 928 |       height: 100vh;
 929 |       max-width: 300px;
 930 |       transform : translate(-150%) ;
 931 |       display: flex;
 932 |       flex-direction: column;
 933 |       margin-left: -40px;
 934 |       padding-left: 50px;
 935 |       transition: transform 0.5s ease-in-out;
 936 |       box-shadow: 5px 0 10px 0px #aaa;
 937 |     }
 938 |     .navbar .menu-items li{
 939 |       margin-bottom: 30px;
 940 |       font-size: 20px;
 941 |       font-weight: 500;
 942 | 
 943 |     }
 944 |     .logo{
 945 |       position: absolute;
 946 |       top: 15px;
 947 |       right: 15px;
 948 |       font-size: 30px;
 949 |     }
 950 |     .navbar-container input[type="checkbox"]:checked ~ .menu-items{
 951 |       transform: translateX(0); 
 952 |     }
 953 |     .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
 954 |       transform: rotate(45deg);
 955 |     }
 956 |     .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
 957 |       transform: scaleY(0);
 958 |     }
 959 |     .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
 960 |       transform: rotate(-45deg);
 961 |     }
 962 | }
 963 | 
 964 | @media (max-width: 850px){
 965 |   .landing-page{
 966 |     width: 100%;
 967 |     background-position: center;
 968 |     background-size: vover;
 969 |   }
 970 |   h1{
 971 |     font-size: 1.8rem;
 972 |   }
 973 |   h2{
 974 |     font-size:1.5rem;
 975 |   }
 976 |   h3{
 977 |     font-size: 1.5rem;
 978 |   }
 979 |   .click{
 980 |     background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8));
 981 |   }
 982 |   .show-heading{
 983 |     /* border: 2px solid red; */
 984 |     margin-top: 0.5rem;
 985 |   }
 986 |   .main{
 987 |     text-align: center;
 988 |     /* border: 2px solid red; */
 989 |     margin-top: 1rem;
 990 |    }
 991 |    .main-heading{
 992 |      margin-top: 1rem;
 993 |    }
 994 |    
 995 | 
 996 |    
 997 | }
 998 | 
 999 | @media (max-width: 500px) {
1000 |     html{
1001 |       font-style: 50%;
1002 |     }
1003 |     /* food cards */
1004 |    .card-wrapper{
1005 |     display: block;
1006 |     text-align: center;
1007 | 
1008 |  }
1009 |  .card{
1010 |    width: 60vw;
1011 |    /* border: 2px solid red; */
1012 |    margin-left: 10rem;
1013 |  }
1014 | }


--------------------------------------------------------------------------------
/city project/thanks.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>contect us</title>
 8 |     <link rel="stylesheet" href="./style.css">
 9 | </head>
10 | <body>
11 |     <section class="thanx">
12 | 
13 |         <div class="container">
14 |             <nav class="nav-bar ">
15 |                 <div class="container">
16 |                     <h1 class="lg-heading">alwar</h1>
17 |         
18 |                     
19 |                 </div>
20 |             </nav>
21 |            
22 |                 
23 |             <div class="thanx-line-box">
24 |                 <i class="fas fa-handshake fa-6x text-light"></i>
25 |                 <h2 class="thanx-reg lg-heading text-light">Thanks for regestring!</h2>
26 |                  <!-- <p class="thanx-sign md-heading text-light">You have successfully signed up!!</p> -->
27 |             </div>
28 |         </div>
29 | 
30 |         <div class="container">
31 |             <div class="thanx-wrapper">
32 |                 <div class="thanx-box box1 ">
33 |                     <i class="fas fa-shield-alt fa-2x text-light"></i>
34 |                      <h2 class="feat-t lg-heading  text-dark">Secured.</h2>
35 |                      <p class="feat-p texr-black text-dark">Your data is secureed.All private information shared with us seaved securly.Your trust is our confidence</p>
36 |                  </div>
37 |                 
38 |         
39 |     </section>
40 |     
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/mongo-config.yaml:
--------------------------------------------------------------------------------
1 | apiVersion: v1
2 | kind: ConfigMap
3 | metadata:
4 |   name: mongo-config
5 | data:
6 |   mongo-url: mongo-service
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "website",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.10.4",
 7 |     "@emotion/styled": "^11.10.4",
 8 |     "@testing-library/jest-dom": "^5.16.4",
 9 |     "@testing-library/react": "^13.3.0",
10 |     "@testing-library/user-event": "^13.5.0",
11 |     "aos": "^2.3.4",
12 |     "bootstrap": "^5.2.2",
13 |     "react": "^18.1.0",
14 |     "react-bootstrap": "^2.5.0",
15 |     "react-dom": "^18.1.0",
16 |     "react-router-dom": "^6.3.0",
17 |     "react-scripts": "5.0.1",
18 |     "web-vitals": "^2.1.4"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |    
13 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
14 |       integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
15 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
16 | 
17 |   
18 |     <!--
19 |       manifest.json provides metadata used when your web app is installed on a
20 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
21 |     -->
22 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
23 |     <!--
24 |       Notice the use of %PUBLIC_URL% in the tags above.
25 |       It will be replaced with the URL of the `public` folder during the build.
26 |       Only files inside the `public` folder can be referenced from the HTML.
27 | 
28 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
29 |       work correctly both with client-side routing and a non-root public URL.
30 |       Learn how to configure a non-root public URL by running `npm run build`.
31 |     -->
32 |     <title>Adarsh.io</title>
33 |   </head>
34 |   <body>
35 |     <noscript>You need to enable JavaScript to run this app.</noscript>
36 |     <div id="root"></div>
37 |     <!--
38 |       This HTML file is a template.
39 |       If you open it directly in the browser, you will see an empty page.
40 | 
41 |       You can add webfonts, meta tags, or analytics to this file.
42 |       The build step will place the bundled scripts into the <body> tag.
43 | 
44 |       To begin the development, run `npm start` or `yarn start`.
45 |       To create a production bundle, use `npm run build` or `yarn build`.
46 |     -->
47 |     <script
48 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
49 |       integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
50 |       crossorigin="anonymous"
51 |     ></script>
52 | 
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/public/ms-icon-144x144.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/About.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Web from "../src/images/about.jpg";
 3 | import c1 from "../src/images/c1.jpg";
 4 | import c2 from "../src/images/c2.jpg";
 5 | import c3 from "../src/images/c3.jpg";
 6 | import "../src/about.css"
 7 | // import {Link} from "react-router-dom";
 8 | import Common from "./Common";
 9 | 
10 | const About = () => {
11 | 
12 |     return (
13 |         <>
14 |             <div id="carouselExampleIndicators" className="carousel slide " data-bs-ride="carousel">
15 |                 <div className="carousel-indicators">
16 |                     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
17 |                     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
18 |                     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
19 |                 </div>
20 |                 <div className="carousel-inner c--size">
21 |                     <div className="carousel-item active">
22 |                         <img src={c1} className="d-block w-100" alt="Image" />
23 |                     </div>
24 |                     <div className="carousel-item">
25 |                         <img src={c2} className="d-block w-100" alt="Image" />
26 |                     </div>
27 |                     <div className="carousel-item">
28 |                         <img src={c3} className="d-block w-100" alt="Image" />
29 |                     </div>
30 |                 </div>
31 |                 <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
32 |                     <span className="carousel-control-prev-icon" aria-hidden="true"></span>
33 |                     <span className="visually-hidden">Previous</span>
34 |                 </button>
35 |                 <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
36 |                     <span className="carousel-control-next-icon" aria-hidden="true"></span>
37 |                     <span className="visually-hidden">Next</span>
38 |                 </button>
39 |             </div>
40 |             <Common name="Welcome to About Page" btname="Contact Us" btLink="/contact" imgSrc={Web} />
41 |         </>
42 |     );
43 | };
44 | 
45 | export default About;


--------------------------------------------------------------------------------
/src/Alert.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Alert(props) {
 4 |   const capatalize = (word) => {
 5 |     const lower = word.toLowerCase();
 6 |     return lower.charAt(0).toUpperCase() + lower.slice(1);
 7 |   };
 8 | 
 9 |   return (
10 |     <div style={{ height: "50px" }}>
11 |       {props.alert && (
12 |         <div
13 |           className={`alert alert-${props.alert.type} alert-dismissible fade show`}
14 |           role="alert"
15 |         >
16 |           <strong>{capatalize(props.alert.type)}</strong>:{props.alert.msg}
17 |         </div>
18 |       )}
19 |     </div>
20 |   );
21 | }
22 | 
23 | export default Alert;
24 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 
40 | 
41 |   
42 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Home from "./Home";
 3 | import About from "./About";
 4 | import Contact from "./Contact";
 5 | import Service from "./Service";
 6 | import { Routes, Route } from "react-router-dom";
 7 | import Navbar from "./Navbar";
 8 | import data from "./data.json";
 9 | import Footer from "./Footer";
10 | import ChatBot from "./chatBot"
11 | 
12 | const App = () => {
13 |   return (
14 |     <>
15 |       <Navbar />
16 |       <Routes>
17 |         <Route exact path="/" element={<Home />} />
18 |         <Route exact path="/home" element={<Home />} />
19 |         <Route exact path="/about" element={<About />} />
20 |         <Route exact path="/service" element={<Service />} />
21 |         <Route exact path="/contact" element={<Contact />} />
22 |         <Route exact path="/chatBot" element={<ChatBot />} />
23 | 
24 |         {/* <Navigate to="/"/> */}
25 |       </Routes>
26 |       <Footer footer={data.footer} />
27 |     </>
28 |   );
29 | };
30 | 
31 | export default App;
32 | 


--------------------------------------------------------------------------------
/src/Card.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import AOS from 'aos';
 3 | import 'aos/dist/aos.css';
 4 | import "./card.css"
 5 | import { Link } from "react-router-dom";
 6 | // import web from "../src/images/serviceImg.jpg";
 7 | AOS.init()
 8 | 
 9 | const Card = (props) => {
10 |   return (
11 |     <>
12 | 
13 |       <div data-aos="fade-up" data-aos-duration="1500" className="col-md-4 col-10 mx-auto ">
14 |         <div className="card box-shadows transition">
15 |           <img src={props.imgSrc} className="card-img-top jaiho" alt="..." />
16 |           <div className="card-body">
17 |             <h5 className="card-title">{props.name}</h5>
18 |             <p className="card-text">
19 |               Some quick example text to build on the card title and
20 |               make up the bulk of the card's content.
21 |             </p>
22 |             <Link to="#" className="btn btn-primary">
23 |               Go somewhere
24 |             </Link>
25 |           </div>
26 |         </div>
27 |       </div>
28 | 
29 | 
30 |     </>
31 |   );
32 | };
33 | export default Card;
34 | 


--------------------------------------------------------------------------------
/src/Common.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | // import Web from "../src/images/img1.svg";
 3 | import { Link } from "react-router-dom";
 4 | import "./common.css";
 5 | 
 6 | const Common = (props) => {
 7 |   return (
 8 |     <>
 9 |       <section id="header" className="d-flex align-items-center ">
10 |         <div className="container-fluid nav_bg">
11 |           <div className="row">
12 |             <div className="col-10 mx-auto">
13 |               <div className="row">
14 |                 <div className="col-md-6 mt-md-5 pt-md-5 pt-lg-0 order-2 order-lg-1 d-flex justify-content-center flex-column">
15 |                   <h1 className="text-start">
16 |                     {props.name}
17 |                     <br /> <div className="brand-name">Adii Bhai</div>
18 |                   </h1>
19 |                   <h2 className="pg">
20 |                     We are the team of talented developers making website.
21 |                   </h2>
22 | 
23 |                   <div className="mt-3">
24 |                     <Link
25 |                       to={props.btLink}
26 |                       className="btn btn-outline-primary zoom"
27 |                     >
28 |                       {props.btname}
29 | 
30 |                     </Link>
31 |                   </div>
32 |                 </div>
33 | 
34 |                 <div className="col-lg-6 order-1 order-lg-2 header-img">
35 |                   <img
36 |                     src={props.imgSrc}
37 |                     className="img-fluid animated"
38 |                     alt="home-img"
39 |                   />
40 |                 </div>
41 |               </div>
42 |             </div>
43 |           </div>
44 |         </div>
45 |       </section>
46 |     </>
47 |   );
48 | };
49 | 
50 | export default Common;
51 | 


--------------------------------------------------------------------------------
/src/Contact.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import "../src/contact.css"
 3 | const Contact=()=>{
 4 | 
 5 |     const [data,setData]= useState({
 6 |         name:"",
 7 |         phone:"",
 8 |         email:"",
 9 |         msg:"",
10 | });
11 | 
12 | const InputEvent=(event)=>{
13 |     const{name,value}=event.target;
14 | 
15 |     setData((preVal)=>{
16 |         return{
17 |             ...preVal,
18 |             [name]:value,
19 |         };
20 |     });
21 | };
22 | 
23 | const formSubmit=(e)=>{
24 | e.preventDefault();
25 | alert(`${data.name}`);
26 | };
27 | 
28 |     return(
29 |         <>
30 |          <div class="container">
31 | 	<div class="row">
32 | 			<h1>contact us</h1>
33 | 	</div>
34 | 	<div class="row">
35 | 			<h4 >We'd love to hear from you!</h4>
36 | 	</div>
37 | 	<div class="row input-container">
38 | 			<div class="col-xs-12">
39 | 				<div class="styled-input wide">
40 | 					<input type="text" required />
41 | 					<label>Name</label> 
42 | 				</div>
43 | 			</div>
44 | 			<div class="col-md-6 col-sm-12">
45 | 				<div class="styled-input">
46 | 					<input type="text" required />
47 | 					<label>Email</label> 
48 | 				</div>
49 | 			</div>
50 | 			<div class="col-md-6 col-sm-12">
51 | 				<div class="styled-input" >
52 | 					<input type="text" required />
53 | 					<label>Phone Number</label> 
54 | 				</div>
55 | 			</div>
56 | 			<div class="col-xs-12">
57 | 				<div class="styled-input wide">
58 | 					<textarea required></textarea>
59 | 					<label>Message</label>
60 | 				</div>
61 | 			</div>
62 | 			<div class="col-xs-12">
63 | 				<div class="btn-lrg submit-btn">Send Message</div>
64 | 			</div>
65 | 	</div>
66 | </div>
67 | 
68 |             </>
69 |     );
70 | };
71 | 
72 | export default Contact;


--------------------------------------------------------------------------------
/src/Footer.css:
--------------------------------------------------------------------------------
 1 | .footer {
 2 |     display: grid;
 3 |     grid-template-columns: 1fr 1fr 3fr 2fr;
 4 |     padding: 4.5vmax 110px;
 5 |     background-color: rgb(37, 37, 37);
 6 |     color: rgb(197, 197, 197);
 7 | }
 8 | 
 9 | @media screen and (max-width: 768px) {
10 |     .footer {
11 |         grid-template-columns: auto auto auto;
12 |         padding: 4.5vmax 50px;
13 |     }
14 | }
15 | 
16 | .footer div {
17 |     margin: 1vmax;
18 |     display: flex;
19 |     flex-direction: column;
20 | }
21 | 
22 | .footer div:nth-child(2) {
23 |     display: block;
24 | }
25 | 
26 | .footer div:nth-child(2) a {
27 |     display: inline-block;
28 | }
29 | 
30 | .footer div a {
31 |     color: rgb(197, 197, 197);
32 |     font-size: 1vmax;
33 |     text-decoration: none;
34 |     margin: 0.6vmax 0;
35 | }
36 | 
37 | .footer div a:hover {
38 |     color: white;
39 | }
40 | 
41 | .footer div:last-child div {
42 |     width: 45%;
43 |     margin: 1vmax 0;
44 |     font-size: 0.8vmax;
45 | }
46 | 
47 | .footer div:last-child button {
48 |     width: 50%;
49 |     border: 1px solid white;
50 |     background-color: rgb(37, 37, 37);
51 |     color: white;
52 |     padding: 0.6vmax 0;
53 |     font-weight: 00;
54 |     font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
55 |     transition: all 0.5s;
56 |     font-size: 0.98vmax;
57 | }
58 | 
59 | .footer div:last-child button:hover {
60 |     background-color: white;
61 |     color: rgb(37, 37, 37);
62 | }
63 | 
64 | .footerBorder {
65 |     background-color: rgb(37, 37, 37);
66 |     color: white;
67 | }
68 | 
69 | .footerBorder div {
70 |     border-top: 1px solid rgba(197, 197, 197, 0.185);
71 |     color: rgb(197, 197, 197);
72 |     width: 90vmax;
73 |     margin: auto;
74 |     padding: 2vmax;
75 |     font-size: 0.98vmax;
76 | }


--------------------------------------------------------------------------------
/src/Footer.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import "./Prefooter.css";
  3 | import "./Footer.css";
  4 | import { Link } from "react-router-dom";
  5 | 
  6 | const Footer = ({ footer }) => {
  7 |   return (
  8 |     <>
  9 |       <div className="PreFooter2">
 10 |         
 11 | 
 12 |         <div>
 13 |           <div>
 14 |             <input
 15 |               type="email"
 16 |               name="email"
 17 |               placeholder="Enter Email Address"
 18 |             />
 19 |             <button>›</button>
 20 |           </div>
 21 |           <span>Thanks. You're on our email list for special offers.</span>
 22 |         </div>
 23 | 
 24 |         <div>
 25 |           <p>FOLLOW US</p>
 26 |           <span>We want to hear from you!</span>
 27 |         </div>
 28 | 
 29 |         <div>
 30 |           {facebookIcon} {youtubeIcon} {instagramIcon} {twitterIcon}
 31 |         </div>
 32 |       </div>
 33 | 
 34 |       <div className="footer">
 35 |        
 36 |         <div>
 37 |           <p> ABOUT US</p>
 38 |           {facebookIcon} {youtubeIcon} {instagramIcon} {twitterIcon}
 39 |         </div>
 40 |         <div>
 41 |           <p> CONTACT US</p>
 42 |           {footer.contactUs.map((item, index) => (
 43 |             <a key={item.url} href={item.url}>
 44 |               {item.name}
 45 |             </a>
 46 |           ))}
 47 |         </div>
 48 |         {/* <div></div>
 49 |         <div></div> */}
 50 | 
 51 |         <div>
 52 |           <div>Chat with our Virtual AI Bot(24/7 Live Agent Support)</div>
 53 |           <Link to="/chatBot"><button>CHAT NOW</button></Link>
 54 |         </div>
 55 |       </div>
 56 |       <div className="footerBorder">
 57 |         <div>
 58 |           {" "}
 59 |           Copyright © 2010 - 2022 Adarsh.io Services. All Rights Reserved
 60 |         </div>
 61 |       </div>
 62 |     </>
 63 |   );
 64 | };
 65 | 
 66 | const youtubeIcon = (
 67 |   <svg
 68 |     xmlns="http://www.w3.org/2000/svg"
 69 |     width="24"
 70 |     height="24"
 71 |     viewBox="-35.20005 -41.33325 305.0671 247.9995"
 72 |   >
 73 |     <path d="M229.763 25.817c-2.699-10.162-10.65-18.165-20.747-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.554 7.652 7.602 15.655 4.904 25.817 0 44.237 0 82.667 0 82.667s0 38.43 4.904 56.85c2.698 10.162 10.65 18.164 20.747 20.881 18.3 4.935 91.682 4.935 91.682 4.935s73.383 0 91.683-4.935c10.097-2.717 18.048-10.72 20.747-20.88 4.904-18.422 4.904-56.851 4.904-56.851s0-38.43-4.904-56.85" />
 74 |     <path d="M93.333 117.558l61.334-34.89-61.334-34.893z" fill="#fff" />
 75 |   </svg>
 76 | );
 77 | 
 78 | const twitterIcon = (
 79 |   <svg
 80 |     xmlns="http://www.w3.org/2000/svg"
 81 |     width="24"
 82 |     height="24"
 83 |     viewBox="-44.7006 -60.54775 387.4052 363.2865"
 84 |   >
 85 |     <path d="M93.719 242.19c112.46 0 173.96-93.168 173.96-173.96 0-2.646-.054-5.28-.173-7.903a124.338 124.338 0 0030.498-31.66c-10.955 4.87-22.744 8.148-35.11 9.626 12.622-7.57 22.313-19.543 26.885-33.817a122.62 122.62 0 01-38.824 14.841C239.798 7.433 223.915 0 206.326 0c-33.764 0-61.144 27.381-61.144 61.132 0 4.798.537 9.465 1.586 13.941-50.815-2.557-95.874-26.886-126.03-63.88a60.977 60.977 0 00-8.279 30.73c0 21.212 10.794 39.938 27.208 50.893a60.685 60.685 0 01-27.69-7.647c-.009.257-.009.507-.009.781 0 29.61 21.075 54.332 49.051 59.934a61.218 61.218 0 01-16.122 2.152 60.84 60.84 0 01-11.491-1.103c7.784 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.798-.28-14.584-.846 27.059 17.344 59.189 27.464 93.722 27.464" />
 86 |   </svg>
 87 | );
 88 | 
 89 | const facebookIcon = (
 90 |   <svg
 91 |     width="24"
 92 |     height="24"
 93 |     xmlns="http://www.w3.org/2000/svg"
 94 |     data-name="Layer 1"
 95 |     viewBox="0 0 24 24"
 96 |   >
 97 |     <path d="M15.12,5.32H17V2.14A26.11,26.11,0,0,0,14.26,2C11.54,2,9.68,3.66,9.68,6.7V9.32H6.61v3.56H9.68V22h3.68V12.88h3.06l.46-3.56H13.36V7.05C13.36,6,13.64,5.32,15.12,5.32Z" />
 98 |   </svg>
 99 | );
100 | 
101 | const instagramIcon = (
102 |   <svg
103 |     width="24"
104 |     height="24"
105 |     xmlns="http://www.w3.org/2000/svg"
106 |     data-name="Layer 1"
107 |     viewBox="0 0 24 24"
108 |   >
109 |     <path d="M12,9.52A2.48,2.48,0,1,0,14.48,12,2.48,2.48,0,0,0,12,9.52Zm9.93-2.45a6.53,6.53,0,0,0-.42-2.26,4,4,0,0,0-2.32-2.32,6.53,6.53,0,0,0-2.26-.42C15.64,2,15.26,2,12,2s-3.64,0-4.93.07a6.53,6.53,0,0,0-2.26.42A4,4,0,0,0,2.49,4.81a6.53,6.53,0,0,0-.42,2.26C2,8.36,2,8.74,2,12s0,3.64.07,4.93a6.86,6.86,0,0,0,.42,2.27,3.94,3.94,0,0,0,.91,1.4,3.89,3.89,0,0,0,1.41.91,6.53,6.53,0,0,0,2.26.42C8.36,22,8.74,22,12,22s3.64,0,4.93-.07a6.53,6.53,0,0,0,2.26-.42,3.89,3.89,0,0,0,1.41-.91,3.94,3.94,0,0,0,.91-1.4,6.6,6.6,0,0,0,.42-2.27C22,15.64,22,15.26,22,12S22,8.36,21.93,7.07Zm-2.54,8A5.73,5.73,0,0,1,19,16.87,3.86,3.86,0,0,1,16.87,19a5.73,5.73,0,0,1-1.81.35c-.79,0-1,0-3.06,0s-2.27,0-3.06,0A5.73,5.73,0,0,1,7.13,19a3.51,3.51,0,0,1-1.31-.86A3.51,3.51,0,0,1,5,16.87a5.49,5.49,0,0,1-.34-1.81c0-.79,0-1,0-3.06s0-2.27,0-3.06A5.49,5.49,0,0,1,5,7.13a3.51,3.51,0,0,1,.86-1.31A3.59,3.59,0,0,1,7.13,5a5.73,5.73,0,0,1,1.81-.35h0c.79,0,1,0,3.06,0s2.27,0,3.06,0A5.73,5.73,0,0,1,16.87,5a3.51,3.51,0,0,1,1.31.86A3.51,3.51,0,0,1,19,7.13a5.73,5.73,0,0,1,.35,1.81c0,.79,0,1,0,3.06S19.42,14.27,19.39,15.06Zm-1.6-7.44a2.38,2.38,0,0,0-1.41-1.41A4,4,0,0,0,15,6c-.78,0-1,0-3,0s-2.22,0-3,0a4,4,0,0,0-1.38.26A2.38,2.38,0,0,0,6.21,7.62,4.27,4.27,0,0,0,6,9c0,.78,0,1,0,3s0,2.22,0,3a4.27,4.27,0,0,0,.26,1.38,2.38,2.38,0,0,0,1.41,1.41A4.27,4.27,0,0,0,9,18.05H9c.78,0,1,0,3,0s2.22,0,3,0a4,4,0,0,0,1.38-.26,2.38,2.38,0,0,0,1.41-1.41A4,4,0,0,0,18.05,15c0-.78,0-1,0-3s0-2.22,0-3A3.78,3.78,0,0,0,17.79,7.62ZM12,15.82A3.81,3.81,0,0,1,8.19,12h0A3.82,3.82,0,1,1,12,15.82Zm4-6.89a.9.9,0,0,1,0-1.79h0a.9.9,0,0,1,0,1.79Z" />
110 |   </svg>
111 | );
112 | 
113 | export default Footer;
114 | 


--------------------------------------------------------------------------------
/src/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Web from "../src/images/home.jpg";
 3 | // import {Link} from "react-router-dom";
 4 | import Common from "./Common";
 5 | 
 6 | const Home = () => {
 7 | 
 8 |     return (
 9 |         <>
10 |             <Common name="Grow your business with" btname="Get Started" btLink="/service" imgSrc={Web} />
11 |         </>
12 |     );
13 | };
14 | 
15 | export default Home;


--------------------------------------------------------------------------------
/src/Navbar.css:
--------------------------------------------------------------------------------
 1 | .search-bar:hover {
 2 |     background-color: #0d6efd;
 3 |     color: white;
 4 | }
 5 | 
 6 | .width {
 7 |     /* width: 42vmax; */
 8 |     width: 100%;
 9 |     height: 3vmax;
10 | }
11 | 
12 | .search-bar {
13 |     height: 3vmax;
14 |     display: flex;
15 |     color: #0d6efd;
16 |     border-color: #0d6efd;
17 |     justify-content: center;
18 |     align-items: center;
19 | }
20 | 
21 | @media screen and (max-width: 640px) {
22 |     #searchbox {
23 |         display: block;
24 |     }
25 |     #secondaryLogo {
26 |         display: block;
27 |         width: auto;
28 |     }
29 | }


--------------------------------------------------------------------------------
/src/Navbar.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { Link } from "react-router-dom";
  3 | import "./Navbar.css";
  4 | 
  5 | import Button from "react-bootstrap/Button";
  6 | 
  7 | import Form from "react-bootstrap/Form";
  8 | 
  9 | // import PropTypes from "prop-types";
 10 | 
 11 | const Navbar = () => {
 12 |   return (
 13 |     <>
 14 |       <div className="container-fluid nav_bg">
 15 |         <div className="row">
 16 |           <div className="col-12 col-md-10 mx-auto">
 17 |             <nav className="navbar navbar-expand-lg bg-light">
 18 |               <div className="container-fluid">
 19 |                 <Link className="navbar-brand namea" to="/">
 20 |                   Adarsh.io
 21 |                 </Link>
 22 |                 <button
 23 |                   className="navbar-toggler"
 24 |                   type="button"
 25 |                   data-bs-toggle="collapse"
 26 |                   data-bs-target="#navbarSupportedContent"
 27 |                   aria-controls="navbarSupportedContent"
 28 |                   aria-expanded="false"
 29 |                   aria-label="Toggle navigation"
 30 |                 >
 31 |                   <span className="navbar-toggler-icon">
 32 | 
 33 |                     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fillRule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z" /></svg>
 34 |                   </span>
 35 |                 </button>
 36 | 
 37 |                 <Form className="d-flex ">
 38 |                   <Form.Control
 39 |                     type="search"
 40 |                     placeholder="Search"
 41 |                     className="me-2 width"
 42 |                     aria-label="Search"
 43 |                   />
 44 |                   <Button variant="outline-success" className="search-bar">
 45 |                     Search
 46 |                   </Button>
 47 |                 </Form>
 48 |                 <div
 49 |                   className="collapse navbar-collapse"
 50 |                   id="navbarSupportedContent"
 51 |                 >
 52 |                   <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
 53 |                     <li className="nav-item sasur">
 54 |                       <Link
 55 |                         className="nav-link active"
 56 |                         activeClassName="class_active"
 57 |                         aria-current="page"
 58 |                         to="/"
 59 |                       >
 60 |                         Home
 61 |                       </Link>
 62 |                     </li>
 63 |                     <li className="nav-item sasur">
 64 |                       <Link
 65 |                         className="nav-link active"
 66 |                         activeClassName="class_active"
 67 |                         aria-current="page"
 68 |                         to="/about"
 69 |                       >
 70 |                         About
 71 |                       </Link>
 72 |                     </li>
 73 |                     <li className="nav-item sasur">
 74 |                       <Link
 75 |                         className="nav-link active"
 76 |                         activeClassName="class_active"
 77 |                         aria-current="page"
 78 |                         to="/service"
 79 |                       >
 80 |                         Service
 81 |                       </Link>
 82 |                     </li>
 83 |                     <li className="nav-item sasur">
 84 |                       <Link
 85 |                         className="nav-link active"
 86 |                         activeClassName="class_active"
 87 |                         aria-current="page"
 88 |                         to="/contact"
 89 |                       >
 90 |                         Contact
 91 |                       </Link>
 92 |                     </li>
 93 |                   </ul>
 94 |                 </div>
 95 |               </div>
 96 |             </nav>
 97 |           </div>
 98 |         </div>
 99 |       </div>
100 |     </>
101 |   );
102 | };
103 | 
104 | export default Navbar;
105 | 


--------------------------------------------------------------------------------
/src/Prefooter.css:
--------------------------------------------------------------------------------
  1 | .PreFooter {
  2 |     margin: 5vmax 0 0 0;
  3 |     background-color: white;
  4 |     padding: 1vmax;
  5 |     padding-bottom: 0;
  6 |     display: grid;
  7 |     grid-template-columns: repeat(3, 1fr);
  8 | }
  9 | 
 10 | .PreFooter>div {
 11 |     align-items: center;
 12 |     justify-content: center;
 13 |     display: flex;
 14 |     color: rgba(66, 66, 66, 0.829);
 15 |     cursor: pointer;
 16 | }
 17 | 
 18 | .PreFooter>div:hover svg {
 19 |     fill: rgb(34, 34, 34);
 20 | }
 21 | 
 22 | .PreFooter>div:hover p {
 23 |     color: rgb(19, 18, 18);
 24 | }
 25 | 
 26 | .PreFooter svg {
 27 |     transform: scale(2) translateY(-0.2vmax);
 28 |     fill: rgba(37, 37, 37, 0.322);
 29 |     margin: 2vmax;
 30 | }
 31 | 
 32 | 
 33 | /*----Pre-FOOTER-2____*/
 34 | 
 35 | .PreFooter2 {
 36 |     display: grid;
 37 |     padding: 0 100px;
 38 |     height: 150px;
 39 |     margin: 20px 0;
 40 |     grid-template-columns: repeat(4, auto);
 41 | }
 42 | 
 43 | .PreFooter2>div.mediaSocial {
 44 |     display: flex;
 45 | }
 46 | 
 47 | @media screen and (max-width: 768px) {
 48 |     .PreFooter2 {
 49 |         padding: 0;
 50 |         grid-template-columns: auto auto;
 51 |     }
 52 | }
 53 | 
 54 | .PreFooter2 div {
 55 |     display: flex;
 56 |     flex-direction: column;
 57 |     justify-content: center;
 58 |     align-items: center;
 59 | }
 60 | 
 61 | .PreFooter2 div p {
 62 |     color: rgba(0, 0, 0, 0.842);
 63 |     font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
 64 |     font-size: 1.8vmax;
 65 |     width: 18vmax;
 66 |     margin: 0;
 67 | }
 68 | 
 69 | .PreFooter2 div span {
 70 |     color: rgba(51, 51, 51, 0.842);
 71 |     width: 18vmax;
 72 |     font-size: 1vmax;
 73 |     padding-top: 4px;
 74 | }
 75 | 
 76 | .PreFooter2>div>div>input {
 77 |     border: none;
 78 |     outline: none;
 79 |     padding: 0.5vmax 1vmax;
 80 |     background-color: rgb(255, 255, 255);
 81 |     color: #000;
 82 |     font-size: 1.4vmax;
 83 |     width: 20.4vmax;
 84 | }
 85 | 
 86 | .PreFooter2>div>div>button {
 87 |     border: none;
 88 |     padding: 0.5vmax;
 89 |     background-color: rgb(255, 255, 255);
 90 |     outline: none;
 91 | }
 92 | 
 93 | .PreFooter2>div>div {
 94 |     border: 1px solid rgba(126, 126, 126, 0.493);
 95 | }
 96 | 
 97 | .PreFooter2 div:nth-child(2) span {
 98 |     width: 22vmax;
 99 | }
100 | 
101 | .PreFooter2 div:nth-child(2) div {
102 |     flex-direction: row;
103 | }
104 | 
105 | 
106 | /* .PreFooter2 div:nth-child(3) {
107 |     justify-content: center;
108 |     align-items: flex-end;
109 | } */
110 | 
111 | 
112 | /* .PreFooter2 div:nth-child(3) p {
113 |     width: 14vmax;
114 | } */
115 | 
116 | 
117 | /* .PreFooter2 div:nth-child(3) span {
118 |     width: 14vmax;
119 | } */
120 | 
121 | .PreFooter2 div:nth-child(4) {
122 |     flex-direction: row;
123 | }
124 | 
125 | .PreFooter2 div:nth-child(4) svg {
126 |     cursor: pointer;
127 |     margin: 1vmax;
128 |     fill: rgba(138, 138, 138, 0.705);
129 | }
130 | 
131 | .PreFooter2 div:nth-child(4) svg :hover {
132 |     fill: rgb(94, 94, 94);
133 | }


--------------------------------------------------------------------------------
/src/Sdata.jsx:
--------------------------------------------------------------------------------
 1 | import web from '../src/images/i1.jpg';
 2 | import bhoot from '../src/images/i2.jpg';
 3 | import apple from '../src/images/i3.jpg';
 4 | import mango from '../src/images/i4.jpg';
 5 | import bolly from '../src/images/i5.jpg';
 6 | import wood from '../src/images/i6.jpg';
 7 | 
 8 | 
 9 | const sData=[
10 |     {
11 |         imgSrc:web,
12 |         name:"Card Title1"
13 |     },
14 |     {
15 |         imgSrc:bhoot,
16 |         name:"Card Title2"
17 |     },
18 |     {
19 |         imgSrc:apple,
20 |         name:"Card Title3"
21 |     },
22 |     {
23 |         imgSrc:mango,
24 |         name:"Card Title4"
25 |     },
26 |     {
27 |         imgSrc:bolly,
28 |         name:"Card Title5"
29 |     },
30 |     {
31 |         imgSrc:wood,
32 |         name:"Card Title6"
33 |     },
34 |     
35 | ];
36 | 
37 | export default sData;
38 | 
39 | 


--------------------------------------------------------------------------------
/src/Service.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | import web from "../src/images/serviceImg.jpg";
 4 | import Card from "./Card";
 5 | import sData from "./Sdata";
 6 | 
 7 | const Service = () => {
 8 |   return (
 9 |     <>
10 |       <div className="my-5">
11 |         <h1 className="text-center">Our Services</h1>
12 |       </div>
13 | 
14 |       <div className="container-fluid ">
15 |         <div className="row">
16 |           <div className="col-10 mx-auto">
17 |             <div className="row gy-4">
18 |              {
19 |                      sData.map((val,ind)=>{
20 | 
21 |                       return <Card key={ind} imgSrc={val.imgSrc} name={val.name}/>
22 |                      })
23 | 
24 |              }
25 | 
26 |                 </div>
27 |               </div>
28 |             </div>
29 |           </div>
30 |         
31 |       
32 |     </>
33 |   );
34 | };
35 | 
36 | export default Service;
37 | 


--------------------------------------------------------------------------------
/src/about.css:
--------------------------------------------------------------------------------
1 | .c--size{
2 |     height: 42em !important;
3 | 
4 | }


--------------------------------------------------------------------------------
/src/card.css:
--------------------------------------------------------------------------------
 1 | .box-shadows {
 2 |   box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2),
 3 |     -5px -5px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.3),
 4 |     -5px -5px 15px rgba(255, 255, 255, 0.1);
 5 | }
 6 | 
 7 | .transition:hover {
 8 |   border-radius: 10px;
 9 |   transform: scale(1.05);
10 | }
11 | 


--------------------------------------------------------------------------------
/src/chatBot.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Poppins:wght@200;300&display=swap");
 2 | 
 3 | .chatcontainer {
 4 |     --light-color: #fff;
 5 |     height: 31em;
 6 |     width: 37vw;
 7 |     background: var(--light-color);
 8 |     position: relative;
 9 |     display: block;
10 |     bottom: 0vw;
11 |     right: -31vw;
12 |     box-shadow: 0px 0px 15px 0px black;
13 | }
14 | .chat-header {
15 |   height: 60px;
16 |   display: flex;
17 |   align-items: center;
18 |   padding: 0px 30px;
19 |   background-color: #0652c0;
20 |   color: var(--light-color);
21 |   font-size: 1.5rem;
22 | }
23 | 
24 | .chat-header .title {
25 |     padding-left: 10px;
26 | }
27 | .chat-body {
28 |     height: 83%;
29 |     display: flex;
30 |     flex-direction: column;
31 |     padding: 8px 10px;
32 |     align-items: flex-end;
33 |     overflow-y: auto;
34 | }
35 | .chat-input {
36 |   height: 60px;
37 |   display: flex;
38 |   align-items: center;
39 |   border-top: 1px solid #ccc;
40 |   translate: 0.1em -2em;
41 | }
42 | .input-sec {
43 |   flex: 9;
44 | }
45 | .chatsend {
46 |   flex: 1;
47 |   padding-right: 4px;
48 | }
49 | #chattxtInput {
50 |   line-height: 30px;
51 |   padding: 8px 10px;
52 |   border: none;
53 |   outline: none;
54 |   caret-color: black;
55 |   font-size: 1rem;
56 |   width: 100%;
57 | }
58 | 
59 | .chatbot-message,
60 | .user-message {
61 |   padding: 8px;
62 |   background: #ccc;
63 |   margin: 5px;
64 |   width: max-content;
65 |   border-radius: 10px 3px 10px 10px;
66 | }
67 | .chatbot-message {
68 |   background: #0652c0;
69 |   display: flex;
70 |   flex-wrap: wrap;
71 |   color: var(--light-color);
72 |   align-self: flex-start;
73 |   border-radius: 10px 10px 3px 10px;
74 | }
75 | 


--------------------------------------------------------------------------------
/src/chatBot.jsx:
--------------------------------------------------------------------------------
 1 | import { React,useState} from "react";
 2 | import sendImg from "./images/icons8-send-25.png";
 3 | import "./chatBot.css";
 4 | 
 5 | export default function ChatBot() {
 6 |   const chatBody = document.querySelector(".chat-body");
 7 |     const [text, setText] = useState("");
 8 |   
 9 | //   txtInput.addEventListener("keyup", (event) => {
10 | //     if (event.keyCode === 13) {
11 | //       renderUserMessage();
12 | //     }
13 | //   });
14 |     
15 |   const renderUserMessage = () => {
16 |         if (text) {
17 |             let userInput = text;
18 |             renderMessageEle(userInput, "user");
19 |             setText("");
20 |             setTimeout(() => {
21 |               renderChatbotResponse(userInput);
22 |               setScrollPosition();
23 |             }, 600);
24 |         }
25 |   };
26 | 
27 |   const renderChatbotResponse = (userInput) => {
28 |     const res = getChatbotResponse(userInput);
29 |     renderMessageEle(res);
30 |   };
31 | 
32 |   const renderMessageEle = (txt, type) => {
33 |     let className = "user-message";
34 |     if (type !== "user") {
35 |       className = "chatbot-message";
36 |     }
37 |     const messageEle = document.createElement("div");
38 |     const txtNode = document.createTextNode(txt);
39 |     messageEle.classList.add(className);
40 |     messageEle.append(txtNode);
41 |     chatBody.append(messageEle);
42 |   };
43 | 
44 |   const getChatbotResponse = (userInput) => {
45 |     return responseObj[userInput.toLowerCase()] === undefined
46 |       ? "Please try something else"
47 |       : responseObj[userInput.toLowerCase()];
48 |   };
49 | 
50 |   const setScrollPosition = () => {
51 |     if (chatBody.scrollHeight > 0) {
52 |       chatBody.scrollTop = chatBody.scrollHeight;
53 |     }
54 |   };
55 | 
56 |   const responseObj = {
57 |     hello: "Hey ! How are you doing ?",
58 |     hey: "Hey! What's Up",
59 |     hi: "Hello! What's Up",
60 |     "what does adi bhai do": "We are the team of talented developers making website.",
61 |       "what is this website": "We are the team of talented developers making website.",
62 |       "who are you": "I am a bot who is here to answer your queries",
63 |       "who are you?": "I am a bot who is here to answer your queries",
64 |     "i want to know more about you people": `You can contact us using email or DM us on instagram, facebook or twitter`,
65 |    "bye":"Have a great day!",
66 |    "thanks":"Thank You!",
67 |     today: new Date().toDateString(),
68 |     time: new Date().toLocaleTimeString(),
69 |   };
70 | 
71 |   return (
72 |       <div className="chatcontainer">
73 |         <div className="chat-header">
74 |           <div className="chattitle">Let's Chat</div>
75 |         </div>
76 |         <div className="chat-body"></div>
77 |         <div className="chat-input">
78 |           <div className="input-sec">
79 |             <input
80 |               type="text"
81 |               id="chattxtInput" value={text}
82 |                       placeholder="Type here" onChange={(e) => {
83 |                   setText(e.target.value)
84 |               }}
85 |             autoFocus onKeyUp={(e) => {
86 |                             if (e.key === "Enter") {
87 |                                 renderUserMessage();
88 |                               }
89 |               }}
90 |             />
91 |           </div>
92 |         <div className="chatsend" id="sendChat" >
93 |                   <img src={sendImg} alt="send" style={{ width: "-webkit-fill-available" }} onClick={() => { renderUserMessage() }}/>
94 |           </div>
95 |         </div>
96 |       </div>
97 |   );
98 | }
99 | 


--------------------------------------------------------------------------------
/src/common.css:
--------------------------------------------------------------------------------
1 | .zoom {
2 |   transition: all 0.5s;
3 | }
4 | .zoom:hover {
5 |   transform: scale(1.15);
6 | }
7 | 


--------------------------------------------------------------------------------
/src/contact.css:
--------------------------------------------------------------------------------
  1 | 
  2 | body::-webkit-scrollbar {
  3 |     display: none;
  4 |   }
  5 | 
  6 |   /* Hide scrollbar for IE, Edge and Firefox */
  7 | body{
  8 |   -ms-overflow-style: none;  /* IE and Edge */
  9 |   scrollbar-width: none;  /* Firefox */
 10 | }
 11 | h1 {
 12 |     font-family: 'Poppins', sans-serif, 'arial';
 13 |     font-weight: 600;
 14 |     font-size: 72px;
 15 |     color: black;
 16 |     text-align: center;
 17 | }
 18 | 
 19 | h4 {
 20 |     font-family: 'Roboto', sans-serif, 'arial';
 21 |     font-weight: 400;
 22 |     font-size: 20px;
 23 |     color: black;
 24 |     line-height: 1.5;
 25 |     text-align: center;
 26 | }
 27 | 
 28 | /* ///// inputs /////*/
 29 | 
 30 | input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
 31 |     font-size: 0.75em;
 32 |     color: #999;
 33 |     top: -5px;
 34 |     -webkit-transition: all 0.225s ease;
 35 |     transition: all 0.225s ease;
 36 | }
 37 | 
 38 | .styled-input {
 39 |     float: left;
 40 |     width: 293px;
 41 |     margin: 1rem 0;
 42 |     position: relative;
 43 |     border-radius: 4px;
 44 | }
 45 | 
 46 | @media only screen and (max-width: 768px){
 47 |     .styled-input {
 48 |         width:100%;
 49 |     }
 50 | }
 51 | 
 52 | .styled-input label {
 53 |     color: #999;
 54 |     padding: 1.3rem 30px 1rem 30px;
 55 |     position: absolute;
 56 |     top: 10px;
 57 |     left: 0;
 58 |     -webkit-transition: all 0.25s ease;
 59 |     transition: all 0.25s ease;
 60 |     pointer-events: none;
 61 | }
 62 | 
 63 | .styled-input.wide { 
 64 |     width: 650px;
 65 |     max-width: 100%;
 66 | }
 67 | 
 68 | input,
 69 | textarea {
 70 |     padding: 30px;
 71 |     border: 0;
 72 |     width: 100%;
 73 |     font-size: 1rem;
 74 |     background-color: #2d2d2d;
 75 |     color: white;
 76 |     border-radius: 4px;
 77 | }
 78 | 
 79 | input:focus,
 80 | textarea:focus { outline: 0; }
 81 | 
 82 | input:focus ~ span,
 83 | textarea:focus ~ span {
 84 |     width: 100%;
 85 |     -webkit-transition: all 0.075s ease;
 86 |     transition: all 0.075s ease;
 87 | }
 88 | 
 89 | textarea {
 90 |     width: 100%;
 91 |     min-height: 15em;
 92 | }
 93 | 
 94 | .input-container {
 95 |     width: 650px;
 96 |     max-width: 100%;
 97 |     margin: 20px auto 25px auto;
 98 | }
 99 | 
100 | .submit-btn {
101 |     float: right;
102 |     padding: 7px 35px;
103 |     border-radius: 60px;
104 |     display: inline-block;
105 |     background-color: #4b8cfb;
106 |     color: white;
107 |     font-size: 18px;
108 |     cursor: pointer;
109 |     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),
110 |               0 2px 10px 0 rgba(0,0,0,0.07);
111 |     -webkit-transition: all 300ms ease;
112 |     transition: all 300ms ease;
113 | }
114 | 
115 | .submit-btn:hover {
116 |     transform: translateY(1px);
117 |     box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
118 |               0 1px 1px 0 rgba(0,0,0,0.09);
119 | }
120 | 
121 | @media (max-width: 768px) {
122 |     .submit-btn {
123 |         width:100%;
124 |         float: none;
125 |         text-align:center;
126 |     }
127 | }
128 | 
129 | input[type=checkbox] + label {
130 |   color: #ccc;
131 |   font-style: italic;
132 | } 
133 | 
134 | input[type=checkbox]:checked + label {
135 |   color: #f00;
136 |   font-style: normal;
137 | }


--------------------------------------------------------------------------------
/src/data.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "logo": "https://i01.appmifile.com/webfile/globalimg/pandora/mi-logo.svg",
  3 |   "miPhones": [
  4 |     {
  5 |       "name": "Mi 11 Ultra 5G",
  6 |       "price": "₹ 69,999",
  7 |       "image": "https://i02.appmifile.com/867_operator_in/23/04/2021/3849c44ac78d65621750a114811711f9.png?width=140&height=140"
  8 |     },
  9 |     {
 10 |       "name": "Mi 11X Pro 5G",
 11 |       "price": "from ₹ 39,999",
 12 |       "image": "https://i02.appmifile.com/52_operator_in/04/03/2021/7db1136dfdc2a1e9fc639b56bc19f17f.png?width=140&height=140"
 13 |     },
 14 |     {
 15 |       "name": "Mi 11X 5G",
 16 |       "price": "from ₹ 29,999",
 17 |       "image": "https://i02.appmifile.com/368_operator_in/23/04/2021/93d54b25b3efc3b6e87a9d73004de1c3.png?width=140&height=140"
 18 |     },
 19 |     {
 20 |       "name": "Mi 10T Pro",
 21 |       "price": "₹ 36,999",
 22 |       "image": "https://i02.appmifile.com/406_operator_in/15/10/2020/4481bf3c3bb2ce53d9f4ac6ce1d7e312.png?width=140&height=140"
 23 |     },
 24 |     {
 25 |       "name": "Mi 10T",
 26 |       "price": "from ₹ 32,999",
 27 |       "image": "https://i02.appmifile.com/938_operator_in/15/10/2020/4e6b056c8984ad7031873ae9b5f564a5.png?width=140&height=140"
 28 |     },
 29 |     {
 30 |       "name": "Mi 10i",
 31 |       "price": "from ₹ 20,999",
 32 |       "image": "https://i02.appmifile.com/606_operator_in/05/01/2021/3de2b587f140a830fc732855a0a76035.png?width=140&height=140"
 33 |     }
 34 |   ],
 35 |   "redmiPhones": [
 36 |     {
 37 |       "name": "Redmi Note 10 Pro Max",
 38 |       "price": "from ₹ 18,999",
 39 |       "image": "https://i02.appmifile.com/45_operator_in/04/03/2021/890c4652df767017f4857c5e90647d2b.png?width=140&height=140"
 40 |     },
 41 |     {
 42 |       "name": "Redmi Note 10 Pro",
 43 |       "price": "from ₹ 15,999",
 44 |       "image": "https://i02.appmifile.com/52_operator_in/04/03/2021/7db1136dfdc2a1e9fc639b56bc19f17f.png?width=140&height=140"
 45 |     },
 46 |     {
 47 |       "name": "Redmi Note 10S",
 48 |       "price": "from ₹ 14,999",
 49 |       "image": "https://i02.appmifile.com/828_operator_in/13/05/2021/c52a15e98e975abedb43eb92bc5d3bcb.jpg?width=140&height=140"
 50 |     },
 51 |     {
 52 |       "name": "Redmi Note 10",
 53 |       "price": "from ₹ 12,499",
 54 |       "image": "https://i02.appmifile.com/205_operator_in/04/03/2021/0e33cafd058d5340bc4afb329bb84ca3.png?width=140&height=140"
 55 |     },
 56 |     {
 57 |       "name": "Redmi 9 Power",
 58 |       "price": "from ₹ 10,499",
 59 |       "image": "https://i02.appmifile.com/330_operator_in/17/12/2020/0d20a99f729de496ab65cda4f5389e4d.png?width=140&height=140"
 60 |     }
 61 |   ],
 62 |   "tv": [
 63 |     {
 64 |       "name": "Mi QLED TV 189.34cm (75)",
 65 |       "price": "₹ 1,24,999",
 66 |       "image": "https://i02.appmifile.com/620_operator_in/23/04/2021/3c98ae4c034583122a67669c840f249e.jpg?width=140&height=140"
 67 |     },
 68 |     {
 69 |       "name": "Mi QLED TV 4K 138.8 cm (55)",
 70 |       "price": "₹ 57,999",
 71 |       "image": "https://i02.appmifile.com/572_operator_in/16/12/2020/4d07d0c887a4c08fd05ca06e7cd574e3.jpg?width=140&height=140"
 72 |     },
 73 |     {
 74 |       "name": "Redmi Smart TV X Series",
 75 |       "price": "₹ 33,999",
 76 |       "image": "https://i02.appmifile.com/126_operator_in/24/03/2021/8864007fcaa4d9815f02b827c29f100f.png?width=140&height=140"
 77 |     },
 78 |     {
 79 |       "name": "Mi TV 4A 108 cm (43)",
 80 |       "price": "₹ 25,999",
 81 |       "image": "https://i02.appmifile.com/733_operator_in/07/09/2020/a032f1b0bb0025dcb1c12caab81a9d4b.png?width=140&height=140"
 82 |     },
 83 |     {
 84 |       "name": "Mi TV 4A 100 cm (40)",
 85 |       "price": "₹ 23,999",
 86 |       "image": "https://i02.appmifile.com/986_operator_in/01/06/2021/f2b7747ce2bf0365e4414eb323b97ed5.jpg?width=140&height=140"
 87 |     }
 88 |   ],
 89 |   "laptop": [
 90 |     {
 91 |       "name": "Mi Notebook 14 Horizon",
 92 |       "price": "From ₹ 54,999",
 93 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/81DAE22D-023B-1742-5400-32A7760B0962.jpg?width=140&height=140"
 94 |     },
 95 |     {
 96 |       "name": "Mi Notebook 14(IC)",
 97 |       "price": "From ₹ 43,999",
 98 |       "image": "https://i02.appmifile.com/763_operator_in/19/01/2021/4be770942f3352ad2e7e3a94e5d75a43.jpg?width=140&height=140"
 99 |     },
100 |     {
101 |       "name": "Mi Notebook 14",
102 |       "price": "From ₹ 41,999",
103 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/9534EF41-E7D9-025C-A287-B4BAFCA4A0F9.jpg?width=140&height=140"
104 |     },
105 |     {
106 |       "name": "Mi NoteBook 14 e-Learning Edition",
107 |       "price": "₹ 38,999",
108 |       "image": "https://i02.appmifile.com/234_operator_in/05/11/2020/5b641713340b4a542b75cf737ed2cd80.png?width=140&height=140"
109 |     },
110 |     {
111 |       "name": "Mi Webcam HD",
112 |       "price": "₹ 1,099",
113 |       "image": "https://i02.appmifile.com/504_operator_in/05/01/2021/d465ac7bca989e33487b4b4f2447c3ea.png?width=140&height=140"
114 |     }
115 |   ],
116 |   "fitnessAndLifeStyle": [
117 |     {
118 |       "name": "Mi Watch Revolve",
119 |       "price": "₹ 9,999",
120 |       "image": "https://i02.appmifile.com/669_operator_in/29/09/2020/492027bef78ed4c69cfd68c2d299d49f.png?width=140&height=140"
121 |     },
122 |     {
123 |       "name": "Redmi Watch GPS",
124 |       "price": "₹ 3,999",
125 |       "image": "https://i02.appmifile.com/594_operator_in/13/05/2021/7a6d0c6dfdc36b8e65a210c6e40e5171.jpg?width=140&height=140"
126 |     },
127 |     {
128 |       "name": "Mi Smart Band 5",
129 |       "price": "₹ 2,499",
130 |       "image": "https://i02.appmifile.com/867_operator_in/29/09/2020/fbf5b3e1948fc961dba533509c5c4b40.png?width=140&height=140"
131 |     },
132 |     {
133 |       "name": "Mi Beard Trimmer 1C",
134 |       "price": "₹ 999",
135 |       "image": "https://i02.appmifile.com/979_operator_in/06/08/2020/855d6e62a97cb56339126c68de3918e9.png?width=140&height=140"
136 |     },
137 |     {
138 |       "name": "Mi Athleisure Shoes",
139 |       "price": "₹ 1,699",
140 |       "image": "https://i02.appmifile.com/205_operator_in/29/09/2020/e989b9be493148ba6461e8b43d4df81d.png?width=140&height=140"
141 |     }
142 |   ],
143 |   "home": [
144 |     {
145 |       "name": "Mi Robot Vacuum-Mop P",
146 |       "price": "₹ 24,999",
147 |       "image": "https://i02.appmifile.com/779_operator_in/22/12/2020/b740f2dbab9a4fef11065926e1aacc42.png?width=140&height=140"
148 |     },
149 |     {
150 |       "name": "Mi Air Purifier 3",
151 |       "price": "₹ 10,999",
152 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/D0577E6F-7952-56FD-86EB-7A3EF9FE33C1.jpg?width=140&height=140"
153 |     },
154 |     {
155 |       "name": "Mi Air Purifier 2C",
156 |       "price": "₹ 6,999",
157 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/6CFA11D4-6969-C4C8-C8BA-BF3922F82294.jpg?width=140&height=140"
158 |     },
159 |     {
160 |       "name": "Mi Smart Water Purifier",
161 |       "price": "₹ 12,999",
162 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/0C7A1A6D-BE84-6D55-17DA-37620E1FA483.jpg?width=140&height=140"
163 |     },
164 |     {
165 |       "name": "Mi Security Cameras",
166 |       "price": "From ₹ 1,799",
167 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/373DBE3D-CC06-07ED-0F10-EB090CF9737E.jpg?width=140&height=140"
168 |     }
169 |   ],
170 |   "audio": [
171 |     {
172 |       "name": "Mi Smart Speaker",
173 |       "price": "₹ 3,999",
174 |       "image": "https://i02.appmifile.com/77_operator_in/29/09/2020/842c0032334066f68c60de04c513c6e0.png?width=140&height=140"
175 |     },
176 |     {
177 |       "name": "Mi True Wireless Earphones 2",
178 |       "price": "₹ 3,999",
179 |       "image": "https://i02.appmifile.com/530_updatepdf_in/08/05/2020/dffe54d117f1c15448f6a61933499b20.png?width=140&height=140"
180 |     },
181 |     {
182 |       "name": "Redmi Earbuds 2C",
183 |       "price": "₹ 1,499",
184 |       "image": "https://i02.appmifile.com/722_operator_in/05/01/2021/e82994f46499c08ba408dff5d544745d.png?width=140&height=140"
185 |     },
186 |     {
187 |       "name": "Mi Outdoor Bluetooth Speaker (5W)",
188 |       "price": "₹ 1,399",
189 |       "image": "https://i02.appmifile.com/184_operator_in/27/05/2021/f515132e83f98d32adfd6d4ef5efbd83.png?width=140&height=140"
190 |     },
191 |     {
192 |       "name": "Redmi Earphones",
193 |       "price": "₹ 399",
194 |       "image": "https://i02.appmifile.com/984_operator_in/02/09/2020/35780ad0fbbd75f9ef2d33dc1f75537b.png?width=140&height=140"
195 |     }
196 |   ],
197 |   "accessories": [
198 |     {
199 |       "name": "Power Banks",
200 |       "price": "From ₹ 799",
201 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/B0272C02-9066-1A1B-B63C-DE2C2B169C34.jpg?width=140&height=140"
202 |     },
203 |     {
204 |       "name": "Mi Router 4C",
205 |       "price": "₹ 999",
206 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/CE0F6208-9AAC-73CB-2F59-130D2E10F999.jpg?width=140&height=140"
207 |     },
208 |     {
209 |       "name": "Mi Portable Wireless Mouse",
210 |       "price": "₹ 500",
211 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/C79D1AF1-8FCC-F03A-DC26-F9A1EF509DD4.jpg?width=140&height=140"
212 |     },
213 |     {
214 |       "name": "Chargers & Cables",
215 |       "price": "From ₹ 179",
216 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/84A39CC0-85BC-DCFC-1D33-9BD71D1B131A.jpg?width=140&height=140"
217 |     },
218 |     {
219 |       "name": "Cases & Protectors",
220 |       "price": "From ₹ 49",
221 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/6D46492D-DB66-A5AF-968C-58443A98FE1E.jpg?width=140&height=140"
222 |     }
223 |   ],
224 |   "banner": {
225 |     "start": [
226 |       "https://i02.appmifile.com/173_operator_in/09/06/2021/fde866737ea0357305c2d1c852541460.gif",
227 |       "https://i02.appmifile.com/615_operator_in/05/07/2021/a4b26d6b2ad2d6d2edbfb23a8482328e.jpg",
228 |       "https://i02.appmifile.com/762_operator_in/05/07/2021/4c90dda893b43e0153950f36ee37dc03.jpg",
229 |       "https://i02.appmifile.com/645_operator_in/02/06/2021/4e32c24cfdf8c48ad1bc911807cac09e.jpg",
230 |       "https://i02.appmifile.com/232_operator_in/04/06/2021/568c8fd7c3c4368c14c8ef64cda7866b.jpg",
231 |       "https://i02.appmifile.com/3_operator_in/08/06/2021/3e2d6457a1e569145f66318a17ea1e03.jpg",
232 |       "https://i02.appmifile.com/860_operator_in/09/06/2021/15c70c1f59ef4aad235531578c3d1757.jpg",
233 |       "https://i02.appmifile.com/279_operator_in/08/06/2021/072acd0a667c5a0e045ed50a9064c531.jpg",
234 |       "https://i02.appmifile.com/417_operator_in/04/06/2021/36c1c9f10ac411c5ba304d30d60ca234.jpg",
235 |       "https://i02.appmifile.com/172_operator_in/08/06/2021/44c5407a6c9ede6d782bebfd70cecc24.jpg",
236 |       "https://i02.appmifile.com/667_operator_in/09/06/2021/eca16c5a1a97b1f30cedb943e144e2e0.jpg",
237 |       "https://i02.appmifile.com/934_operator_in/07/06/2021/372a6e5d29c26c34b716b0408a533e3f.jpg"
238 |     ],
239 |     "end": [
240 |       {
241 |         "name": "MI 11X",
242 |         "description": "What makes the Mi 11X a huge disruptor is its price tag. It comes with what we call “crazy Xiaomi pricing”",
243 |         "source": "TechPP",
244 |         "image": "https://i02.appmifile.com/708_operator_in/10/05/2021/2b7fc56c3b3c44f4b11bd9bd2b255749.jpg"
245 |       },
246 |       {
247 |         "name": "MI 11X PRO",
248 |         "description": "It is easily the most affordable device with a Snapdragon 888 chip and a 108-megapixel camera in the market right now",
249 |         "source": "TechPP",
250 |         "image": "https://i02.appmifile.com/191_operator_in/10/05/2021/4ccd175347800225dd6b47eb35166e2e.jpg"
251 |       },
252 |       {
253 |         "name": "REDMI NOTE 10 PRO MAX",
254 |         "description": "The Redmi Note 10 Pro Max’s macro camera captures the tiniest piece of details to stitch together some very good images.",
255 |         "source": "India Today",
256 |         "image": "https://i02.appmifile.com/52_operator_in/15/03/2021/7f91bdb2f227f8bd679fa96ac2a9fc1f.jpg"
257 |       },
258 |       {
259 |         "name": "REDMI NOTE 10",
260 |         "description": "The deep contrasts and the richness that AMOLED brings along add a much-needed dimension to the smartphone.",
261 |         "source": "TechPP",
262 |         "image": "https://i02.appmifile.com/107_operator_in/17/03/2021/fa9bab9cbad1629076b04a17a655559c.jpg"
263 |       },
264 |       {
265 |         "name": "MI 10I",
266 |         "description": "The Mi 10i clicks authentic, true-to-life photos with an abundance of details in every shot.",
267 |         "source": "91Mobiles",
268 |         "image": "https://i02.appmifile.com/85_operator_in/11/01/2021/b7600815ae26854c451a39ee88431098.jpg"
269 |       },
270 |       {
271 |         "name": "MI QLED TV 4K",
272 |         "description": "Redefining Value for Premium TVs",
273 |         "image": "https://i02.appmifile.com/108_operator_in/13/01/2021/3bfe5123ede27524d616f0bdaf43945a.jpg"
274 |       },
275 |       {
276 |         "name": "MI 10T PRO",
277 |         "description": "Mi 10T Pro is a clear winner in the premium segment",
278 |         "source": "FoneArena",
279 |         "image": "https://i02.appmifile.com/843_operator_in/28/12/2020/226c73c386cf35e47fa0079b3534085f.jpg"
280 |       },
281 |       {
282 |         "name": "REDMI 9 POWER",
283 |         "description": "In under an hour, the phone was charged around 80 percent plus, which is more than enough battery for two days.",
284 |         "source": "Indian Express",
285 |         "image": "https://i02.appmifile.com/779_operator_in/28/12/2020/55bbda7ebbb47f674213dead3c0fefdf.jpg"
286 |       },
287 |       {
288 |         "name": "MI SMART WATER PURIFIER",
289 |         "description": "Mi Smart Water Purifier: The Epitome Of Minimalism",
290 |         "source": "Mr.Phone",
291 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/97E65ECC-E105-9A20-6BD7-8A3235104C57.jpg"
292 |       },
293 |       {
294 |         "name": "MI SOUNDBAR",
295 |         "description": "We Looked Hard, But There Really Are no Faults.",
296 |         "source": "TechPP",
297 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/40F52E34-A946-E8B3-29F2-BBE4A5C7BEEE.jpg"
298 |       }
299 |     ]
300 |   },
301 |   "offer": [
302 |     {
303 |       "url": "https://play.google.com/store/apps/details?id=com.mi.global.shop",
304 |       "image": "https://i02.appmifile.com/120_operator_in/19/11/2021/c05f5943b7c49d62bd2c4a64899f3dc8.jpg?width=398&height=230"
305 |     },
306 |     {
307 |       "url": "https://in.event.mi.com/in/rakshabandhan-202",
308 |       "image": "https://i02.appmifile.com/832_operator_in/11/08/2022/59420fba34d3a383524f31ac1b7815ec.jpg?width=398&height=230"
309 |     },
310 |     {
311 |       "url": "https://in.event.mi.com/in/why-mi",
312 |       "image": "https://i02.appmifile.com/554_operator_in/27/07/2022/d8363b97031667f98181e01525a1db0b.jpg?width=398&height=230"
313 |     }
314 |   ],
315 |   "starProduct": [
316 |     {
317 |       "url": "https://www.mi.com/in/xiaomi-12-pro-5g",
318 |       "image": "https://i02.appmifile.com/353_operator_in/17/05/2022/b920ec46e9322a9e85e4c2b648d3eedb.jpg?width=612&height=612"
319 |     },
320 |     {
321 |       "url": "https://store.mi.com/in/item/3203500001",
322 |       "image": "https://i02.appmifile.com/341_operator_in/30/05/2021/e866f96094c058af222f53bc97bcb5ed.jpg?width=612&height=612"
323 |     },
324 |     {
325 |       "url": "https://in.event.mi.com/in/xiaomi-11i-series-5g-2022",
326 |       "image": "https://i02.appmifile.com/90_operator_in/11/03/2022/9b1ab6de9e17724d9f1fcde70dac3b4c.jpg?width=612&height=612"
327 |     },
328 |     {
329 |       "url": "https://www.mi.com/in/product/xiaomi-oled-vision-tv",
330 |       "image": "https://i02.appmifile.com/814_operator_in/28/06/2022/f9cdd947ff7d4f4704729801efc92568.jpg?width=612&height=612"
331 |     }
332 |   ],
333 |   "hotAccessories": {
334 |     "music": [
335 |       {
336 |         "name": "Redmi Earbuds S",
337 |         "price": "₹ 1,799",
338 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/BF2A4279-A6D5-B4F0-FE37-633256CDC9FC.jpg"
339 |       },
340 |       {
341 |         "name": "Mi Soundbar",
342 |         "price": "₹ 4,999",
343 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1547107203.76021206.png"
344 |       },
345 |       {
346 |         "name": "Mi Neckband Bluetooth Earphones",
347 |         "price": "₹ 1,599",
348 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/A1C40BA8-574D-2FA0-62C0-3D7A2C964790.jpg"
349 |       },
350 |       {
351 |         "name": "Mi Super Bass Wireless Headphones",
352 |         "price": "₹ 1,799",
353 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1563264530.44121333.jpg?width=420&height=420"
354 |       },
355 |       {
356 |         "name": "Mi Dual Driver In-ear Earphones",
357 |         "price": "₹ 799",
358 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/E794F82C-8858-02F1-7C53-6FB0B4D0C4C6.jpg"
359 |       }
360 |     ],
361 |     "smartDevice": [
362 |       {
363 |         "name": "Mi Smart Band 4",
364 |         "price": "₹ 2,099",
365 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/0E0F0769-6A69-5820-C8F0-F2B956C65BFA.jpg"
366 |       },
367 |       {
368 |         "name": "Mi Smart Water Purifier",
369 |         "price": "₹ 12,999",
370 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/BC643CF4-853C-24E4-1EEC-9D4FF614C86D.jpg"
371 |       },
372 |       {
373 |         "name": "Mi Watch Revolve",
374 |         "price": "₹ 9,999",
375 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1601293021.06313819.png"
376 |       },
377 |       {
378 |         "name": "Mi Smart Bedside Lamp 2",
379 |         "price": "₹ 2,499",
380 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/6A656178-B31B-39D1-AC43-9C7EC61C3D84.jpg"
381 |       },
382 |       {
383 |         "name": "Mi Smart LED Desk Lamp 1S",
384 |         "price": "₹ 2,499",
385 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1574669860.58966823.jpg?width=420&height=420"
386 |       }
387 |     ],
388 |     "home": [
389 |       {
390 |         "name": "Mi Air Purifier 3",
391 |         "price": "₹ 10,999",
392 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/70A72569-C7EA-BBD7-591E-DC93EC3CDF34.jpg"
393 |       },
394 |       {
395 |         "name": "Mi Air Purifier 2C",
396 |         "price": "₹ 6,999",
397 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/7D8FAD13-1E44-9475-3555-949CBF3571AF.jpg"
398 |       },
399 |       {
400 |         "name": "Mi Router 4C",
401 |         "price": "₹ 999",
402 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/FD13B2EB-1AD5-67EE-FF6B-C3E2A0270556.jpg"
403 |       },
404 |       {
405 |         "name": "Mi Box 4K",
406 |         "price": "₹ 3,499",
407 |         "image": "https://i02.appmifile.com/919_updatepdf_in/15/05/2020/984e626e158fdeb7cc21aff04264773d.png"
408 |       },
409 |       {
410 |         "name": "Mi LED Wi-Fi Smart Bulb",
411 |         "price": "₹ 1,299",
412 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/441FC065-EEE7-5A64-9CF9-608EF2F82F60.jpg"
413 |       }
414 |     ],
415 |     "lifeStyle": [
416 |       {
417 |         "name": "Mi Travel Backpack",
418 |         "price": "₹ 1,999",
419 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1536381648.16353261.png?width=420&height=420"
420 |       },
421 |       {
422 |         "name": "Mi Athleisure Shoes",
423 |         "price": "₹ 1,699",
424 |         "image": "https://i02.appmifile.com/363_operator_in/13/10/2020/c7bde508f128d7b1fd10a224d18a5333.png"
425 |       },
426 |       {
427 |         "name": "Mi Beard Trimmer",
428 |         "price": "₹ 1,399",
429 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/CEEE67A3-3578-7048-887D-CFC3D90B5D17.jpg"
430 |       },
431 |       {
432 |         "name": "Mi KN-95 Protective Mask (Pack of 5)",
433 |         "price": "₹ 399",
434 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1602500062.48215120.png?width=420&height=420"
435 |       },
436 |       {
437 |         "name": "Mi Portable Electric Air Compressor",
438 |         "price": "₹ 2,499",
439 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1592479075.0368979.png?width=420&height=420"
440 |       }
441 |     ],
442 |     "mobileAccessories": [
443 |       {
444 |         "name": "Cases & Covers",
445 |         "price": "₹ 49 onwards",
446 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1551164869.57618003.jpg"
447 |       },
448 |       {
449 |         "name": "Charger & USB Gadgets",
450 |         "price": "₹ 179 onwards",
451 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/5A5AA9AC-41A3-7E86-5922-928B312919B0.jpg"
452 |       },
453 |       {
454 |         "name": "Mi Wireless Power Bank 10000mAh",
455 |         "price": "₹ 2,499",
456 |         "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/3CBAACCE-D18A-B241-A4F8-54A4CCE194A5.jpg"
457 |       },
458 |       {
459 |         "name": "10000mAh Mi Power Bank 3i",
460 |         "price": "₹ 999",
461 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1600434881.35114664.jpg?width=420&height=420"
462 |       },
463 |       {
464 |         "name": "Redmi SonicBass Wireless Earphones",
465 |         "price": "₹ 1,299",
466 |         "image": "https://i01.appmifile.com/v1/MI_18455B3E4DA706226CF7535A58E875F0267/pms_1601900775.75794078.png?width=420&height=420"
467 |       }
468 |     ]
469 |   },
470 |   "hotAccessoriesCover": {
471 |     "music": "https://i01.appmifile.com/webfile/globalimg/in/cms/500BFA0B-CBEF-5DFF-79A9-E925F9F2FEE9.jpg",
472 |     "smartDevice": "https://i02.appmifile.com/310_operator_in/17/07/2021/826abe38cc3a9a3ce12ffad0c7e93ae8.jpg",
473 |     "home": "https://i02.appmifile.com/663_operator_in/20/01/2021/0f6ac3c219428b6decbe7fb03d479060.jpg",
474 |     "lifeStyle": "https://i02.appmifile.com/677_operator_in/25/01/2021/8163c3c89feb2c83c73b019d5fd50181.jpg",
475 |     "mobileAccessories": "https://i01.appmifile.com/webfile/globalimg/in/cms/801ED76B-614B-5959-E2C3-1EC8E14C0ABD.jpg"
476 |   },
477 |   "productReviews": [
478 |     {
479 |       "image": "https://i02.appmifile.com/259_operator_in/04/02/2022/f76f28e3d4f5b1fce78d461e12e00bc7.jpg?width=606&height=252",
480 |       "review": "ALL ABOUT PERFORMANCE!",
481 |       "name": "REDMI NOTE 11T 5G",
482 |       "price": "₹ 16,999"
483 |     },
484 |     {
485 |       "image": "https://i02.appmifile.com/149_operator_in/04/02/2022/7f9762559b5d78130b310719d37daaea.jpg?width=606&height=252",
486 |       "review": "YOUR HOME-GUARD WITH HIGH RESOLUTION!",
487 |       "name": "MI HOME SECURITY CAMERA 2K PRO ",
488 |       "price": "₹ 4,999"
489 |     }
490 |   ],
491 |   "videos": [
492 |     {
493 |       "name": "Redmi Note 10 Pro Max",
494 |       "image": "https://i02.appmifile.com/769_operator_in/26/04/2021/2fab525c022f0d6c0dba8a6edcf12060.png?width=398&height=320"
495 |     },
496 |     {
497 |       "name": "Mi 10",
498 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/2461CE83-F535-6B92-CBEE-5971984298E4.jpg?width=398&height=320"
499 |     },
500 |     {
501 |       "name": "Mi MIX Alpha",
502 |       "image": "https://i01.appmifile.com/webfile/globalimg/in/cms/FD2BD776-5489-44CA-F05A-C20C232A4848.jpg?width=398&height=320"
503 |     }
504 |   ],
505 |   "footer": {
506 |     "support": [
507 |       {
508 |         "name": "Online Help"
509 |       },
510 |       {
511 |         "name": "Customer Service"
512 |       },
513 | 
514 |       {
515 |         "name": "Service Centres"
516 |       },
517 | 
518 |       {
519 |         "name": "User Guide"
520 |       },
521 |       {
522 |         "name": "Laptop Drivers"
523 |       }
524 |     ],
525 |     "shopAndLearn": [
526 |       {
527 |         "name": ""
528 |       },
529 |       {
530 |         "name": "Mi 10T Series",
531 |         "url": "https://in.event.mi.com/in/mi-10t-series"
532 |       },
533 |       {
534 |         "name": "Mi 11 Ultra",
535 |         "url": "https://www.mi.com/in/mi-11-ultra/"
536 |       },
537 |       {
538 |         "name": "Mi 11X",
539 |         "url": "https://www.mi.com/in/mi-11x/"
540 |       },
541 |       {
542 |         "name": "Mi 11X Pro",
543 |         "url": "https://www.mi.com/in/mi-11x-pro/"
544 |       },
545 |       {
546 |         "name": "Redmi 8",
547 |         "url": "https://www.mi.com/in/redmi-8/"
548 |       },
549 |       {
550 |         "name": "Redmi 9",
551 |         "url": "https://www.mi.com/in/redmi-9/"
552 |       },
553 |       {
554 |         "name": "Redmi 9 Prime",
555 |         "url": "https://www.mi.com/in/redmi-9-prime/"
556 |       },
557 |       {
558 |         "name": "Redmi 9i",
559 |         "url": "https://www.mi.com/in/redmi-9i/"
560 |       },
561 |       {
562 |         "name": "Redmi 9A",
563 |         "url": "https://www.mi.com/in/redmi-9a/"
564 |       },
565 |       {
566 |         "name": "Redmi Note 10",
567 |         "url": "https://www.mi.com/in/redmi-note-10/"
568 |       },
569 |       {
570 |         "name": "Redmi Note 10 Pro",
571 |         "url": "https://www.mi.com/in/redmi-note-10-pro/"
572 |       },
573 |       {
574 |         "name": "Redmi Note 10 Pro Max",
575 |         "url": "https://www.mi.com/in/redmi-note-10-pro-max/"
576 |       },
577 |       {
578 |         "name": "Redmi Note 9 Pro",
579 |         "url": "https://www.mi.com/in/redmi-note-9-pro/"
580 |       },
581 |       {
582 |         "name": "Redmi Note 9",
583 |         "url": "https://www.mi.com/in/redmi-note-9/"
584 |       },
585 |       {
586 |         "name": "Redmi Note 9 Pro Max",
587 |         "url": "https://www.mi.com/in/redmi-note-9-pro-max/"
588 |       },
589 |       {
590 |         "name": "TVs",
591 |         "url": "https://www.mi.com/in/all-mi-tv"
592 |       },
593 |       {
594 |         "name": "Laptops",
595 |         "url": "https://www.mi.com/in/xiaomi-laptops"
596 |       }
597 |     ],
598 |     "retailStore": [
599 |       {
600 |         "name": "Mi Home",
601 |         "url": "https://www.mi.com/in/service/mihome/"
602 |       },
603 |       {
604 |         "name": "Mi Authorised Stores",
605 |         "url": "https://www.mi.com/in/service/authorized_stores/"
606 |       }
607 |     ],
608 |     "aboutUS": [
609 |       {
610 |         "name": "Xioami",
611 |         "url": "https://www.mi.com/in/about/"
612 |       },
613 |       {
614 |         "name": "Mediakit",
615 |         "url": "https://www.mi.com/in/mediakit/"
616 |       },
617 |       {
618 |         "name": "Culture",
619 |         "url": "https://www.mi.com/in/about/#culture"
620 |       },
621 |       {
622 |         "name": "User Agreement",
623 |         "url": "https://www.mi.com/in/about/agreement/"
624 |       },
625 |       {
626 |         "name": "Privacy Policy",
627 |         "url": "https://www.mi.com/in/about/privacy/"
628 |       },
629 |       {
630 |         "name": "Declarations",
631 |         "url": "https://www.mi.com/in/service/support/mideclare.html"
632 |       },
633 |       {
634 |         "name": "Integrity & Compliance",
635 |         "url": "https://integrity.mi.com/global"
636 |       },
637 |       {
638 |         "name": "Smartphone Quality",
639 |         "url": "https://www.mi.com/in/smartphone-quality/"
640 |       },
641 |       {
642 |         "name": "TV Quality",
643 |         "url": "https://www.mi.com/in/tv-quality/"
644 |       },
645 |       {
646 |         "name": "Service Quality",
647 |         "url": "https://www.mi.com/in/service-quality/"
648 |       },
649 |       {
650 |         "name": "Environment",
651 |         "url": "https://www.mi.com/in/service/support/ewastetakeback.html"
652 |       },
653 |       {
654 |         "name": "Sitemap",
655 |         "url": "https://www.mi.com/in/sitemap"
656 |       }
657 |     ],
658 |     "contactUs": [
659 |       {
660 |         "name": "Email",
661 |         "url": "https://in.event.mi.com/in/questionnaire/email_us"
662 |       },
663 |       {
664 |         "name": "Careers",
665 |         "url": "https://www.mi.com/in/about/#career"
666 |       }
667 |     ]
668 |   }
669 | }
670 | 


--------------------------------------------------------------------------------
/src/images/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/about.jpg


--------------------------------------------------------------------------------
/src/images/c1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/c1.jpg


--------------------------------------------------------------------------------
/src/images/c2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/c2.jpg


--------------------------------------------------------------------------------
/src/images/c3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/c3.jpg


--------------------------------------------------------------------------------
/src/images/home.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/home.jpg


--------------------------------------------------------------------------------
/src/images/i1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/i1.jpg


--------------------------------------------------------------------------------
/src/images/i2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/i2.jpg


--------------------------------------------------------------------------------
/src/images/i3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/i3.jpg


--------------------------------------------------------------------------------
/src/images/i4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/i4.jpg


--------------------------------------------------------------------------------
/src/images/i5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/i5.jpg


--------------------------------------------------------------------------------
/src/images/i6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/i6.jpg


--------------------------------------------------------------------------------
/src/images/icons8-send-25.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/icons8-send-25.png


--------------------------------------------------------------------------------
/src/images/img1.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512.003 512.003" style="enable-background:new 0 0 512.003 512.003;" xml:space="preserve">
 5 | <g>
 6 | 	<path style="fill:#CEE8FA;" d="M158.296,282.887l-69.718,82.438l43.627,131.463h36.154l10.473-76.723
 7 | 		C173.998,397.22,165.339,338.7,158.296,282.887z"/>
 8 | 	<path style="fill:#CEE8FA;" d="M352.883,281.913c-6.885,51.092-15.216,104.86-20.619,131.502l11.381,83.372h36.154l43.627-131.463
 9 | 		L352.883,281.913z"/>
10 | </g>
11 | <path style="fill:#2D527C;" d="M256.001,256.496c-36.627,0-66.425-29.798-66.425-66.425s29.798-66.425,66.425-66.425
12 | 	s66.425,29.798,66.425,66.425c0,8.401-6.812,15.212-15.212,15.212s-15.212-6.81-15.212-15.212c0-19.851-16.15-36.002-36.002-36.002
13 | 	S220,170.22,220,190.071s16.15,36.002,36.002,36.002c8.4,0,15.212,6.81,15.212,15.212S264.402,256.496,256.001,256.496z"/>
14 | <polygon style="fill:#CEE8FA;" points="271.204,488.24 240.8,488.24 225.578,340.658 286.424,340.658 "/>
15 | <g>
16 | 	<path style="fill:#2D527C;" d="M435.041,355.503l-67.035-79.265c6.508-52.032,11.768-102.098,12.028-121.642
17 | 		C381.126,72.8,269.664,5.012,264.918,2.166s-10.66-2.889-15.447-0.117c-4.793,2.778-117.431,68.962-117.509,150.778
18 | 		c-0.011,11.695,1.693,34.392,5.064,67.465c0.852,8.357,8.315,14.436,16.675,13.592c8.357-0.852,14.444-8.318,13.592-16.675
19 | 		c-3.173-31.14-4.915-53.995-4.907-64.353c0.046-49.043,62.403-99.11,94.585-119.73c31.83,21.039,93.301,71.901,92.644,121.067
20 | 		c-0.446,33.461-18.936,183.514-30.046,244.665c-0.785,4.288-1.527,8.164-2.212,11.538c-0.339,1.672-0.394,3.391-0.163,5.081
21 | 		l11.38,83.372c1.03,7.536,7.466,13.154,15.072,13.154H379.8c6.556,0,12.373-4.198,14.437-10.42l43.627-131.461
22 | 		C439.533,365.086,438.464,359.549,435.041,355.503z M368.819,481.576H356.92l-9.238-67.686c0.356-1.806,0.726-3.731,1.106-5.759
23 | 		c0.006-0.032,0.015-0.061,0.021-0.093c0.231-1.228,0.467-2.519,0.706-3.841c3.9-21.327,8.868-52.626,13.736-86.468l43.049,50.903
24 | 		L368.819,481.576z"/>
25 | 	<path style="fill:#2D527C;" d="M286.424,325.446h-60.847c-4.306,0-8.409,1.825-11.295,5.021c-2.884,3.198-4.279,7.467-3.836,11.751
26 | 		l6.798,65.923h-25.25c-4.781-25.88-12.213-76.483-18.608-127.161c-0.755-5.989-4.979-10.965-10.767-12.679
27 | 		c-5.793-1.719-12.043,0.154-15.94,4.761l-69.718,82.44c-3.423,4.048-4.492,9.583-2.822,14.614l43.627,131.463
28 | 		c2.064,6.222,7.883,10.42,14.437,10.42h36.155c7.606,0,14.042-5.618,15.072-13.154l8.228-60.278h28.724l5.285,51.235
29 | 		c0.799,7.756,7.334,13.651,15.131,13.651h30.405c7.798,0,14.332-5.895,15.131-13.651l15.221-147.582
30 | 		c0.441-4.284-0.952-8.554-3.836-11.751C294.835,327.272,290.731,325.446,286.424,325.446z M155.084,481.576h-11.899
31 | 		l-37.482-112.942l41.969-49.627c5.887,43.618,11.862,82.344,15.736,101.579L155.084,481.576z M257.481,473.029h-2.959
32 | 		l-5.281-51.206c-0.002-0.017-0.003-0.033-0.005-0.05l-6.797-65.903h27.126L257.481,473.029z"/>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | <g>
45 | </g>
46 | <g>
47 | </g>
48 | <g>
49 | </g>
50 | <g>
51 | </g>
52 | <g>
53 | </g>
54 | <g>
55 | </g>
56 | <g>
57 | </g>
58 | <g>
59 | </g>
60 | <g>
61 | </g>
62 | <g>
63 | </g>
64 | </svg>
65 | 


--------------------------------------------------------------------------------
/src/images/serviceImg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/src/images/serviceImg.jpg


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
  2 | body {
  3 |     margin: 0;
  4 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Mulish', sans-serif;
  5 |     -webkit-font-smoothing: antialiased;
  6 |     -moz-osx-font-smoothing: grayscale;
  7 | }
  8 | 
  9 | .navbar {
 10 |     background: white !important;
 11 | }
 12 | 
 13 | .namea {
 14 |     font-weight: bold;
 15 | }
 16 | 
 17 | .sasur {
 18 |     font-weight: bold;
 19 | }
 20 | 
 21 | .navbar-brand {
 22 |     color: darkcyan !important;
 23 |     font-size: 1.6rem !important;
 24 | }
 25 | 
 26 | .navbar a:hover {
 27 |     color: darkcyan !important;
 28 |     font-size: 1.1rem;
 29 | }
 30 | 
 31 | .pg {
 32 |     margin-top: 12px;
 33 |     font-size: 1.5rem;
 34 |     color: lightslategray;
 35 |     text-shadow: 2px black;
 36 | }
 37 | 
 38 | h1 .brand-name {
 39 |     font-weight: bold;
 40 |     color: blueviolet;
 41 |     width: 8ch;
 42 |     animation: typing 2s steps(8), blink .5s step-end infinite alternate;
 43 |     white-space: nowrap;
 44 |     overflow: hidden;
 45 |     border-right: 3px solid;
 46 | }
 47 | 
 48 | @keyframes typing {
 49 |     from {
 50 |         width: 0
 51 |     }
 52 | }
 53 | 
 54 | @keyframes blink {
 55 |     50% {
 56 |         border-color: transparent
 57 |     }
 58 | }
 59 | 
 60 | .img-fluid {
 61 |     height: 30rem;
 62 |     width: 30rem;
 63 |     margin-top: 5rem;
 64 |     margin-left: 5rem;
 65 | }
 66 | 
 67 | @media screen and (max-width: 768px) {
 68 |     .img-fluid {
 69 |         height: 30rem;
 70 |         width: 30rem;
 71 |         margin-top: 5rem;
 72 |         margin-left: 0rem;
 73 |     }
 74 | }
 75 | 
 76 | img.animated {
 77 |     -webkit-animation: mover 1s infinite alternate;
 78 |     animation: mover 1s infinite alternate;
 79 | }
 80 | 
 81 | img.animated {
 82 |     -webkit-animation: mover 1s infinite alternate;
 83 |     animation: mover 1s infinite alternate;
 84 | }
 85 | 
 86 | @-webkit-keyframes mover {
 87 |     0% {
 88 |         transform: translateY(0);
 89 |     }
 90 |     100% {
 91 |         transform: translateY(-15px);
 92 |     }
 93 | }
 94 | 
 95 | @keyframes mover {
 96 |     0% {
 97 |         transform: translateY(0);
 98 |     }
 99 |     100% {
100 |         transform: translateY(-15px);
101 |     }
102 | }
103 | 
104 | .brand-name:hover {
105 |     color: darkblue;
106 | }
107 | 
108 | .class_active {
109 |     font-weight: bold;
110 | }
111 | 
112 | code {
113 |     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
114 | }
115 | 
116 | i {
117 |     cursor: pointer;
118 | }
119 | 
120 | .jaiho {
121 |     height: 250px;
122 | }
123 | 
124 | .foot {
125 |     margin-top: 4%;
126 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | import { BrowserRouter } from 'react-router-dom';
 7 | 
 8 | const root = ReactDOM.createRoot(document.getElementById('root'));
 9 | root.render(
10 |   <>
11 |   <BrowserRouter>
12 |     <App />
13 |   </BrowserRouter>
14 |   </>
15 | );
16 | 
17 | // If you want to start measuring performance in your app, pass a function
18 | // to log results (for example: reportWebVitals(console.log))
19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
20 | reportWebVitals();
21 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/web page design/imagebg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Adarsh-K21/Development-Projects/0ffa53d90586bf38f288390624623efef0c7d14d/web page design/imagebg.jpg


--------------------------------------------------------------------------------
/web page design/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <title>Webpage Design</title>
 5 |     <link rel="stylesheet" href="style.css">
 6 | </head>
 7 | <body>
 8 | 
 9 |     <div class="main">
10 |         <div class="navbar">
11 |             <!-- <div class="icon">
12 |                 <h2 class="logo">PraRoz</h2>
13 |             </div> -->
14 | 
15 |             <div class="menu">
16 |                 <ul>
17 |                     <li><a href="#">HOME</a></li>
18 |                     <li><a href="#">ABOUT</a></li>
19 |                     <li><a href="#">DESIGN</a></li>
20 |                     <li><a href="#">CONTACT</a></li>
21 |                 </ul>
22 |             </div>
23 | 
24 |             <div class="search">
25 |                 <input class="srch" type="search" name="" placeholder="Type To text">
26 |                 <a href="#"> <button class="btn">Search</button></a>
27 |             </div>
28 | 
29 |         </div> 
30 |         <div class="content">
31 |             <h1>Web Design & <br><span>Development</span> <br>Course</h1>
32 |             <p class="par">Web design is the process of planning, conceptualizing,<br>and arranging content online. Today, designing a<br>website goes beyond aesthetics to include the<br>website’s overall functionality.
33 |                 Web design also<br>includes web apps, mobile apps,and <br>user interface design.</p>
34 | 
35 |                 <button class="cn"><a href="#">JOIN US</a></button>
36 | 
37 |                 <div class="form">
38 |                     <h2>Login Here</h2>
39 |                     <input type="email" name="email" placeholder="Enter Email Here">
40 |                     <input type="password" name="" placeholder="Enter Password Here">
41 |                     <button class="btnn"><a href="#">Login</a></button>
42 | 
43 |                     <p class="link">Don't have an account<br>
44 |                     <a href="#">Sign up </a> here</a></p>
45 |                     <p class="liw">Log in with</p>
46 | 
47 |                     <div class="icons">
48 |                         <a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
49 |                         <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
50 |                         <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
51 |                         <a href="#"><ion-icon name="logo-google"></ion-icon></a>
52 |                         <a href="#"><ion-icon name="logo-skype"></ion-icon></a>
53 |                     </div>
54 | 
55 |                 </div>
56 |                     </div>
57 |                 </div>
58 |         </div>
59 |     </div>
60 |     <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/web page design/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 | }
  5 | 
  6 | .main{
  7 |     width: 100%;
  8 |     background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(imagebg.jpg);
  9 |     background-position: center;
 10 |     background-size: cover;
 11 |     height: 100vh;
 12 | }
 13 | 
 14 | .navbar{
 15 |     width: 1200px;
 16 |     height: 75px;
 17 |     margin: auto;
 18 | }
 19 | 
 20 | /* .icon{
 21 |     width: 200px;
 22 |     float: left;
 23 |     height: 70px;
 24 | }
 25 | 
 26 | .logo{
 27 |     color: #ff7200;
 28 |     font-size: 35px;
 29 |     font-family: Arial;
 30 |     padding-left: 20px;
 31 |     float: left;
 32 |     padding-top: 10px;
 33 |     margin-top: 5px
 34 | } */
 35 | 
 36 | .menu{
 37 |     width: 400px;
 38 |     float: left;
 39 |     height: 70px;
 40 | }
 41 | 
 42 | ul{
 43 |     float: left;
 44 |     display: flex;
 45 |     justify-content: center;
 46 |     align-items: center;
 47 | }
 48 | 
 49 | ul li{
 50 |     list-style: none;
 51 |     margin-left: 62px;
 52 |     margin-top: 27px;
 53 |     font-size: 14px;
 54 | }
 55 | 
 56 | ul li a{
 57 |     text-decoration: none;
 58 |     color: #fff;
 59 |     font-family: Arial;
 60 |     font-weight: bold;
 61 |     transition: 0.4s ease-in-out;
 62 | }
 63 | 
 64 | ul li a:hover{
 65 |     color: #ff7200;
 66 | }
 67 | 
 68 | .search{
 69 |     width: 330px;
 70 |     float: left;
 71 |     margin-left: 270px;
 72 | }
 73 | 
 74 | .srch{
 75 |     font-family: 'Times New Roman';
 76 |     width: 200px;
 77 |     height: 40px;
 78 |     background: transparent;
 79 |     border: 1px solid #ff7200;
 80 |     margin-top: 13px;
 81 |     color: #fff;
 82 |     border-right: none;
 83 |     font-size: 16px;
 84 |     float: left;
 85 |     padding: 10px;
 86 |     border-bottom-left-radius: 5px;
 87 |     border-top-left-radius: 5px;
 88 | }
 89 | 
 90 | .btn{
 91 |     width: 100px;
 92 |     height: 40px;
 93 |     background: #ff7200;
 94 |     border: 2px solid #ff7200;
 95 |     margin-top: 13px;
 96 |     color: #fff;
 97 |     font-size: 15px;
 98 |     border-bottom-right-radius: 5px;
 99 |     border-bottom-right-radius: 5px;
100 |     transition: 0.2s ease;
101 |     cursor: pointer;
102 | }
103 | .btn:hover{
104 |     color: #000;
105 | }
106 | 
107 | .btn:focus{
108 |     outline: none;
109 | }
110 | 
111 | .srch:focus{
112 |     outline: none;
113 | }
114 | 
115 | .content{
116 |     width: 1200px;
117 |     height: auto;
118 |     margin: auto;
119 |     color: #fff;
120 |     position: relative;
121 | }
122 | 
123 | .content .par{
124 |     padding-left: 20px;
125 |     padding-bottom: 25px;
126 |     font-family: Arial;
127 |     letter-spacing: 1.2px;
128 |     line-height: 30px;
129 | }
130 | 
131 | .content h1{
132 |     font-family: 'Times New Roman';
133 |     font-size: 50px;
134 |     padding-left: 20px;
135 |     margin-top: 9%;
136 |     letter-spacing: 2px;
137 | }
138 | 
139 | .content .cn{
140 |     width: 160px;
141 |     height: 40px;
142 |     background: #ff7200;
143 |     border: none;
144 |     margin-bottom: 10px;
145 |     margin-left: 20px;
146 |     font-size: 18px;
147 |     border-radius: 10px;
148 |     cursor: pointer;
149 |     transition: .4s ease;
150 |     
151 | }
152 | 
153 | .content .cn a{
154 |     text-decoration: none;
155 |     color: #000;
156 |     transition: .3s ease;
157 | }
158 | 
159 | .cn:hover{
160 |     background-color: #fff;
161 | }
162 | 
163 | .content span{
164 |     color: #ff7200;
165 |     font-size: 65px
166 | }
167 | 
168 | .form{
169 |     width: 250px;
170 |     height: 380px;
171 |     background: linear-gradient(to top, rgba(0,0,0,0.8)50%,rgba(0,0,0,0.8)50%);
172 |     position: absolute;
173 |     top: -20px;
174 |     left: 870px;
175 |     transform: translate(0%,-5%);
176 |     border-radius: 10px;
177 |     padding: 25px;
178 | }
179 | 
180 | .form h2{
181 |     width: 220px;
182 |     font-family: sans-serif;
183 |     text-align: center;
184 |     color: #ff7200;
185 |     font-size: 22px;
186 |     background-color: #fff;
187 |     border-radius: 10px;
188 |     margin: 2px;
189 |     padding: 8px;
190 | }
191 | 
192 | .form input{
193 |     width: 240px;
194 |     height: 35px;
195 |     background: transparent;
196 |     border-bottom: 1px solid #ff7200;
197 |     border-top: none;
198 |     border-right: none;
199 |     border-left: none;
200 |     color: #fff;
201 |     font-size: 15px;
202 |     letter-spacing: 1px;
203 |     margin-top: 30px;
204 |     font-family: sans-serif;
205 | }
206 | 
207 | .form input:focus{
208 |     outline: none;
209 | }
210 | 
211 | ::placeholder{
212 |     color: #fff;
213 |     font-family: Arial;
214 | }
215 | 
216 | .btnn{
217 |     width: 240px;
218 |     height: 40px;
219 |     background: #ff7200;
220 |     border: none;
221 |     margin-top: 30px;
222 |     font-size: 18px;
223 |     border-radius: 10px;
224 |     cursor: pointer;
225 |     color: #fff;
226 |     transition: 0.4s ease;
227 | }
228 | .btnn:hover{
229 |     background: #fff;
230 |     color: #ff7200;
231 | }
232 | .btnn a{
233 |     text-decoration: none;
234 |     color: #000;
235 |     font-weight: bold;
236 | }
237 | .form .link{
238 |     font-family: Arial, Helvetica, sans-serif;
239 |     font-size: 17px;
240 |     padding-top: 20px;
241 |     text-align: center;
242 | }
243 | .form .link a{
244 |     text-decoration: none;
245 |     color: #ff7200;
246 | }
247 | .liw{
248 |     padding-top: 15px;
249 |     padding-bottom: 10px;
250 |     text-align: center;
251 | }
252 | .icons a{
253 |     text-decoration: none;
254 |     color: #fff;
255 | }
256 | .icons ion-icon{
257 |     color: #fff;
258 |     font-size: 30px;
259 |     padding-left: 14px;
260 |     padding-top: 5px;
261 |     transition: 0.3s ease;
262 | }
263 | .icons ion-icon:hover{
264 |     color: #ff7200;
265 | }


--------------------------------------------------------------------------------