My Youtube Channel

Please Subscribe

Flag of Nepal

Built in OpenGL

Word Cloud in Python

With masked image

Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Tuesday, December 18, 2018

How to make a simple picture gallery using lightbox library in web?




HTML code

<!DOCTYPE html>
<html>
<head>
<title>PicGallery</title>
<link rel="stylesheet" type="text/css" href="css/picgallery.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>
</head>
<body>
<h1>Image Gallery</h1>
<div class="gallery">
<a href="gallery/1.jpg" data-lightbox="MyGallery" data-title="Red flower"><img src="gallery/1.jpg"></a>
<a href="gallery/2.jpg" data-lightbox="MyGallery" data-title="Car"><img src="gallery/2.jpg"></a>
<a href="gallery/3.jpg" data-lightbox="MyGallery"><img src="gallery/3.jpg"></a>
<a href="gallery/4.jpg" data-lightbox="MyGallery"><img src="gallery/4.jpg"></a>
<a href="gallery/5.jpg" data-lightbox="MyGallery"><img src="gallery/5.jpg"></a>
<a href="gallery/6.jpg" data-lightbox="MyGallery"><img src="gallery/6.jpg"></a>
<a href="gallery/7.jpg" data-lightbox="MyGallery"><img src="gallery/7.jpg"></a>
<a href="gallery/8.jpg" data-lightbox="MyGallery"><img src="gallery/8.jpg"></a>
</div>
</body>
</html>


CSS code

h1{
color: aqua;
text-align: center;
}

.gallery img{
width: 150px;
height: 150px;
padding: 20px;
transition: 1s;
}

.gallery img:hover{

transform: scale(1.5);
}


click here to download a complete file.

Friday, December 7, 2018

Design simple yet attractive log in form using HTML and CSS.

HTML code

<!DOCTYPE html>
<html>
<head>
<title>Feedback form</title>
<link rel="stylesheet" type="text/css" href="css/feedbackform.css">
</head>
<body>
<h3>Send your feedback...</h3>
<div class=blurform>

<div class="form1">
<form action="" method="get">
<br><br><label for="email">Your email id</label><br>
<input id="email" type="text" name="email"><br>
<label for="password">Your password</label><br>
<input id="password" type="text" name="password"><br>
<label for="comment">Comment</label><br>
<textarea id="comment" name="comment" rows="12" cols="40"></textarea><br>
<input type="checkbox" id="chkbx" name="chhkbx"><label for="chkbx">I completely agree to my statements.</label><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>


CSS code

input[type="text"]{
height: 25px;
width:250px;
font-size: large;
}

input[type="text"],textarea{
border:none;
margin-bottom: 20px;
margin-top: 8px;
background-color: #77aaff;
    color: white;
}

textarea{
width:350px;
}


input[type="submit"]{
cursor: pointer;
margin-top: 25px;
width: 120px;
height: 40px;
color: white;
background-color: #77aaff;
border: none;
margin-bottom: 30px;
}

label{
cursor: pointer;
 
}

.form1{

width:400px;
margin: auto;
background-color:white;
padding-left: 50px;
margin-top: 5px;
    border: 1px solid #77aaff;
    box-shadow: -7px 7px 8px #77aaff;

}

.blurform{

   width:400px;
margin: auto;
box-shadow: -7px 7px 300px #77aaff;
}

h3{
padding-left: 480px;
color:#77aaff;
}

Design Home page of facebook using HTML and CSS.



HTML code:


<!DOCTYPE html>
<html>
<head>
<title>facebook</title>
<link rel="stylesheet" type="text/css" href="css/facebook.css">
</head>
<body>
<div class="topbar">

<div class="facebookfont">
<p>facebook</p>
</div>

<div class="email">
<form action="" method="get">
<label for="emailid">Email or Phone</label><br>
<input id="emailid" type="text" name="emailid">
</form>
</div>

<div class="password">
<form action="" method="get">
<label for="password">Password</label><br>
<input id="password" type="password" name="password"><br>
<label id="account">Forgot account?</label>

</form>
</div>

<div class="login">
<input type="submit" name="login" value="Log In">
</div>

</div>

<div class="wholelowersection">
<div class="firstcolumn">
<div class="firstcolumntitle">
<p>Connect with friends and the<br> world around you on Facebook.</p>
</div>
<div class="firstcolumnsubtitle1">
<div class="subtitle11">
<p>See photos and updates</p>
</div>
<div class="subtitle12">
<p>from friends in News Feed.</p>
</div>
</div>

<div class="firstcolumnsubtitle2">
<div class="subtitle11">
<p>Share what's new </p>
</div>
<div class="subtitle12">
<p>in your life on your Timeline.</p>
</div>
</div>

<div class="firstcolumnsubtitle3">
<div class="subtitle11">
<p>Find more </p>
</div>
<div class="subtitle12">
<p>of what you're looking for with Facebook Search.</p>
</div>
</div>

</div>

<div class="secondsection">
<form  action="" method="post">
<br><label id="signup">Sign Up</label><br>
<label id="free">It's free and always will be. </label><br>
<div class="flname">
<input class="name" type="text" name="fname" placeholder="First name">
<input class="name" type="text" name="lname" placeholder="Last name">
</div>

