Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 19 views

    CAD Phase4

    Uploaded by

    Mani Balamurugan
    The document contains code for developing different pages of a travel blog website on IBM Cloud static web apps. It includes HTML code for pages like index, travel stories, photo gallery, map and contact pages. It also includes CSS code for styling the website. The pages contain elements like navigation bar, header, image galleries and contact form. The project aims to develop a personal blog on IBM static web apps platform.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    CAD Phase4

    Uploaded by

    Mani Balamurugan
    19 views11 pages
    The document contains code for developing different pages of a travel blog website on IBM Cloud static web apps. It includes HTML code for pages like index, travel stories, photo gallery, map and contact pages. It also includes CSS code for styling the website. The pages contain elements like navigation bar, header, image galleries and contact form. The project aims to develop a personal blog on IBM static web apps platform.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document contains code for developing different pages of a travel blog website on IBM Cloud static web apps. It includes HTML code for pages like index, travel stories, photo gallery, map and contact pages. It also includes CSS code for styling the website. The pages contain elements like navigation bar, header, image galleries and contact form. The project aims to develop a personal blog on IBM static web apps platform.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    19 views11 pages

    CAD Phase4

    Uploaded by

    Mani Balamurugan
    The document contains code for developing different pages of a travel blog website on IBM Cloud static web apps. It includes HTML code for pages like index, travel stories, photo gallery, map and contact pages. It also includes CSS code for styling the website. The pages contain elements like navigation bar, header, image galleries and contact form. The project aims to develop a personal blog on IBM static web apps platform.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 11

    PROJECT NAME: PERSONAL BLOG ON IBM CLOUD STATIC WEB APP

    PHASE-4: DEVELOPMENT PART 2


    Date 01 November 2023

    Team 3420
    Team Name Proj_227259_Team_1

    Project Name Personal blog on IBM static web apps

    <!DOCTYPE html>
    <html>
    <head>
    <title>Travel Website</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
    rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./style.css">
    </head>
    <body>
    <div class="navbar">
    <div class="logo">
    <h1>Travel</h1>
    </div>
    <div class="menu">
    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="./travel/html.html">TRAVEL STORIES</a></li>
    <li><a href="./photogallery.html">TRAVEL TIPS</a></li>
    <li><a href="./sidebar/index.html">PHOTO GALLERY</a></li>
    <li><a href="./map.html">MAP</a></li>
    <li><a href="./contact.html">CONTACT</a></li>

    <li><a href="#">ABOUT ME</a></li>


    </ul>
    </div>
    <div class="signup">
    <a href="#">Sign Up</a>
    </div>
    </div>
    <div class="body">
    <div class="heading">
    <h1>Travel With Us</h1>
    <br>
    <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod
    tempor incididunt ut labore et dolore magna aliqua. </p>
    <br>
    <br>
    <a href="#">Learn More</a>
    </div>
    <div class="tours">
    <div class="places">
    <h2>Australia</h2>
    <img src="img1.jpg" style="width: 300px; height: 250px;
    border-radius: 12px;">
    <br>
    <br>
    <a href="#">Book Now 15% OFF</a>
    </div>
    <div class="places">
    <h2>New York</h2>
    <img src="img2.jpg" style="width: 300px; height: 250px;
    border-radius: 12px;">
    <br>
    <br>
    <a href="#">Book Now 20% OFF</a>
    </div>
    <div class="places">
    <h2>Thailand</h2>
    <img src="img3.jpg" style="width: 300px; height: 250px;
    border-radius: 12px;">
    <br>
    <br>
    <a href="#">Book Now 25% OFF</a>
    </div>
    </div>
    </div>
    <div class="footer">
    <a href="#">Copyright</a>
    <a href="#">Terms and Conditions</a>
    <a href="#">Privacy Policy</a>
    <a href="#">Cookies</a>
    <a href="#">Complaints</a>
    </div>
    </body>
    </html>
    Contact.html:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulma Contact Form</title>
    <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    </head>

    <body>
    <section class="section">
    <div class="container">
    <h1 class="title">fabform.io bulma form</h1>
    <div class="columns">
    <div class="column is-half">
    <form action="https://fabform.io/f/{insert-your-form-id}"
    method="post">
    <div class="field">
    <label class="label">Name</label>
    <div class="control">
    <input class="input" type="text" placeholder="Your Name">
    </div>
    </div>
    <div class="field">
    <label class="label">Email</label>
    <div class="control">
    <input class="input" type="email" placeholder="Your Email">
    </div>
    </div>
    <div class="field">
    <label class="label">Message</label>
    <div class="control">
    <textarea class="textarea" placeholder="Your
    Message"></textarea>
    </div>
    </div>
    <div class="field">
    <div class="control">
    <button class="button is-primary">Submit</button>
    <p>Powered by <a href="https://fabform.io"
    target="_blank">fabform.io</a></p>
    </div>
    </div>
    </form>
    </div>
    </div>
    </div>
    </section>
    </body>

    </html>
    </body>
    </html>

    Map.html:
    <!-- <script src="https://www.amcharts.com/lib/3/ammap.js"
    type="text/javascript"></script>
    <script src="https://www.amcharts.com/lib/3/maps/js/worldHigh.js"
    type="text/javascript"></script>
    <script src="https://www.amcharts.com/lib/3/themes/dark.js"
    type="text/javascript"></script>
    <div id="mapdiv" style="width:100%; height:100vh;"></div>

    <script type="text/javascript">
    var map = AmCharts.makeChart("mapdiv",{
    type: "map",

    projection: "mercator",
    panEventsEnabled : true,
    backgroundColor : "#535364",
    backgroundAlpha : 1,
    zoomControl: {
    zoomControlEnabled : true
    },
    dataProvider : {
    map : "worldHigh",
    getAreasFromMap : true,
    areas :
    [
    {
    "id": "CA",
    "showAsSelected": true
    },
    {
    "id": "US",
    "showAsSelected": true
    },
    {
    "id": "AE",
    "showAsSelected": true
    },
    {
    "id": "IN",
    "showAsSelected": true
    },
    {
    "id": "MY",
    "showAsSelected": true
    },
    {
    "id": "QA",
    "showAsSelected": true
    },
    {
    "id": "TH",
    "showAsSelected": true
    },
    {
    "id": "SG",
    "showAsSelected": true
    }
    ]
    },
    areasSettings : {
    autoZoom : true,
    color : "#B4B4B7",
    colorSolid : "#84ADE9",
    selectedColor : "#84ADE9",
    outlineColor : "#666666",
    rollOverColor : "#9EC2F7",
    rollOverOutlineColor : "#000000"
    }
    });
    </script>
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <iframe
    src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d15651.33692213242!2
    d77.57339365!3d11.27359315!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1se
    n!2sin!4v1697622093176!5m2!1sen!2sin" width="100%" height="800px"
    style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-
    referrer-when-downgrade"></iframe>
    </body>
    </html>

    Css:
    *{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    list-style: none;
    font-family: 'Poppins', sans-serif;

    }
    .navbar{
    width: 100%;
    height: 80px;
    background-color: #fee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #000;
    }
    .menu ul{
    display: flex;
    align-items: center;
    }
    .menu ul li a{
    text-decoration: none;
    color: #000;
    padding: 5px 12px;
    letter-spacing: 2px;
    font-size: 18px;
    }
    .menu ul li a:hover{
    border-bottom: 4px solid #000;
    transition: 0.4s;
    }
    .signup a{
    text-decoration: none;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    border-radius: 12px;
    padding: 12px 30px;
    border: 2px solid #ff0000;
    }
    .signup a:hover{
    background-color: red;
    transition: 0.6s;
    }
    .body{
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-image: linear-
    gradient(rgba(0,0,0,0.50),rgba(0,0,0,0.50)),url(img1.jpg);
    background-position: center;
    background-size: cover;
    }
    .heading{
    width: 30%;
    text-align: center;
    color: #fff;
    }
    .heading h1{
    font-size: 40px;
    }
    .heading a{
    text-decoration: none;
    color: #000;
    font-size: 25px;
    font-weight: bold;
    border-radius: 45px;
    padding: 14px 50px;
    background-color: #fff;
    }
    .heading a:hover{
    letter-spacing: 3px;
    transition: 0.6s;
    }
    .tours{
    width: 70%;
    display: flex;
    justify-content: space-around;
    }
    .places{
    display: inline;
    text-align: center;
    border-radius: 12px;
    }
    .places h2{
    color: red;
    font-size: 35px;
    letter-spacing: 3px;
    border-radius: 1px;
    padding: 30px 30px;
    background-color: #000;
    }
    .places a{
    text-decoration: none;
    color: red;
    font-weight: bold;
    font-size: 18px;
    border-radius: 12px;
    padding: 12px 30px;
    background-color: #fff;
    }
    .places a:hover{
    background-color: #000;
    letter-spacing: 3px;
    transition: 0.6s;
    }
    .footer{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    }
    .footer a{
    text-decoration: none;
    color: green;
    font-size: 18px;
    font-weight: bold;
    }
    .footer a:hover{
    text-decoration: underline;
    transition: 0.4s;
    }
    PHOTO GALLERY:

    @import
    url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,50
    0;0,600;1,400;1,500;1,600&display=swap");

    body {
    max-width: 800px;
    margin: 0 auto;
    background: #e7dfcf;
    }

    section {
    margin: 80px 0;
    display: grid;
    grid-template-areas: "title title img3 img3"
    "img2 img1 img3 img3";
    grid-gap: 8px;
    }

    h2 {
    grid-area: title;
    color: #111;
    font-size: 120px;
    font-family: "EB Garamond", serif;
    font-weight: normal;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 1;
    line-height: 1;
    mix-blend-mode: hard-light;
    max-width: 240px;

    }
    h2 span {
    font-weight: bold;
    }

    h2::after {
    display: none;
    content: "";
    height: 8px;
    border-radius: 30px;
    width: 70%;
    /* display: block; */
    background: currentColor;
    transition: 0.5s ease;
    }

    h2:hover::after {
    transform: translateX(50%);
    }

    section img:nth-child(4) {
    grid-area: img3;
    aspect-ratio: 3 / 4;
    }
    section img:nth-child(1) {
    grid-area: img1;
    }
    section img:nth-child(2) {
    grid-area: img2;
    }
    section img {
    aspect-ratio: 4 / 3;
    }

    img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
    transition: 0.3s ease;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }

    OUTPUT:

    You might also like