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.
NAME:VESLIN ANISH A
REGISTER NO: 212223240175
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Softweb Home</title>
<style>
*{
margin:0;
padding:0;
}
#nav{
background-color:wheat;
color:#000000;
padding: 15px;
}
li,h1,ul{
display:inline;
}
ul{
margin-left:25%;
}
a{
color:blue;
text-decoration: none;
}
a:hover{
color:rgb(255, 255, 252);
cursor:pointer;
}
input{
width: 60%;
padding: 15px;
}
.searchbar{
padding:50px;
text-align: center;
}
.box {
display: block;
border-style: solid;
border-radius: 20px;
border-color: black;
width: 400px;
min-height: 300px;
font-size: 20px;
background-color: lightgoldenrodyellow;
margin: 0 auto;
text-align: center;
}
.heading1{
color:#000000;
text-align: center;
padding-top: 20px;
}
.heading2{
color:rgb(238, 130, 130);
text-align: justify;
font-size: 20px;
margin: 50px auto 20px;
width:80%
}
.edge{
padding-left: 400px;
}
.box{
text-align: center;
}
p{
color:#000000;
text-align: center;
}
.bottomdiv{
background-color:aqua;
color:black;
text-align: center;
position:relative;
display:block;
margin-top: 105px;
}
table{
margin-left: 40px;
}
</style>
</head>
<body background="backk.png">
<div class="header">
<nav id="nav">
<h1>
PSLS SOLUTIONS
</h1>
<ul>
<li class="li1">
<a href="home.html" target="_blank">Home |</a>
</li>
<li class="li2">
<a href="product.html" target="_blank">Products |</a>
</li>
<li class="li4">
<a href="people.html" target="_blank">People |</a>
</li>
<li class="li5">
<a href="contact.html" target="_blank">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="searchbar">
<input placeholder="search">
</div>
<div><pre class="heading2"><i><b>
" Do You have a problem you can find your solution here."<b></i></pre></div>
<div class="center">
<div class="box">
<h1 class="heading1">LOGIN HERE</h1>
<br>
<br>
<form>
<table cellpadding="10px" cellspacing="15px">
<tr>
<td>
<p> Username:</p>
</td>
<td>
<input type="email" name="name" placeholder="Enter a Email">
</td>
</tr>
<tr>
<td>
<p> Password:</p>
</td>
<td>
<input type="password" name="pwd" placeholder="Enter a Password">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="LOGIN" style="background-color: lightseagreen; color:white;">
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="bottomdiv">
<p> Copyrights @2024 and Developed by VESLIN ANISH A (212223240175))
</body>
<html>
[09-05-2024 15:08] : product.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Softweb Products</title>
<style>
*{
margin:0;
padding:0;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#nav{
background-color:rgb(179, 229, 245);
color:pink;
padding: 15px;
}
li,.heading1,ul{
display:inline;
}
ul{
margin-left:45%
}
li{
color:wheat;
}
li:hover{
color:white;
cursor:pointer;
}
input{
width: 18%;
padding: 15px;
}
.searchbar{
padding:50px;
text-align: center;
}
.box{
border-color:wheat;
border-width:2px;
border-style:solid;
display: inline-block;
width: 414px;
}
.product{
text-align: center;
}
.box{
background-color:rgb(255, 224, 254);
cursor:pointer;
}
a{
color:#062d41;
text-decoration: none;
}
a:hover{
color:white;
cursor:pointer;
}
.heading2{
padding-top: 100px;
padding-bottom: 10px;
text-align: center;
color:black;
}
p{
color:brown;
text-align: center;
}
b{
width: 300px;
height: 200px;
}
h1{
color:black;
text-align: center;
}
.bottomdiv{
background-color:aqua;
color:black;
text-align: center;
position:relative;
display:block;
margin-top: 230px;
}
</style>
</head>
<body background="backk.png">
<div class="header">
<nav id="nav">
<h1 class="heading1">PSLS SOLUTIONS</h1>
<ul>
<li class="li1">
<a href="home.html" target="_blank">Home |</a>
</li>
<li class="li2">
<a href="product.html" target="_blank">Products |</a>
</li>
<li class="li4">
<a href="people.html" target="_blank">People |</a>
</li>
<li class="li5">
<a href="contact.html" target="_blank">Contact</a>
</li>
</ul>
</nav>
</div>
<h1 class="heading2">PRODUCTS</h1>
<br>
<div class="product">
<div class="box">
<b><img src="python.jpeg" ></b>
<h1>PYTHON</h1>
<p>
Learn python from scratch and we also teach you additional frameworks</p>
</div>
<div class="box">
<img src="cprogram.jpeg">
<h1>Introduction to C</h1>
<p>Learn C Language and it's Functions </p>
</div>
<div class="box">
<img src="html.png">
<h1>HTML</h1>
<p>Learn HTML and and how to design web pages in an effective way</p>
</div>
<div class="box">
<img src="java.jpeg">
<h1>JAVA</h1>
<p>Learn Java and Concepts such as abstraction,encapsulation,inheritance and polymorphism</p>
</div>
</div>
<div class="bottomdiv">
<b>Copyrights @2024 and Developed by VESLIN ANISH(212223240175)</b>
</div>
</body>
</html>
[09-05-2024 15:09] : people.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Softweb Members</title>
<style>
*{
margin:0;
padding:0;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#nav{
background-color:rgb(179, 229, 245);
color:#000000;
padding: 15px;
}
li,.heading1,ul{
display:inline;
}
ul{
margin-left:45%
}
li{
color:lightblue;
}
li:hover{
color:#fafafa;
cursor:pointer;
}
input{
width: 60%;
padding: 15px;
}
a{
color:teal;
text-decoration: none;
}
a:hover{
color:#ffffff;
cursor:pointer;
}
.heading2{
padding-top: 100px;
padding-bottom: 10px;
text-align: center;
color:#63b8c0;
}
.bottomdiv{
background-color:aqua;
color:black;
text-align: center;
position:relative;
display:block;
margin-top: 0.7px;
}
img{
border-radius: 50%;
width: 200px;
display: inline;
padding:15px;
}
.person{
margin: 150px;
text-align: center;
}
b,p{
color:black;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<nav id="nav">
<h1 class="heading1">PSLS SOLUTIONS</h1>
<ul>
<li class="li1">
<a href="home.html" target="_blank">Home |</a>
</li>
<li class="li2">
<a href="product.html" target="_blank">Products |</a>
</li>
<li class="li4">
<a href="people.html" target="_blank">People |</a>
</li>
<li class="li5">
<a href="contact.html" target="_blank">Contact</a>
</li>
</ul>
</nav>
</div>
<h1 class="heading2">Members</h1>
<table class="person">
<tr>
<td>
<img src="https://cdn.britannica.com/25/222725-050-170F622A/Indian-cricketer-Mahendra-Singh-Dhoni-2011.jpg" width="100" height="160">
</td>
<td>
<img src="https://cdn.britannica.com/48/252748-050-C514EFDB/Virat-Kohli-India-celebrates-50th-century-Cricket-November-15-2023.jpg"width="100" height="160">
</td>
<td>
<img src="https://static-files.cricket-australia.pulselive.com/headshots/440/1417-camedia.png" width="100" height="160">
</td>
</tr>
<tr>
<td>
<b>MS DHONI</b>
<p>Co-Founder</p>
</td>
<td>
<b>VIRAT KOHLI</b>
<p>Asst.Director</p>
</td>
<td>
<b>CHRIS GAYLE</b>
<p>Marketing Director</p>
</td>
</tr>
</table>
</div>
<div class="bottomdiv">
<p>Copyrights @2024 and Developed BY VESLIN ANISH A(212223240175)</p>
</div>
</body>
</html>
[09-05-2024 15:09] : contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Softweb contact</title>
<style>
*{
margin:0;
padding:0;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#nav{
background-color:rgb(153, 198, 125);
color:#000000;
padding: 15px;
}
li,.heading1,ul{
display:inline;
}
ul{
margin-left:45%
}
li{
color:#074565;
}
li:hover{
color:white;
cursor:pointer;
}
input{
width: 60%;
padding: 15px;
}
.searchbar{
padding:50px;
text-align: center;
}
.box{
border-color:rgb(254, 253, 253);
border-width:2px;
border-style:solid;
display: inline-block;
width: 414px;
}
.product{
text-align: center;
}
.box{
background-color:rgb(66, 16, 66);
cursor:pointer;
}
a{
color:b#007cb9;
text-decoration: none;
}
a:hover{
color:rgb(255, 255, 255);
cursor:pointer;
}
.heading2{
padding-top: 100px;
padding-bottom: 10px;
text-align: center;
color:#c00000;
}
.table1{
color:darkgreen;
font-size: large;
}
.contact{
margin-left:400px;
}
.heading3{
padding-top: 30px;
padding-bottom: 10px;
text-align: center;
color:#5eb3e1;
}
.table2{
color:#000000;
font-size: large;
background-color:rgb(187, 208, 219);
border-radius: 5px;
border-style:dotted;
border-color: rgb(125, 199, 213);
}
.queries{
margin-left:400px;
}
.bottomdiv{
background-color:aqua;
color:#000000;
text-align: center;
position:relative;
display:block;
margin-top: 24px;
}
</style>
</head>
<body background="backk.png">
<div class="header">
<nav id="nav">
<h1 class="heading1">PSLS SOLUTIONS</h1>
<ul>
<li class="li1">
<a href="home.html" target="_blank">Home |</a>
</li>
<li class="li2">
<a href="product.html" target="_blank">Products |</a>
</li>
<li class="li4">
<a href="people.html" target="_blank">People |</a>
</li>
<li class="li5">
<a href="contact.html" target="_blank">Contact</a>
</li>
</ul>
</nav>
</div>
<h1 class="heading2">CONTACT US</h1>
<div class="contact">
<table cellpadding="15px" cellspacing="15px" class="table1">
<tr>
<td>
ADDRESS :
</td>
<td>
CHENNAI
</td>
</tr>
<tr>
<td>
LANDMARK :
</td>
<td>
NEAR SRM RAMAPURAM
</td>
</tr>
<tr>
<td>
EMAIL :
</td>
<td>
[email protected]
</td>
</tr>
<tr>
<td>
PHONE :
</td>
<td>
6380179744
</td>
</tr>
</table>
</div>
<div>
<h2 class="heading3">QUERIES</h2>
<div class="queries">
<table cellpadding="15px" cellspacing="15px" class="table2">
<tr>
<td>
NAME :
</td>
<td>
<input type="name" placeholder="Enter your name">
</td>
</tr>
<tr>
<td>
EMAIL :
</td>
<td>
<input type="email" placeholder="Enter your E-mail">
</td>
</tr>
<tr>
<td>
Your Query :
</td>
<td>
<input type="text" placeholder="Enter your Queries">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" style="background-color: darkcyan; color:#000000;">
</td>
</tr>
</table>
</div>
<div class="bottomdiv">
<p>Copyrights @2024 and Developed by VESLIN ANISH(212223240175)</p>
</div>
</div>
</body>
</html>
The program for designing software company website using HTML and CSS is completed successfully.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent