Building Static Website

(part6)

HTML Lists

Today, let us add some lists to our detailed view section by using html lists.

Lists:

List is a way to group related pieces of information, so that they are easy to read and understand.

For example:

Shopping list, To-do list…etc.

There are two types of lists:

Unordered list
ordered list

Unordered list:

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example:

<ul>
  <li> list item1 </li>
  <li> list item2 </li>
</ul>

So, now let us add some points to the Mysore Palace and you need to place that code in the Mysore Palace detailed view section.

<div id="sectionmysorepalacedetailedview">
    <div class="bg-container2">
      <h1 class="mainheading1">Detailed View</h1>
    <div class="d-flex flex-row justify-content-center">
    <div class="container-card">
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="images/mysore1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="images/mysore2.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="images/mysore3.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <div class="text-container">
        <h1 class="heading2">Mysore Palace</h1>
        <p class="paragraph1">Mysore Palace, also known as Amba Vilas Palace, is a historical palace and a royal residence (house). It is located in Mysore, Karnataka, India.  It used to be the official residence of the Wadiyar dynasty and the seat of the Kingdom of Mysore. </p>
        <ul class="paragaraph1 unorderd-list">
          <li>Palace Entrance Timings: Everyday from 10.00 am to 5.30 pm.</li>
          <li>Tickets issued for Palace Entrance between 10.00AM – 5.30 PM.</li>
        </ul>
      </div>
      </div>
    </div>
    </div>

And this how the unorderd list items are added.

Now let us add the styling to list items using CSS.

list style types are like circle, square, dic and none means no symbol.

.unordered-list{
    list-style-type:square;
}

This is how the square list type are added and in the same way you can use different list style types.

Ordered List:

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

The list style types are like: upper-alpha, lower-roman, lower-alpha.

<ol>
  <li> list item1 </li>
  <li> list item2 </li>
</ol>

<ol class="paragraph1 ordered-list">
          <li>Palace Entrance Timings: Everyday from 10.00 am to 5.30 pm.</li>
          <li>Tickets issued for Palace Entrance between 10.00AM to 5.30 PM.</li>
        </ol>

Now let us add the styling to list items using CSS.

.ordered-list{
    list-style-type:upper-alpha;
}

In the same way you can use different list style types.

Building static website(part 4)

Integration of Tourism Website(part1)

In the last story we have learned about how to add carousel and youtube video to the website and todaty let us Integrate all the three webpages together to form a tourism website.

In the mean time we will be learning about two HTML attributes

Onclick Attribute
id Attribute

Id Attribute:

It is used to uniquely identify the HTML elements. The value for the html attribute must me unique.

Syntax:

<div id="container1">
...
</div>

Above id is the attribute name and container is attribute value.

Onclick Attribute:

The onclick event occurs when the user clicks on an html element.

Syntax:

<button class="btn btn-primary" onclick="display('sectionid')">
</button>

Specifying Unique Id:

The id which we specify to any section should always contain its prefix as section and the s in the section should be always written in lower alphabet.

Example:

section1, sectionab…etc.

Integration of first two sections:

we need to add id’s to the section container and add onclick attribute to the button in the Home Section.

Integration of Home and Favourite places section:

We need to id to the home section as:

<div id="sectionHome">
...
</div>

And the content goes inbetween the id section and the onclick attribute is to be added above the closing body tag.

<button class="button" onclick="display('sectionfavouriteplace')">Get Started
</button>

For Example:

DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="back.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="webint.css">
    </head>
    <body>
        <div id="sectionHome">
            <div class="bg-container d-flex flex-column justify-content-end">
                 <div class="tourismcard">
                    <h1 class="main-heading">Tourism</h1>
                    <p class="paragraph">Plan your trip wherever you want to go</p>
                    <button class="button" onclick="display('sectionfavouriteplaces')">Get Started</button>
                </div>
            </div>
        </div>
       <div id="sectionfavouriteplaces">
            <div class="bg-container1">
                <div class="heading">Favourite Places</div>
                    <div class="card d-flex flex-row justify-content-end" onclick="display('sectionTajMahalDetailedview')">
                        <div>
                            <h1 class="heading1">Taj Mahal</h1>
                            <p class="description1">If there was just one symbol to represent all of India, it would be the Taj Mahal.It is a masterpiece of architectural style in conception, treatment and execution and has unique aesthetic qualities in balance, symmetry and harmonious blending of various elements. Integrity is maintained in the intactness of tomb, mosque, guest house, main gate and the whole Taj Mahal complex.</p>
                        </div>
                        <img src="images/tajmahal.jfif" class="image1"/>
                    </div>
                    <div class="card d-flex flex-row justify-content-end" onclick="display('sectionGoldenTempledetailedview')">
                        <div>
                            <h1 class="heading1">Golden Temple</h1>
                            <p class="description1">The Golden temple is famous for its full golden dome, it is one of the most sacred pilgrim spots for Sikhs.The Mandir is built on a 67-ft square of marble and is a two storied structure.</p>
                        </div>
                        <img src="images/golden.avif" class="image1"/>
                    </div>
                    <div class="card d-flex flex-row justify-content-end" onclick="display('sectiontirupatidetailedview')">
                        <div>
                            <h1 class="heading1">Tirupati</h1>
                            <p class="description1">Tirupati is a city in the Indian state of Andhra Pradesh. It is the administrative headquarters of the Tirupati district. Tirupati is world-famous for Tirupati Laddu. It is the prasadam at Venkateshvara Temple, Tirumala. </p>
                        </div>
                        <img src="images/tirupati.jfif" class="image1"/>
                    </div>
                    <div class="card d-flex flex-row justify-content-end" onclick="display('sectionmysorepalacedetailedview')">
                        <div>
                            <h1 class="heading1">Mysore Palace</h1>
                            <p class="description1">Mysore Palace, also known as Amba Vilas Palace, is a historical palace and a royal residence (house). It is located in Mysore, Karnataka, India. It used to be the official residence of the Wadiyar dynasty and the seat of the Kingdom of Mysore. </p>
                        </div>
                        <img src="images/mysore.jfif" class="image1"/>
                    </div>
                </div>
                <button class="btn btn-dark" onclick="display('sectionHome')">
                    back
                </button>
            </div>
        <script type="text/javascript" src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/js/ccbp-ui-kit.js"></script>
  </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
