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.
home1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DD_Home</title>
<style>
*{
margin:0;
padding:0
}
#nav{
background-color:lightblue;
color:blue;
padding: 15px;
}
li,h1,ul{
display:inline;
}
ul{
margin-left:60%;
}
a{
color:blue;
text-decoration: none;
}
a:hover{
color:blue;
cursor:pointer;
}
input{
width: 60%;
padding: 15px;
}
.searchbar{
padding:50px;
text-align: center;
}
.box {
display:inline-block;
border-style:dotted ;
border-radius: 10px;
border-color: blue;
width: 400px;
min-height: 300px;
font-size: 20px;
background-color:lightblue;
}
.heading1{
color:black;
text-align: center;
padding-top: 20px;
}
.heading2{
color:blue;
text-align: justify;
font-size: 30px;
margin-left: 30px;
}
.edge{
padding-left: 900px;
}
.box{
text-align: center;
}
.bottomdiv{
background-color:lightblue;
color: blue;
text-align: center;
position:relative;
display:block;
margin-top: 72px;
}
table{
margin-left: 40px;
}
</style>
</head>
<body background="webcover2.jpg">
<div class="header">
<nav id="nav">
<h1>
ALTAIR RAPIDMINER
</h1>
<ul>
<li class="li1">
<a href="home1.html" target="_blank">Home |</a>
</li>
<li class="li2">
<a href="Products.html" target="_blank">Products |</a>
</li>
<li class="li4">
<a href="person.html" target="_blank">Employees |</a>
</li>
<li class="li5">
<a href="contactus.html" target="_blank">Contact Us</a>
</li>
</ul>
</nav>
</div>
<div class="searchbar">
<input placeholder="search">
</div>
<div><pre class="heading2"><i><b>
"I believe AI is going to change the world
more than anything in the history of
humanity."<b></i></pre></div>
<div class="edge">
<div class="box">
<h1 class="heading1">LOGIN HERE</h1>
<br>
<br>
<form>
<table cellpadding="15px" cellspacing="15px">
<tr>
<td>
Username:
</td>
<td>
<input type="email" name="name" placeholder="Enter a Email">
</td>
</tr>
<tr>
<td>
Password:
</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:white; color:blue;">
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="bottomdiv">
<p>Designed and Developed by Akshaya (23014224)</p>
</div>
</body>
<html>
products.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DD_Products</title>
<style>
*{
margin:0;
padding:0;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#nav{
background-color:lightblue;
color:blue;
padding: 15px;
}
li,.heading1,ul{
display:inline;
}
ul{
margin-left:60%
}
li{
color:blue;
}
li:hover{
color:white;
cursor:pointer;
}
input{
width: 60%;
padding: 15px;
}
.searchbar{
padding:50px;
text-align: center;
}
.box{
border-color:black;
border-width:2px;
border-style:solid;
display: inline-block;
width: 414px;
}
.product{
text-align: center;
}
.box{
background-color:lightblue;
cursor:pointer;
}
a{
color:blue;
text-decoration: none;
}
a:hover{
color:white;
cursor:pointer;
}
.heading2{
padding-top: 100px;
padding-bottom: 10px;
text-align: center;
color:blue;
}
.bottomdiv{
background-color:lightblue;
color:blue;
text-align: center;
position:relative;
display:block;
margin-top: 180px;
}
</style>
</head>
<body background="webcover2.jpg">
<div class="header">
<nav id="nav">
<h1 class="heading1">ALTAIR RAPIDMINER</h1>
<ul>
<li class="li1">
<a href="home1.html" target="_blank">Home |</a>
</li>
<li class="li2">
<a href="Products.html" target="_blank">Products |</a>
</li>
<li class="li4">
<a href="person.html" target="_blank">Employees |</a>
</li>
<li class="li5">
<a href="contactus.html" target="_blank">Contact Us</a>
</li>
</ul>
</nav>
</div>
<h1 class="heading2">PRODUCTS</h1>
<br>
<div class="product">
<div class="box">
<img src="ai.jpg">
<h1>DESIGN AI</h1>
<p>Altair DesignAI combines physics based simulation driven design and machine learning based AI driven design to create high potential designs earlier in development cycles.</p>
</div>
<div class="box">
<img src="sim.jpg">
<h1>FLOW SIMULATOR</h1>
<p>Flow simulator is an integrated flow. heat transfers, and combustion design software that enales mixed fidelity simulation to optimize machine and systems design.</p>
</div>
<div class="box">
<img src="design.jpg">
<h1>e-MOTOR DIRECTOR</h1>
<p>e-Motor Director is an efficient. robust solution that delivers competitive motor desgins whilw considering all project requirements.</p>
</div>
</div>
</div>
<div class="bottomdiv">
<p>Designed and Developed by Akshaya (23014224)</p>
</div>
</body>
</html>
person.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DD_Employees</title>
<style>
*{
margin:0;
padding:0;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#nav{
background-color:lightblue;
color:blue;
padding: 15px;
}
li,.heading1,ul{
display:inline;
}
ul{
margin-left:60%
}
li{
color:black;
}
li:hover{
color:white;
cursor:pointer;
}
input{
width: 60%;
padding: 15px;
}
a{
color:blue;
text-decoration: none;
}
a:hover{
color:white;
cursor:pointer;
}
.heading2{
padding-top: 20px;
padding-bottom: 10px;
text-align: center;
color:blue;
}
.bottomdiv{
background-color:lightblue;
color:white;
text-align: center;
position:relative;
display:block;
margin-top:2px;
}
img{
border-radius: 50%;
width: 200px;
display: inline;
padding:3px;
}
.person{
margin:100px;
text-align: center;
}
b,p{
color: blue;
text-align: center;
}
</style>
</head>
<body background="webcover2.jpg">
<div class="header">
<nav id="nav">
<h1 class="heading1">ALTAIR RAPIDMINER</h1>
<ul>
<li class="li1">
<a href="home1.html" target="_blank">Home |</a>
</li>
<li class="li2">
<a href="Products.html" target="_blank">Products |</a>
</li>
<li class="li4">
<a href="person.html" target="_blank">Employees |</a>
</li>
<li class="li5">
<a href="contactus.html" target="_blank">Contact Us</a>
</li>
</ul>
</nav>
</div>
<h1 class="heading2">EMPLOYEES</h1>
<table class="person">
<tr>
<td>
<img src="mypic1.jpg" class="MyPic">
</td>
<td>
<img src="Aaron Yan.jpeg" class="Aaron yan">
</td>
<td>
<img src="puff.jpg" class="puff kuo">
</td>
<td>
<img src="chen.jpeg" class="chen zheyuan">
</td>
<td>
<img src="he.jpeg" class="He luoluo">
</td>
<td>
<img src="lee.jpeg" class="lee dong wook">
</td>
</tr>
<tr>
<td>
<b>Akshaya</b>
<p>CEO</p>
</td>
<td>
<b>Aaran yan</b>
<p>CEO,Co-Founde</p>
</td>
<td>
<b>Puff kuo</b>
<p>CTO,Co-Founder</p>
</td>
<td>
<b>Chen zheyuan</b>
<p>CEODirector</p>
</td>
<td>
<b>He luoluo</b>
<p>Asst.Director</p>
</td>
<td>
<b>Lee dong wook</b>
<p>Dy.Director</p>
</td>
</tr>
</table>
</div>
<div class="bottomdiv">
<p>Designed and Developed by Akshaya (23014224)</p>
</div>
</body>
</html>
contactus.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DD_Contactus</title>
<style>
*{
margin:0;
padding:0;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#nav{
background-color:lightblue;
color:blue;
padding: 15px;
}
li,.heading1,ul{
display:inline;
}
ul{
margin-left:60%
}
li{
color:black;
}
li:hover{
color:black;
cursor:pointer;
}
input{
width: 60%;
padding: 15px;
}
.searchbar{
padding:50px;
text-align: center;
}
.box{
border-color:blue;
border-width:2px;
border-style:solid;
display: inline-block;
width: 414px;
}
.product{
text-align: center;
}
.box{
background-color:lightblue;
cursor:pointer;
}
a{
color:blue;
text-decoration: none;
}
a:hover{
color:white;
cursor:pointer;
}
.heading2{
padding-top: 100px;
padding-bottom: 10px;
text-align: center;
color: blue;
}
.table1{
color:black;
font-size: large;
}
.contactus{
margin-left:400px;
}
.heading3{
padding-top: 30px;
padding-bottom: 10px;
text-align: center;
color: blue;
}
.table2{
color:white;
font-size: large;
background-color:rgb(95, 92, 92);
border-radius: 5px;
border-style:dotted;
border-color: blue;
}
.queries{
margin-left:600px;
}
.bottomdiv{
background-color:lightblue;
color:blue;
text-align: center;
position:relative;
display:block;
margin-top: 24px;
}
</style>
</head>
<body background="webcover2.jpg">
<div class="header">
<nav id="nav">
<h1 class="heading1">ALTAIR RAPIDMINER</h1>
<ul>
<li class="li1">
<a href="home1.html" target="_blank">Home |</a>
</li>
<li class="li2">
<a href="Products.html" target="_blank">Products |</a>
</li>
<li class="li4">
<a href="person.html" target="_blank">Employees |</a>
</li>
<li class="li5">
<a href="contactus.html" target="_blank">Contact Us</a>
</li>
</ul>
</nav>
</div>
<h1 class="heading2">CONTACT US</h1>
<div class="contactus">
<table cellpadding="15px" cellspacing="15px" class="table1">
<tr>
<td>
ADDRESS :
</td>
<td>
Asian Garderns,Door No:309,2nd-Floor,253A/108, M.T.H Road, Villivakkam,Chennai-600049.
</td>
</tr>
<tr>
<td>
LANDMARK :
</td>
<td>
near padiflyover, next to sidco bus stop.
</td>
</tr>
<tr>
<td>
Email :
</td>
<td>
[email protected]
</td>
</tr>
<tr>
<td>
PHONE :
</td>
<td>
9362082590
</td>
</tr>
</table>
</div>
<div>
<h3 class="heading3">QUERIES</h3>
<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>
MESSAGE :
</td>
<td>
<input type="text" placeholder="Enter your text">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" style="background-color: lightblue; color: blue;">
</td>
</tr>
</table>
</div>
<div class="bottomdiv">
<p>Designed and Developed by Akshaya (23014224)</p>
</div>
</div>
</body>
</html>
.png)
.png)
.png)
.png)
The program for designing software company website using HTML and CSS is completed successfully.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent