Robo splash page layout. Today I present you a new layout – Robo splash page. This is will modern looking HTML5 / CSS3 splash page layout which you will able to get for your website. So, let’s go inside and read up – how to make similar page.
Here are how our final result will looks:
Live Demo
[sociallocker]
download result
[/sociallocker]
Get started
Ok, let`s start. Lets create new folder and few folders inside (to keep all well structured):
- css – which will contain our CSS stylesheets (style.css)
- images – which will contain all used images
- js – will contain JS files (html5.js for today)
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"><head> |
03 |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
04 |
<title>Robo splash page layout | 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 |
<!--[if lt IE 9]> |
09 |
<script type="text/javascript" src="js/html5.js"></script> |
10 |
<![endif]--> |
11 |
<script type="text/javascript"> |
12 |
function hide_by_id(id) { |
13 |
if (document.getElementById) { |
14 |
document.getElementById(id).style.display = 'none'; |
15 |
} |
16 |
else { |
17 |
if (document.layers) { |
18 |
document.id.display = 'none'; |
19 |
} else { |
20 |
document.all.id.style.display = 'none'; |
21 |
} |
22 |
} |
23 |
} |
24 |
function show_by_id(id) { |
25 |
if (document.getElementById) { |
26 |
document.getElementById(id).style.display = 'block'; |
27 |
} |
28 |
else { |
29 |
if (document.layers) { |
30 |
document.id.display = 'block'; |
31 |
} else { |
32 |
document.all.id.style.display = 'block'; |
33 |
} |
34 |
} |
35 |
} |
36 |
</script> |
37 |
</head> |
Moving forward – Body
Whole layout consist of 3 main section: header (with logo and login form), main section (promo, info area and join form) and footer (commonly – here are just different links). Whole layout looks like:
01 |
<body> |
02 |
<header><!-- Defining the header section of the page --> |
03 |
<div class="header_bar"> |
04 |
<a href="https://www.script-tutorials.com/" class="logo"><!-- logo --> |
05 |
<img src="images/logo.png" title="My logo" alt="My logo" /> |
06 |
</a> |
07 |
<section id="login"><!-- login form --> |
08 |
<form action="#" method="POST"> |
09 |
...... |
10 |
</form> |
11 |
</section> |
12 |
</div> |
13 |
</header> |
14 |
<section id="main"><!-- Defining the main content section --> |
15 |
<div id="content"> |
16 |
<div id="promo"><!-- promo --> |
17 |
<div class="title">Welcome to our website.</div> |
18 |
<div class="img"></div> |
19 |
</div> |
20 |
<div id="info"><!-- info block --> |
21 |
...... |
22 |
</div> |
23 |
<div id="join" style="display:none"><!-- join form --> |
24 |
...... |
25 |
</div> |
26 |
</div> |
27 |
</section> |
28 |
<footer><!-- Defining the footer section of the page --> |
29 |
<div id="links"><!-- extra links --> |
30 |
<div class="copy"> |
31 |
<div><span> <a href="https://www.script-tutorials.com/creating-a-robo-splash-page-layout">Script-tutorials © 2011</a></span></div> |
32 |
</div> |
33 |
<div class="nav"> |
34 |
<a title="Find Friends" href="#">Find Friends</a> | |
35 |
...... |
36 |
</div> |
37 |
</div> |
38 |
</footer> |
39 |
</body> |
here are you can see base CSS styles
01 |
/* base styles */ |
02 |
body { |
03 |
background-color: #f0edeb; |
04 |
color: #333; |
05 |
font-family: Verdana,Arial,sans-serif; |
06 |
font-size: 11px; |
07 |
margin: 0; |
08 |
padding: 0; |
09 |
text-align: left; |
10 |
} |
11 |
a { |
12 |
color: #000; |
13 |
cursor: pointer; |
14 |
text-decoration: none; |
15 |
} |
16 |
a:hover { |
17 |
text-decoration: underline; |
18 |
} |
19 |
label { |
20 |
color: #222; |
21 |
cursor: pointer; |
22 |
font-weight: bold; |
23 |
vertical-align: middle; |
24 |
} |
25 |
textarea, input[type=text], input[type=password] { |
26 |
border: 1px solid #BDC7D8; |
27 |
font-family: Verdana,Arial,sans-serif; |
28 |
font-size: 11px; |
29 |
padding: 3px; |
30 |
} |
31 |
select { |
32 |
border: 1px solid #BDC7D8; |
33 |
font-family: Verdana,Arial,sans-serif; |
34 |
font-size: 11px; |
35 |
padding: 2px; |
36 |
} |
37 |
ul { |
38 |
list-style-type: none; |
39 |
margin: 0; |
40 |
padding: 0; |
41 |
} |
1. Header section with logo and login form
Our header will logo at left and login form at right side. Here are HTML for that section:
01 |
<header><!-- Defining the header section of the page --> |
02 |
<div class="header_bar"> |
03 |
<a href="https://www.script-tutorials.com/" class="logo"><!-- logo --> |
04 |
<img src="images/logo.png" title="My logo" alt="My logo" /> |
05 |
</a> |
06 |
<section id="login"><!-- login form --> |
07 |
<form action="#" method="POST"> |
08 |
<table cellspacing="0"> |
09 |
<tr> |
10 |
<td class="t"> |
11 |
<label for="email">Email</label> |
12 |
</td> |
13 |
<td class="t"> |
14 |
<label for="pass">Password</label> |
15 |
</td> |
16 |
</tr> |
17 |
<tr> |
18 |
<td> |
19 |
<input type="text" tabindex="1" value="" id="email" name="email"> |
20 |
</td> |
21 |
<td> |
22 |
<input type="password" tabindex="2" id="pass" name="pass"> |
23 |
</td> |
24 |
<td> |
25 |
<label for="login_btn" class="login_btn"> |
26 |
<input type="submit" id="login_btn" tabindex="4" value="Log In"> |
27 |
</label> |
28 |
<label for="join_btn" class="join_btn"> |
29 |
<input type="button" id="join_btn" tabindex="4" value="Or Join" onclick="hide_by_id('info');show_by_id('join');"> |
30 |
</label> |
31 |
</td> |
32 |
</tr> |
33 |
<tr> |
34 |
<td class="b"> |
35 |
<div> |
36 |
<input type="checkbox" tabindex="3" value="1" name="keep_logged" id="keep_logged"> |
37 |
<label for="keep_logged">Keep me logged in</label> |
38 |
</div> |
39 |
</td> |
40 |
<td class="b"> |
41 |
<a rel="nofollow" href="#">Forgot your password?</a> |
42 |
</td> |
43 |
</tr> |
44 |
</table> |
45 |
</form> |
46 |
</section> |
47 |
</div> |
48 |
</header> |
CSS for header section
01 |
/* header section */ |
02 |
header { |
03 |
background-color: #ddd; |
04 |
height: 90px; |
05 |
min-width: 980px; |
06 |
width: 100%; |
07 |
z-index: 300; |
08 |
} |
09 |
header .header_bar { |
10 |
margin: 0 auto; |
11 |
overflow: hidden; |
12 |
padding-top: 13px; |
13 |
width: 964px; |
14 |
} |
15 |
header .logo { |
16 |
float: left |
17 |
} |
18 |
header .logo img { |
19 |
border-width:0; |
20 |
} |
21 |
header #login { |
22 |
float: right |
23 |
} |
24 |
header #login table tr { |
25 |
vertical-align: top; |
26 |
} |
27 |
header #login table tr td { |
28 |
padding: 0 0 0 14px; |
29 |
} |
30 |
header #login .t { |
31 |
padding-bottom: 4px; |
32 |
} |
33 |
header #login .t label { |
34 |
color: #000; |
35 |
font-weight: bold; |
36 |
padding-left: 1px; |
37 |
} |
38 |
header #login input[type=text], header #login input[type=password] { |
39 |
border-color: #1D2A5B; |
40 |
margin: 0; |
41 |
padding-bottom: 4px; |
42 |
width: 142px; |
43 |
} |
44 |
header #login .login_btn input, header #login .join_btn input { |
45 |
border: 1px solid #000; |
46 |
background-color: #666; |
47 |
box-shadow: 0 1px 0 rgba(150, 150, 150, 0.5); |
48 |
padding: 2px 3px; |
49 |
text-align: center; |
50 |
text-decoration: none; |
51 |
vertical-align: top; |
52 |
white-space: nowrap; |
53 |
color: #FFF; |
54 |
cursor: pointer; |
55 |
display: inline-block; |
56 |
font-weight: bold; |
57 |
margin: 0; |
58 |
outline: medium none; |
59 |
} |
60 |
header #login .login_btn input:active { |
61 |
background: none repeat scroll 0 0 #000; |
62 |
} |
63 |
header #login .b { |
64 |
padding-top: 4px; |
65 |
} |
66 |
header #login .b input[type=checkbox] { |
67 |
float: left; |
68 |
margin: 0; |
69 |
padding: 0; |
70 |
} |
71 |
header #login .b label { |
72 |
display: block; |
73 |
font-weight: normal; |
74 |
margin-left: 17px; |
75 |
vertical-align: baseline; |
76 |
} |
77 |
header #login .b a { |
78 |
font-weight: normal; |
79 |
} |
2. Main content section
After our header area – we have main content area. At left side it contain promo image, and little Info block with description of our website. Plus, when we will click to Join button – join form will appear at right side instead Info block.
001 |
<section id="main"><!-- Defining the main content section --> |
002 |
<div id="content"> |
003 |
<div id="promo"><!-- promo --> |
004 |
<div class="title">Welcome to our website.</div> |
005 |
<div class="img"></div> |
006 |
</div> |
007 |
<div id="info"><!-- info block --> |
008 |
<div class="title"> |
009 |
Our website is web development blog, which will provide visitors with latest and interesting content and updates regarding making web sites, programming , tutorials etc. |
010 |
</div> |
011 |
</div> |
012 |
<div id="join" style="display:none"><!-- join form --> |
013 |
<div class="title"> |
014 |
<div class="l1">Sign Up</div> |
015 |
<div class="l2">Today for a free.</div> |
016 |
</div> |
017 |
<div class="cont"> |
018 |
<form> |
019 |
<table cellpadding="1" cellspacing="0"> |
020 |
<tr> |
021 |
<td class="label"><label for="firstname">First Name:</label></td> |
022 |
<td><div class="field_container"><input class="inputtext" id="firstname" name="firstname" type="text"></div></td> |
023 |
</tr> |
024 |
<tr> |
025 |
<td class="label"><label for="lastname">Last Name:</label></td> |
026 |
<td><div class="field_container"><input class="inputtext" id="lastname" name="lastname" type="text"></div></td> |
027 |
</tr> |
028 |
<tr> |
029 |
<td class="label"><label for="reg_email__">Your Email:</label></td> |
030 |
<td><div class="field_container"><input class="inputtext" id="reg_email__" name="reg_email__" type="text"></div></td> |
031 |
</tr> |
032 |
<tr> |
033 |
<td class="label"><label for="reg_email_confirmation__">Re-enter Email:</label></td> |
034 |
<td><div class="field_container"><input class="inputtext" id="reg_email_confirmation__" name="reg_email_confirmation__" type="text"></div></td> |
035 |
</tr> |
036 |
<tr> |
037 |
<td class="label"><label for="reg_passwd__">New Password:</label></td> |
038 |
<td><div class="field_container"><input class="inputtext" id="reg_passwd__" name="reg_passwd__" value="" type="password"></div></td> |
039 |
</tr> |
040 |
<tr> |
041 |
<td class="label">I am:</td><td> |
042 |
<div class="field_container"> |
043 |
<select class="select" name="sex" id="sex"> |
044 |
<option value="0">Select Sex:</option> |
045 |
<option value="1">Female</option> |
046 |
<option value="2">Male</option> |
047 |
</select> |
048 |
</div> |
049 |
</td> |
050 |
</tr> |
051 |
<tr> |
052 |
<td class="label">Birthday:</td> |
053 |
<td> |
054 |
<div class="field_container"> |
055 |
<select name="birthday_month" id="birthday_month"> |
056 |
<option value="-1">Month:</option> |
057 |
<option value="1">Jan</option> |
058 |
<option value="2">Feb</option> |
059 |
<option value="3">Mar</option> |
060 |
<option value="4">Apr</option> |
061 |
<option value="5">May</option> |
062 |
<option value="6">Jun</option> |
063 |
<option value="7">Jul</option> |
064 |
<option value="8">Aug</option> |
065 |
<option value="9">Sep</option> |
066 |
<option value="10">Oct</option> |
067 |
<option value="11">Nov</option> |
068 |
<option value="12">Dec</option> |
069 |
</select> |
070 |
<select name="birthday_day" id="birthday_day"> |
071 |
<option value="-1">Day:</option> |
072 |
<option value="1">1</option> |
073 |
<option value="2">2</option> |
074 |
<option value="3">3</option> |
075 |
<option value="4">4</option> |
076 |
<option value="5">5</option> |
077 |
<option value="6">6</option> |
078 |
<option value="7">7</option> |
079 |
<option value="8">8</option> |
080 |
<option value="9">9</option> |
081 |
<option value="10">10</option> |
082 |
<option value="11">11</option> |
083 |
<option value="12">12</option> |
084 |
<option value="13">13</option> |
085 |
<option value="14">14</option> |
086 |
<option value="15">15</option> |
087 |
<option value="16">16</option> |
088 |
<option value="17">17</option> |
089 |
<option value="18">18</option> |
090 |
<option value="19">19</option> |
091 |
<option value="20">20</option> |
092 |
<option value="21">21</option> |
093 |
<option value="22">22</option> |
094 |
<option value="23">23</option> |
095 |
<option value="24">24</option> |
096 |
<option value="25">25</option> |
097 |
<option value="26">26</option> |
098 |
<option value="27">27</option> |
099 |
<option value="28">28</option> |
100 |
<option value="29">29</option> |
101 |
<option value="30">30</option> |
102 |
<option value="31">31</option> |
103 |
</select> |
104 |
<select name="birthday_year" id="birthday_year"> |
105 |
<option value="-1">Year:</option> |
106 |
<option value="2011">2011</option> |
107 |
<option value="2010">2010</option> |
108 |
<option value="2009">2009</option> |
109 |
<option value="2008">2008</option> |
110 |
<option value="2007">2007</option> |
111 |
<option value="2006">2006</option> |
112 |
<option value="2005">2005</option> |
113 |
<option value="2004">2004</option> |
114 |
<option value="2003">2003</option> |
115 |
<option value="2002">2002</option> |
116 |
<option value="2001">2001</option> |
117 |
<option value="2000">2000</option> |
118 |
<option value="1999">1999</option> |
119 |
<option value="1998">1998</option> |
120 |
<option value="1997">1997</option> |
121 |
<option value="1996">1996</option> |
122 |
<option value="1995">1995</option> |
123 |
<option value="1994">1994</option> |
124 |
<option value="1993">1993</option> |
125 |
<option value="1992">1992</option> |
126 |
<option value="1991">1991</option> |
127 |
<option value="1990">1990</option> |
128 |
<option value="1989">1989</option> |
129 |
<option value="1988">1988</option> |
130 |
<option value="1987">1987</option> |
131 |
<option value="1986">1986</option> |
132 |
<option value="1985">1985</option> |
133 |
<option value="1984">1984</option> |
134 |
<option value="1983">1983</option> |
135 |
<option value="1982">1982</option> |
136 |
<option value="1981">1981</option> |
137 |
<option value="1980">1980</option> |
138 |
</select> |
139 |
</div> |
140 |
</td> |
141 |
</tr> |
142 |
</table> |
143 |
<div class="join_btn"> |
144 |
<input value="Sign Up" id="join_btn" type="submit"> |
145 |
</div> |
146 |
</form> |
147 |
</div> |
148 |
</div> |
149 |
</div> |
150 |
</section> |
CSS for Main content section
001 |
/* main section */ |
002 |
#main { |
003 |
background: -moz-linear-gradient(#ffffff, #f0edeb); /* FF 3.6+ */ |
004 |
background: -ms-linear-gradient(#ffffff, #f0edeb); /* IE10 */ |
005 |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f0edeb)); /* Safari 4+, Chrome 2+ */ |
006 |
background: -webkit-linear-gradient(#ffffff, #f0edeb); /* Safari 5.1+, Chrome 10+ */ |
007 |
background: -o-linear-gradient(#ffffff, #f0edeb); /* Opera 11.10 */ |
008 |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0edeb'); /* IE6 & IE7 */ |
009 |
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0edeb')"; /* IE8+ */ |
010 |
background: linear-gradient(#ffffff, #f0edeb); /* the standard */ |
011 |
position: relative; |
012 |
} |
013 |
#main #content { |
014 |
margin: 0 auto; |
015 |
min-height: 600px; |
016 |
overflow: hidden; |
017 |
width: 980px; |
018 |
} |
019 |
#main #content #promo { |
020 |
float:left; |
021 |
padding-left: 10px; |
022 |
width: 550px; |
023 |
} |
024 |
#main #content #promo .title { |
025 |
color: #0E385F; |
026 |
font-size: 20px; |
027 |
font-weight: bold; |
028 |
line-height: 29px; |
029 |
margin-top: 40px; |
030 |
padding-left: 10px; |
031 |
width: 450px; |
032 |
word-spacing: -1px; |
033 |
} |
034 |
#main #content #promo .img { |
035 |
background: url("../images/robo.png") no-repeat scroll 0 0 transparent; |
036 |
height: 400px; |
037 |
margin-top: 20px; |
038 |
} |
039 |
#main #content #info { |
040 |
float: right; |
041 |
padding: 43px 0 0 15px; |
042 |
width: 383px; |
043 |
} |
044 |
#main #content #info .title { |
045 |
font-size: 17px; |
046 |
margin-bottom: 10px; |
047 |
padding-left: 10px; |
048 |
padding-right: 10px; |
049 |
text-align: justify; |
050 |
width: 354px; |
051 |
} |
052 |
#main #content #join { |
053 |
float: right; |
054 |
padding: 43px 0 0 15px; |
055 |
width: 383px; |
056 |
} |
057 |
#main #content #join .title { |
058 |
border-bottom: 1px solid #9AAFCA; |
059 |
margin-bottom: 10px; |
060 |
padding-left: 10px; |
061 |
padding-right: 10px; |
062 |
text-align: right; |
063 |
width: 354px; |
064 |
} |
065 |
#main #content #join .title .l1 { |
066 |
font-size: 18px; |
067 |
font-weight: bold; |
068 |
margin-bottom: 5px; |
069 |
} |
070 |
#main #content #join .title .l2 { |
071 |
font-size: 15px; |
072 |
font-weight: normal; |
073 |
margin-bottom: 10px; |
074 |
} |
075 |
#main #content #join .cont { |
076 |
padding-bottom: 30px; |
077 |
} |
078 |
#main #content #join table { |
079 |
margin: 0 0 7px; |
080 |
} |
081 |
#main #content #join table td.label { |
082 |
color: #000; |
083 |
font-size: 13px; |
084 |
padding-right: 3px; |
085 |
text-align: right; |
086 |
width: 105px; |
087 |
} |
088 |
#main #content #join table label { |
089 |
color: #000; |
090 |
font-weight: normal; |
091 |
vertical-align: middle; |
092 |
} |
093 |
#main #content #join .field_container { |
094 |
display: inline-block; |
095 |
position: relative; |
096 |
width: auto; |
097 |
} |
098 |
#main #content #join .field_container input { |
099 |
border-color: #96A6C5; |
100 |
font-size: 16px; |
101 |
margin-top: 2px; |
102 |
padding: 6px; |
103 |
width: 250px; |
104 |
} |
105 |
#main #content #join .field_container select { |
106 |
border-color: #96A6C5; |
107 |
font-size: 13px; |
108 |
height: 30px; |
109 |
margin: 2px 0 0; |
110 |
padding: 5px; |
111 |
} |
112 |
#main #content #join .join_btn { |
113 |
margin: 0 0 0 110px; |
114 |
} |
115 |
#main #content #join .join_btn input[type=submit] { |
116 |
border: 1px solid #000; |
117 |
background-color: #666; |
118 |
box-shadow: 0 1px 0 rgba(150, 150, 150, 0.5); |
119 |
padding: 8px; |
120 |
text-align: center; |
121 |
text-decoration: none; |
122 |
vertical-align: top; |
123 |
white-space: nowrap; |
124 |
color: #FFF; |
125 |
cursor: pointer; |
126 |
display: inline-block; |
127 |
font-size: 14px; |
128 |
font-weight: bold; |
129 |
margin: 0; |
130 |
outline: medium none; |
131 |
} |
132 |
#main #content #join .join_btn input[type=submit]:active { |
133 |
background: none repeat scroll 0 0 #000; |
134 |
} |
3. Footer section
Finally, here are our footer area
01 |
<footer><!-- Defining the footer section of the page --> |
02 |
<div id="links"><!-- extra links --> |
03 |
<div class="copy"> |
04 |
<div><span> <a href="https://www.script-tutorials.com/creating-a-robo-splash-page-layout">Script-tutorials © 2011</a></span></div> |
05 |
</div> |
06 |
<div class="nav"> |
07 |
<a title="Find Friends" href="#">Find Friends</a> | |
08 |
<a title="About" href="#">About</a> | |
09 |
<a title="Advertising" href="#">Advertising</a> | |
10 |
<a title="Developers" href="#">Developers</a> | |
11 |
<a title="Privacy" href="#">Privacy</a> | |
12 |
<a title="Terms" href="#">Terms</a> | |
13 |
<a title="Help" href="#">Help</a> |
14 |
</div> |
15 |
</div> |
16 |
</footer> |
CSS for footer section
01 |
/* footer section */ |
02 |
footer { |
03 |
background-color: #ddd; |
04 |
bottom: 0; |
05 |
padding: 8px 0; |
06 |
position: fixed; |
07 |
text-align: center; |
08 |
width: 100%; |
09 |
} |
10 |
footer #links { |
11 |
margin:0 auto; |
12 |
overflow:hidden; |
13 |
position: relative; |
14 |
width: 960px; |
15 |
} |
16 |
footer #links .copy { |
17 |
margin-right: 20px; |
18 |
float: left; |
19 |
color:#808080; |
20 |
} |
21 |
footer #links .nav { |
22 |
text-align: right; |
23 |
} |
24 |
footer #links a { |
25 |
color: #000000; |
26 |
font-size: 12px; |
27 |
text-decoration: none; |
28 |
} |
29 |
footer #links a:hover { |
30 |
text-decoration: none; |
31 |
} |
Live Demo
Conclusion
Now our layour finally complete! You can use this as is, but please leave the back link to us intact. Don`t forget to say thanks 🙂 Good luck!