[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

index.html

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

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

</body>
</html>


css/main.css
*{
margin: 0;
padding: 0;
}
body{
font-size: 100%;
font-family: Arial;
background: url("../images/dark_hardwood.jpg") repeat;
}
img{
max-width: 100%;
}

/* Bottom Menu */
.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

Replies

- 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
+1 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
https://buckysroom.org/forum/project_files/002_ResponsiveImages.zip

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

107,271 followers
About

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

Links
Moderators