Wednesday 11 October 2017

Gallery page and linking other pages

Html code:





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

<style>

img:hover
{ border:2px solid red;
opacity:0.4;


}

</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 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>
- No comments:

Contact Us form in html and styling navigation bar

html  code:

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



<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(24.9273208  , 67.0330662),
    zoom:15,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("maps"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />







<style>

#maps
{ background-color:#666;
width:70%;
height:500px;
float:left;
}
#forms
{background-color:#093;
width:30%;
height:500px;
float:left;
color:#fff;
}

form
{

width: 100%;
height:100%;
background-color:rgb(2,173,193);
font-style:italic;
font-weight:bold;


}
TD{
 padding:20PX;}








 </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;background-color:red">

<div id="forms">


<form>
<br>
<br>

<table>

<tr> 
<td> User Name: </td>

<td>
<input type="text" size="15"  required="required" maxlength="10"/>

 </td>
 </tr>

<tr> 
<td> Password: </td>
<td> <input type="password" size="15"  required="required"/>  </td>
 </tr>


<tr> 
<td> Gender: </td>
<td>
<input type="radio"value="male" name="gender"/>Male <input type="radio" value="Female" name="gender"/>Female
 </td>

 </tr>


<tr>

<td>Education </td>
<td>
<input type="checkbox"  name="EDU" value="SSC"/>SSC
<input type="checkbox"  name="EDU" value="HSC"/>HSC
<input type="checkbox"  name="EDU" value="GRADUATION"/>GRAD
   </td>

</tr>




<TR>

<TD> City: </TD>
<TD>
<select>
<option value="khi">Karachi</option>
<option value="lhr">Lahore</option>
<option value="isb">Islamabad</option>
<option value="MUL">Multan </option>

</select>

</TD>

</TR>

<tr>

<td>Upload Resume: </td>
<td> <input type="file"/>  </td>

</tr>


<tr>

<td> </td>
<td><button> Submit!</button> </td>

</tr>


</table>



</form>




 </div>

<div id="maps">

<iframe width="450px" height="450px" src="https://www.google.com/maps/place/Aptech+Computer+Education+North+Karachi+Center/@24.9787237,67.0596737,17z/data=!3m1!4b1!4m5!3m4!1s0x3eb340e584b891c3:0x29b2cbc198ba2dbd!8m2!3d24.9787237!4d67.0618624"> </iframe> 




 </div>



 </section>


<footer> 
<br>


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




</div>


</body>
</html>
- No comments:
Subscribe to: Posts (Atom)

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 ...