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.
soft.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeCraft</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
.banner {
width: 100%;
height: 100vh ;
background-size: cover;
background-position: center;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
color:rgb(228, 71, 204);
font-size: 40px;
font-weight: 700;
letter-spacing: 3px;
}
span {
color: white;
}
form {
width: 300px;
height: 40px;
display: flex;
background: rgba(255, 255, 255, 0.2);
padding: 1px 1px;
font-size: 15px;
border-radius: 10px;
backdrop-filter: blur(4px) saturate(180%);
}
form input {
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 12px 20px;
font-size: 15px;
color: white;
}
::placeholder {
color: white;
}
form button {
border: 0;
outline: none;
padding: 5px 20px;
color:black;
border-radius: 10px;
background:rgb(13, 126, 232);
cursor: pointer;
}
.navbar li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
.navbar li:hover {
border: 1px;
padding: 10px;
color: white;
background-color:rgb(25, 137, 216);
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text h2 {
color: white;
font-weight: 800;
font-size: 50px;
letter-spacing: 3px;
}
.text p {
color: white;
text-transform: capitalize;
font-size: 15px;
margin-bottom: 30px;
word-spacing: 2px;
letter-spacing: 1px;
}
.login {
margin: 0px 10px;
border: 2px solid rgb(246, 41, 184);
padding: 13px 35px;
letter-spacing: 1px;
color:black;
border-radius: 30px;
background-color: rgb(219, 92, 183);
text-decoration: none;
}
.login:hover {
border: 2px solid rgb(220,101, 224);
color: rgb(230, 84, 243);
background-color: white;
transition: 0.5s;
cursor: pointer;
}
.signup {
margin: 0px 10px;
border: 2px solid rgb(220, 101, 224);
padding: 13px 35px;
letter-spacing: 1px;
color:black;
border-radius: 30px;
background-color: rgb(220, 101, 224);
text-decoration: none;
}
.signup:hover {
border: 2px solid gold;
color: rgb(220, 101, 224);
background-color: white;
transition: 0.5s;
cursor: pointer;
}
footer {
background-color: rgb(250, 89, 242);
margin-top: auto;
}
</style>
</head>
<body background="gr.avif">
<div class="banner">
<br>
<div class="navbar">
<h1 class="logo">A<span>P</span>E<span>X</span></h1>
<ul>
<li><a href="homepage.html"> Home </a></li>
<li><a href="Products.html"> Products </a></li>
<li><a href="person.html"> People </a></li>
<li><a href="contact.html"> Contact </a></li>
</ul>
<form action="" method="get">
<input type="text" placeholder="Enter to Search">
<button type="submit"> Search </button>
</form>
</div>
<div class="content">
<div class="text">
<h2>Apex Software Forge</h2>
<br>
<p> Apex Software Forge: Crafting innovative solutions to power businesses into the future.</p>
<br>
<div>
<a href="#" class="login"> Log In </a>
<a href="#" class="signup"> Sign Up </a>
</div>
</div>
</div>
</div>
<footer>
<center> Developed by RAGUL E </center>
</footer>
</body>
</html>
person.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APEX</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
.banner {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
color:gold;
font-size: 40px;
font-weight: 700;
letter-spacing: 3px;
}
span {
color: white;
}
form {
width: 300px;
height: 40px;
display: flex;
background: rgba(255, 255, 255, 0.2);
padding: 1px 1px;
font-size: 15px;
border-radius: 10px;
backdrop-filter: blur(4px) saturate(180%);
}
form input {
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 12px 20px;
font-size: 15px;
color: white;
}
::placeholder {
color: white;
}
form button {
border: 0;
outline: none;
padding: 5px 20px;
color:black;
border-radius: 10px;
background:gold;
cursor: pointer;
}
.navbar li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
.navbar li:hover {
border: 1px;
padding: 10px;
color: white;
background-color:gold;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
}
.image {
position: relative;
border: 0;
top: 70px;
background: transparent;
}
.image table {
border: 0;
color: white;
position: relative;
left: 150px;
}
.image table img {
height: 140px;
width: 140px;
border: 2px solid white;
padding: 5px;
border-radius: 50%;
}
.image table td {
color: gold;
}
footer {
background-color: gold;
margin-top: auto;
}
</style>
</head>
<body background="gr.avif">
<div class="banner">
<br>
<div class="navbar">
<h1 class="logo">C<span>ode</span>V<span>erse</span></h1>
<ul>
<li><a href="homepage.html"> Home </a></li>
<li><a href="Products.html"> Products </a></li>
<li><a href="person.html"> People </a></li>
<li><a href="contact.html"> Contact </a></li>
<form action="" method="get">
<input type="text" placeholder="Enter to Search">
<button type="submit"> Search </button>
</form>
</div>
<div class="image">
<table cellspacing="20">
<tr align="center">
<td> <img src="my.png"> </td>
<td> <img src="jennie.jpg"> </td>
<td> <img src="shawn.jpg"> </td>
<td> <img src="ariana.jpg"> </td>
<td> <img src="emma.avif"> </td>
<td> <img src="justin.jpg"> </td>
</tr>
<tr align="center">
<th> Ayisha rinsi k </th>
<th> jennie </th>
<th> shawn mendes</th>
<th> Ariana grande </th>
<th> Emma Watson</th>
<th> Justin biber </th>
</tr>
<tr align="center">
<td> CEO </td>
<td> CEO, Co-Founder </td>
<td> CTO, Co-Founder </td>
<td> Director </td>
<td> Asst. Director </td>
<td> Dy. Director </td>
</tr>
</table>
</div>
</div>
<footer>
<center> Developed by RAGUL E </center>
</footer>
</body>
</html>
product.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APEX</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
.banner {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.navbar {
width: 100%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
color:gold;
font-size: 40px;
font-weight: 700;
letter-spacing: 3px;
}
span {
color: white;
}
form {
width: 300px;
height: 40px;
display: flex;
background: rgba(255, 255, 255, 0.2);
padding: 1px 1px;
font-size: 15px;
border-radius: 10px;
backdrop-filter: blur(4px) saturate(180%);
}
form input {
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 12px 20px;
font-size: 15px;
color: white;
}
::placeholder {
color: white;
}
form button {
border: 0;
outline: none;
padding: 5px 20px;
color:black;
border-radius: 10px;
background:gold;
cursor: pointer;
}
.navbar li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
.navbar li:hover {
border: 1px;
padding: 10px;
color: white;
background-color:gold;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
}
.container {
background: transparent;
padding: 10px 5%;
padding-bottom: 100px;
}
.container .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 20px;
}
.container .box-container .box {
color: white;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
border-radius: 10px;
background: transparent;
border: 1px solid white;
padding: 10px 5px;
}
.container .box-container .box img {
height: 50px;
border-radius: 20px;
}
.container .box-container .box h3 {
color: gold;
font-size: large;
padding: 10px 0;
}
.container .box-container .box p {
color: white;
font-size: small;
line-height: 1.5;
}
footer {
background-color: gold;
margin-top: auto;
}
</style>
</head>
<body background="gr.avif">
<div class="banner">
<br>
<div class="navbar">
<h1 class="logo">A<span>P</span>E<span>X</span></h1>
<ul>
<li><a href="homepage.html"> Home </a></li>
<li><a href="Products.html"> Products </a></li>
<li><a href="person.html"> People </a></li>
<li><a href="contact.html"> Contact </a></li>
</ul>
<form action="" method="get">
<input type="text" placeholder="Enter to Search">
<button type="submit"> Search </button>
</form>
</div>
<div class="container">
<div class="box-container">
<div class="box">
<img src="tmp3.jpg" alt="">
<h3>Python</h3>
<p>The versatile and user-friendly programming language empowering developers worldwide.</p>
</div>
<div class="box">
<img src="temp8.png" alt="">
<h3>Css </h3>
<p> Crafting beautiful and responsive web designs with ease.</p>
</div>
<div class="box">
<img src="temp1.jpg" alt="">
<h3>APEX solution</h3>
<p>Elevating businesses with powerful and scalable software solutions</p>
</div>
<div class="box">
<img src="temp4.jpg" alt="">
<h3>html</h3>
<p>Brewing cross-platform magic with the steaming cup of robust and versatile programming.</p>
</div>
<div class="box">
<img src="temp6.jpg" alt="">
<h3>Coding</h3>
<p>Unleashing creativity and problem-solving through lines of code</p>
</div>
<div class="box">
<img src="temp7.jpg" alt="">
<h3>WEB DESIGN </h3>
<p>Transforming ideas into stunning and user-friendly digital experiences</p>
</div>
<div class="box">
<img src="tempt5.avif" alt="">
<h3>Coding</h3>
<p>designed to be displayed in a web browser. It defines the content and structure of web content. </p>
</div>
</div>
</div>
</div>
<footer>
<center> Developed by RAGUL E </center>
</footer>
</body>
</html>
contact.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APEX</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
.banner {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
color:gold;
font-size: 40px;
font-weight: 700;
letter-spacing: 3px;
}
span {
color: white;
}
form {
width: 300px;
height: 40px;
display: flex;
background: rgba(255, 255, 255, 0.2);
padding: 1px 1px;
font-size: 15px;
border-radius: 10px;
backdrop-filter: blur(4px) saturate(180%);
}
form input {
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 12px 20px;
font-size: 15px;
color: white;
}
::placeholder {
color: white;
}
form button {
border: 0;
outline: none;
padding: 5px 20px;
color:black;
border-radius: 10px;
background:gold;
cursor: pointer;
}
.navbar li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar li a {
text-decoration: none;
color: white;
text-transform: uppercase;
}
.navbar li:hover {
border: 1px;
padding: 10px;
color: white;
background-color:gold;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
}
.box {
display: flex;
column-gap: 40px;
background: transparent;
position: relative;
top: 50px;
}
.box-1 {
height: 400px;
width: 400px;
border: 3px solid white;
border-radius: 20px;
background: transparent;
position: relative;
left: 250px;
}
.box-2 {
height: 400px;
width: 400px;
border: 3px solid gold;
border-radius: 20px;
background: transparent;
position: relative;
left: 300px;
}
.box-1 form {
display: flex;
color: white;
background: transparent;
padding: 10px;
font-size: 15px;
position: relative;
top: 15px;
}
.box-1 form input {
background: transparent;
display: flex;
border: 1px solid white;
border-radius: 10px;
padding: 15px 30px;
font-size: 15px;
color: white;
position: relative;
top: 30px;
}
.box-1 form textarea {
background: transparent;
color: white;
padding: 15px 10px;
position: relative;
top: 30px;
left: 30px;
border: 1px solid white;
border-radius: 10px;
}
.box-1 form button {
border: 0;
outline: none;
padding: 10px 20px;
color: white;
border-radius: 30px;
background: gold;
cursor: pointer;
position: relative;
top: 50px;
}
.box-2 h2 {
color: white;
position: relative;
top: 25px;
left: 50px;
font-size: 30px;
}
.box-2 p {
color: white;
position: relative;
top: 50px;
padding: 10px 80px;
}
.box-2 span {
color: gold;
font-size: 20px;
}
footer {
background-color: gold;
margin-top: auto;
}
</style>
</head>
<body background="gr.avif">
<div class="banner">
<br>
<div class="navbar">
<h1 class="logo">A<span>P</span>E<span>X</span></h1>
<ul>
<li><a href="homepage.html"> Home </a></li>
<li><a href="Products.html"> Products </a></li>
<li><a href="person.html"> People </a></li>
<li><a href="contact.html"> Contact </a></li>
</ul>
<form action="" method="get">
<input type="text" placeholder="Enter to Search">
<button type="submit"> Search </button>
</form>
</div>
<div class="box">
<div class="box-1">
<form>
<center>
<h1> Contact Us </h1>
<input type="text" placeholder="Your Name">
<br>
<input type="email" placeholder="Your Email">
<br>
<textarea rows="4" cols="30" placeholder="Your Message"> </textarea>
<br>
<button type="submit"> Submit </button>
</center>
</form>
</div>
<div class="box-2">
<h2> Contact Information </h2>
<p> <span>Address</span> : 123 Main Street Tech Valley, CA 98765 </p>
<p> <span>Email</span> : apex25@gmail.com.com </p>
<p> <span>Phone</span> : 054 975368675 </p>
</div>
</div>
</div>
<footer>
<center> Developed by RAGUL E</center>
</footer>
</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