15
\$\begingroup\$

I have spent the last 6 months as I am studying web development in college to build a website template that is responsive and accessible from as many devices and browsers as possible.

I would really appreciate it if someone reviewed my HTML structure, CSS and share their opinion with me, my aim is to make this site appear nicely on as many devices and browsers as could.

HTML:

<!DOCTYPE html>
<html>
<!--
   Website by Loai Bassam (Loai Design Studio) | www.loaidesign.co.uk
   Date: 16 2 2014 - Last updated after launch: NA
-->

<head>
   <title><?php include ("assets/includes/website-name.inc"); ?></title>
   <meta name="description" content="">
   <meta name="keywords" content="">
   <?php include ("assets/includes/head.inc"); ?>
</head>

<body>
   <!--Main Header-->
   <header id="header">
      <?php include ("assets/includes/header.inc"); ?>
   </header>

   <!--Header For Small Screens Only-->
   <?php include ("assets/includes/second-header.inc"); ?>

   <div id="page"><!--Page Container-->

      <div class="topSection">
         <div class="content">
            <h1>Welcome</h1>
         </div>
      </div>

      <div class="wrapper">
         <div class="content">

            <h1>Header One</h1>

            <h2>Header Two</h2>

            <h3>Header Three</h3>

            <h4>Header Four</h4><br>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text of the printing and typesetting industry.</p><br>

            <p><strong>Paragraph Strong</strong></p>

            <p><em>Paragraph Empaissaied</em></p>

            <p><small>Paragraph Small</small></p><br>
            <a class="button" href="#">I am a Button</a><br>
            <br>

            <p><strong>List</strong></p>

            <ul>
               <li>List Item</li>

               <li>List Item

                  <ul>
                     <li>Sub List Item</li>

                     <li>Sub List Item</li>
                  </ul>
               </li>
            </ul><br>

            <p><strong>List</strong></p>

            <ol>
               <li>List Item</li>

               <li>List Item

                  <ol>
                     <li>Sub List Item</li>

                     <li>Sub List Item</li>
                  </ol>
               </li>
            </ol><br>

            <p>Abber (<abbr title="Oh, you found me :)">Hover over me</abbr>).</p><br>

            <p>Paragraph<sub>subscript.</sub></p><br>

            <p>Paragraph<sup>subscript.</sup></p><br>

            <p>Paragraph<mark>Marked Line</mark></p><br>

            <img alt="image" src="assets/images/image.jpg"><br>

            <div class="table">

               <div class="header">
                  <div class="cell A">
                     <p>Header</p>
                  </div>
                  <div class="cell B">
                     <p>Header</p>
                  </div>
                  <div class="cell C">
                     <p>Header</p>
                  </div>
               </div>

               <div class="row">
                  <div class="cell A">
                     <p>Cell</p>
                  </div>
                  <div class="cell B">
                     <p>Cell</p>
                  </div>
                  <div class="cell C">
                     <p>Cell</p>
                  </div>
               </div>

               <div class="row">
                  <div class="cell A">
                     <p>Cell</p>
                  </div>
                  <div class="cell B">
                     <p>Cell</p>
                  </div>
                  <div class="cell C">
                     <p>Cell</p>
                  </div>
               </div>

            </div>

         </div>
      </div>

      <!--Footer-->
      <?php include ("assets/includes/footer.inc"); ?>

   </div><!--/Page-->
   <!--Scripts-->
   <?php include ("assets/includes/scripts.inc"); ?>
</body>
</html>

CSS:

body {
   color: #6B6B6B;
   background-color: #262626;

   font-family: 'arial', arial, sans-serif;
   font-size: 1em;
   line-height: 132%;
   text-align: center;

   -webkit-text-size-adjust: none;
   -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   overflow-x: hidden;
}

h1 {
   font-size: 2em;
   line-height: 100%;
}

h2 {
   font-size: 1.8em;
   line-height: 100%;
}

h3 {
   font-size: 1.5em;
}

/*Font Extras*/
strong {
   font-weight: 700;
}

small {
   font-size: 0.81em;
}

em {
   font-style: italic;
}

mark {
   color: #FFF;
   background-color: #405F80;

   padding: 1px 4px;
   margin: 0 4px;

   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}

/*Commands*/
.hide {
   display: none;
}

.center {
   text-align: center;
}


/*GENERAL STYLINGS ===========================================================*/
/*Form Elements*/
form {
   text-align: left;
}

   form div {
      width: 100%;
      display: inline-block;
      margin-bottom: 20px;
   }

      form div p {
         display: inline-block;
         margin-bottom: 5px;
      }

      input, input[type=checkbox], input[type=radio], textarea, select {
         color: inherit;
         border: 1px solid #CDCDCD;

         width: 100%;
         padding: 10px;
         line-height: 20px;
         cursor: text;

         border-radius: 3px;
         -moz-border-radius: 3px;
         -webkit-border-radius: 3px;

         -webkit-transition: all .1s linear;
         -moz-transition: all .1s linear;
         -ms-transition: all .1s linear;
         -o-transition: all .1s linear;
         transition: all .1s linear;
      }

      input:hover, input:focus,
      textarea:hover, textarea:focus,
      select:hover, select:focus {
         color: #405F80;
         border: 1px solid #405F80;
      }

      input[type=checkbox], input[type=radio] {
         width: auto;
         cursor: pointer;
         margin: 0 5px 0 0;
      }

         label {
            margin-left: 15px;
            display: inline-block;
            cursor: pointer;

            -webkit-transition: all .1s linear;
            -moz-transition: all .1s linear;
            -ms-transition: all .1s linear;
            -o-transition: all .1s linear;
            transition: all .1s linear;
         }

         label:hover {
            color: #405F80;
         }

      textarea {
         resize: none;
         height: 140px;
         min-height: 140px;
         max-height: 140px;
      }

      select {
         cursor: pointer;
         line-height: 40px;
         height: 40px;
      }

         select option {
            color: #6B6B6B;
         }

      #ui-datepicker-div {
         font-size: 0.90em;
      }

      button, button.disabled:hover {
         color: #fff;
         background: #CDCDCD;

         width: 100%;
         padding: 15px;
         font-weight: 700;

         border-radius: 3px;
         -moz-border-radius: 3px;
         -webkit-border-radius: 3px;
      }

      button:hover {
         background: #405F80;
      }

   /*Validation Errors*/
   span.error {
      color: #D14E4B;
      display: block;
      font-size: 0.90em;
   }

   span.error:before {
      content: "*";
   }

   input.error, textarea.error, select.error {
      color: #D14E4B;
      border: 1px solid #D14E4B;
   }

   /*Disable form when submitted*/
   input.disabled, input.disabled:hover,
   textarea.disabled, textarea.disabled:hover,
   select.disabled, select.disabled:hover  {
      color: #CDCDCD;
      background-color: #F7F7F7;
      border: 1px solid #CDCDCD;
   }

   label.disabled, label.disabled:hover {
      color: #CDCDCD;
   }


/*Tables*/
.table {
   width: 100%;
   display: table;
   table-layout: fixed;
   border-collapse: collapse;
   word-wrap: break-word;
   text-align: center;
}

   .table .header {
      color: #fff;
      background-color: #405F80;
      display: table-row;
      font-weight: 700;
   }

   .table .row {
      display: table-row;
   }

   .table .cell {
      border: 1px solid #405F80;
      display: table-cell;
      vertical-align: middle;
      padding: 10px;
   }


/*Buttons*/
.button {
   color: #405F80;
   border: 1px solid #405F80;
   padding: 5px 10px;

   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}

.button:hover {
   color: #fff;
   background-color: #405F80;
}


/*Grid System*/
#grid1,#grid2,#grid3 {
   width: 33.333%;
   float: left;
}

   #grid1 {
      padding-right: 20px;
   }

   #grid2 {
      padding: 0 10px;
   }

   #grid3 {
      padding-left: 20px;
   }

   /*Gird Elements*/
   .gridElement {
      margin-bottom: 30px;
      overflow: hidden;
   }

   #grid1 .gridElement:last-of-type,
   #grid2 .gridElement:last-of-type,
   #grid3 .gridElement:last-of-type {
      margin-bottom: 0;
   }

   #grid1 img,#grid2 img,#grid3 img {
      width: 100%;
   }


/*============================================================================*/
/*HEADER =====================================================================*/
/*Header Wrapper*/
#header {
   background-color: #fff;
   width: 100%;
   position: fixed;
   top: 0; left: 0;
   z-index: 1000;

   -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
   -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
   box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
}

   /*Header Content Container*/
   #headerContent {
      max-width: 1024px;
      height: 80px;
      padding: 10px 20px;
      margin: auto;
      overflow: hidden;
   }

   /*Header Logo*/
   #headerLogo {
      width: 200px;
      margin-top: 15px;
      float: left;
   }

   /*Main Menu*/
   @media screen and (min-width: 1024px) {
   #mainMenu {
      margin-top: 10px;
      float: right;
   }

      #mainMenu li {
         float: left;
         margin-left: 5px;
      }

         #mainMenu a {
            padding: 10px 15px;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
         }

         #mainMenu a:hover {
            color: #405F80;
         }

         #mainMenu a.active,
         #mainMenu a.active:hover {
            color: #fff;
            background-color: #405F80;
         }

   /*Dropdown Menus*/
   #mainMenu .subMenu ul {
      background-color: #fff;

      display: none;
      padding: 1px;
      margin-top: 18px;
      position: absolute;
      text-align: left;

      -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
      -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
      box-shadow: 0 0 15px 0 rgba(0,0,0,0.1);
   }

   #mainMenu .subMenu ul:before {
      background-color: #fff;
      content: "";
      width: 100%;
      height: 18px;
      position: absolute;
      top: -18px; left: 0; right: 0;
   }

   #mainMenu .subMenu:hover > ul {
      display: block;
   }

      /*Dropdown Menu > Navigation*/
      #mainMenu .subMenu ul li {
         float: none;
         margin: 0;
      }

         #mainMenu .subMenu ul a {
            width: 100%;
            padding: 7px 15px;
            border-radius: 0;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
         }

         #mainMenu .subMenu ul a:hover {
            color: #405F80;
            background-color: #F7F7F7;
         }

         #mainMenu .subMenu ul a.active,
         #mainMenu .subMenu ul a.active:hover {
            color: #fff;
            background-color: #405F80;
         }

            #mainMenu .subMenu:hover > a {
               color: #405F80;
            }

            #mainMenu .subMenu:hover > a.active {
               color: #fff;
            }

      .divider {
         border-top: 1px solid #fff;
      }
   }

/*Tablet & Phone Header*/
#secondHeader {
   display: none;
}


/*FOOTER ======================================================================*/
#footer {
   color: #B2B2B2;
   background-color: #262626;
   border-top: 1px solid #262626;

   width: 100%;
   font-size: 0.85em;
   text-align: center;
}

   #footer .content {
      padding: 30px 20px;
   }

      #footer .content a:hover {
         filter: alpha(opacity=50);
         opacity: 0.5;
      }

   /*Copyright Section*/
   #footer .content .copyright {
      padding-top: 10px;
      line-height: 230%;
   }

      #footer .content .copyright img {
         display: inline-block;
         vertical-align: middle;
         margin: 0 0 2px 5px;
      }


/*PAGE LAYOUT ==================================================================*/
/*Main Page Container*/
#page {
   background-color: #405F80;
   width: 100%;
   padding-top: 80px;
   text-align: left;
}

   /*Wrappers*/
   .wrapper {
      background-color: #FFF;
   }

   .wrapperA {
      background-color: #F5F5F5;
   }

   /*Content Container*/
   .content {
      width: 1024px;
      padding: 50px 20px;
      margin: auto;
      overflow: hidden;
   }


