Jump to content

Html5 tags not working need help please


stormtracker
 Share

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

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...