Wednesday 18 October 2017

How to apply Animation and transition on image gallery by css-3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>About Us</title>
<link href="../css/style.css" rel="stylesheet"  type="text/css"/>

<style>



#imgbannaer img:hover
{
 border:5px solid red;
opacity:0.9;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);

}
#imgbannaer img
{

 -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
  transition: width 2s, height 2s, transform 2s;
}



</style>
</head>

<body>

<div id="warpper">

<header>

<div style="width:50%;height:200px;float:left">

<img src="../img/logo.png" style="width:250px;height:190px;">



 </div>
<div style="width:50%;height:200px;float:left">
<img src="../img/logo2.png" style="width:250px;height:190px;">

</div>


 </header>

<nav>
<ul>

<li> <a href="../index.html">HOME </a> </li>

<li> <a href="service.html">SERVICE </a> </li>

<li> <a href="about us.html">ABOUT </a> </li>

<li> <a href="contact.html">CONTACT</a> </li>

<li> <a href="gallery.html">GALLERY</a> </li>


</ul>


</nav>



<section style=" height:auto">


<div id="imgbannaer" style="width:90%;background-color:#FFF; margin:0 auto;margin-top:20px;">
<a href="../img/g1.jpg" target="new">
<img src="../img/g1.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>

</a>


<img src="../img/g2.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g3.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g4.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g5.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>

<br><br>


<img src="../img/g6.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g7.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g8.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g9.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g10.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>

<br><br>

<img src="../img/g1.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g2.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g3.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g4.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g5.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>

<br><br>


<img src="../img/g6.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g7.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g8.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g9.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>
<img src="../img/g10.jpg" width="200px" height="200px" style=" border-radius:20px 50px 20px 50px; box-shadow:5px 5px 5px 5px #0033FF"/>







</div>









 </section>

<br><br>
<footer>
<br>


<p style="text-align:center;">Made by : Salmanmasood </p>
</footer>




</div>


</body>
</html>

About us page layout

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>About Us</title>
<link href="../css/style.css" rel="stylesheet"  type="text/css"/>

<style>

TD
{

padding:20PX;
}

H3
{ text-align:center;



}

P
{
font-family:'Times New Roman', Times, serif;color:#000; font-size:smaller
}

#profile p
{ text-align:center;
  font-family:"Arial Black", Gadget, sans-serif;
}

</style>



</head>

<body>

<div id="warpper">

<header>

<div style="width:50%;height:200px;float:left">

<img src="../img/logo.png" style="width:250px;height:190px;">



 </div>
<div style="width:50%;height:200px;float:left">
<img src="../img/logo2.png" style="width:250px;height:190px;">

</div>


 </header>

<nav>
<ul>

<li> <a href="../index.html">HOME </a> </li>

<li> <a href="service.html">SERVICE </a> </li>

<li> <a href="about us.html">ABOUT </a> </li>

<li> <a href="contact.html">CONTACT</a> </li>

<li> <a href="gallery.html">GALLERY</a> </li>


</ul>


</nav>



<section style="min-height:500px">


<div style="width:100%;height:250px; background-color:#fff">


<div style="width:70%;height:250px; float:left">

<h1 style="font-style:normal; font-weight:lighter; color:#999; margin-left:50px;">About Company </h1>
<blockquote>

<p style="font-family:'Times New Roman', Times, serif;color:#000; font-size:smaller">Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme.
Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign.
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
 </p>

 </blockquote>



</div>

<div style="width:30%;height:250px; background-color:green; float:left">

<img src="../img/office.jpg"  style="width:100%; height:100%;"/>

 </div>












</div>



<div style="width:100%;height:230px; background-color:RGBA(245,246,246,0.7)">


<table>

<tr>

<td>
<h3>WHO WE ARE ?</h3>

<p> Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme.</p>
 </td>


<td>
<h3>WHAT WE DO ? </h3>

<p>Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. </p>
 </td>


<td>
<h3>OUR SERVICES</h3>

<p>Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. </p>
 </td>




</tr>

</table>





</div>

<div style="width:100%;height:auto; background-color:white" id="profile">
<h1 style="font-style:normal; font-weight:lighter; color:#999; margin-left:50px;">Meet Our Team </h1>


<table style="margin-left:50px">

<tr>

<td>
<img src="../img/t1.jpg" width="200px" height="200px" /> <br/>
<p>Ms-Meldon </p>

<a href="#"> click here to view profile </a>

</td>


<td>
<img src="../img/t2.jpg" width="200px" height="200px" /> <br/>
<p>Ms-Lissa </p>

<a href="#"> click here to view profile </a>

</td>


<td>
<img src="../img/t3.jpg" width="200px" height="200px" /> <br/>
<p>Mr-James </p>

<a href="#"> click here to view profile </a>

</td>


<td>
<img src="../img/t4.jpg" width="200px" height="200px" /> <br/>
<p>Mr- Thomas </p>

<a href="#"> click here to view profile </a>

</td>



</tr>


</table>


</div>








 </section>


<footer>
<br>


<p style="text-align:center; ">Made by : Salmanmasood </p>
</footer>




</div>


</body>
</html>

Pass Dynamically Added Html Table Records List To Controller In Asp.net MVC

Controller Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ...