13 of 21 added 19 characters in body

Reassessment of website

I am posting my code again for a proper review because the last time I posted my codes here the website was incomplete and was therefore voted off-topic. Now that I have completed it, I am posting the codes again hoping that whatever mistakes there are in the codes you will let me know so that I can improve myself especially in the CSS. As I mentioned in the last post that the website should look like this onew3schools. Please feel free to comment on any mistakes and also you can let me know about what you think on my skills.This is really important as this website will go in my portfolio.

  function myMap() {
    var Prop = {
      center: new google.maps.LatLng(41.878114, -87.629798),
      zoom: 10,
    };
    var map = new google.maps.Map(document.getElementById("second-half"), Prop);
    var center = new google.maps.LatLng(41.878114, -87.629798);
    var marker = new google.maps.Marker({
      position: center
    });
    marker.setMap(map);

  }

  
 
body {
  margin-left: 0px;
}

html,
body {
  height: 100%;
}

#header {
  height: 50px;
  margin-top: 0px;
  position: fixed;
  width: 1357px;
  background-color: white;
  z-index: 99999;
  top: 0;
}

#menu {
  position: absolute;
  left: 807px;
  list-style-type: none;
  display: inline-block;
  top: -18px;
}

#menu.clear {
  clear: none;
}

#menu li {
  display: inline-block;
  padding-left: 15px;
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 16px;
}

#menu .a {
  text-decoration: none;
  text-align: center;
  padding-top: 20px;
}

#menu li:hover {
  background: grey;
}

#back {
  background-position: center;
  background-image: url("Huge-Backgrounds-63.jpg");
  position: relative;
  width: 1348px;
  height: 270px;
  background-size: cover;
}

#back a {
  padding: 20px;
  margin-top: -2px;
  margin-left: 30px;
  text-decoration: none;
  background: white;
  opacity: 0.5;
}

#back h1 {
  margin-left: 30px;
}

#back h4 {
  margin-left: 30px;
}

#back a:hover {
  opacity: 0.6;
}

.spacer {
  width: 100%;
  height: 28px;
}

.fa {
  width: 0.0002px;
  height: 0.00002px;
}

#menu .material-icons {
  vertical-align: middle;
}

#menu .nav-text {
  vertical-align: middle;
}

#b {
  position: absolute;
  top: 2px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-decoration: none;
}

#b:hover {
  background: grey;
}

#wrapper {
  width: 1330px;
}

#part-a a {
  padding: 12px 24px;
  color: white;
  text-decoration: none;
  background: black;
}

#part-a a:hover {
  background: grey;
  color: black;
}

#art button {
  padding: 8px 100px;
  cursor: pointer;
  position: absolute;
  bottom: 2px;
  left: 7px;
  border: 1px solid white;
  text-align: center;
}

#art button:hover {
  background-color: grey;
}

#social .w3:hover {
  color: blue;
}

#social .w1:hover {
  color: grey;
}

#social .w2:hover {
  color: white;
}

#first-image img:hover {
  opacity: 0.6;
}

#second-image img:hover {
  opacity: 0.6;
}

#third-image img:hover {
  opacity: 0.6;
}

#fourth-image img:hover {
  opacity: 0.6;
}

#secondrow-firstimage img:hover {
  opacity: 0.6;
}

#first-list button {
  padding: 16px 16px;
  background-color: black;
  cursor: pointer;
  color: white;
  border: none;
}

#first-list button:hover {
  background-color: grey;
  color: black;
}

#a-button {
  padding: 16px 20px;
  background-color: black;
  position: relative;
  left: -255px;
  border: none;
  color: white;
}

#a-button:hover {
  background-color: grey;
  color: black;
}

#footer a {
  padding: 10px 28px;
  position: absolute;
  left: 630px;
  color: black;
  text-decoration: none;
  background-color: white;
}

#footer a:hover {
  background-color: grey;
  color: black;
}

#soc {
  position: absolute;
  width: 100%;
  height: 43px;
  top: 110px;
}

