title: First webpage design and code, Dreamweaver HTML and CSS
body: <p>I have just designed a very quick website home page and as a first time coder I was wondering if someone would look at the design and my code and tell me where they would make improvements or changes or completely change it if necessary!</p>
  
  <p>The design is for personal use only and contains black sections where my personal address is on the website design.</p>
  
  <p>I am open to any suggestions and comments as this is my first time at coding and I would like to know what a more experience person would do better. I have been using Dreamweaver and viewing it on Google Chrome, there is a HTML code and a CSS code, ideally I would like it to be viewable on different browsers.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt; Rosy's Jewellery&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="CSS/Stylesheet.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="wrapper"&gt;
  
      &lt;div class="top"&gt;
          &lt;!--Background set in CSS--&gt;
      &lt;/div&gt;&lt;!--  end of top--&gt;
  
      &lt;div class="menu"&gt;
          &lt;h1&gt;Rosy's Jewellery&lt;/h1&gt;                   
          &lt;ul id="nav"&gt;       
          &lt;li&gt;&lt;a href=""&gt; Home            &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt; Jewellery       &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt; Locations       &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt; Contact Us      &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt; Reviews         &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;       
      &lt;/div&gt;
      &lt;!-- end of menu --&gt;
  
  
    &lt;div class="main"&gt;
          &lt;p&gt; Welcome to Rosy's Jewellery &lt;/p&gt;
                &lt;img src="Images/1.png"&gt;
  
                &lt;img src="Images/2.png"&gt;
  
                &lt;img src="Images/3.png"&gt;
  
                &lt;img src="Images/4.png"&gt;
  
                &lt;img src="Images/5.png"&gt;
  
                &lt;img src="Images/6.png"&gt;  &lt;/div&gt;
  &lt;!--close main--&gt;
  
  
  
  &lt;div class="footer"&gt;
      &lt;ul id="footer"&gt;
          &lt;li&gt; &lt;img src="Images/facebook.png" /&gt; 
          &lt;img src="Images/twitter.png" /&gt;  &lt;/li&gt;
          &lt;li&gt; Twitter Address&lt;/li&gt;
          &lt;li&gt; Addres, Address, Address, Address &lt;/li&gt;        
          &lt;li&gt; Telephone Number&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; 
  &lt;!--end of footer--&gt; 
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrapper        {
              margin:0 auto;
              background-color:#D1CED4;
              }   
  
  .top            {
              background-color:#000000;
              padding-bottom:2.5em;
              }
  
  .menu           {
              background-color:#FFFFFF;
              border-bottom-width:2px;
              border-bottom-color:#000000;
              border-bottom-style: solid;
              position: relative;
              top:-15px;
              text-align:center;
              font-family:Andalus;
              font-size:18px;
              padding-left:1em;
              padding-right:1em;
              overflow:hidden;
              }
  
  .menu h1        {
              float:left;
              color:#999966;
              font-family:andalus;
              font-size:24;
              }
  
  
  .main           {
              width:65%;
              margin:0 auto;
              background-color:#FFFFFF;
              text-align:center;
              font-family:andalus;
              font-size:24px;
              padding-top:1px;
              }
  
  .footer         {
              text-align:centre;
              background-color:#C8C8C8;
              color:#000000;
              font-family:andalus;
              margin-bottom:-1em;
              }
  
  #footer li      {
              display:inline-block;
              padding-right:8em;
              vertical-align:middle;
              margin-top: -30px;
              }
  
  
  #nav            {
              padding-top:15px;
              }
  
  #nav a          {
              text-decoration:none;
              }   
  
  #nav a:link     {
              color:black;
              }
  
  #nav a:visited  {
              color:black;
              }
  
  #nav a:hover    {
              color:black;
              }
  
  img             {
              margin:42px;
              }
  
  #nav ul         {
              display:inline-block;
              }
  
  
  #nav li         {
              display:inline-block;
              margin-right:4.5em;
              padding-right:2.5em;
              }
  </code></pre>