[source code] Responsive Web Design Tutorial - 8,9,10 - Creating a Mobile Site

+23 Bucky Roberts · October 7, 2014

Image files:  https://buckysroom.org/forum/project_files/002_ResponsiveImages.zip


<!doctype html>
<html lang="en">
<link rel="stylesheet" href="css/main.css">

<div class="bottom-menu">
<a href="#">
<img src="images/stream-icon.png" />
<a href="#">
<img src="images/person-icon.png" />
<a href="#">
<li class="selected">
<img src="images/home-icon.png" />
<a href="#">
<img src="images/stream-icon.png" />
<a href="#">
<img src="images/person-icon.png" />


margin: 0;
padding: 0;
font-size: 100%;
font-family: Arial;
background: url("../images/dark_hardwood.jpg") repeat;
max-width: 100%;

/* Bottom Menu */
font-size: 1em;
bottom: 0;
position: fixed;
width: 100%;
.bottom-menu ul a li{
color: white;
text-decoration: none;
text-align: center;
float: left;
list-style: none;
width: 16.8%;
padding: 1.6%;
height: 100%;
background-color: black;
opacity: 0.5;
border-bottom: 2px solid black;
.bottom-menu ul a li.selected{
opacity: 1;
border-bottom: 2px solid #cc0000;
.bottom-menu ul a li img{
max-height: 1.6em;
padding-top: 0.15em;

Post a Reply


- page 1
Oldest  Newest  Rating
+2 Robin Larsson · October 8, 2014
Where are the images? :D
+2 Michael Beck · October 8, 2014
Image files: https://buckysroom.org/forum/project_files/002_ResponsiveImages.zip
+3 Robin Larsson · October 9, 2014
I know. He uploaded them after I asked. :) Thanks!
+3 Melchic├ędec NDUWAYO · October 16, 2014
Thank you Bucky Roberts!!
+1 James Sutton · November 24, 2014
When will these tutorials be finished please? They have been a great help so far and the rest would be brilliant, Thanks :D
+2 Martin Rand · November 25, 2014
is this finished ? nothing else coming ?
+1 Muamet Shasivari · December 20, 2014
Can anyone tell me how to link to a external page(which I do not control:google,yahoo etc) and to keep my header and footer.
I understand how to link an external page which is done with some # and ID and it is controlled by me.
What I want is with jquery mobile to link let say,thenewboston.com and to keep header and footer of my web app.
Did I explain that right?
Please help me..
+1 Jeremy Maidment · December 22, 2014
What is the link to these tutorials?
0 Mani Maangat · July 10, 2015

This link is not valid any more could you provide the new link
I also tried https://thenewboston.org/forum/project_files/002_ResponsiveImages.zip

It did not worked as well
0 Ahmed El-Eraky · July 24, 2015
i can not download images.
It says this web page is not avaliable
  • 1
  • 2

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.