Creating an Attractive HTML CSS Anime Theme Website Layout

Today I will like to product new masterpiece – new template with codename: ‘Anime theme’. This will nice HTML5 template with good colors. Hope that you can learn some new coding lessons and download our result and use it at your own site (its free as usual).

I going to start step-by-step tutorial for creating html-css layout.

Final Result

final template result

Live Demo

Get started

Ok, let`s start. Lets create new folder and few more folders inside (to keep all well structured):

  • css – which will contain CSS stylesheets (menu.css and style.css)
  • images – which will contain all used images
  • js – will contain JS files (html5.js)

Head section code

Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.

01 <!DOCTYPE html><!-- The new doctype -->
02 <html lang="en">
03 <head>
04     <title>Creating a HTML5 &amp; CSS3 Single Page Web Layout #5 Anime theme | Script tutorials</title>
05     <meta charset="utf-8">
06     <!-- Linking styles -->
07     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
08     <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
09     <!-- Linking scripts -->
10     <!--[if lt IE 9]>
11         <script src="js/html5.js"></script>
12     <![endif]-->
13 </head>

Moving forward – Main layout (body)

Whole layout consist of 4 main section: header (with social icons and search), logo, main section (nav menu, main content in 2 columns) and footer. It looks like:

01 <body>
02     <header><!-- Defining the header section of the page -->
03         ........
04     </header>
05     <!-- Defining main logo -->
06     <div class="logo">
07         ........
08     </div>
09     <section class="content"><!-- Defining the main content section of the page -->
10         ........
11     </section>
12     <footer><!-- Defining the footer section of the page -->
13         ........
14     </footer>
15 </body>

here are you can see base CSS styles

01 /* base common styles */
02 article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
03 mark, rp, rt, ruby, summary, time {display:inline;}
04 * {
05     margin:0;
06     padding:0;
07 }
08 img {
09     border-width:0;
10 }
11 body {
12     background:url(../images/bg.jpg) repeat-x scroll center top #000;
13     color:#c7b8a3;
14     font-family:"Trebuchet MS"ArialHelveticasans-serif;
15     font-size:0.75em;
16 }
17 a {
18     color:#c46501;
19     text-decoration:underline;
20 }
21 a:hover {
22     text-decoration:none;
23 }
24 .clear {
25     clear:both;
26     display:block;
27     height:0;
28     overflow:hidden;
29     visibility:hidden;
30     width:0;
31 }

Header section and logo

header area

Our header will contain search bar, social icons (at top) and logo at left side. Here are HTML for that section:

01 <header><!-- Defining the header section of the page -->
02     <div class="header">
03         <div class="social_icons">
04             <a href="#" title="Facebook"><img alt="" src="images/facebook.png"></a>
05             <a href="#" title="Twitter"><img alt="" src="images/twitter.png"></a>
06             <a href="#" title="RSS"><img alt="" src="images/rss.png"></a>
07         </div>
08         <div class="search">
09             <form action="" method="get">
10                 <input type="text" name="q" value="" />
11                 <input type="submit" value="search" />
12             </form>
13         </div>
14         <div class="clear"></div>
15     </div>
16 </header>
17 <!-- Defining main logo -->
18 <div class="logo">
19     <a href="" title="Anime theme"><img src="images/logo.png" /></a>
20 </div>

CSS for Header section

01 /*header*/
02 header {
03     background-color:#1f1f1f;
04 }
05 header .header {
06     overflow:hidden;
07     position:relative;
08     width:960px;
09     height:42px;
10     margin:0 auto;
11 }
12 header .search {
13     float:right;
14     margin-top:10px;
15     width:300px;
16 }
17 header .search input[type=text] {
18     background-color:#443e30;
19     border:1px solid #2F2C29;
20     color:#FFF;
21     font-size:1em;
22     height:20px;
23     margin-right:5px;
24     width:203px;
25     padding:1px 0 0 3px;
26 }
27 header .search input[type=submit] {
28     background-image:url(../images/search.gif);
29     height:21px;
30     width:60px;
31     font-size:0.9em;
32     border-width:0;
33 }
34 header .social_icons {
35     float:right;
36     margin-right:5px;
37     margin-top:5px;
38 }
39 .logo {
40     position:relative;
41     width:960px;
42     height:225px;
43     margin:0 auto;
44 }
45 .logo img {
46     margin:20px 10px;
47 }

Main content section

After our header area – we have main content area. In top we will have navigation menu, then – rest content (2 columns). First column can contain full length posts, second – for categories (or archive links). Of course – you can customize here anything.

Main content area

01 <section class="content"><!-- Defining the main content section of the page -->
02     <!-- navigation menu -->
03     <nav>
04         <ul>
05         <li><a href="https://www.script-tutorials.com/">Home</a></li>
06         <li><a href="#">Anime News</a></li>
07         <li><a href="#">Anime Archive</a></li>
08         <li><a href="#">About Us</a></li>
09         <li><a href="#">Feedback</a></li>
10         <li><a href="#">Contact</a></li>
12         </ul>
13     </nav>
14     <div class="clear"></div>
15     <div class="column">
16         <div class="post">
17             <div class="title">
18                 <div class="date"><span>31</span>July</div>
19                 <h2><a href="#" title="post 1">The Ghost with the Most</a></h2>
20             </div>
21             <div class="text-box">
22                 <p><img alt="" src="images/post.png"><br>Back in March I wrote a Brain Diving column on Otsuichi's Summer, Fireworks, and My Corpse, bragging about how nice the weather was in Austin and that I was getting in the mood for summer. Ugh, what was I thinking? Now that we've broken the record for the most number of consecutive days over 100 F, I feel that by writing that I was like Homer Simpson running around shouting "No comeuppance!" You can have summer - I'm thoroughly done with it.</p>
23             </div>
24             <div class="comments">
25                 <a href="#" title="comments on post 1">10 Comments</a>
26             </div>
27         </div>
28         <div class="post">
29             <div class="title">
30                 <div class="date"><span>17</span>July</div>
31                 <h2><a href="#" title="post 1">Disney To Adapt Tuxedo Gin</a></h2>
32             </div>
33             <div class="text-box">
34                 <p><img alt="" src="images/post.png"><br>Walt Disney Pictures has hired Reno 911 co-creator Robert Ben Garant to write "Tux," a screenplay based on Tokihiko Matsuura`s romantic comedy manga Tuxedo Gin. The 1997-2000 manga series stars "a young street fighter who falls into a coma and learns that he has lived his life so selfishly that he only has enough karma points to be reincarnated as an animal 15 pounds or less. Trapped in the body of a chin-strap penguin, he tries to overcome the humiliation and rack up enough good deeds to get his old body back and save the girl he loves." Garant wrote the screenplays for Disney`s 2005 films Herbie Fully Loaded and The Pacifier. The film will be produced by Paul Young and Peter Principato of Principato-Young Entertainment, VIZ Media`s Jason Hoffs, and Shogakukan`s Ichiro Takase.</p>
35             </div>
36             <div class="comments">
37                 <a href="#" title="comments on post 1">20 Comments</a>
38             </div>
39         </div>
40     </div>
41     <div class="sidebar">
42         <div class="block">
43             <h2>Categories</h2>
44             <ul>
45                 <li><a title="" href="#">Black &amp; white</a> (4)</li>
46                 <li><a title="" href="#">Fantasies</a> (3)</li>
47                 <li><a title="" href="#">Music</a> (3)</li>
48                 <li><a title="" href="#">Nature</a> (3)</li>
49                 <li><a title="" href="#">Portraits</a> (2)</li>
50                 <li><a title="" href="#">Urban</a> (2)</li>
51             </ul>
52         </div>
53         <div class="block">
54             <h2>Archives</h2>
55             <ul>
56                 <li><a title="" href="#">July 2011</a> (5)</li>
57                 <li><a title="" href="#">June 2011</a> (5)</li>
58                 <li><a title="" href="#">May 2011</a> (5)</li>
59                 <li><a title="" href="#">April 2011</a> (5)</li>
60                 <li><a title="" href="#">March 2011</a> (5)</li>
61                 <li><a title="" href="#">February 2011</a> (5)</li>
62                 <li><a title="" href="#">January 2011</a> (5)</li>
63             </ul>
64         </div>
65     </div>
66     <div class="clear"></div>
67 </section>

CSS for navigation menu

css/menu.css

01 nav {
02     overflow:hidden;
03     position:relative;
04     width:910px;
05     background:url("../images/menu-bg.png"no-repeat scroll left top transparent;
06     margin:10px auto;
07     padding:10px;
08 }
09 nav ul {
10     list-style-image:none;
11     list-style-position:outside;
12     list-style-type:none;
13     overflow:hidden;
14     margin:0;
15     padding:0;
16 }
17 nav ul li {
18     background:url("../images/menu-devider.gif"no-repeat scroll left top transparent;
19     float:left;
20     font-size:1.5em;
21     line-height:normal;
22     margin-left:-2px;
23     overflow:hidden;
24     padding:0;
25 }
26 nav ul li a {
27     color:#000;
28     display:block;
29     font-family:Tahoma,Arial,Helvetica,serif;
30     font-weight:400;
31     text-decoration:none;
32     text-transform:none;
33     padding:3px 24px 5px 26px;
34 }
35 nav ul li a:hover {
36     text-decoration:none;
37     color:#fc0;
38 }

CSS for Main content section

001 /*center content*/
002 section.content {
003     overflow:hidden;
004     position:relative;
005     width:960px;
006     background:transparent url(../images/cbg.png) repeat-x scroll center top;
007     -moz-border-radius:15px;
008     -webkit-border-radius:15px;
009     border-radius:15px;
010     margin:0 auto;
011 }
012 .content .column {
013     float:left;
014     width:605px;
015     padding:0 23px 7px 28px;
016 }
017 .content .sidebar {
018     float:left;
019     width:235px;
020     border-left:1px solid #444;
021     padding:0 39px 7px 25px;
022 }
023 .post {
024     overflow:hidden;
025     padding-bottom:13px;
026 }
027 .post .title {
028     overflow:hidden;
029     padding-top:5px;
030     width:100%;
031 }
032 .post .title .date {
033     background:url("../images/date-bg.png"no-repeat scroll left top transparent;
034     color:#444;
035     float:left;
036     font-size:1.167em;
037     font-weight:400;
038     line-height:1em;
039     margin-right:16px;
040     text-align:center;
041     width:69px;
042     padding:5px 0 8px;
043 }
044 .title .date span {
045     display:block;
046     font-size:2.357em;
047     line-height:1em;
048 }
049 .post .title h2 {
050     color:#C7B8A3;
051     font-size:2.5em;
052     font-weight:400;
053     line-height:1.01em;
054     text-transform:none;
055     padding:15px 0 0;
056 }
057 .post .title h2 a {
058     color:#C7B8A3;
059     text-decoration:none;
060 }
061 .post .title h2 a:hover {
062     text-decoration:underline;
063 }
064 .post .text-box {
065     font-size:1.09em;
066     line-height:1.35em;
067     overflow:hidden;
068     padding-top:10px;
069     padding-bottom:10px;
070     width:100%;
071 }
072 .post .text-box img {
073     margin:10px 0;
074 }
075 .post .comments {
076     color:#E29111;
077     font-size:1.083em;
078     line-height:1em;
079     overflow:hidden;
080     text-transform:none;
081     padding:0 0 16px;
082 }
083 .sidebar .block {
084     padding:7px 30px 50px 7px;
085 }
086 .sidebar .block h2 {
087     font-size:2.5em;
088     margin:10px 0;
089 }
090 .sidebar ul {
091     width:100%;
092 }
093 .sidebar li {
094     color:#EF6A1B;
095     font-size:1.083em;
096     font-weight:700;
097     line-height:1.146em;
098     padding:4px 0 5px;
099 }
100 .sidebar li a {
101     color:#C7B8A3;
102     text-decoration:none;
103 }

Footer section

Here are our footer area

footer area

1 <footer><!-- Defining the footer section of the page -->
2     <div>Anime theme &copy; 2011 &nbsp;:&nbsp; <a class="link" href="#">Privacy</a></div>
3 </footer>

CSS for footer section

01 /*footer*/
02 footer {
03     width:100%;
04     background-color:#111;
05 }
06 footer div {
07     font-size:1.4em;
08     position:relative;
09     width:960px;
10     margin:0 auto;
11     padding:30px 0 40px 40px;
12 }

JS for our template

Here are all necessary custom JS scripts

js/html5.js

This file already available in package


Live Demo

[sociallocker]

download result

[/sociallocker]


Conclusion

Congrats, our new template ‘Anime theme’ is complete! You can use this as is, but please leave the back link to us intact. Don`t forget to say thanks 🙂