#soc .w3 {
  font-size: 17pt;
  vertical-align: middle;
  position: relative;
  left: 625px;
  color: white;
}

#soc .w3:hover {
  color: grey;
}

#soc .w2 {
  font-size: 17pt;
  vertical-align: middle;
  position: relative;
  left: 669px;
  color: white;
}

#soc .w2:hover {
  color: grey;
}

#soc .w1 {
  font-size: 17pt;
  vertical-align: middle;
  position: relative;
  left: 647px;
  color: white;
}

#soc .w1:hover {
  color: grey;
}

#symbols {
  width: 1200px;
  margin-left: 45px;
  position: relative;
}

#para {
  height: 400px;
  padding: 128px 16px;
  width: 1310px;
}

#we-know {
  padding: 128px 16px;
  width: 1310px;
  background-color: #f2f2f2
}

#part-a {
  width: 500px;
  height: 200px;
}

#imagepho {
  width: 46%;
  position: relative;
  left: 680px;
  top: -202px;
}

#team {
  text-align: center;
  width: 1310px;
  height: 90%;
  padding: 128px 16px;
}

#wholeteam {
  width: 70%;
  height: 70%;
  margin-left: 50px;
  margin-top: 50px;
  position: relative;
}

#stats {
  width: 1310px;
  height: 100px;
  background-color: grey;
  padding: 64px 16px;
}

#art {
  position: absolute;
  width: 278.1px;
  height: 400px;
  top: 1px;
  box-shadow: 2px 2px 2px #888888;
}

#ceo {
  position: absolute;
  width: 278.1px;
  height: 400px;
  top: 1px;
  box-shadow: 2px 2px 2px #888888;
  left: 300px;
}

#ceo button {
  padding: 8px 100px;
  cursor: pointer;
  position: absolute;
  bottom: 2px;
  left: 7px;
  border: 1px solid white;
  text-align: center;
}

#ceo button:hover {
  background-color: grey;
}

#Designer {
  position: absolute;
  width: 278.1px;
  height: 400px;
  top: 1px;
  box-shadow: 2px 2px 2px #888888;
  left: 600px;
}

#Designer button {
  padding: 8px 100px;
  cursor: pointer;
  position: absolute;
  bottom: 2px;
  left: 7px;
  border: 1px solid white;
  text-align: center;
}

#Designer button:hover {
  background-color: grey;
}

#Web-designer {
  position: absolute;
  width: 278.1px;
  height: 400px;
  top: 1px;
  box-shadow: 2px 2px 2px #888888;
  left: 900px;
}

#Web-designer button {
  padding: 8px 100px;
  cursor: pointer;
  position: absolute;
  bottom: 2px;
  left: 7px;
  border: 1px solid white;
  text-align: center;
}

#Web-designer button:hover {
  background-color: grey;
}

#all {
  width: 85%;
  height: 70%;
  margin-left: 20px;
  margin-top: 20px;
  vertical-align: middle;
}

#partners {
  width: 10%;
  height: 90%;
  text-align: center;
}

#projects {
  width: 10%;
  height: 90%;
  text-align: center;
  position: relative;
  left: 350px;
  bottom: 69px;
}

#project {
  width: 10%;
  height: 90%;
  text-align: center;
  position: relative;
  left: 700px;
  bottom: 138px;
}

#my-gallery {
  text-align: center;
  width: 1310px;
  height: 600px;
  padding: 128px 16px;
}

#firstrow {
  width: 1270px;
  height: 200px;
  margin-left: 15px;
  position: relative;
  top: -3px;
}

#first-image {
  width: 23%;
  height: 97%;
  position: relative;
  top: 2px;
}

#second-image {
  width: 23%;
  height: 97%;
  position: relative;
  left: 325px;
  top: -192px;
}

#third-image {
  width: 23%;
  height: 97%;
  position: relative;
  left: 650px;
  top: -386px;
}

#fourth-image {
  width: 23%;
  height: 97%;
  position: relative;
  left: 972px;
  top: -579px;
}

#secondrow {
  width: 1270px;
  height: 200px;
  margin-left: 15px;
  position: relative;
  bottom: -7px;
}

