1
\$\begingroup\$

I am posting my code again for a proper review because the last time I posted my code here the website was incomplete, and was therefore voted off-topic. Now that I have completed it, I am posting the markup again hoping that someone can help guide me to correct whatever mistakes I may have made (especially in regards to the CSS markup) i.e whether what I have done is a good practice.

I have used inline and internal CSS to place the elements, for the background color and so on. The website is not responsive right now.Currently the provided code has two errors due to an incorrect API key for the Map.

As I mentioned in the last post, the website should look like this one: w3schools. Please feel free to comment on any mistakes, and if possible please let me know how I am doing skill-wise. If everything looks fine in the codes please let me know.

JavaScript for Google Map:

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);

  }

The main CSS:

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;
}

Finally, the HTML layout:

<!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 projects 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>
Improve this question
\$\endgroup\$
2
  • 1
    \$\begingroup\$ @kai.kyle I made some edits, the Stack Snippet is not really a good tool for what you are trying to do here, due to the fact that your are trying to demonstrate an entire layout. I have also updated the text and title of your question, though you should still add more text to describe the website itself, rather than just talk about what you want out of a review. \$\endgroup\$
    – Der Kommissar
    Jun 27, 2017 at 14:23
  • \$\begingroup\$ @EBrown why I am still not getting any reviews? \$\endgroup\$
    – user8172330
    Jul 1, 2017 at 8:28

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.