/*PAGES =======================================================================*/
/*Top Sections >---------------------------------------------------------------*/
.topSection {
   color: #fff;
   background-color: #405F80;
   padding: 10px 0;
}

   .topSection.gallery {
      background: url(../images/image.jpg) no-repeat center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     padding-top: 100px;
     padding-bottom: 100px;
   }


/*Home Page >------------------------------------------------------------------*/



/*Contact Page >---------------------------------------------------------------*/
#contactDetails {
   width: 40%;
   display: inline-block;
   vertical-align: middle;
   padding-left: 100px;
   text-align: left;
}

   /*(Tab to call & send SMS)*/
   #contactDetails div div {
      display: none;
   }

/*Contact Form*/
#contactForm {
   width: 40%;
   display: inline-block;
   vertical-align: middle;
}


/*404 Error Page >------------------------------------------------------------*/
#error404 {
   padding: 250px 20px;
   text-align: center;
}


/*Social Media Icons >--------------------------------------------------------*/
.socialbar a {
   background-color: #CDCDCD;
   background-image: url(../elements/icons-spritesheet.png);
   background-repeat: no-repeat;
   display: inline-block;
   margin-bottom: -6px;

   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}

.socialbar a:hover {
   background-color: #405F80;
}

   .icon-amazon {
      width: 35px;
      height: 35px;
      background-position: 0 0;
   }

   .icon-android {
      width: 35px;
      height: 35px;
      background-position: -35px 0;
   }

   .icon-apple {
      width: 35px;
      height: 35px;
      background-position: -70px 0;
   }

   .icon-appstore {
      width: 35px;
      height: 35px;
      background-position: -105px 0;
   }

   .icon-behance {
      width: 35px;
      height: 35px;
      background-position: -140px 0;
   }

   .icon-blogger {
      width: 35px;
      height: 35px;
      background-position: -175px 0;
   }

   .icon-css3 {
      width: 35px;
      height: 35px;
      background-position: 0 -35px;
   }

   .icon-deviant {
      width: 35px;
      height: 35px;
      background-position: -35px -35px;
   }

   .icon-digg {
      width: 35px;
      height: 35px;
      background-position: -105px -35px;
   }

   .icon-dribble {
      width: 35px;
      height: 35px;
      background-position: -175px -35px;
   }

   .icon-drive {
      width: 35px;
      height: 35px;
      background-position: 0 -70px;
   }

   .icon-dropbox {
      width: 35px;
      height: 35px;
      background-position: -35px -70px;
   }

   .icon-ebay {
      width: 35px;
      height: 35px;
      background-position: -70px -70px;
   }

   .icon-etsy {
      width: 35px;
      height: 35px;
      background-position: -105px -70px;
   }

   .icon-facebook {
      width: 35px;
      height: 35px;
      background-position: -140px -70px;
   }

   .icon-flicker {
      width: 35px;
      height: 35px;
      background-position: -175px -70px;
   }

   .icon-forrst {
      width: 35px;
      height: 35px;
      background-position: 0 -106px;
   }

   .icon-github {
      width: 35px;
      height: 35px;
      background-position: -35px -106px;
   }

   .icon-google {
      width: 35px;
      height: 35px;
      background-position: -70px -106px;
   }

   .icon-html5 {
      width: 35px;
      height: 35px;
      background-position: -105px -106px;
   }

   .icon-instagram {
      width: 35px;
      height: 35px;
      background-position: -140px -106px;
   }

   .icon-kickstarter {
      width: 35px;
      height: 35px;
      background-position: -175px -106px;
   }

   .icon-linkedin {
      width: 35px;
      height: 35px;
      background-position: 0 -141px;
   }

   .icon-microsoft {
      width: 35px;
      height: 35px;
      background-position: -35px -141px;
   }

   .icon-paintress {
      width: 35px;
      height: 35px;
      background-position: -105px -141px;
   }

   .icon-paypal {
      width: 35px;
      height: 35px;
      background-position: -140px -141px;
   }

   .icon-picasa {
      width: 35px;
      height: 35px;
      background-position: -175px -141px;
   }

   .icon-rss {
      width: 35px;
      height: 35px;
      background-position: 0 -176px;
   }

   .icon-skype {
      width: 35px;
      height: 35px;
      background-position: -35px -176px;
   }

   .icon-soundcloud {
      width: 35px;
      height: 35px;
      background-position: -70px -176px;
   }

   .icon-tumbler {
      width: 35px;
      height: 35px;
      background-position: -140px -176px;
   }

   .icon-twitter {
      width: 35px;
      height: 35px;
      background-position: -175px -176px;
   }

   .icon-vimeo {
      width: 35px;
      height: 35px;
      background-position: -210px 0;
   }

   .icon-wordpress {
      width: 35px;
      height: 35px;
      background-position: -210px -35px;
   }

   .icon-yahoo {
      width: 35px;
      height: 35px;
      background-position: -210px -71px;
   }

   .icon-youtube {
      width: 35px;
      height: 35px;
      background-position: -210px -106px;
   }

   .icon-youtube1 {
      width: 35px;
      height: 35px;
      background-position: -210px -142px;
   }


