Programming and Codes: Fantastic

Hi! friends,

I'm Deepak Sharma 26,well it's my first HTML website which I have created of my own.It took me so much time to code it ,because it was so lengthy to write different pages of same kind of purpose containing different contents.And link them to each other.

Well,this website is about Tour & Travels by me. It consists of different pages like booking, home, contact etc.Well It's not a proper website you see on internet, it's just a full working layout.

Let's see the First page,

Home

<!DOCTYPE html>

<html>

<style>

.sidenav {

display: none;

height: 100%;

width: 190px;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: #111;

overflow-x: hidden;

padding-top: 60px;

}

.sidenav a {

padding: 8px 8px 8px 3px;

text-decoration: none;

font-size: 25px;

color: #818181;

display: block;

}

.sidenav a:hover {

color: #f1f1f1;

}

.sidenav .closebtn {

position: absolute;

top: 0;

right: 25px;

font-size: 36px;

margin-left: 50px;

}

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

}

header {

background-color:red;

color:white;

text-align:center;

padding:5px;

}

nav {

line-height:30px;

background-color:grey;

height:480px;

width:100px;

float:left;

padding:5px;

}

section {

width:450px;

float:left;

padding:10px;

margin-left:10px;

height:470px;

}

footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;;

}

li {

float: right;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

</style>

</head>

<body>

<a href="#" style="text-decoration:none;">Payment</a>

<a href="#" style="text-decoration:none;">Services</a>

<a href="#" style="text-decoration:none;">Clients</a>

</div>

<h1>

<font style="margin-left:105px;margin-right:55px;"> Deepak's Tours & Travels</font></h1>

</header>

function openNav() {

document.getElementById("mySidenav").style.display = "block";

}

function closeNav() {

document.getElementById("mySidenav").style.display = "none";

}

</script>

<ul>

<li><a href="content://com.mi.android.globalFileexplorer.myprovider/external_files/Contact.html" >Contact</a></li>

<li><a href="content://com.mi.android.globalFileexplorer.myprovider/external_files/About%20us.html" >About us</a></li>

<li><a href="content://com.mi.android.globalFileexplorer.myprovider/external_files/Booking.html" >Booking</a></li>

</ul>

<nav>

Deepak Sharma 26 is the best of all.

</nav>

<center><h2><u>Search Your Dream Place</u></h2></center>

<fieldset style="width:450px;"><legend><h4>Top Trending Places</h4></legend>

</marquee>

</fieldset>

</section>

</footer>

</body>

</html>

The output of this page is,

The second page,

Booking

<!DOCTYPE html>

<html>

<style>

.sidenav {

display: none;

height: 100%;

width: 190px;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: #111;

overflow-x: hidden;

padding-top: 60px;

}

.sidenav a {

padding: 8px 8px 8px 3px;

text-decoration: none;

font-size: 25px;

color: #818181;

display: block;

}

.sidenav a:hover {

color: #f1f1f1;

}

.sidenav .closebtn {

position: absolute;

top: 0;

right: 25px;

font-size: 36px;

margin-left: 50px;

}

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

}

header {

background-color:red;

color:white;

text-align:center;

padding:5px;

}

nav {

line-height:30px;

background-color:grey;

height:580px;

width:100px;

float:left;

padding:5px;

}

section {

width:420px;

float:left;

padding:10px;

margin-left:50px;

height:570px;

}

footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;;

}

