Information & Technology Computer Institution's
 In front of Gandhi Bhawan, Numaish Chauraha Hardoi.
                      ☎ +91 9026728220, +91 8423606968


Please Subscribe My YouTube Channel

Sunday, November 12, 2023

Image Gallery with HTML & CSS

Create an Image Gallery with HTML & CSS





<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{margin-left:100px;}
img:{padding:4px;}
img:hover {box-shadow: 0 1px 18px 10px rgba(255, 0, 0);opacity: 0.8;transform: rotate(15deg);border-radius: 20px 0px 20px 0px;}

div.a{float:left;padding:10px;}
div.about {
  text-align: center;margin-left:1px;margin-top:15px;border:2px solid black; border-bottom:none;border-left:none;border-right:none;}
  span{box-shadow:1px 1px 6px 15px red;background:rgb(255,0,0,1);margin-left:-75px;}
  pre{margin-top:-86px;}
  hr {
  width: 100px;
  height: 7px;
  background: red;
  transition: width 1s;   

}

hr:hover {
  width: 900px;
}
pre::first-letter{color:red;font-size: 38px;font-family: cursive;}
pre:hover{color:green;text-shadow: 1px 1px 6px whitesmoke;}
</style>


</head>
<body>
<div style="background: rgb(21,3,87);color:white;height:150px;border-radius: 20px;margin:auto;"><br><br><h1 align="left"><span>Images Gallery</span><pre><h2>                Created By:- Infotech Computer Institute</h2></pre><hr></h1></div>
<br><br>
<div style="border:2px;filter:drop-shadow(5px -2px 6px black);">
<div class="a"><a href="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"target="_blank"><img src="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"width="200"height="300"></a><div class="about">ITCI Computer Center Hardoi</div></div>

<div class="a"><a href="D:\milki\bollywood-actors-aamir-khan-hat-bollywood-wallpaper-preview.jpg"target="_blank"><img src="D:\milki\bollywood-actors-aamir-khan-hat-bollywood-wallpaper-preview.jpg"width="200"height="300"></a><div class="about">Actor:- Amir Khan</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"target="_blank"><img src="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"width="200"height="300"></a><div class="about">Nature</div></div>
<div class="a"><a href="D:\download\wallpaperflare.com_wallpaper (1).jpg"target="_blank"><img src="D:\download\wallpaperflare.com_wallpaper (1).jpg"width="200"height="300"></a><div class="about">Actor:- Salman Khan</div></div>
<div class="a"><a href="D:\download\peacock-with-purple-flower-middle.jpg"target="_blank"><img src="D:\download\peacock-with-purple-flower-middle.jpg"width="200"height="300"></a><div class="about">Peacock</div></div>
<div class="a"><a href="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"target="_blank"><img src="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"width="200"height="300"></a><div class="about">Sunflower</div></div>
<div class="a"><a href="D:\download\pexels-min-an-1629216.jpg"target="_blank"><img src="D:\download\pexels-min-an-1629216.jpg"width="200"height="300"></a><div class="about">Lord Buddha</div></div>
<div class="a"><a href="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"target="_blank"><img src="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"width="200"height="300"></a><div class="about">ITCI Computer Institutions</div></div>
<div class="a"><a href="C:\Users\2023\Downloads\doc.png"target="_blank"><img src="C:\Users\2023\Downloads\doc.png"width="200"height="300"></a><div class="about">Dr. Menka Singh</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"target="_blank"><img src="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\wallpaperflare.com_wallpaper (1).jpg"target="_blank"><img src="D:\download\wallpaperflare.com_wallpaper (1).jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\peacock-with-purple-flower-middle.jpg"target="_blank"><img src="D:\download\peacock-with-purple-flower-middle.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"target="_blank"><img src="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="C:\Users\2023\Pictures\pik.jpg"target="_blank"><img src="C:\Users\2023\Pictures\pik.jpg"width="200"height="300"></a><div class="about">M D:- Satyam Trivedi</div></div></div>


</body>
</html>
Written By:- - No comments:
Labels: , , , ,

Saturday, November 11, 2023

Create OTP Verification Form (Popup Box) with HTML & CSS

Create OTP Verification Form











<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OTP Verification Form</title>
    <style>
.form {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow:0.5px 1px 10px 0px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: black
}

.message {
  color: darkgray;
  font-size: 14px;
  margin-top: 4px;
  text-align: center
}

.inputs {
  margin-top: 10px
}

.inputs input {
  width: 32px;
  height: 32px;
  text-align: center;
  border: 2px solid blue;
  margin: 0 10px;
}

.inputs input:focus {
  border-bottom: 1px solid red;
  border-top: 1px solid green;
  outline: none;
}

.action {
  margin-top: 34px;
  padding: 12px 16px;
  border-radius: 8px;
  border:none;
  background-color: royalblue;
  color: white;
  align-self: end;
}</style>
</head>
<body>
    <div align="center"style="margin:200px;">
    <form class="form">
 <div class="title">OTP</div> 
 <div class="title">Verification Code</div>
<p class="message">We have sent a verification code to your mobile number</p> <div class="inputs">
<input id="input1" type="text" maxlength="1"> 
<input id="input2" type="text" maxlength="1"> 
<input id="input3" type="text" maxlength="1"> 
<input id="input4" type="text" maxlength="1"> </div>
 <button class="action">Verify Me</button> </form>
</div>

</body>
</html>

Written By:- - No comments:
Labels: , , , ,

Thursday, November 09, 2023

HTML & CSS Paragraph Borders (O level Practical) July 2023

HTML & CSS Paragraph Borders (O level Practical) July 2023




<html>
<head>
<title>Apply Paragraph Borders</title>
<style>
#a{background:black;color:white;border:5px solid aqua;padding:30px;font-size:20px;margin:50px;}
#b{background:rgb(255,235,65);font-family:'Monotype Corsiva';color:red;border:5px dotted green;border-radius:20px;padding:20px;font-size:20px;margin:50px;}
#c{background:rgb(255,235,65);font-family:'Monotype Corsiva';color:blue;border:5px dashed green;border-radius:20px;padding:20px;font-size:20px;margin:50px;}
#d{background:rgba(00,80,00);font-family:'Monotype Corsiva';padding:40px;border:5px groove red;border-radius:40px 0;color:white;font-size:20px;box-shadow:4px 5px 5px 5px white;margin:50px;}
#e{background:rgba(255,80,00);font-family:'Monotype Corsiva';padding:40px;border:5px inset blue;border-radius:40px 0;color:white;font-size:20px;box-shadow:4px 5px 5px 5px white;margin:50px;}
</style>


</head>
<body>
<h1 style="border:4px solid green;color:white;margin:50px;padding:30px;background:maroon;text-align:center;"> Paragraph Borders </h1>
<p id="a">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</p>
<p id="b">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.</p>
<p id="c">
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.</p>
</p>
<p id="d">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.</p>

<p id="e">To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.</p>
</p>
</body>
</html>
Written By:- - No comments:
Labels: , , , ,
Subscribe to: Posts (Atom)