/*PRINTING STYLES >----------------------------------------------------------*/
@media print {
   body {
      font-family: arial, georgia, serif;
      background: none;
      color: #000;
   }

   #page {
      width: 100%;
      margin: 0;
      padding: 0;
      background: none;
   }

   #header,#secondHeader,#footer {
      display: none;
   }

   a:after {
      color: #fff;
      content: " [" attr(href) "] ";
   }
}

.htaccess:

# Date 5 2 2014

Options -Indexes
DirectoryIndex index.html index.php
ErrorDocument 404 /404

RewriteEngine On
RewriteBase /

    # Redirect if it begins with www.
RewriteCond %{HTTP_HOST} ^www\.(.*)$
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]

    # Remove enter code here.php; use THE_REQUEST to prevent infinite loops
    # By puting the L-flag here, the request gets redirected immediately
RewriteCond %{THE_REQUEST} ^GET\ (.*)\.php\ HTTP
RewriteRule (.*)\.php$ $1 [R=301,L]

    # Remove /index
    # By puting the L-flag here, the request gets redirected immediately
    # The trailing slash is removed in a next request, so be efficient and dont put it on there at all
RewriteRule (.*)/index$ $1 [R=301,L]

    # Remove slash if not directory
    # By puting the L-flag here, the request gets redirected immediately
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} /$
RewriteRule (.*)/ $1 [R=301,L]

    # Add .php to access file, but don't redirect
    # On some hosts RewriteCond %{REQUEST_FILENAME}.php -f will be true, even if
    # no such file exists. Be safe and add an extra condition
    # There is no point in escaping a dot in a string
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteCond %{REQUEST_URI} !(/|\.php)$
RewriteRule (.*) $1.php [L]

    # Change the sitemap extension from .php to .xml
RewriteRule ^sitemap.xml(.*)$ /sitemap.php?$1

    # Leverage Browser Caching
    # 480 weeks
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

    # 2 DAYS
<FilesMatch "\.(xml|txt)$">
    Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

    # 2 HOURS
<FilesMatch "\.(html|htm)$">
    Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>

<IfModule mod_deflate.c>
    #The following line is enough for .js and .css
AddOutputFilter DEFLATE js css
AddOutputFilterByType DEFLATE text/plain text/xml application/xhtml+xml text/css application/xml application/rss+xml application/atom_xml application/x-javascript application/x-httpd-php application/x-httpd-fastphp text/html

    #The following lines are to avoid bugs with some browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