.bg-container{
    background-image:url("images/sunset.jpg");
    background-size:cover;
    text-align: center;
    height:100vh; 
}
.tourismcard{
    text-align:center;
    background-color:white;
    padding:5px;
    border-top-left-radius:45px;
    border-top-right-radius:45px;
}
.main-heading{
    color:black;
    font-family:monoton;
    font-size:30px;
    font-weight:bold;
    font-style:normal;
    margin:0px;
}
.paragraph{
    color:black;
    margin:0px;
}
.button{
    height:36px;
    width:138px;
    background-color:rgba(17, 156, 230, 0.84);
    border-radius:20px;
    border-width:0px;
}
.bg-container1{
    background-image:url("images/backk.jpg");
    background-size:cover;
    height:100vh;
}
.heading{
    font-family:"Roboto";
    font-size:40px;
    font-weight:bold;
    color:white;
    padding:5px;
}
.card{
    background-color:white;
    border-radius:8px;
    margin:5px;
}
.heading1{
    font-family:"Roboto";
    font-size:25px;
    font-weight:bold;
    color:black;
    padding:10px;
}
.description1{
    margin:10px;
    color:black;
    font-family:"Roboto";
    font-style:normal;
}
.image1{
    height:150px;
    width:200px;
    padding:15px;
}

And this is how the the get started button takes you to the favourite places section and below is the back button which again takes you to the home section.

Integration of favourite places and detailed view section:

Now let us integrate the favourite places section and also we add the Taj Mahal detailed view section to the Taj Mahal favourite place.

The code should be added below the section favourite places and the onclick is to be added in the favourite places section.

<div id="sectionfavouriteplaces">
            <div class="bg-container1">
                <div class="heading">Favourite Places</div>
                    <div class="card d-flex flex-row justify-content-end" onclick="display('sectionTajMahalDetailedview')">
                        <div>
                            <h1 class="heading1">Taj Mahal</h1>
                            <p class="description1">If there was just one symbol to represent all of India, it would be the Taj Mahal.It is a masterpiece of architectural style in conception, treatment and execution and has unique aesthetic qualities in balance, symmetry and harmonious blending of various elements. Integrity is maintained in the intactness of tomb, mosque, guest house, main gate and the whole Taj Mahal complex.</p>
                        </div>
                        <img src="images/tajmahal.jfif" class="image1"/>
                    </div>

<div id="sectionTajMahalDetailedview">
            <div class="bg-container2">
                <h1 class="mainheading1">Detailed View</h1>
              <div class="d-flex flex-row justify-content-center">
              <div class="container-card">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img src="images/tajmahal1.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="images/tajmahal4.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="images/tajmahal5.jpg" class="d-block w-100" alt="...">
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
                <div class="text-container">
                  <h1 class="heading2">Taj Mahal</h1>
                  <p class="paragraph1">If there was just one symbol to represent all of India, it would be the Taj Mahal.It is a masterpiece of architectural style in conception, treatment and execution and has unique aesthetic qualities in balance, symmetry and harmonious blending of various elements.</p>
                </div>
              </div>
              </div>
              <button class="btn btn-dark" onclick="display('sectionfavouriteplaces')">
                back
            </button>
             </div>
        </div>

.bg-container2{
    background-image:url("images/detaback.jpg");
    background-size:cover;
}
.mainheading1{
    font-family:"Roboto";
    font-size:40px;
    color:white;
    font-weight:bold;
    padding:20px;
}
.container-card{
    background-color:white;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    margin:20px;
}
.text-container{
    padding:16px;
}
.heading2{
    font-family:"Roboto";
    font-size:25px;
    font-weight:bold;
    margin:10px;
}
.paragraph1{
    font-size:20px;
    font-family:"Roboto";
    padding:15px;
}

And this how the detailed view section opens when tou click on the Taj Mahal in favourite places section and back button is added in detailed view section to go to favourite places section.