externalCode.txt

  <!--/ Section Blog Star /-->
  <section id="blog" class="blog-mf sect-pt4 route">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="title-box text-center">
            <h3 class="title-a">
              Blog
            </h3>
            <p class="subtitle-a">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            </p>
            <div class="line-mf"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="card card-blog">
            <div class="card-img">
              <a href="blog-single.html"><img src="img/post-1.jpg" alt="" class="img-fluid"></a>
            </div>
            <div class="card-body">
              <div class="card-category-box">
                <div class="card-category">
                  <h6 class="category">Travel</h6>
                </div>
              </div>
              <h3 class="card-title"><a href="blog-single.html">See more ideas about Travel</a></h3>
              <p class="card-description">
                Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis
                a pellentesque nec,
                egestas non nisi.
              </p>
            </div>
            <div class="card-footer">
              <div class="post-author">
                <a href="#">
                  <img src="img/testimonial-2.jpg" alt="" class="avatar rounded-circle">
                  <span class="author">Morgan Freeman</span>
                </a>
              </div>
              <div class="post-date">
                <span class="ion-ios-clock-outline"></span> 10 min
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card card-blog">
            <div class="card-img">
              <a href="blog-single.html"><img src="img/post-2.jpg" alt="" class="img-fluid"></a>
            </div>
            <div class="card-body">
              <div class="card-category-box">
                <div class="card-category">
                  <h6 class="category">Web Design</h6>
                </div>
              </div>
              <h3 class="card-title"><a href="blog-single.html">See more ideas about Travel</a></h3>
              <p class="card-description">
                Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis
                a pellentesque nec,
                egestas non nisi.
              </p>
            </div>

            <div class="card-footer">
              <div class="post-author">
                <a href="#">
                  <img src="img/testimonial-2.jpg" alt="" class="avatar rounded-circle">
                  <span class="author">Morgan Freeman</span>
                </a>
              </div>
              <div class="post-date">
                <span class="ion-ios-clock-outline"></span> 10 min
              </div>
            </div>
          </div>

        </div>
        <div class="col-md-4">
          <div class="card card-blog">
            <div class="card-img">
              <a href="blog-single.html"><img src="img/post-3.jpg" alt="" class="img-fluid"></a>
            </div>
            <div class="card-body">
              <div class="card-category-box">
                <div class="card-category">
                  <h6 class="category">Web Design</h6>
                </div>
              </div>
              <h3 class="card-title"><a href="blog-single.html">See more ideas about Travel</a></h3>
              <p class="card-description">
                Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis
                a pellentesque nec,
                egestas non nisi.
              </p>
            </div>
            <div class="card-footer">
              <div class="post-author">
                <a href="#">
                  <img src="img/testimonial-2.jpg" alt="" class="avatar rounded-circle">
                  <span class="author">Morgan Freeman</span>
                </a>
              </div>
              <div class="post-date">
                <span class="ion-ios-clock-outline"></span> 10 min
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--/ Section Blog End /-->





----------------------------------------------------------------------------------------------------------------------------------------------------------------
   <div class="skill-mf">
                  <p class="title-s">Skill</p>
                  <!-- Html / CSS -->
                  <span>HTML/CSS</span> <span class="pull-right">85%</span>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85"
                      aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <!-- JAVA -->
                  <span>JAVA</span> <span class="pull-right">50%</span>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
                      aria-valuemax="100"></div>
                  </div>
                  <!-- JAVASCRIPT -->
                  <span>JAVASCRIPT</span> <span class="pull-right">75%</span>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
                      aria-valuemax="100"></div>
                  </div>
                  <!-- NODEJS -->
                  <span>NodeJS</span> <span class="pull-right">50%</span>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="70" aria-valuemin="0"
                      aria-valuemax="100"></div>
                  </div>
                  <!-- REACTJS -->
                  <span>REACTJS</span> <span class="pull-right">50%</span>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
                      aria-valuemax="100"></div>
                  </div>
                  <!-- MONGODB -->
                  <span>MONGODB</span> <span class="pull-right">50%</span>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
                      aria-valuemax="100"></div>
                  </div>
                </div>

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

                          <!-- Start form -->
                    <form
                      action="https://script.google.com/macros/s/AKfycbx5XUFYaS4iyyRJOKQVAfMcy_eRcXxkQDcfXKXIVRtetSYjm6PrDOAm9ODaySZcDiQ/exec"
                      method="post" role="form" class="contactForm">
                      <div id="sendmessage">Your message has been sent. Thank you!</div>
                      <div id="errormessage"></div>
                      <div class="row">
                        <div class="col-md-12 mb-3">
                          <div class="form-group">
                            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name"
                              data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                            <div class="validation"></div>
                          </div>
                        </div>
                        <div class="col-md-12 mb-3">
                          <div class="form-group">
                            <input type="email" class="form-control" name="email" id="email" placeholder="Your Email"
                              data-rule="email" data-msg="Please enter a valid email" />
                            <div class="validation"></div>
                          </div>
                        </div>
                        <div class="col-md-12 mb-3">
                          <div class="form-group">
                            <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
                              data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                            <div class="validation"></div>
                          </div>
                        </div>
                        <div class="col-md-12 mb-3">
                          <div class="form-group">
                            <textarea class="form-control" name="message" rows="5" data-rule="required"
                              data-msg="Please write something for us" placeholder="Message"></textarea>
                            <div class="validation"></div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <button type="submit" class="button button-a button-big button-rouded">Send Message</button>
                        </div>
                      </div>
                    </form>
                    <!-- Close form -->
                  </div>
                </div>
                <!-- Get in tuch start-->
                <div class="col-md-6">
                  <div class="title-box-2 pt-4 pt-md-0">
                    <h5 class="title-left">
                      Get in Touch
                    </h5>
                  </div>
                  <div class="more-info">
                    <p class="lead">
                      I am Sneh. If you ask me to communicate, then you can DM me on these social media apps. you can
                      also connect by messaging thank you for visiting my website.
                    </p>
                    <ul class="list-ico">
                      <li><span class="ion-ios-location"></span> Khategaon, devas(Mp), India </li>
                      <li><span class="ion-ios-telephone"></span> (704) 951-0697</li>
                      <li><span class="ion-email"></span> snehjaiswal20@gmail.com</li>
                    </ul>
                  </div>
                  <!-- Socials -->
                  <div class="socials">
                    <ul>
                      <li><a href="https://www.facebook.com/sneh.jaiswal.5220"><span class="ico-circle"><i
                              class="ion-social-facebook"></i></span></a></li>
                      <li><a href="https://www.instagram.com/mr_jaiswal001/?hl=en"><span class="ico-circle"><i
                              class="ion-social-instagram"></i></span></a></li>
                      <li><a href="https://www.linkedin.com/in/sneh-jaiswal-431165229/"><span class="ico-circle"><i
                              class="ion-social-linkedin"></i></span></a></li>
                      <li><a href="https://github.com/Snehjaiswal"><span class="ico-circle"><i
                              class="ion-social-github"></i></span></a></li>

                    </ul>
                  </div>
                </div>
                <!-- Get in tuch End-->


                Ratnesh code


                import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import PhotoCamera from '@mui/icons-material/PhotoCamera';
import { styled } from '@mui/material/styles';
import Grid from '@mui/material/Grid';
import { Container } from '@mui/material';



const currencies = [
	{
		value: 'empty',
		label: '-  -  -',
	},
	{
		value: 'male',
		label: 'Male',
	},
	{
		value: 'female',
		label: 'Female',
	},
];
const Input = styled('input')({
	display: 'none',
});

const Form = () => {
	const [currency, setCurrency] = React.useState('EUR');

	const handleChange = (event) => {
		setCurrency(event.target.value);
	};



	return (
		<Box
			component="form"
			sx={{
				'& .MuiTextField-root': { m: 1, width: '25ch' },
			}}
			noValidate
			autoComplete="off"
		>
			<Grid
				container
				direction="row"
				justifyContent="flex-end"
				alignItems="center"
			>

				<Container >

					<form className="row g-3" action='ratnesh.php' >
						<div className="col-md-6">
							<div className='text-center'>
								<div className='registrstion'>
									<h2 colour="success"> Add Teacher </h2>
								</div>
								<div>



									<div className='text-center'>
										<label htmlFor="icon-button-file">
											<Input accept="image/*" id="icon-button-file" type="file" sx={{ width: 80, height: 80 }} />
											<IconButton color="primary" aria-label="upload picture" component="span" sx={{ width: 80, height: 80 }}>
												<PhotoCamera />

											</IconButton>
										</label>
									</div>
									<TextField type="text" id="standard-basic" label="Name" variant="standard" helperText="Enter the Name" />
									<TextField type="Email" id="standard-basic" label="Email" variant="standard" helperText="Please using valid email" />
									<TextField
										id="standard-select-currency-native"
										select
										label="Gender"
										helperText="Required"
										value={currency}
										onChange={handleChange}
										SelectProps={{
											native: true,
										}}

										variant="standard"
									>
										{currencies.map((option) => (
											<option key={option.value} value={option.value}>
												{option.label}
											</option>
										))}
									</TextField>
									<TextField type="number" id="standard-basic" label="Mobile.No" variant="standard" helperText="Please Enter the 10 digits number" />
									<TextField id="standard-basic" label="Date of Birth" variant="standard" helperText="Required" />
									<TextField id="standard-basic" label="Address" variant="standard" helperText="Required" />
									<TextField id="standard-basic" label="Date of joining" variant="standard" helperText="Required" />
									<TextField id="standard-basic" label="Post" variant="standard" />
									<TextField

										id="standard-multiline-static"
										label="Languages(Skill)"
										multiline
										rows={2}
										variant="standard"
									/>
									<TextField
										id="standard-multiline-static"
										label="Project(Work skill)"
										multiline
										rows={2}
										variant="standard"
									/>
									<div className='text-center' >
										<Button type="submit" variant="contained" size="large" >Submit</Button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</Container>
			</Grid>
		</Box>
	);
}

export default Form;