<input class="mp" type="text" name="mobileno" placeholder="Mobile number or email">
<input class="mp" type="password" name="password" placeholder="New Password"><br><br>

<div class="birthdayblock">
<div class="birthdayblock1">
<label id="lblbirthday">Birthday</label><br>
<select class="birthdayselect">
<option  id="month">Month</option>
<option id="Jan">Jan</option>
<option id="Feb">Feb</option>
<option id="Dec" selected="selected">Dec</option>
</select>

<select class="birthdayselect">
<option id="Day">Day</option>
<option id="one" >1</option>
<option id="two" selected="selected">2</option>
<option id="three">3</option>
</select>

<select class="birthdayselect">
<option id="year">Year</option>
<option selected="selected">1993</option>
<option>1996</option>
<option>1997</option>
</select>
</div>
<div class="birthdayblock2">

<label>Why do I need to provide my<br>birthday? </label>
</div>
</div>
<div class="gender">
<div>
  <input type="radio" id="female" name="gender" value="Female">
  <label for="female">Female</label>
    </div>
    <div>
  <input type="radio" id="male" name="gender" value="Male">
  <label for="male">Male</label>
</div>
</div>
<div class="agreementblock">
<p>
By clicking Sign Up, you agree to our <span >Terms, Data Policy</span> and<br> <span>Cookies Policy</span>. You may receive SMS Notifications from us and<br> can opt out any time.
</p>
</div>
<div class="signupbutton">
<input type="submit" name="signup" value="Sign Up">
</div>
</form>
</div>
</div>
</body>

</html>


CSS code

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}


.topbar{
width:100%;
height: 90px;
color:white;
display: inline-grid;
background-color: #3b5998;
}

.facebookfont{
padding-left: 200px;
font-family: Segoe UI;
font-size: 42px;
font-weight: bold;
padding-top: 24px;
}

.topbar{
display: grid;
grid-template-columns: 55% 13% 13% 19%;
grid-gap: 10px;

}

.topbar >div{
background-color: #3b5998;

}

.topbar >div:nth-child(odd){
background-color: #3b5998;
}

.email{
padding-top: 15px;
}

.email input[type="text"]{
margin-top: 5px;
}

.password{
padding-top: 15px;

}

.password input[type="password"]{
margin-top: 5px;
margin-bottom: 5px;
}

#account{
color: #8b9dc3;
}

.login input[type="submit"]{
margin-top: 38px;
height: 20px;
background-color: #8b9dc3;
color:white;
border: none;
}

.wholelowersection{
height: 600px;
display: grid;
grid-template-columns: 55% 45%;

}

.wholelowersection >div{
background-color: #dfe3ee;

}

.wholelowersection >div:nth-child(even){
background-color: #dfe3ee;
}

#signup{
font-family: Segoe UI;
font-size: 38px;
font-weight: bold;
}

#free{
font-family: Segoe UI;
font-size: 20px;

}

.secondsection input[type="text"]{
height: 36px;

}

.name{
font-size: 20px;
width: 200px;
margin-top: 25px;
text-indent: 10px;
border: 1px solid #ccc;
border-radius: 6px;
}

.flname{
display: grid;
grid-template-columns: 37% 60%;
}

.mp{
height: 36px;
font-size: 20px;
width: 425px;
margin-top: 12px;
text-indent: 10px;
border: 1px solid #ccc;
border-radius: 6px;
}

.secondsection input[type="password"]{
margin-bottom: 10px;
}

#lblbirthday{
font-size: 20px;
}

.birthdayselect{
height: 30px;
width:70px;
margin-top: 5px;
}

.birthdayblock{
display: grid;
grid-template-columns: 38% 50%;

}

.birthdayblock1{
}

.birthdayblock2 label{

font-size: 12px;
color:#3b5998;
display: inline-block;
margin-top: 30px;
}

.gender{
display: grid;
grid-template-columns: 15% 70%;
margin-top: 15px;
}

.gender label{
font-size: 20px;
}

.agreementblock{
display: inline-block;
margin-top: 15px;
font-size: 12px;
color: #696969;
}

.signupbutton input[type="submit"]{

background-color: #228B22;
color: white;
margin-top: 20px;
height: 40px;
width: 200px;
border: none;
border-radius: 5px;
font-size: 19px;
}

.firstcolumntitle{
display: inline-block;
margin-top: 60px;
margin-left: 150px;
font-family: Segoe UI;
font-size: 28px;
font-weight: bold;
}

.firstcolumnsubtitle1{
display: grid;
grid-template-columns: 35% 65%;
margin-left: 150px;
margin-top: 60px;
}

.subtitle11{
font-weight: bold;
font-size: 20px;

}

.subtitle12{
font-size: 20px;
color: #696969;
}

.firstcolumnsubtitle2{
display: grid;
grid-template-columns: 27% 73%;
margin-left: 150px;
margin-top: 60px;
}

.firstcolumnsubtitle3{
display: grid;
grid-template-columns: 17% 83%;
margin-left: 150px;
margin-top: 60px;
}

.agreementblock span{

color:#3b5998;
}