\$\endgroup\$
  • 1
    \$\begingroup\$ The .inc ext is not used anymore. Switch to .php as it can introduce some security issues. \$\endgroup\$ – Ronni Skansing Feb 19 '14 at 20:52
  • \$\begingroup\$ PHP guy here: NEVER use .inc, as this is not parsed and can be downloaded directly from an attacker, seeing all your code. From a PHP perspective, your code is so 2005. Sorry. For a static website it's okay, but for a mod_rewrite driven PHP project: NEVER! \$\endgroup\$ – user30939 Jun 6 '14 at 9:43
21
\$\begingroup\$

HTML:

  1. Depending on the language on your website, you should add the lang attribute to your html tag:

    <html lang="en">
    
  2. You're missing the important viewport and charset meta tags in your head area. Add them before the title tag.

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  3. Watch your ID and class names! You have a pretty loose naming going on in your HTML. A header could appear everywhere on the page. You probably want to be more specific and do something like site-header. Same goes for things like content, page, etc.

    This way you will find your self switching between your HTML and CSS files to find out where you actually using the class you currently edit in your styles.

  4. I'm not sure if you were just testing the font sizes of your heading elements, but currently you have two h1 elements on your page. There should only be one in the same outline

    You can use multiple h1 headings on your page if you create new outlines. This is possible by using HTML5 sectioning elements like article, section, etc. A good resource for this topic is HTML5 Doctor.

  5. You're sometimes using br tags after natural block-level elements like h4, ul and p. This is unnecessary.

  6. You using div's to create tables. Why? Use table, tr, td, etc. for tabular data. You can use the structure in your html if you actually want to use it for layout. Don't call it a table then.

CSS:

  1. I don't know why you're using Arial in your font stack two times, but it's unnecessary. The following is enough:

    font-family: Arial, sans-serif;
    
  2. line-height is one of the view properties, where you don't actually need a unit. I had problems with em and % there before, so I use the unit-less value:

    line-height: 1.32;
    
  3. Why are you hiding horizontal scrollbars? Unless you have a very good reason doing this, don't.

  4. Unless you use a font with special font-weights, you can just use font-weight: bold;.

  5. In most cases you can drop the vendor prefixes for the border-radius property. Figure out what you actually need here: http://caniuse.com/border-radius

  6. I don't know why you are selecting form div and form div p and why you change the styles for these elements like you did. Adding the bottom margin there should be enough for block-level elements.

    Other than this it's generally a bad idea to just select all div's inside a certain element. Assign classes to the div's and use them. The selector form div p could be written as form p.

  7. You're selecting input, input[type=checkbox], input[type=radio], textarea, select. Remove input[type=checkbox], input[type=radio], from the selector, because you're already selecting all input elements.

  8. Selectors like span.error are overqualified. You should have a better, more descriptive class name and select like .error-invalid-input, etc.

  9. Same thing for *.disabled, .... You can shorten this selector by just using the blass there:

    .disabled, .disabled:hover
    
  10. If you select list-items in a list, don't add ul to the selector, because a list-item is a child of a list anyway:

    #mainMenu .subMenu li
    

    Similar thing for the links:

    #mainMenu .subMenu a
    
  11. Again, I have no idea what you did there:

    #contactDetails div div {
        display: none;
    }
    

    Use classes instead of exzessive use of type selectors. Especially if you need it for things like the display property. You have declared a hidden class anyway, why not use this?

  12. You have heavy redundancy in your icon CSS. You repeat the width and height declarations over and over. Use something like this instead:

    .icon {
        width: 35px;
        height: 35px;
    }
    
\$\endgroup\$
  • \$\begingroup\$ I appreciate HTML #1 and 2, and your CSS #3! I hate sites which have horizontal scrolling... \$\endgroup\$ – Alex L Feb 20 '14 at 4:05
  • 1
    \$\begingroup\$ @axel if you're building a proper site, you don't need to hide the scrollbars. \$\endgroup\$ – kleinfreund Feb 20 '14 at 7:00

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.