6
\$\begingroup\$

I have been learning to code for nearly a month now. Any tips on how I can improve with indenting to help future readers?

Snippet

    body 
    
    /* font & back clr */
    
    { font-family: verdana; background:whitesmoke ; color:black; }
    
    
    .menu { 
        
    background: black; 
    width:100%;}
    
    
    ul {
        list-style-type: none;
        margin: 0 auto;
        display:table;
        padding: 0;
        z-index: 100;
        overflow: hidden;
    }
    
    .logo {
        height:   
        position: relative;
        margin-bottom:-35px;
        
        
        
        
        
       } 
        
        
    
    
    li {
        float: left;
    }
    
    
    /* DROPDOWN Txt Color */
    
    li a, .dropbtn {
        display: inline-block;
        color: whitesmoke;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    
    /* DROPDOWN Txt BOX Color */
    
    
    li a:hover, .dropdown:hover .dropbtn {
        background-color: #33383b;
    }
    
    
    
    li.dropdown {
        display: inline-block;
    }
    
    
    /* DROPDOWN content clr */
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: whitesmoke;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 100;
    }
    
    /* DROPDOWN TEXT CLR */
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    
    /* DROPDOWN COL BOX */
    .dropdown-content a:hover {
        
        background-color: whitesmoke}
    
    
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
            @keyframes fade {
            0%   { opacity: 0; }
            11.11%   { opacity: 1; }
            33.33%  { opacity: 1; }
            44.44%  { opacity: 0; }
            100% { opacity: 0; }
    }
    
    /* MENU COL */
    
    .menu { 
      position: relative;
      z-index: 0;
      height: 2.9em;
      margin-bottom: -0.4em;
      margin-top: 0em;
      z-index:1000;
      
      background-color:#33383b;
    }
    
    
    
    /* slideshow header */
    
    
    
    .slideshow { 
    position: relative;
        z-index: ;
        width: 100%;
        top: 0em;
        box-sizing: border-box;
        height: 250px;
        max-width: 100%;
        bottom: 20px;
      }
    
    .slideshow img{
        margin:0 auto;
        width: 100%;
        max-height: 100%;
    }
    
    
    
    .slideshow img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
        .slideshow img:nth-child(1) { animation-delay: 0s;  }
        .slideshow img:nth-child(2) { animation-delay: 3s;  }
        .slideshow img:nth-child(3) { animation-delay: 6s;  }
    
    
    
    
    /* slideshow2 header */
    
    
    
    .slideshow2 { 
    position: relative;
        z-index: ;
        width: 150px;
        top: 0em;
        box-sizing: border-box;
        height: 40px;
        max-width: 100%;
        bottom: 20px;
      }
    
    .slideshow2 img{
        margin:0 auto;
        width: 100%;
        max-height: 100%;
    }
    
    
    
    .slideshow2 img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
        .slideshow2 img:nth-child(1) { animation-delay: 0s;  }
        .slideshow2 img:nth-child(2) { animation-delay: 3s;  }
        .slideshow2 img:nth-child(3) { animation-delay: 6s;  }
        
    
    
    
    /* page container */
    
    
    
    .container {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    
    
    
    /* article from jobs */
    
    
    .article {
        text-align: left;
        height: 200px;
        margin-bottom:11px
    }
    
    
    
    
    /* body of text */
    
    
    
    textinfo {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
    
        
        
    /* footer opts */
        
        
    
    }
    
    .footer-distributed{
    	background-color: #292c2f;
    	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    	box-sizing: border-box;
    	width: 100%;
    	text-align: left;
    	font: 15px verdana;
    
    	padding: 30px 30px;
    	margin-top: 100px;
    }
    
    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
    	display: inline-block;
    	vertical-align: top;
    }
    
    /* footer left */
    
    .footer-distributed .footer-left{
    	width: 40%;
    }
    
    /* the company logo */
    
    .footer-distributed h3{
    	color:  #ffffff;
    	font: normal 15px 'Verdana', cursive;
    	margin: 0;
    }
    
    .footer-distributed h3 span{
    	color:  #5383d3;
    }
    
    /* footer links */
    
    .footer-distributed .footer-links{
    	color:  #ffffff;
    	margin: 20px 0 12px;
    	padding: 0;
    }
    
    .footer-distributed .footer-links a{
    	display:inline-block;
    	line-height: 1.8;
    	text-decoration: none;
    	color:  inherit;
    }
    
    .footer-distributed .footer-company-name{
    	color:  #8f9296;
    	font-size: 15px;
    	font-weight: normal;
    	margin: 0;
    }
    
    /* footer center */
    
    .footer-distributed .footer-center{
    	width: 35%;
    }
    
    .footer-distributed .footer-center i{
    	background-color:  #33383b;
    	color: #ffffff;
    	font-size: 15px;
    	width: 38px;
    	height: 38px;
    	border-radius: 50%;
    	text-align: center;
    	line-height: 42px;
    	margin: 10px 15px;
    	vertical-align: middle;
    }
    
    .footer-distributed .footer-center i.fa-envelope{
    	font-size: 17px;
    	line-height: 38px;
    }
    
    .footer-distributed .footer-center p{
    	display: inline-block;
    	color: #ffffff;
    	vertical-align: middle;
    	margin:0;
    }
    
    .footer-distributed .footer-center p span{
    	display:block;
    	font-weight: normal;
    	font-size:14px;
    	line-height:2;
    }
    
    .footer-distributed .footer-center p a{
    	color:  #5383d3;
    	text-decoration: none;;
    }
    
    
    /* footer right */
    
    .footer-distributed .footer-right{
    	width: 20%;
    }
    
    .footer-distributed .footer-company-about{
    	line-height: 20px;
    	color:  #92999f;
    	font-size: 15px;
    	font-weight: normal;
    	margin: 0;
    }
    
    .footer-distributed .footer-company-about span{
    	display: block;
    	color:  #ffffff;
    	font-size: 15px;
    	font-weight: bold;
    	margin-bottom: 20px;
    }
    
    .footer-distributed .footer-icons{
    	margin-top: 25px;
    }
    
    .footer-distributed .footer-icons a{
    	display: inline-block;
    	width: 35px;
    	height: 35px;
    	cursor: pointer;
    	background-color:  #33383b;
    	border-radius: 2px;
    
    	font-size: 15px;
    	color: #ffffff;
    	text-align: center;
    	line-height: 35px;
    
    	margin-right: 3px;
    	margin-bottom: 5px;
    }
    
    /* un responsive rmoval */
    
    @media (max-width: 880px) {
    
    	.footer-distributed{
    		font: bold 14px sans-serif;
    	}
    
    	.footer-distributed .footer-left,
    	.footer-distributed .footer-center,
    	.footer-distributed .footer-right{
    		display: block;
    		width: 100%;
    		margin-bottom: 40px;
    		text-align: center;
    	}
    
    	.footer-distributed .footer-center i{
    		margin-left: 0;
    	}
    
    	
    logo {
        
    margin-bottom:100px;
    
         }
    
    
        
        
    input {
            font-size: 100px;
            
        }
        
        
    
    
        .captcha {
      -webkit-transform-origin:0 0;
      transform-origin:0 0;
      -webkit-transform:scale(0.70);
      transform:scale(0.70);
    }
    <!DOCTYPE html>  
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
        
    <head>
       <title>Kontakt - A.Willi A.G</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta http-equiv= "content-type" content="text/html"; charset="UTF-8">
       <meta name ="web_author" content="A.Willi A.G A.J.W">
       <meta name="robots" content="noarchive"> 
       <meta name="robots" content="selection">
       <meta name="language" content="DE">
       <meta name='pagename' content='Home, Rohrschlosser, Schweisser, Jobs, Personalverleih, Basel, Schweiz.'>
       <meta name="copyright" content="Copyright at A.Willi A.G Personalverleih, Rohrschlosser, Schweisser, Basel.">
       <meta name ="description" content=
             
        "Die A.Willi A.G ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich tatig mit über 30-jahrige Erfahrung in dieser Sparte.<<Wir suchen immer neue Montagepersonel; Rohrschlosser, Schweisser und Monteur>><<Basel, Jobs, Welder,Pipefitter, Mntage, Arbeitsmarkt, Temporär>>">
        
    <link rel="shortcut icon" href="aw.png">
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script src="html5shiv.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>
        
    <script>
    function _(id){ return document.getElementById(id); }
    function submitForm(){
    	_("mybtn").disabled = true;
    	_("status").innerHTML = 'please wait ...';
    	var formdata = new FormData();
    	formdata.append( "n", _("n").value );
    	formdata.append( "e", _("e").value );
    	formdata.append( "m", _("m").value );
    	var ajax = new XMLHttpRequest();
    	ajax.open( "POST", "example_parser.php" );
    	ajax.onreadystatechange = function() {
    		if(ajax.readyState == 4 && ajax.status == 200) {
    			if(ajax.responseText == "success"){
    				_("my_form").innerHTML = '<h2>Thanks '+_("n").value+', your message has been sent.</h2>';
    			} else {
    				_("status").innerHTML = ajax.responseText;
    				_("mybtn").disabled = false;
    			}
    		}
    	}
    	ajax.send( formdata );
    }
    </script>
    
    <body>
    
    <div class="container">
    
    <div class="logo"> 
    <h1 align="center"><img src="logo2.png" height="110" width="500"  alt="A.Willi A.G" /</h1>
    </div>
        
    <div class="menu"> 
    <ul>
         <li><a href="index.html">Home</a></li> 
         <li class="dropdown">
         <a href="" class="dropbtn">Bewerber</a>
         <div class="dropdown-content">
         <a href="info.html">Info</a>
         <a href="jobs.html">Jobs</a>
    </div>  
    </li>
        
    <li class="dropdown">   
         <a href="#" class="dropbtn">Kunde</a>
         <div class="dropdown-content">
         <a href="personnel.html">Personalverleih</a>
         <a href="rental.html">Werkzeuge Mieten</a>
         <a href="refrences.html">Referenzen</a>
         <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
    </ul>
    </li>
    </div>
        
    <div class="slideshow"> 
         <img src="panorama.jpg">
         <img src="panorama.jpg">
         <img src="panorama.jpg">
    </div>
        
        
    <h2 align="center"> <!--FORM-->
    <form id="my_form" onsubmit="submitForm(); return false;">
      <p><input style="font-size: 20px" id="n" placeholder="Vorname" required></p>
    <p><input style="font-size: 20px" id="x" placeholder="Nachname" required></p>
    <p><input style="font-size: 20px" id="z" placeholder="Telefon" required></p>
    <p><input style="font-size: 20px" id="z" placeholder="Email Address" required></p>
    <textarea style= "font-size: 20px" id="m" placeholder="write your message here" rows="10" required></textarea>
        
        <div class= "g-recaptcha" data-sitekey="6LfAMQ0UAAAAAHqX2HDLeV8nggkLrBNwR9piJDCG">
        </div>
        
      <p><input style="font-size: 20px" id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
    </form>
    
        </h2>
        
    
        
    <footer class="footer-distributed"> <!--LEFT LOGO FOOT-->
        
    <div class="footer-left"> 
         <img src="awlogocolor.png" height="50" width="250" alt="A.Willi A.G" />   
         <p class="footer-links">     <!--LINKS-->
         <a href="#">Home</a>·
         <a href="#">Zertifikate</a>·
         <a href="#">Datenschutz-Bestimmungen</a>·
         <p class="footer-company-name">&copy;2016 A.Willi A.G</p>
    </div>
        
        
    <div class="footer-center"> <!--CENTER-->
    <div>
         <i class="fa fa-map-marker"></i>
         <p><span>Wasgenring 94</span> CH-4055 Basel</p>
    </div>   
    <div>
         <i class="fa fa-phone"></i>
         <p><span>Fax +41 (0)61 856 14 38</span>
          Tel. +41 (0)61 646 18 18<span>
          info@awilliag.ch</span></p>
    </div>
    <div>
         <i class="fa fa-envelope"></i>
    </div>
    </div>
        
    <div class="footer-right"> <!--RIGHT-->
    <div class="slideshow2"> 
         <p><font color="white">Wir möchten uns bei alle unseren Kunden bedanken.</font></p>
         <img src="lehman.png" height="50" width="50">
         <img src="jc.png" height="50" width="50">
         <img src="iwb.png" height="50" width="50">
    </div>
    </div>
    </footer>  
        
        
    </body> 
    </div>
    </html>

\$\endgroup\$
  • \$\begingroup\$ The inner elements of HTML are laid out in a XML embedding style. There is a feature in CR snippet that helps you to indent your code btw. \$\endgroup\$ – Siobhan Nov 28 '16 at 15:51
5
\$\begingroup\$

I noticed that some of your HTML Tags are misplaced and will give you weird results if viewed in most browsers.

I went in and indented the tags the way I described below and noticed that you have <li> tags outside of <ul> tags which is syntactically incorrect.

This is your Menu Div after indenting,

<div class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li class="dropdown">
            <a href="" class="dropbtn">Bewerber</a>
            <div class="dropdown-content">
                <a href="info.html">Info</a>
                <a href="jobs.html">Jobs</a>
            </div>
        </li>

        <li class="dropdown">
            <a href="#" class="dropbtn">Kunde</a>
            <div class="dropdown-content">
                <a href="personnel.html">Personalverleih</a>
                <a href="rental.html">Werkzeuge Mieten</a>
                <a href="refrences.html">Referenzen</a>
                <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
    </ul>
    </li>
</div>
  • <div class="dropdown-content"> doesn't have an ending tag
  • you have </li> outside of the </ul> end tag.
  • you should be using HTML5 which has a <nav> tag designed to take the place of tags like <div class="menu">

You also have a Form Tag inside of a H2 tag, This doesn't make sense, I think you meant to style the Form Tag itself or put it inside of a Div.

You have a CSS Stylesheet, so you should not use align in your tags. Instead of align, you should be using CSS, especially if you want this site to show appropriately on Mobile as well. you use it a bit, while it is available I would still Figure out the correct CSS to make it appear where you want it. I left the Align attributes in the HTML, but it felt a little dirty to me.

Your Address HTML is a little odd as well, unless you are not using HTML5. HTML5 has Address tags. w3schools.com tag And MDN tag

By using the Address tag you allow Search engines and Mobile Browsers to know that these are locations, meaning that people can find your business easier.

Google gives results based on location, and this is how it is done.

Another thing that I noticed is that you have a Script tag that is not inside of either the head tag or the body tag, this isn't compliant with standards either.

I found that your <img> was missing the ending character on the tag and it was causing a mild irritant to the Browser

The ending </div> tag for the container was outside of the </body> leaving the tag orphaned, I pulled it back inside.

I found it very curious that you used the HTML5 footer tag but you didn't use the Header tag or the Address Tag or the Nav tag.

I am uncertain where the div with the slideshow attribute is supposed to go so I left it just below your menu div.

I would not use all the Comment tags either, your classes and tags should really speak for themselves.

I have not implemented any HTML5 tags that I mentioned, I just indented and corrected tag placement, but I think it looks a little different already. (I may have done a little bit more...)

Here is what I have now

<body>
    <script>
        function _(id) { return document.getElementById(id); }
        function submitForm() {
            _("mybtn").disabled = true;
            _("status").innerHTML = 'please wait ...';
            var formdata = new FormData();
            formdata.append("n", _("n").value);
            formdata.append("e", _("e").value);
            formdata.append("m", _("m").value);
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "example_parser.php");
            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    if (ajax.responseText == "success") {
                        _("my_form").innerHTML = '<h2>Thanks ' + _("n").value + ', your message has been sent.</h2>';
                    } else {
                        _("status").innerHTML = ajax.responseText;
                        _("mybtn").disabled = false;
                    }
                }
            }
            ajax.send(formdata);
        }
    </script>
    <div class="container">
        <div class="logo">
            <h1 align="center"><img src="logo2.png" height="110" width="500" alt="A.Willi A.G" /></h1>
        </div>
        <div class="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li class="dropdown">
                    <a href="" class="dropbtn">Bewerber</a>
                    <div class="dropdown-content">
                        <a href="info.html">Info</a>
                        <a href="jobs.html">Jobs</a>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropbtn">Kunde</a>
                    <div class="dropdown-content">
                        <a href="personnel.html">Personalverleih</a>
                        <a href="rental.html">Werkzeuge Mieten</a>
                        <a href="refrences.html">Referenzen</a>
                        <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="slideshow">
            <img src="panorama.jpg">
            <img src="panorama.jpg">
            <img src="panorama.jpg">
        </div>
        <content align="center">
            <form id="my_form" onsubmit="submitForm(); return false;">
                <p><input style="font-size: 20px" id="n" placeholder="Vorname" required></p>
                <p><input style="font-size: 20px" id="x" placeholder="Nachname" required></p>
                <p><input style="font-size: 20px" id="z" placeholder="Telefon" required></p>
                <p><input style="font-size: 20px" id="z" placeholder="Email Address" required></p>

                <textarea style="font-size:20px" id="m" placeholder="write your message here" rows="10" required></textarea>

                <div class="g-recaptcha" data-sitekey="6LfAMQ0UAAAAAHqX2HDLeV8nggkLrBNwR9piJDCG" align="center">
                </div>

                <p><input style="font-size: 20px" id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
            </form>
        </content>
        <footer class="footer-distributed">
            <div class="footer-left">
                <img src="awlogocolor.png" height="50" width="250" alt="A.Willi A.G" />
                <p class="footer-links">
                    <a href="#">Home</a>·
                    <a href="#">Zertifikate</a>·
                    <a href="#">Datenschutz-Bestimmungen</a>·
                <p class="footer-company-name">&copy;2016 A.Willi A.G</p>
            </div>
            <div class="footer-center">
                <div>
                    <i class="fa fa-map-marker"></i>
                    <p><span>Wasgenring 94</span> CH-4055 Basel</p>
                </div>
                <div>
                    <i class="fa fa-phone"></i>
                    <p>
                        <span>Fax +41 (0)61 856 14 38</span>
                        Tel. +41 (0)61 646 18 18<span>
                            info@awilliag.ch
                        </span>
                    </p>
                </div>
                <div>
                    <i class="fa fa-envelope"></i>
                </div>
            </div>
            <div class="footer-right">
                <div class="slideshow2">
                    <p><font color="white">Wir möchten uns bei alle unseren Kunden bedanken.</font></p>
                    <img src="lehman.png" height="50" width="50">
                    <img src="jc.png" height="50" width="50">
                    <img src="iwb.png" height="50" width="50">
                </div>
            </div>
        </footer>
    </div>
