Daily #Vlog with Anik || CSS Image Gallery || CSS Properties

In this video,I explained the CSS Image Gallery. Feel free to comment. For more, please subscribe and press the BELL icon.Please visit my CSS Playlist. Please link, comment, share and subscribe. The code is as follows -

HTML File - 
<html>
  <head> <title> Image Gallery </title>
         <link rel="stylesheet" href="image_gallery.css">
  </head>
 
  <body>
    <div class="imggallery">
  <a href="html.png" target="_blank">
    <img src="html.png" alt="HTML Image" width=150 height=150>
  </a>
<div class="note"> Added a HTML Image </div>
</div>

<div class="imggallery">
  <a href="css.png" target="_blank">
    <img src="css.png" alt="CSS Image" width=150 height=150>
  </a>
<div class="note"> Added a CSS Image </div>
</div>

<div class="imggallery">
  <a href="htmlcss.png" target="_blank">
    <img src="htmlcss.png" alt="HTML Image" width=120 height=100>
  </a>
<div class="note"> Added a HTML and CSS Image </div>
</div>

  </body>
</html>

CSS File - 
div.imggallery {
margin:5px;
border: 1px solid gray;
float: left;
width: 150px;
}

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

div.note{
padding: 15px;
text-align: center;
}

div.imggallery:hover {
border: 1px solid black;
}


Comments

Post a Comment

Popular posts from this blog

HTML - Frameset Tag in html

Image
Hello everyone. In this video, I explained the frameset tag in html -  HTML - Frameset Tag in html . For more, please subscribe the channel. If you have any doubt, please comment in this video. Check my playlist -  HTML Playlist Please like, comment, share and subscribe.
Read more

Interface in TypeScript || Interface along with Arrow Function

Image
In this video,I explained interface in TypeScript . Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my  Angular Playlist  .Please visit my  YouTube Videos . The code is as follows - interface.ts - interface Chat {   // Chat is the interface name   x: number,   y: number } let doChat = (chat: Chat) => {  // doChat - arrow function   console.log("The value of x:- " + chat.x);          // chat - parameter   console.log("The value of y:- " + chat.y); } doChat({   x: 20,   y: 40 }) interface1.ts -  interface anik {   x: number,   y: number } let singh = (abc: anik) => {   console.log(abc.x);   console.log(abc.y); } singh({   x: 1,   y: 2 })
Read more