html5 css js shiv shell - HTML Snipplr Social Repository

Revision: 47013

at August 30, 2011 04:08 by gamblelyn

Updated Code

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />

  <!--*******  CSS:  ******-->
  <link rel="stylesheet" href="css/basic.css" media="all" />
  <link rel="stylesheet" href="css/style.css" media="screen" />


  <title>HTML5 Basic Shell with js and css external and internal</title>
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

<style>

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

/*<article> 	For external content, like text from a news-article, blog, forum, or any other content from an external source*/
/*<figure> 	    For grouping a section of stand-alone content, could be a video, images or diagrams, code etc*/
/*<section> 	For a section in a document. Such as chapters, headers, footers, or any other sections of the document*/
/*The <menu> tag defines a list or menu of commands.    */
/*The <menu> tag is used for context menus, toolbars and for listing form controls and commands.*/

/* FONTS - to get other font kits visit: fontsquirrel.com  then change name accordingly, and put fonts in fonts folder in the root*/

	@font-face {
	font-family: 'MisoLight';
	src: url('fonts/miso-light-webfont.eot?') format('eot'),
	     url('fonts/miso-light-webfont.woff') format('woff'),
	     url('fonts/miso-light-webfont.ttf')  format('truetype'),
	     url('fonts/miso-light-webfont.svg#webfontR7AhzoT1') format('svg');
	}



html {
    background: #4e4928 url(images/site-background.jpg) repeat-x;
    width:100%;
    height:100%;
}

/*UNIVERSAL*/

a:link{
	color:#ffef70;
	text-decoration:none;
}
a:visited{
	color:#c6ba57;
	text-decoration:none;
}
a:hover{
	color:#fff;
	text-decoration:underline;

}
body{
    color:#bfc590;
	font:13px Georgia, "Times New Roman", Times, serif;
	text-align:center;
	margin:0;
	padding:0;
}

.main {margin: 0 auto;}

header {height: 30px;}

#pagewrapper{
	width:760px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}
#contentwrapper{
	clear:both;
	float:left;
	padding-bottom:20px;

}



figure{

}


h1{
	padding:0;
	margin:0;
}
h2{
	padding:0;
	margin:0;
}

h1.title {font-size: 18px;}

/*NAVIGATION*/
nav{ float:left; width:800px; }
nav a{ color:#ffe61d; }
nav a:hover{ color:#fff; }
nav ul{
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	width:630px;
	height:57px;
}
nav ul li{
	float:left;
	margin:0;
	padding:0;
}
nav ul li a{
	float:left;
	font:normal 16px Georgia, "Times New Roman", Times, serif;
	display:block;
	height:35px;
	padding:15px 14px 0 14px;
	margin:0;
}
nav ul li a:hover{
	text-decoration:none;
	color:#fff;
}
nav ul li.current a{
	background: #555;
}
nav ul li.current a{
	background: #777;
}



.fl {float: left;}
.fr {float: right;}

.clear {
    overflow: auto;
    width: 100%
}


</style>
</head>


<body class="main">

  <div id="pagewrapper">

    <header>
      <h1 class="title"></h1>
    </header>


      
    <figure class="fl">
        <img src="images/portfolio-logo.png" />
    </figure>



    <figure class="fr">
        <img src="images/tablethome.png" />
    </figure>

    <div class="clear"></div>

   <div id="contentwrapper">


    <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Clients</a></li>
         <li><a href="#">Contact Us</a></li>
    </ul>
    </nav>


      <section id="content" class="homepage">

      <article id="">
        Article -For external content, like text from a news-article, blog, forum, or any other content from an external source
      </article>


    </section>

    <aside>
      Sidebar
    </aside>

    </div>
      <!--End Contentwrapper begin footer-->


    <footer>
      Footer
    </footer>

  </div>


</body>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$(function() {
//alert('check')
});

</script>


</html>

Revision: 47012

at May 30, 2011 05:57 by gamblelyn

Updated Code

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />

  <!--*******  CSS:  ******-->
  <link rel="stylesheet" href="css/basic.css" media="all" />
  <link rel="stylesheet" href="css/style.css" media="screen" />


  <title>HTML5 Basic Shell with js and css external and internal</title>
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

<style>

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

/*<article> 	For external content, like text from a news-article, blog, forum, or any other content from an external source*/
/*<figure> 	    For grouping a section of stand-alone content, could be a video, images or diagrams, code etc*/
/*<section> 	For a section in a document. Such as chapters, headers, footers, or any other sections of the document*/
/*The <menu> tag defines a list or menu of commands.    */
/*The <menu> tag is used for context menus, toolbars and for listing form controls and commands.*/

/* FONTS - to get other font kits visit: fontsquirrel.com  then change name accordingly, and put fonts in fonts folder in the root*/

	@font-face {
	font-family: 'MisoLight';
	src: url('fonts/miso-light-webfont.eot?') format('eot'),
	     url('fonts/miso-light-webfont.woff') format('woff'),
	     url('fonts/miso-light-webfont.ttf')  format('truetype'),
	     url('fonts/miso-light-webfont.svg#webfontR7AhzoT1') format('svg');
	}



html {
    background: #4e4928 url(images/site-background.jpg) repeat-x;
    width:100%;
    height:100%;
}

/*UNIVERSAL*/

a:link{
	color:#ffef70;
	text-decoration:none;
}
a:visited{
	color:#c6ba57;
	text-decoration:none;
}
a:hover{
	color:#fff;
	text-decoration:underline;

}
body{
    color:#bfc590;
	font:13px Georgia, "Times New Roman", Times, serif;
	text-align:center;
	margin:0;
	padding:0;
}

.main {margin: 0 auto;}

header {height: 30px;}

#pagewrapper{
	width:760px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}
#contentwrapper{
	clear:both;
	float:left;
	padding-bottom:20px;

}