</body>

For HTML I normally new line and indent every tag inside of another tag

<html>
    <body>
        <h1>
            Heading Text here.
        </h1>
    </body>
</html>

and with the CSS I would treat it like I do other languages with curly braces ({})

Where this is acceptable

ul {
    list-style-type: none;
    margin: 0 auto;
    display:table;
    padding: 0;
    z-index: 100;
    overflow: hidden;
}

But this is not

.menu { 

background: black; 
width:100%;}

This is also acceptable

body 

/* font & back clr */

{ font-family: verdana; background:whitesmoke ; color:black; }

but I don't like it because I can't, at a quick glance, see that there are 3 rules here. I also missed that these rules are for the body tag because the rules were separated from the selector by a comment and white space, something that is frowned upon.

\$\endgroup\$
  • \$\begingroup\$ cheers malachi, this gave me a lot of insight on where to improve on, appreciate the help and time you took to help this newb out. :P \$\endgroup\$ – A.J.W Nov 29 '16 at 15:21
  • \$\begingroup\$ you are welcome. please remember that Code Review thrives on voting and community involvement, this means to upvote good answer, downvote bad answers and accept the best answer. \$\endgroup\$ – Malachi Nov 29 '16 at 15:37
4
\$\begingroup\$

There's 2 possibilities: 2 spaces or 4 spaces per level of indentation.

