[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 2
Oldest  Newest  Rating
+2 Michael Beck · October 8, 2014
Image files: https://buckysroom.org/forum/project_files/002_ResponsiveImages.zip
+2 Robin Larsson · October 8, 2014
Where are the images? :D
  • 1
  • 2

HTML / CSS / Web Design

107,172 followers
About

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

Links
Moderators