Jump to content
Sign in to follow this  
stormtracker

Html5 tags not working need help please

Recommended Posts

Hi what I am trying to is add the Request a Free Qoute to the top right hand side and have a section in the middle for my and also would like to add text to my footer image and for the header image I would like to make width 100% and a height of 85% with loosing contrast of the image can any body please help me out have I done some think wrong here is the html code 

<!DOCTYPE html>
<html lang="en">
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="Affordable Gardencare  For Small And Medium-Sized Yards">
        <meta name="author" content="Michael Wright">
        <title>Wright's lawncare service</title>
        <link rel="stylesheet" href="./css/style.css">
		<link rel="stylesheet" href="./css/font-awesome.min.css">
    <script>
	var bleep = new Audio();
	bleep.src = "bleep.mp3";
	function playBtnSounds(num){
	    bleep.play();
		}
		var div1 = document.getElementById("div1");
		div1.innerHTML = "Loaded content for section =+num;
	</script>
	</head>

  <body>

    <header>

      <div class="container">

        <div id="branding">

          <h1><i class="fa fa-rocket"></i> <span class="highlight">Wright's</span> Lawncare Service</h1>

        </div>

        <nav>

          <ul>

            <li><a class="current"><a href="index.html" onmousedown="bleep.play()">Home</a></li>

            <li><a href="about.html" onmousedown="bleep.play()">About</a></li>

            <li><a href="service.html"onmousedown="bleep.play()">Service</a></li>

            <li><a href="garden.html" onmousedown="bleep.play()">Garden Blog</a></li>
			
			<li><a href="contact.html" onmousedown="bleep.play()">Contact Us</a></li>
          </ul>

        </nav>

      </div>

    </header>

    <section id="showcase">

      <div class="container">
        <img src="Images/AdobeStock_85781068_Preview.jpeg" width="1000px" height="100%" alt="header.png">
		
		<h1>Affordable Gradencare Packages For Small And Medium-Sized Yards</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero  tempore, consequuntur culpa repellendus perspiciatis, atque corporis a ut nobis ratione odit tenetur nesciunt asperiores expedita eius sed, neque optio.</p>

      </div>

    </section>

    <section id="newsletter">

      <div class="container">

        <h1>You Grow It We Mow It </h1>

      </div>

    </section>

    <section id="boxes">

      <div class="container">

        <div class="woc">

          <i class="fa fa-signal fa-5x"></i>

          <h3> What our Customer say</h3>

          			  <script type="text/javascript">
/***********************************************
* IFRAME Scroller script- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//specify path to your external page:
var iframesrc="external.htm"

//You may change most attributes of iframe tag below, such as width and height:
document.write('<iframe id="datamain" src="'+iframesrc+'" width="180px" height="160px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>')

</script>

        </div>
    		
        <div class="box">

          <i class="fa fa-photo fa-5x"></i>

          <h3>Yard Maintenance</h3>

          <p>Whipper Snipping.<br>Mowing.<br> Weed-Control.<br>Hedging.<br> Green Waste Removal.<br> Rubbish Removal.<br><a href="#">Read More</a></p>

        </div>
 
        <div class="box">

       <article id="main-col">
 
          <aside id="sidebar">

          <div class="dark">

            <h3>Request a Free Quote</h3>

            <form action="" class="contact">

              <div>

                <label>Name</label>

                <input type="text">

              </div>

              <div>

                <label>Email Address</label>

                <input type="email">

              </div>

              <div>

                <label>Message</label>

                <textarea placeholder="Your message ..."></textarea>

              </div>

              <button class="button_1" type="submit">Send</button>

            </form>

          </div>

        </aside>

      </div>

    </section>

      </div>

    </section>


</div>
    <footer>
         <p>Copyright &copy; Wrigh'ts lawncare service 2019-2020 A.B.N:85908204391 All Right's Reserved.</p>
	     <p>you're use of this website is subject to our <a href="#">Terms and Conditions</a> & please read our <a href="#">Pricacy Statement</a><p></nobr>
    </footer>

  </body>

 

style.css

Share this post


Link to post
Share on other sites

A lot of your tags aren't matching up, its screwing up my auto-styler. I ran your code through the HTML checker, and... well, you should see for yourself.

From what I could see though, you could benefit from having a look at this tutorial here through.

https://www.w3schools.com/css/css_positioning.asp

Using position:relative on your container, and position:absolute with top:0 and right:0 on your sidebar/box should give you something close to what you're after.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...