To design a static website for a software product company 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
<!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/styles.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>Crazykavy fancys</h1>
</div><br>
<div class="content">
<div class="text">
<marquee><b>Feel BEAUTY through our Store</b></marquee>
<p style="color:purple; font-family:'Tahoma'; font-size:20px;"> This is the Official Website of our Fancy Store</p>
</div>
<p>Buy Fancy items and Cosmetics online for Women from <span style="background-color:lime">Crazykavy fancys</span>
for Rs.100 | Buy cosmetics 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 kavya.k</footer></div>
</div>
</div>
</body>
</html>
## product:
<!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/styles.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/img/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/img/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/img/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/img/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/img/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/img/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>Makeupkit<br> Price: 1999.00</b><br><br><br><br></p></div>
<div class="ph2"></div>
<div class="l2"><p align="center"><b>Lipstick<br> Price: 1899.00</b><br><br><br><br></p></div>
<div class="ph3"></div>
<div class="l3"><p align="center"><b>Foundation<br> Price: 1999.00</b><br<br><br><br></p></div>
<div class="ph4"></div>
<div class="l4"><p align="center"><b>Eye liner<br> Price: 6999.00</b><br><br><br><br></p></div>
<div class="ph5"></div>
<div class="l5"><p align="center"><b>Blush palette<br> Price: 3999.00</b><br><br><br><br></p></div>
<div class="ph6"></div>
<div class="l6"><p align="center"><b>Compact powder<br> Price: 5999.00</b><br><br><br><br></p></div>
</div>
<div class="bot"><p>To Order Online: Call 7010839006</p></div>
<div class="footer">
<footer style="color:white">
Copyright ©2023 Developed by kavya.k</footer></div>
</div>
</div>
</body>
</html>
## people:
<!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/styles.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/img/p1.jpg);
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/img/p2.jpg);
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/img/p3.jpg);
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/img/p4.jpg);
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/img/p5.jpg);
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/img/p6.jpg);
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>Kavya</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>Parsh</h2></b></p></div>
<div class="manph2"></div>
<div class="man2"><p><b><h2>Rma lekshmi</h2></b></p></div>
<br>
<div class="text"><p><b><u>Manager</u></b></p></div><br>
<div class="amph1"></div>
<div class="am1"><p align="center"><b><h2>Gopika</h2></b></p></div>
<div class="amph2"></div>
<div class="am2"><p align="center"><b><h2>yuva</h2></b></p></div>
<div class="amph3"></div>
<div class="am3"><p align="center"><b><h2>krishna</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 kavya.k</footer></div>
</div>
</div>
</body>
</html>
## contact:
<!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/styles.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>
Guduvancherry, Chennai, TamilNadu, India.
</p>
<ul>
<li><b>Landline:</b> 12345678</li>
<li><b>Mobile</b>: 9987390220</li>
<li><b>Instagram</b>: kavya_l189</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 kavya.k</footer></div>
</div>
</div>
</body>
</html>
Thus a website is designed for the software product company and the HTML,CSS code are validated.