But whatever you do, be consistent. That's the most important of all.

As a side note: your tags were oddly matched at times. I fixed your inconsistencies in the code below, I'll leave fixing your CSS as an exercise.

In your CSS, the same rule applies: be consistent. With your whitespace, with your indentation, etc.

HTML

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >

    <head>
        <title>Kontakt - A.Willi A.G</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv= "content-type" content="text/html"; charset="UTF-8">
        <meta name ="web_author" content="A.Willi A.G A.J.W">
        <meta name="robots" content="noarchive"> 
        <meta name="robots" content="selection">
        <meta name="language" content="DE">
        <meta name='pagename' content=
        "Home, Rohrschlosser, Schweisser, Jobs, Personalverleih, Basel, Schweiz.">
        <meta name="copyright" content=
        "Copyright at A.Willi A.G Personalverleih, Rohrschlosser, Schweisser, Basel.">
        <meta name ="description" content=
        "Die A.Willi A.G ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich tatig mit über 30-jahrige Erfahrung in dieser Sparte.<<Wir suchen immer neue Montagepersonel; Rohrschlosser, Schweisser und Monteur>><<Basel, Jobs, Welder,Pipefitter, Mntage, Arbeitsmarkt, Temporär>>">
        <link rel="shortcut icon" href="aw.png">
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <script src="html5shiv.js"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>

    <script>
        function _(id){ return document.getElementById(id); }
        function submitForm(){
            _("mybtn").disabled = true;
            _("status").innerHTML = 'please wait ...';
            var formdata = new FormData();
            formdata.append( "n", _("n").value );
            formdata.append( "e", _("e").value );
            formdata.append( "m", _("m").value );
            var ajax = new XMLHttpRequest();
            ajax.open( "POST", "example_parser.php" );
            ajax.onreadystatechange = function() {
                if(ajax.readyState == 4 && ajax.status == 200) {
                    if(ajax.responseText == "success"){
                        _("my_form").innerHTML = '<h2>Thanks '+_("n").value+', your message has been sent.</h2>';
                    } else {
                        _("status").innerHTML = ajax.responseText;
                        _("mybtn").disabled = false;
                    }
                }
            }
            ajax.send( formdata );
        }
    </script>

    <body>
        <div class="container">
            <div class="logo"> 
                <h1 align="center"><img src="logo2.png" height="110" width="500"  alt="A.Willi A.G" /</h1>
            </div>

            <div class="menu"> 
                <ul>
                    <li><a href="index.html">Home</a></li> 
                    <li class="dropdown">
                        <a href="" class="dropbtn">Bewerber</a>
                        <div class="dropdown-content">
                            <a href="info.html">Info</a>
                            <a href="jobs.html">Jobs</a>
                        </div>  
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropbtn">Kunde</a>
                        <div class="dropdown-content">
                            <a href="personnel.html">Personalverleih</a>
                            <a href="rental.html">Werkzeuge Mieten</a>
                            <a href="refrences.html">Referenzen</a>
                            <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="slideshow"> 
                <img src="panorama.jpg">
                <img src="panorama.jpg">
                <img src="panorama.jpg">
            </div>


            <h2 align="center"> <!--FORM-->
                <form id="my_form" onsubmit="submitForm(); return false;">
                    <p><input style="font-size: 20px" id="n" placeholder="Vorname" required></p>
                    <p><input style="font-size: 20px" id="x" placeholder="Nachname" required></p>
                    <p><input style="font-size: 20px" id="z" placeholder="Telefon" required></p>
                    <p><input style="font-size: 20px" id="z" placeholder="Email Address" required></p>
                    <textarea style= "font-size: 20px" id="m" placeholder="write your message here" rows="10" required></textarea>
                    <div class= "g-recaptcha" data-sitekey="6LfAMQ0UAAAAAHqX2HDLeV8nggkLrBNwR9piJDCG"></div>
                    <p><input style="font-size: 20px" id="mybtn" type="submit" value="Submit Form">
                        <span id="status"></span>
                    </p>
                </form>
            </h2>

            <footer class="footer-distributed"> <!--LEFT LOGO FOOT-->
                <div class="footer-left"> 
                    <img src="awlogocolor.png" height="50" width="250" alt="A.Willi A.G" />   
                    <p class="footer-links">     <!--LINKS-->
                    <a href="#">Home</a>·
                    <a href="#">Zertifikate</a>·
                    <a href="#">Datenschutz-Bestimmungen</a>·
                    <p class="footer-company-name">&copy;2016 A.Willi A.G</p>
                </div>

                <div class="footer-center"> <!--CENTER-->
                    <div>
                        <i class="fa fa-map-marker"></i>
                        <p><span>Wasgenring 94</span> CH-4055 Basel</p>
                    </div>   
                    <div>
                        <i class="fa fa-phone"></i>
                        <p>
                            <span>Fax +41 (0)61 856 14 38</span>
                            <span>Tel. +41 (0)61 646 18 18<span>
                            <span>info@awilliag.ch</span>
                        </p>
                    </div>
                    <div>
                        <i class="fa fa-envelope"></i>
                    </div>
                </div>

                <div class="footer-right"> <!--RIGHT-->
                    <div class="slideshow2"> 
                        <p><font color="white">Wir möchten uns bei alle unseren Kunden bedanken.</font></p>
                        <img src="lehman.png" height="50" width="50">
                        <img src="jc.png" height="50" width="50">
                        <img src="iwb.png" height="50" width="50">
                    </div>
                </div>
            </footer>  
        </div>
    </body> 
</html>
\$\endgroup\$
  • \$\begingroup\$ cheers this helped alot getting an idea of how to pattern it \$\endgroup\$ – A.J.W Nov 28 '16 at 16:06

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.