source code of hotel website:

This is the Source Code for Hotel Webitse:











 <!DOCTYPE html>

<html>

<head>

    <style>

*{

    box-sizing: border-box;

    margin: 0px;

    padding:0px;

    text-decoration: none;

}


 #home {

    background:url('image/hotel.jpg');

    background-size:cover;

    background-repeat: no-repeat;

    width:100%;

    height: 100vh;

    

}

html{

    scroll-behavior: smooth;

}


.header{

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: dodgerblue;

    padding:8px 0px;

    position: fixed;

    width:100%;

    




.header h1{

    margin-left: 10px;

    color:gold;


}

.header h1:hover{

    color:red;

}


.menu {

    width:50%;


}

 .menu nav {

    display: flex;

    justify-content: space-between;

    align-items: center;


 }

 .menu nav a{

    text-transform: uppercase;

    text-decoration: none;

    color:white;

    transition:width 2s ;

 }

 input[type=search]  {


    padding: 5px 0px;

    font-weight: bold;

    font-size:16px;

    border-radius: 5px;


 }

 button{

    margin-right:10px;

    padding: 5px 5px;

    font-weight: bold;

    font-size:16px;

   border-radius: 5px;

   background: green;

   color: white;

 }

 

  button:hover{

        background-color:red;

    }




.content{

    display: flex;

    justify-content: flex-start;

    align-items: center;

}

 marquee {

    font-size:50px;

    text-align: center;

    margin-top: 300px;

    margin-bottom: 20px;

    color:red;

    text-shadow: 2px 2px;

  

    

}





.para{

    display: flex;

    justify-content: center;

}

p{

color:black;

    font-weight: bold;

    font-size:30px;

    margin-left:350px;

    text-shadow: 1px 1px;

    ;

    

}

p:hover{

    color:yellow;

}




#ourservices {

    width:100%;

    height: 100%;

    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.8)),url(image/bg1.png);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;


}

#ourservices h1{

    color:red;

    text-align: center;

   left:0px;

    

    min-width:100%;

    padding: 10px;

    margin-bottom: 20px;

}

#ourservices h1::after{

    content: "";

    display: block;

    width:170px;

    height:3px;

    margin:20px auto;

    background: red;

}

#ourservices span {

    color:dodgerblue;

    padding:10px;

    font-weight: bold;

    font-size: 18px;


}

.container{

    margin-left: 50px;

    display: flex;

    margin-top: 30px;

    align-items: center;

}

.container1{

    margin-left: 50px;

    display: flex;

    

    align-items: center;

}


    .Services{

        max-width:400px;

        height:360px;

        border: 1px solid dodgerblue;

        margin: 2px;

     border-radius: 2px;

    }


    .Services1{

        max-width:400px;

        height:360px;

        border: 3px solid gold;

        margin: 2px;

        border-radius: 2px;


    }

    .btn {

        margin-top: 40px;

        margin-left:130px;

        background: black;

        opacity: 0.7;

    }

    .btn a{

        color:white;

    }

    .btn:hover{

        background-color: gray;

    }

 

 #Aboutus {

  

    width:100%;

    height: 600px;

      background: linear-gradient(to bottom, #ff66ff 0%, #3399ff 100%);

}



#price{

    width:100%;

    height: 600px;

      background: pink;

}

#Accomodation{

    width:100%;

    height: 600px;

    background: dodgerblue;


}

#contactus{

    width:100%;

    height: 600px;

    


}


    <title>Hotel Website</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="style.css">

</style>

</head>

<body>

  

    <div class="header">

        <h1>Subash Restaurant</h1>

        <div class="menu">

            <nav>

                <a href="#home">Home</a>

                <a href="#ourservices">Our Services</a>

                <a href="#Aboutus">About us</a>

                <a href="#price">PRICE </a>

                <a href="#Accomodation">Accomodation</a>

                <a href="#contactus">contact us</a>

            </nav>

</div>

<div>

<input type= "search" name="items" id="items">

<button>Search</button>

</div>

</div>

 <div id="home">    

    <div class="content">

    <marquee>Welcome to Our Restaurant.</marquee>

    

</div>

<div>

    <p class="para">We will provide Hospitality Behaviour to  Our Customers.</p>

</div>

</div>


<div id="ourservices">

    <h1>Our Services.</h1>

        <span class="side"><i>Our Restaurant is one of the Finest Restaurant throughout the nation .

         Our Restaurant provides a Good and Quality Facility of foods and Rooms to Our Customers. Our main Services are Rafting , Skydriving , Swimming , Jungle Safari and many more Regarding Excreation and fun. Beside this  the main iteams in Our Restaurant are Italian food , Sub-Continental food ,

        Indian Food as well as Western Culture Food.<i></span>

        

         <div class="container">

         <div class="Services">

            <img src="image/rafting.jpg" alt="rafting" width="394px" height="200px">

            <main>Rafting is one of the Most Exciting Adventures .We Assure you all the Precaution you can easily Feel Comfortable for 

            Performing Rafting.</main>

            <button class="btn"><a href="detail.html" target="_blank">Details.</a></button>

           </div>

           <div class="Services">

            <img src="image/scuba.jpg" alt="person" width="394px" height="200px">

            <main>Scuba is one of the Most Exciting Adventures .We Assure you all the Precaution you can easily Feel Comfortable for 

            Performing Scuba.</main>

            <button class="btn"><a href="#detail1" target="_blank">Details.</a></button>

           </div>

           <div class="Services">

            <img src="image/Junglesafari.jpg" alt="person" width="394px" height="200px">

            <main>Jungle Safari is one of the Most Exciting Adventures . We Assure you all the Precaution you can easily Feel Comfortable for 

            Safari.</main>

            <button class="btn"><a href="#detail2" target="_blank">Details.</a></button>

           </div>

       </div>

       <div class="container1">

           <div class="Services1">

            <img src="image/skydriving.jpg" alt="person" width="394px" height="200px">

            <main>Jungle Safari is one of the Most Exciting Adventures . We Assure you all the Precaution you can easily Feel Comfortable for 

            Safari.</main>

            <button class="btn"><a href="#detail4" target="_blank">Details.</a></button>

         </div>

            <div class="Services1">

            <img src="image/jet.jpg" alt="person" width="394px" height="200px">

            <main>Jungle Safari is one of the Most Exciting Adventures . We 

                Assure you all the Precaution you can easily Feel Comfortable for 

            Safari.</main>

            <button class="btn"><a href="#detail5" target="_blank">Details.</a>

</button>

         </div>

          

          <div class="Services1">

            <img src="image/bungee.jpg" alt="person" width="394px" height="200px">

            <main>Jungle Safari is one of the Most Exciting Adventures . We 

Assure you all the Precaution you can easily Feel Comfortable for 

            Safari.</main>

            <button class="btn"><a href="#detail6" target="_blank">Details.</a></button>

         </div>

</div>


<div id="Aboutus"></div>


  <div id="price"></div>

  <div id="Accomodation"></div>

    <div id="contactus"></div>





</body>

</html>


Post a Comment

0 Comments