Scribd
Upload
58 views10 pages

CAD - Phase 4

The document describes the development of a personal blog website on IBM Cloud using static web apps. It includes the code for the HTML homepage, contact page, map page and stylesheet. It also includes a photo gallery section with code for images and styling.

Uploaded by

Vijay Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
58 views10 pages

CAD - Phase 4

The document describes the development of a personal blog website on IBM Cloud using static web apps. It includes the code for the HTML homepage, contact page, map page and stylesheet. It also includes a photo gallery section with code for images and styling.

Uploaded by

Vijay Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

PROJECT NAME: PERSONAL BLOG ON IBM CLOUD STATIC WEB APP

PHASE-4: DEVELOPMENT PART 2

<!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!2d77.57339365!3d11.27359315!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!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,500;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