Skip to main content

Posts

Showing posts with the label Web Design

Smart Animation Menu For Website

By
Screen Shots : Once you click the Show menu You get animate menu like this.. Try it! Wanna Need this show Menu :      Download Now User also Searched For : Responsive Website Design Smart Photo Gallery for your Website Modal Form for Website How to add video to website/blog  Thanks and regards, Tech Bird
Post a Comment
Read more

ADDING A VIDEO TO UR BLOG OR WEBSITE

By
ADDING A VIDEO TO UR BLOG OR WEBSITE Now Adding a YouTube Video to Your Blog or website so easy as opening an water bottle... Playing a YouTube Video in HTML To play your video on a web page, do the following: Upload the video to YouTube Take a note of the video id Define an <iframe> element in your web page Let the src attribute point to the video URL Use the width and height attributes to specify the dimension of the player Example: <html> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/8gTeE6pa4Kg?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe> </body> </html> Source Learned From :  W3Schools.com  Thanks and Regards, Tech Bird
Post a Comment
Read more

Smart Photo Gallery

By
Smart Photo Gallery Source Code: <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {   font-family: Verdana, sans-serif;   margin: 0; } * {   box-sizing: border-box; } .row > .column {   padding: 0 8px; } .row:after {   content: "";   display: table;   clear: both; } .column {   float: left;   width: 25%; } /* The Modal (background) */ .modal {   display: none;   position: fixed;   z-index: 1;   padding-top: 100px;   left: 0;   top: 0;   width: 100%;   height: 100%;   overflow: auto;   background-color: black; } /* Modal Content */ .modal-content {   position: relative;   background-color: #fefefe;   margin: auto;   padding: 0;   width: 90%;   max-width: 1200px; } /* The Close Button */ .close {   color: white;   ...
Post a Comment
Read more

Image Modal Form

By
IMage MOdal DEsign Creation Example Source code: <!DOCTYPE html> <html> <head> <style> #myImg {     border-radius: 5px;     cursor: pointer;     transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal {     display: none; /* Hidden by default */     position: fixed; /* Stay in place */     z-index: 1; /* Sit on top */     padding-top: 100px; /* Location of the box */     left: 0;     top: 0;     width: 100%; /* Full width */     height: 100%; /* Full height */     overflow: auto; /* Enable scroll if needed */     background-color: rgb(0,0,0); /* Fallback color */     background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content {     margin: auto;     display: block;     width: 80%;  ...
Post a Comment
Read more

Advanced Animated modal Form

By
Just Try it! And feedback ur comments...Developers .😎 Animated Modal with Header and Footer <!DOCTYPE html> <html> <head> <style> /* The Modal (background) */ .modal {     display: none; /* Hidden by default */     position: fixed; /* Stay in place */     z-index: 1; /* Sit on top */     padding-top: 100px; /* Location of the box */     left: 0;     top: 0;     width: 100%; /* Full width */     height: 100%; /* Full height */     overflow: auto; /* Enable scroll if needed */     background-color: rgb(0,0,0); /* Fallback color */     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content {     position: relative;     background-color: #fefefe;     margin: auto;     padding: 0;     border: 1px solid #888;     width: 80%; ...
Post a Comment
Read more

A Simple Modal Design Example

By
Try this and learn more from this space. Keep loading this more and more ..😎😎😎 This is my first step to initiate with the web development skills A simple modal form for the beginners who has started to learn the web development skills.. 😍😍😍😍😍 <!DOCTYPE html> <html> <head> <style> /* The Modal (background) */ .modal {     display: none; /* Hidden by default */     position: fixed; /* Stay in place */     z-index: 1; /* Sit on top */     padding-top: 100px; /* Location of the box */     left: 0;     top: 0;     width: 100%; /* Full width */     height: 100%; /* Full height */     overflow: auto; /* Enable scroll if needed */     background-color: rgb(0,0,0); /* Fallback color */     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content {     background-color: #f...
Post a Comment
Read more