li {

float: right;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

</style>

</head>

<body>

<a href="#" style="text-decoration:none;">Payment</a>

<a href="#" style="text-decoration:none;">Services</a>

<a href="#" style="text-decoration:none;">Clients</a>

</div>

<h1>

<font style="margin-left:105px;margin-right:55px;"> Deepak's Tours & Travels</font></h1>

</header>

function openNav() {

document.getElementById("mySidenav").style.display = "block";

}

function closeNav() {

document.getElementById("mySidenav").style.display = "none";

}

</script>

<ul>

<li><a href="content://com.mi.android.globalFileexplorer.myprovider/external_files/Contact.html" >Contact</a></li>

<li><a href="content://com.mi.android.globalFileexplorer.myprovider/external_files/About%20us.html" >About us</a></li>

<li><a class="active" href="#" >Booking</a></li>

</ul>

<nav>

Deepak Sharma 26 is the best of all.

</nav>

<center><h2><u>Enter your details.</u></h2></center>

<br><b>Your total payable amount: </b><input type="number" value="10000" style="border-radius:5px;width:90px"><br><br>

<b>Pay your payment by: </b><input type="text" style="border-radius:5px; " >

</section>

</footer>

</body>

</html>

which again consists a another page,

Input details

<html>

<head><title>Input Details.</title></head>

<b>First Name:</b><input type="text" placeholder="First Name" style="background-color:skyblue; border-radius:5px;" autofocus><br><br>

<b>Email Id:</b><input type="email" placeholder="Email id" style="background-color:burlywood; border-radius:5px;"><br><br>

<b>Phone No.</b><input type="tel" placeholder="Enter Phone no." maxlength="10" style="border-radius:5px; background-color:burlywood"><br><br>

<b>Address:</b><input type="text" placeholder="Address" style="background-color:burlywood; border-radius:5px;"><br><br>

<center><h3>No. of Members:</center></h3>

<b>No. of Rooms</b><input type="number" placeholder="No. of Rooms" style="background-color:lightblue;border-radius:5px; width:145px; margin-left:20px;"><br><br>

<b>No. of Days for holiday:</b><input type="number" placeholder="Days" style="background-color:lightblue;border-radius:5px; width:110px; margin-left:10px;"><br><br>

<b>Date of Arrival:</b><input type="date" placeholder="Date of Arrival " style="background-color:lightgreen; border-radius:5px; margin-left:55px;"><br><br>

<b>Place of Arrival:</b><input type="text" placeholder="Place of Arrival" style="background-color:lightgreen; border-radius:5px; margin-left:25px;"><br><br>

<b>Place to Travel:</b><input type="text" placeholder="Place to travel" style="background-color: lightgreen; border-radius:5px; margin-left:35px;"><br><br>

<b>Transportation:</b><input list="vehicle" name="vehicle" placeholder="Choose your vehicle" style="border-radius:5px;background-color:lightgreen;margin-left:20px;"><datalist id="vehicle">

</datalist>

</form>

</body>

</html>

The output is,

The third page is,

About us

<!DOCTYPE html>

<html>

<style>

.sidenav {

display: none;

height: 100%;

width: 190px;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: #111;

overflow-x: hidden;

padding-top: 60px;

}

.sidenav a {

padding: 8px 8px 8px 3px;

text-decoration: none;

font-size: 25px;

color: #818181;

display: block;

}

.sidenav a:hover {

color: #f1f1f1;

}

.sidenav .closebtn {

position: absolute;

top: 0;

right: 25px;

font-size: 36px;

margin-left: 50px;

}

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

}

header {

background-color:red;

color:white;

text-align:center;

padding:5px;

}

nav {

line-height:30px;

background-color:grey;

height:419px;

width:100px;

float:left;

padding:5px;

}

section {

width:507px;

float:left;

padding:1px;

margin-left:5px;

height:427px;

}

footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;;

}

