TutorialLab

CSS NavBar and Gallery

CSS NavBar and Gallery

CSS NavBar and Gallery

Today we will discuss how to make CSS NavBar and Gallery. Now it’s the time to use all CSS Properties combine and make something looking good.Most of the Properties use over here were already discussed in previous lectures so let’s start to write code.

CSS Navbar

Navigation Bar Or Menu is an important part of any website. When someone want to make website they must try to design user attractive Navigation Bar. So Copy this below code and paste it into your code editor and then run it in any web browser to see result.

CSS NavBar

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #000;
    background-color: lightgreen;
}

li {
    float: left;
}

li a {
    display: block;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a.active {
    color: #fff;
    background-color: skyblue;
}
</style>
</head>
<body>

<ul>
  <li><a href="#">Home</a></li>
  <li><a class="active" href="#">Blogs</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

</body>
</html>

CSS Gallery

Now we will learn how to make Gallery in CSS. Much like NavBar, Gallery is also important part of website we should need to design such gallery that is simple, user attractive and nice look and feel. But the problem is that most of the people don’t know that how to use CSS Properties to make such Gallery. So here we are presenting a simple Gallery Code simply copy it and paste it into your code editor save it and run it in web browser to see result.

CSS Gallery

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 24%;
}	

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="image (1).jpg">
    <img src="image (1).jpg" alt="Car 1">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="image (2).jpg">
    <img src="image (2).jpg" alt="Car 2">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="image (3).jpg">
    <img src="image (3).jpg" alt="Building">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="image (4).jpg">
    <img src="image (4).jpg" alt="Road">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Previous Lecture

Aizaz Ali

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.