To develop a static company website to display the softwares and services provided by the company.
Requirement collection.
Creating the layout using HTML and CSS.
Updating the sample content.
Choose the appropriate style and color scheme.
Validate the layout in various browsers.
Validate the HTML code.
Publish the website in the given URL.
home.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Home Page
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/style.css">
<style>
.text{
color:blueviolet;
font-family:'Lucida Sans';
font-size: 30px;
text-align:center;
}
img{
height: 150px;
width: 150px;
align-items:center;
}
</style>
</head>
<body>
<div class="home">
<div class="header">
<header>
<div class=logo></div>
<div class=h>
<a href="home.html" title="Home" style="color: darkred; text-decoration: none;"><b>Home</b></a></div>
<div class="prod">
<a href="products.html" title="Products" style="color: darkred; text-decoration: none;"><b>Products</b></a>
</div>
<div class="people">
<a href="people.html" title="People" style="color:darkred; text-decoration: none;"><b>People</b></a>
</div>
<div class="contact">
<a href="contact.html" title="Contact Us" style="color:darkred; text-decoration: none;"><b>Contact Us</b></a>
</div>
</header>
<div class="title">
<h1>MARVEL UNIVERSE</h1>
</div><br>
<div class="content">
<div class="text">
<marquee><b>Feel power of our Store</b></marquee>
<p style="color:purple; font-family:'Tahoma'; font-size:20px;"> This is the Official Website of our marvel store</p>
</div>
<p>Buy keychains and T-shirts online for men from <span style="background-color:lime">MARVEL UNIVERSE</span>
for Rs.200 | Buy T-shirts in ONE SIZE online | 7 Days Returns | Trend setting models | And much more</p>
<br>
<center>
<img src="/static/images/ben1.png">
<img src="/static/images/ben2.png">
<img src="/static/images/ben3.png">
<img src="/static/images/ben4.png">
<img src="/static/images/ben5.png">
<img src="/static/images/ben6.png">
<img src="/static/images/ben7.png">
</center>
</div>
<div class="footer">
<footer style="color:white">
Copyright ©2023 Developed by Ashwath M</footer></div>
</div>
</div>
</body>
</html>
products.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Products
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/style.css">
<style>
.home{
height: 1555px;
width: 85%;
border: 12px solid red;
padding-left:10px;
padding-right:10px;
margin-left: auto;
margin-right:auto;
background-color:cyan;
}
.text{
color:blueviolet;
font-family:'Lucida Sans';
font-size: 30px;
text-align:center;
}
.content{
border:3px solid red;
background-color: white;
width:98%;
height:1190px;
padding:10px;
margin-left:auto;
margin-right:auto;
}
.ph1{
background-image: url(/static/images/item1.png);
background-size: 250px;
background-position-x: center;
background-repeat: no-repeat;
border:1px solid black;
height:200px;
width:30%;
position:relative;
left: 50px;
}
.l1{
color: gold;
position:relative;
right:380px;
}
.ph2{
background-image: url(/static/images/item2.png);
background-size: 250px;
background-position-x: center;
background-repeat: no-repeat;
border:1px solid black;
height:200px;
width:30%;
position:relative;
left: 50px;
}
.l2{
color: sandybrown;
position:relative;
right:380px;
}
.ph3{
background-image: url(/static/images/item3.png);
background-size: 250px;
background-position-x: center;
background-repeat: no-repeat;
border:1px solid black;
height:210px;
width:30%;
position:relative;
left: 50px;
}
.l3{
color: burlywood;
position:relative;
right:380px;
}
.ph4{
background-image: url(/static/images/item4.png);
background-position-x: center;
border:1px solid black;
height:200px;
width:30%;
position:relative;
left: 700px;
bottom:930px;
background-size: 310px;
background-repeat: no-repeat;
}
.l4{
color: burlywood;
position:relative;
left:270px;
bottom: 930px;
}
.ph5{
background-image: url(/static/images/item5.png);
background-position-x: center;
border:1px solid black;
height:200px;
width:30%;
position:relative;
left: 700px;
bottom:930px;
background-size: 280px;
background-repeat: no-repeat;
}
.l5{
color: cadetblue;
position:relative;
left:270px;
bottom: 930px;
}
.ph6{
background-image: url(/static/images/item6.png);
background-position-x: center;
border:1px solid black;
height:200px;
width:30%;
position:relative;
left: 700px;
bottom:930px;
background-size: 280px;
background-repeat: no-repeat;
}
.l6{
color: crimson ;
position:relative;
left:270px;
bottom: 930px;
}
.bot{
text-align:center;
font-size:larger;
color:magenta;
}
</style>
</head>
<body>
<div class="home">
<div class="header">
<header>
<div class=logo></div>
<div class=h>
<a href="home.html" title="Home" style="color: darkred; text-decoration: none;"><b>Home</a></div>
<div class="prod">
<a href="products.html" title="Products" style="color: darkred; text-decoration: none;"><b>Products</b></a>
</div>
<div class="people">
<a href="people.html" title="People" style="color:darkred; text-decoration: none;"><b>People</b></a>
</div>
<div class="contact">
<a href="contact.html" title="Contact Us" style="color:darkred; text-decoration: none;"><b>Contact Us</b></a>
</div>
</header>
<div class="title">
<h1>Products</h1>
</div><br>
<div class="content">
<div class="text">
<p>These are the products that are available now</p>
</div>
<div class="ph1"></div>
<div class="l1"><p align="center"><b>ironman keychain<br> Price: 299.00</b><br><br><br><br></p></div>
<div class="ph2"></div>
<div class="l2"><p align="center"><b>blackwidow T-shirt<br> Price: 599.00</b><br><br><br><br></p></div>
<div class="ph3"></div>
<div class="l3"><p align="center"><b>groot T-shirt<br> Price: 499.00</b><br<br><br><br></p></div>
<div class="ph4"></div>
<div class="l4"><p align="center"><b>captainamerica keychain<br> Price: 290.00</b><br><br><br><br></p></div>
<div class="ph5"></div>
<div class="l5"><p align="center"><b>civilwar T-shirt<br> Price: 399.00</b><br><br><br><br></p></div>
<div class="ph6"></div>
<div class="l6"><p align="center"><b>thorhammer keychain<br> Price: 299.00</b><br><br><br><br></p></div>
</div>
<div class="bot"><p>To Order Online: Call 98000 98000 </p></div>
<div class="footer">
<footer style="color:white">
Copyright ©2023 Developed by Ashwath M</footer></div>
</div>
</div>
</body>
</html>
people.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
People
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/style.css">
<style>
.home{
height: 3000px;
width: 85%;
border: 12px solid red;
padding-left:10px;
padding-right:10px;
margin-left: auto;
margin-right:auto;
background-color:cyan;
}
.text{
color:blueviolet;
font-family:'Lucida Sans';
font-size: 30px;
text-align:center;
}
.content{
border:2px solid green;
background-color:lime;
width:98%;
height:2690px;
padding:10px;
margin-left:auto;
margin-right:auto;
}
.ceoph{
background-image: url(/static/images/P1.png);
background-size: 250px;
background-position-x: center;
background-repeat: no-repeat;
border:3px solid gold;
height:300px;
width:20%;
position:relative;
left: 0px;
margin-left:auto;
margin-right: auto;
}
.ceo{
color: red;
position:relative;
text-align:center;
}
.manph1{
background-image: url(/static/images/P2.png);
background-size: 250px;
background-position-x: center;
background-repeat: no-repeat;
border:1px solid black;
height:300px;
width:20%;
position:relative;
margin-left:auto;
margin-right:auto;
}
.man1{
color: red;
position:relative;
text-align:center;
}
.manph2{
background-image: url(/static/images/P3.png);
background-size: 250px;
background-position-x: center;
background-repeat: no-repeat;
border:1px solid black;
height:300px;
width:20%;
position:relative;
margin-left:auto;
margin-right:auto;
}
.man2{
color: red;
position:relative;
text-align:center;
}
.amph1{
background-image: url(/static/images/P4.png);
background-size: 250px;
background-position-x: center;
background-repeat: no-repeat;
border:1px solid black;
height:300px;
width:20%;
position:relative;
margin-left:auto;
margin-right:auto;
}
.am1{
color: red;
position:relative;
text-align:center;
}
.amph2{
background-image: url(/static/images/P5.png);
background-size: 250px;
background-position-x: center;
background-repeat: no-repeat;
border:1px solid black;
height:220px;
width:20%;
position:relative;
margin-left:auto;
margin-right:auto;
}
.am2{
color: red;
position:relative;
text-align:center;
}
.amph3{
background-image: url(/static/images/P6.png);
background-size: 250px;
background-position-x: center;
background-repeat: no-repeat;
border:1px solid black;
height:250px;
width:20%;
position:relative;
margin-left:auto;
margin-right:auto;
}
.am3{
color: red;
position:relative;
text-align:center;
}
</style>
</head>
<body>
<div class="home">
<div class="header">
<header>
<div class=logo></div>
<div class=h>
<a href="home.html" title="Home" style="color: darkred; text-decoration: none;"><b>Home</b></a></div>
<div class="prod">
<a href="products.html" title="Products" style="color: darkred; text-decoration: none;"><b>Products</b></a>
</div>
<div class="people">
<a href="people.html" title="People" style="color:darkred; text-decoration: none;"><b>People</b></a>
</div>
<div class="contact">
<a href="contact.html" title="Contact Us" style="color:darkred; text-decoration: none;"><b>Contact Us</b></a>
</div>
</header>
<div class="title">
<h1>People</h1>
</div><br>
<div class="content">
<div class="text">
<p>Board Members</p>
<h4><u>Chairman</u></h4>
</div>
<div class="ceoph"></div>
<div class="ceo"><p align="center"><b><h2>Robert dowery junior</h2></b></div>
<br>
<div class="text">
<p><b><u>Head executives</u></b></p><br>
</div>
<div class="manph1"></div>
<div class="man1"><p align="center"><b><h2>Chris evans</h2></b></p></div>
<div class="manph2"></div>
<div class="man2"><p><b><h2>chris hemsworth</h2></b></p></div>
<br>
<div class="text"><p><b><u>Managers</u></b></p></div><br>
<div class="amph1"></div>
<div class="am1"><p align="center"><b><h2>Scarlet johaansaan</h2></b></p></div>
<div class="amph2"></div>
<div class="am2"><p align="center"><b><h2>Elisabath olsen</h2></b></p></div>
<div class="amph3"></div>
<div class="am3"><p align="center"><b><h2>Bire larson</h2></b></p></div><br>
<div class="text">Thank you so much for your kind support!<br>Hope our products had made you more B-E-A-UTIFUL!</div>
</div>
<div class="footer">
<footer style="color:white">
Copyright ©2023 Developed by Ashwath M</footer></div>
</div>
</div>
</body>
</html>
contact.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Contact Us
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/style.css">
<style>
.text{
color:blueviolet;
font-family:'Lucida Sans';
font-size: 30px;
text-align:center;
}
</style>
</head>
<body>
<div class="home">
<div class="header">
<header>
<div class=logo></div>
<div class=h>
<a href="home.html" title="Home" style="color: darkred; text-decoration: none;"><b>Home</b></a></div>
<div class="prod">
<a href="products.html" title="Products" style="color: darkred; text-decoration: none;"><b>Products</b></a>
</div>
<div class="people">
<a href="people.html" title="People" style="color:darkred; text-decoration: none;"><b>People</b></a>
</div>
<div class="contact">
<a href="contact.html" title="Contact Us" style="color:darkred; text-decoration: none;"><b>Contact Us</b></a>
</div>
</header>
<div class="title">
<h1>Contact Us</h1>
</div><br>
<div class="content">
<div class="text">
<p><b>Here are the details about us
<h5>Do contact us for any need</h5></b></p>
</div>
<b><h2>Contact Information:</h2></b>
<p><b>  Address:</b>
nagercoil, kanyakumari, TamilNadu, India.
</p>
<ul>
<li><b>Landline:</b> 56894258</li>
<li><b>Mobile</b>: 98000 98000</li>
<li><b>Facebook</b>: fb/MARVELUNIVERSE</li>
<li><b>Email Id:</b>:[email protected]</li>
</ul>
<div style="text-align: center;color:violet;font-size:20px;"><b>Use our services and Beautify Yourself!</b></div>
</div>
<div class="footer">
<footer style="color:white">
Copyright ©2023 Developed by Ashwath M</footer></div>
</div>
</div>
</body>
</html>
The program for designing software company website using HTML and CSS is completed successfully.