#secondrow-firstimage {
  width: 23%;
  height: 97%;
  position: relative;
  top: 2px;
}

#skills {
  position: relative;
  width: 1310px;
  height: 350px;
  text-align: left;
  padding: 64px 16px;
}

#tex {
  width: 40%;
  height: 45%;
  position: absolute;
  left: 15px;
}

#progress {
  position: relative;
  height: 80%;
  width: 50%;
  position: absolute;
  left: 640px;
}

.progress-bar {
  width: 660px;
  height: 10%;
  position: absolute;
  top: 70px;
  background-color: #DCDCDC;
}

.prog-bar {
  width: 90%;
  height: 99%;
  position: relative;
  top: 0px;
  background-color: grey;
}

.progress-b {
  width: 660px;
  height: 10%;
  position: absolute;
  top: 190px;
  background-color: #DCDCDC;
}

.prog-b {
  width: 85%;
  height: 99%;
  position: relative;
  top: 0px;
  background-color: grey;
}

.progress {
  width: 660px;
  height: 10%;
  position: absolute;
  top: 300px;
  background-color: #DCDCDC;
}

.prog {
  width: 75%;
  height: 99%;
  position: relative;
  top: 0px;
  background-color: grey;
}

#pricing {
  position: relative;
  height: 900px;
  width: 1310px;
  padding: 128px 16px;
  background-color: grey;
}

#basic {
  width: 392px;
  height: 70%;
  position: relative;
  left: 30px;
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

#pro {
  width: 392px;
  height: 80%;
  position: relative;
  left: 475px;
  top: -650px;
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

#second-list button {
  padding: 16px 16px;
  background-color: black;
  cursor: pointer;
  color: white;
  border: none;
}

#second-list button:hover {
  background-color: grey;
  color: black;
}

#premium {
  width: 392px;
  height: 70%;
  position: relative;
  left: 920px;
  top: -1348px;
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}

#third-list button {
  padding: 16px 16px;
  background-color: black;
  cursor: pointer;
  color: white;
  border: none;
}

#third-list button:hover {
  background-color: grey;
  color: black;
}

#contact {
  width: 1310px;
  height: 700px;
  text-align: center;
  padding: 128px 16px;
}

#contact-form {
  position: relative;
  width: 98%;
  height: 70%;
  left: 20px;
}

#first-half {
  width: 50%;
  height: 99%;
  padding: 0px 8px;
}

#second-half {
  width: 45%;
  height: 99%;
  position: absolute;
  top: 0px;
  left: 685px;
}

#footer {
  width: 1342px;
  height: 150px;
  position: relative;
  background-color: black;
  padding-top: 64px;
  padding-bottom: 64px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
  <title>W3.CSS Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximun-scale=1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>