figure{

}


h1{
	padding:0;
	margin:0;
}
h2{
	padding:0;
	margin:0;
}

h1.title {font-size: 18px;}

/*NAVIGATION*/
nav{ float:left; width:800px; }
nav a{ color:#ffe61d; }
nav a:hover{ color:#fff; }
nav ul{
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	width:630px;
	height:57px;
}
nav ul li{
	float:left;
	margin:0;
	padding:0;
}
nav ul li a{
	float:left;
	font:normal 16px Georgia, "Times New Roman", Times, serif;
	display:block;
	height:35px;
	padding:15px 14px 0 14px;
	margin:0;
}
nav ul li a:hover{
	text-decoration:none;
	color:#fff;
}
nav ul li.current a{
	background: #555;
}
nav ul li.current a{
	background: #777;
}



.fl {float: left;}
.fr {float: right;}

.clear {
    overflow: auto;
    width: 100%
}


</style>
</head>


<body class="main">

  <div id="pagewrapper">

    <header>
      <h1 class="title"></h1>
    </header>


      
    <figure class="fl">
        <img src="images/portfolio-logo.png" />
    </figure>



    <figure class="fr">
        <img src="images/tablethome.png" />
    </figure>

    <div class="clear"></div>

   <div id="contentwrapper">


    <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Clients</a></li>
         <li><a href="#">Contact Us</a></li>
    </ul>
    </nav>


      <section id="content" class="homepage">

      <article id="">
        Article -For external content, like text from a news-article, blog, forum, or any other content from an external source
      </article>


    </section>

    <aside>
      Sidebar
    </aside>

    </div>
      <!--End Contentwrapper begin footer-->


    <footer>
      Footer
    </footer>

  </div>


</body>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$(function() {
//alert('check')
});

</script>


</html>???

Revision: 47011

at May 30, 2011 05:31 by gamblelyn

Initial Code

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />

  <!--*******  CSS:  ******-->
  <link rel="stylesheet" href="css/basic.css" media="all" />
  <link rel="stylesheet" href="css/style.css" media="screen" />


  <title>HTML5 Basic Shell with js and css external and internal</title>
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

<style>

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

/*<article> 	For external content, like text from a news-article, blog, forum, or any other content from an external source*/
/*<figure> 	    For grouping a section of stand-alone content, could be a video, images or diagrams, code etc*/
/*<section> 	For a section in a document. Such as chapters, headers, footers, or any other sections of the document*/
/*The <menu> tag defines a list or menu of commands.    */
/*The <menu> tag is used for context menus, toolbars and for listing form controls and commands.*/

html {
    background: #4e4928 url(images/site-background.jpg) repeat-x;
    width:100%;
    height:100%;
}

/*UNIVERSAL*/

a:link{
	color:#ffef70;
	text-decoration:none;
}
a:visited{
	color:#c6ba57;
	text-decoration:none;
}
a:hover{
	color:#fff;
	text-decoration:underline;

}
body{
    color:#bfc590;
	font:13px Georgia, "Times New Roman", Times, serif;
	text-align:center;
	margin:0;
	padding:0;
}

.main {margin: 0 auto;}

header {height: 30px;}

#pagewrapper{
	width:760px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}
#contentwrapper{
	clear:both;
	float:left;
	padding-bottom:20px;

}



figure{

}


h1{
	padding:0;
	margin:0;
}
h2{
	padding:0;
	margin:0;
}

h1.title {font-size: 18px;}

/*NAVIGATION*/
nav{ float:left; width:800px; }
nav a{ color:#ffe61d; }
nav a:hover{ color:#fff; }
nav ul{
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	width:630px;
	height:57px;
}
nav ul li{
	float:left;
	margin:0;
	padding:0;
}
nav ul li a{
	float:left;
	font:normal 16px Georgia, "Times New Roman", Times, serif;
	display:block;
	height:35px;
	padding:15px 14px 0 14px;
	margin:0;
}
nav ul li a:hover{
	text-decoration:none;
	color:#fff;
}
nav ul li.current a{
	background: #555;
}
nav ul li.current a{
	background: #777;
}



.fl {float: left;}
.fr {float: right;}

.clear {
    overflow: auto;
    width: 100%
}


</style>
</head>


<body class="main">

  <div id="pagewrapper">

    <header>
      <h1 class="title"></h1>
    </header>


      
    <figure class="fl">
        <img src="images/portfolio-logo.png" />
    </figure>



    <figure class="fr">
        <img src="images/tablethome.png" />
    </figure>

    <div class="clear"></div>

   <div id="contentwrapper">


    <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Clients</a></li>
         <li><a href="#">Contact Us</a></li>
    </ul>
    </nav>


      <section id="content" class="homepage">

      <article id="">
        Article -For external content, like text from a news-article, blog, forum, or any other content from an external source
      </article>


    </section>

    <aside>
      Sidebar
    </aside>

    </div>
      <!--End Contentwrapper begin footer-->


    <footer>
      Footer
    </footer>

  </div>


</body>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$(function() {
//alert('check')
});

</script>


</html>???

Initial URL

Initial Description

this has place for external styles  and the  css start for a button sprite. Also has some comments about new html5 markup.

Initial Title

html5 css js shiv shell

Initial Tags

css, js, links, html5

Initial Language

HTML

Choose a language for easy browsing: