Scribd
Upload
65 views11 pages

CAD Phase4

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.

Uploaded by

Mani Balamurugan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
65 views11 pages

CAD Phase4

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.

Uploaded by

Mani Balamurugan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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/[email protected]/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