<body>

  <div id="header">

    <a href="#back" id="b">LOGO</a>


    <ul id="menu">

      <li class="p"><a href="#para" class="a"><span class="nav-text">ABOUT</span></a></li>
      <li class="p"><a href="#team" class="a"><i class="material-icons" style="font-size:20px;">person</i><span class="nav-text">TEAM</span></a></li>
      <li class="p"><a href="#my-gallery" class="a"><i class="material-icons" style="font-size:18px;">work</i><span class="nav-text">WORK</span></a></li>
      <li class="p"><a href="#pricing" class="a"><span class="nav-text">PRICING</span></a></li>
      <li class="p"><a href="#contact" class="a"><i class="material-icons" style="font-size:18px;">email</i><span class="nav-text">CONTACT</span></a></li>

    </ul>






  </div>
  <div class="spacer">

  </div>

  <div id="back">
    <h1>Start something that matters</h1><br/>
    <h4>Stop wasting valuable time with ptrojects that just isn't you</h4><br/>
    <a class="learn" href="#para">Learn more and start today</a>
    <div id="social" style="width:70px;height:30px; position:absolute;top:230px;left:30px;">
      <i class="fa fa-facebook-official w3" style="font-size:14pt; vertical-align:middle; "></i>
      <i class="fa fa-instagram w1" style="margin-left:17px; font-size:14pt;vertical-align:middle;"></i>
      <i class="fa fa-twitter w2" style="margin-left:19px;font-size:14pt;vertical-align:middle;"></i>
    </div>
  </div>
  <div id="para">
    <h3 align="center">ABOUT THE COMPANY</h3>
    <p align="center">Key features of the company</p>
    <br>

    <br>

    <div id="symbols">
      <div class="n" style=" height:250px;width:170px;"><i class="fa fa-desktop first" style="font-size:50px; margin-left:50px;margin-top:3px;"></i></div>
      <div class="n" style=" height:250px;width:170px; position:absolute;left:320px; top:0px; "><i class="fa fa-heart w3-margin-bottom w3-jumbo" style="font-size:50px;margin-left:55px;"></i></div>
      <div class="n" style=" height:250px;width:170px;left:650px; position:absolute;top:0px;"><i class="fa fa-diamond w3-margin-bottom w3-jumbo" style="font-size:50px;margin-left:55px;"></i></div>
      <div class="n" style=" height:250px;width:170px; position:absolute;left:920px; top:0px;"><i class="fa fa-cog w3-margin-bottom w3-jumbo" style="font-size:50px;margin-left:65px;"></i></div>
    </div>
  </div>
  <div id="we-know">
    <div id="part-a">
      <h3>We know design</h3>

      <p style="line-height:1.5;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        <br>tempor incididunt ut labore et dolore.</p>
      <br>
      <a href="#my-gallery"><i class="fa fa-th"style="position:relative;left:-12px;top:1px;"></i><span style="position:relative;left:12px;">View Our Works</span></a>
    </div>
    <div id="imagepho">
      <img src="phone_buildings.jpg" width="600" height="350" style="border-radius:15px;">
    </div>

  </div>
  <div id="team">
    <h3>THE TEAM</h3>
    <p>The ones who runs this company</p>
    <br>
    <div id="wholeteam">
      <div id="art">
        <img src="team1.jpg" alt="Anja Doe" style="width:100%;height:50%;filter:grayscale(50%);">
        <h3 style="margin-left:-180px;">Anja Doe</h3>
        <p style="margin-left:-180px;">Art director</p>
        <p style="margin-left:-40px;text-indent:-25px;">Phasellus eget enim eu lectus<br> faucibus vestibulum. Suspendisse<br> sodales pellentesque elementum.</p>
        <button id="button"><i class="fa fa-envelope"style="position:relative;left:-18px;font-size:11pt"></i>CONTACT</button>

      </div>

      <div id="ceo">
        <img src="team2.jpg" alt="John Doe" style="width:100%;height:50%;filter:grayscale(50%);">
        <h3 style="margin-left:-180px;">John Doe</h3>
        <p style="margin-left:-150px;">Ceo & founder</p>
        <p style="margin-left:-40px;text-indent:-25px;">Phasellus eget enim eu lectus<br> faucibus vestibulum. Suspendisse<br> sodales pellentesque elementum.</p>
        <button id="button"><i class="fa fa-envelope"style="position:relative;left:-18px;font-size:11pt"></i>CONTACT</button>

      </div>

      <div id="Designer">
        <img src="team4.jpg" alt="Dan star" style="width:100%;height:50%;filter:grayscale(50%);">
        <h3 style="margin-left:-180px;">Dan Star</h3>
        <p style="margin-left:-185px;">Designer</p>
        <p style="margin-left:-40px;text-indent:-25px;">Phasellus eget enim eu lectus<br> faucibus vestibulum. Suspendisse<br> sodales pellentesque elementum.</p>
        <button id="button"><i class="fa fa-envelope"style="position:relative;left:-18px;font-size:11pt"></i>CONTACT</button>

      </div>
      <div id="Web-designer">
        <img src="team3.jpg" alt="Dan star" style="width:100%;height:50%;filter:grayscale(50%);">
        <h3 style="margin-left:-180px;">Mike Ross</h3>
        <p style="margin-left:-172px;">Web Designer</p>
        <p style="margin-left:-40px;text-indent:-25px;">Phasellus eget enim eu lectus<br> faucibus vestibulum. Suspendisse<br> sodales pellentesque elementum.</p>
        <button id="button"><i class="fa fa-envelope"style="position:relative;left:-18px;font-size:11pt"></i>CONTACT</button>

      </div>

    </div>




  </div>
  <div id="stats">

    <div id="all">
      <div id="partners">
        <h1 style="margin-top:10px;color:white;">14+</h1>
        <p style="margin-top:-13px;color:white;">partners</p>


      </div>
      <div id="projects">
        <h1 style="margin-top:10px;color:white;">55+</h1>
        <p style="margin-top:-13px;color:white;">Projects Done</p>

      </div>
      <div id="project">
        <h1 style="margin-top:10px;color:white;">89+</h1>
        <p style="margin-top:-13px;color:white;">Clients Happy</p>
      </div>
    </div>
  </div>

  <div id="my-gallery">
    <h3>OUR WORK</h3>

    <p>What we've done for people
      <p>

        <br>
        </br>
        <div id="firstrow">
          <div id="first-image">
            <img src="tech_mic.jpg" style="width:100%;" alt="microphone">




          </div>
          <div id="second-image" style="">

            <img src="tech_drone.jpg" style="width:100%;" alt="drone">


          </div>
          <div id="third-image">
            <img src="tech_phone.jpg" style="width:100%;" alt="mobile">



          </div>
          <div id="fourth-image">

            <img src="tech_sound.jpg" style="width:100%;" alt="speaker">


          </div>





        </div>


        <div id="secondrow">
          <div id="secondrow-firstimage">
            <img src="tech_tablet.jpg" style="width:100%;" alt="microphone">




          </div>



        </div>
  </div>
  <div id="skills">
    <div id="tex">

      <h2>Our Skills</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>

    </div>
    <div id="progress">
      <i class="fa fa-camera" style="position:absolute;top:20px;"><span style="position:relative;left:15px;">Photography</span></i>
      <div class="progress-bar">

        <div class="prog-bar" style="">
          <p style="color:white;position:absolute;top:-10px;left:350px;">90%</p>
        </div>
      </div>
      <i class="fa fa-desktop" style="position:absolute;top:140px;"><span style="position:relative;left:15px;">Web&nbsp;Design</span></i>
      <div class="progress-b">

        <div class="prog-b">
          <p style="color:white;position:absolute;top:-10px;left:350px;">85%</p>
        </div>
      </div>

      <i class="fa fa-photo" style="position:absolute;top:260px;"><span style="position:relative;left:15px;">Photoshop</span></i>
      <div class="progress">

        <div class="prog">
          <p style="color:white;position:absolute;top:-10px;left:350px;">75%</p>
        </div>
      </div>

    </div>
  </div>

  <div id="pricing">
    <h3 style="text-align:center;">Pricing</h3>
    <p style="text-align:center;">Choose a pricing plan that fits your needs.</p>
    <br>
    </br>
    <br>
    </br>
    <div id="basic">

      <ul id="first-list" style="list-style-type:none;blue;width:100%;height:950px;padding-left:0px;margin-top:0px;margin-bottom:0px;">
        <li style="border:1px solid silver;text-align:center;width:95%;height:10%;padding:12px 8px;background-color:black">
          <h2 style="color:white;">Basic</h2>
        </li>
        <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>10GB&nbsp</b>Storage</li>
        <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>10</b>&nbspEmails</li>
        <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>10</b>&nbspDomains</li>
        <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>Endless</b>&nbspSupport</li>
        <li style="border:1px solid silver;text-align:center;width:95%;padding:8px;height:17%;position:relative;background-color:white;"><b style="font-size:25pt;position:absolute;top:32px;left:130px;">$ 10</b><span style="position:absolute; top:87px;left:130px;color:grey;">per month</span></li>
        <li style="border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><button>Sign Up</button</li>


    </ul>





    </div>
    <div id="pro">

    <ul id="second-list" style="list-style-type:none;blue;width:100%;height:1144px;padding-left:0px;margin-top:0px;margin-bottom:0px;">
    <li style="border:1px solid silver;text-align:center;width:95%;height:10%;padding:12px 8px;background-color:#f44336;"><h2 style="color:white;">Pro</h2></li>
    <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>25GB&nbsp;</b>Storage</li>
    <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>25</b>&nbsp;Emails</li>
    <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>25</b>&nbsp;Domains</li>
    <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>Endless</b>&nbspSupport</li>
    <li style="border:1px solid silver;text-align:center;width:95%;padding:8px;height:17%;position:relative;background-color:white;"><b style="font-size:25pt;position:absolute;top:32px;left:130px;">$ 25</b><span style="position:absolute; top:87px;left:130px;color:grey;">per month</span></li>
    <li style="border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><button>Sign Up</button</li>


    </ul>





    </div>
    <div id="premium">

    <ul id="third-list" style="list-style-type:none;blue;width:100%;height:950px;padding-left:0px;margin-top:0px;margin-bottom:0px;">
    <li style="border:1px solid silver;text-align:center;width:95%;height:10%;padding:12px 8px;background-color:black;"><h2 style="color:white;">Premium</h2></li>
    <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>50GB&nbsp;</b>Storage</li>
    <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>50</b>&nbsp;Emails</li>
    <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>50</b>&nbsp;Domains</li>
    <li style="height:5%;border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><b>Endless</b>&nbspSupport</li>
    <li style="border:1px solid silver;text-align:center;width:95%;padding:8px;height:17%;position:relative;background-color:white;"><b style="font-size:25pt;position:absolute;top:32px;left:130px;">$ 50</b><span style="position:absolute; top:87px;left:130px;color:grey;">per month</span></li>
    <li style="border:1px solid silver;text-align:center;width:95%;padding:8px;background-color:white;"><button>Sign Up</button</li>


    </ul>





    </div>





    </div>
    <div id="contact">

    <h3>CONTACT</h3>
    <p>Lets get in touch. Send us a message:</p>
    <br>

    <div id="contact-form">
    <div id="first-half">
    <p style="float:left;font-size:16pt;"><i class="fa fa-map-marker">&nbsp;Chicago,US</i></p>
    <p style="clear:both;float:left;font-size:16pt;"><i class="fa fa-phone">&nbsp;Phone&nbsp;+00151515</i></p>
    <p style="clear:both;float:left;font-size:16pt;"><i class="fa fa-envelope">&nbsp;Email:mail@mail.com</i></p>
    <br>
    </br>
    <form id="a-form" action="" method="POST" style="clear:both;position:relative;top:65px;">
    <input type="text" name="name" required placeholder="Name" style="border:1px solid #ccc;width:100%;padding:8px;font-size:14pt;"/><br>
    </br>
    <input type="text" name="email" required placeholder="Email" style="border:1px solid #ccc;width:100%;padding:8px;font-size:14pt;"/><br>
    </br>
    <input type="text" name="subject" required placeholder="Subject" style="border:1px solid #ccc;width:100%;padding:8px;font-size:14pt;"/>
    <br>
    </br>
    <input type="text" name="message" placeholder="Message" style="border:1px solid #ccc;width:100%;padding:8px;font-size:14pt;"/>
    <br>
    </br>
    <button id="a-button"><i class="fa fa-paper-plane"style="position:relative;left:-5px;"></i><span style="position:relative;left:10px;">Send Message</span></button>
          </form>


    </div>

    <div id="second-half">


    </div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-928DcpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>






  </div>
  </div>
  <div id="footer" style="">
    <a href="#back"><i class="fa fa-arrow-up"style="position:relative;left:-10px;"></i><span style="position:relative;left:12px;">To the top</span></a>
    <div id="soc">
      <i class="fa fa-facebook-official w3"></i>
      <i class="fa fa-instagram w1"></i>
      <i class="fa fa-twitter w2"></i>
    </div>
    <p>
  </div>

</body>

</html>