li {

float: right;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

</style>

</head>

<body>

<a href="#" style="text-decoration:none;">Payment</a>

<a href="#" style="text-decoration:none;">Services</a>

<a href="#" style="text-decoration:none;">Clients</a>

</div>

<h1>

<font style="margin-left:105px;margin-right:55px;"> Deepak's Tours & Travels</font></h1>

</header>

function openNav() {

document.getElementById("mySidenav").style.display = "block";

}

function closeNav() {

document.getElementById("mySidenav").style.display = "none";

}

</script>

<ul>

<li><a href="content://com.mi.android.globalFileexplorer.myprovider/external_files/Contact.html" >Contact</a></li>

<li><a class="active" >About us</a></li>

<li><a href="content://com.mi.android.globalFileexplorer.myprovider/external_files/Booking.html" >Booking</a></li>

</ul>

<nav>

Deepak Sharma 26 is the best of all.

</nav>

<center><h1>About Us</h1></center>

<center><del><pre> </pre></del><h3>Our Story</h3><del><pre> </pre></del></center>

<center style="padding:10px;">Just over a year ago, we became fascinated by the ideas of

discovering the worldthrough someone else's eyes.What if you could

see through the eyes of a protestor in Ukraine? Or watch a sunrise from a hot air

ballon in Cappadocia? It may sound crazy.but we wanted to build

the closest thing to teleportaion.While there are many ways to discover events and

places, we realized there is no such a better way to experience a place right now

than to be there.A picture may be worth of a thousand words,but the feeling can

take you someplace and show you around.</center>

</section>

</footer>

</body>

</html>

The output is,

The fourth page is,

Contact

<!DOCTYPE html>

<html>

<style>

.sidenav {

display: none;

height: 100%;

width: 190px;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: #111;

overflow-x: hidden;

padding-top: 60px;

}

.sidenav a {

padding: 8px 8px 8px 3px;

text-decoration: none;

font-size: 25px;

color: #818181;

display: block;

}

.sidenav a:hover {

color: #f1f1f1;

}

.sidenav .closebtn {

position: absolute;

top: 0;

right: 25px;

font-size: 36px;

margin-left: 50px;

}

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

}

header {

background-color:red;

color:white;

text-align:center;

padding:5px;

}

nav {

line-height:30px;

background-color:grey;

height:465px;

width:100px;

float:left;

padding:5px;

}

section {

width:497px;

float:left;

padding:5px;

margin-left:7px;

height:465px;

}

footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;;

}

li {

float: right;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active) {

background-color: #111;

}

.active {

background-color: #4CAF50;

}

</style>

</head>

<body>

<a href="#" style="text-decoration:none;">Payment</a>

<a href="#" style="text-decoration:none;">Services</a>

<a href="#" style="text-decoration:none;">Clients</a>

</div>

<h1>

<font style="margin-left:105px;margin-right:55px;"> Deepak's Tours & Travels</font></h1>

</header>

function openNav() {

document.getElementById("mySidenav").style.display = "block";

}

function closeNav() {

document.getElementById("mySidenav").style.display = "none";

}

</script>

<ul>

<li><a class="active">Contact</a></li>

<li><a href="content://com.mi.android.globalFileexplorer.myprovider/external_files/About%20us.html" >About us</a></li>

<li><a href="content://com.mi.android.globalFileexplorer.myprovider/external_files/Booking.html" >Booking</a></li>

</ul>

<nav>

Deepak Sharma 26 is the best of all.

</nav>

<center><h2>Welcome!</h2></center>

Welcome to my first webpage.I created this webpage without the assistance of webpage editor.Just my little text editor and

a keen understanding of html.

<p>Look around.Notice I'm able to use paragraphs,lists and headings.You may not be able to tell,but the layout is by myself.

I'm very clever.</p>

<p style="margin-left:80px;">I always wanted to be somebody, but now I realize I should have been more specific.

<br><br><i>Deepak Sharma 26</i></p>

<i>Deepak Sharma<br>

Student(IICS)<br>

522.5445.5445<br>

Contact me at <u><a href="#" >deepaksharma26.@gmail.com</a></u>

</i>

</section>

</footer>

</body>

</html>

The output is,

Well guys this is all about , my first website.

Now Check it out on Internet for real :

My Website .

Programming and Codes

Sunday, 22 September 2019

My First HTML website.

Hi! friends,

Home

Booking

About us

Contact

Monday, 2 September 2019

Fiber optic cable.

Good morning! friends,

Learn Linux

Hi ! friends, I'm Deepak

Search This Blog