<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TECHY TECH</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.banner {
width: 100%;
height: 95vh;
background-image: linear-gradient(
rgba(0, 214, 211, 0.75),
rgba(0, 0, 0, 0.971)
),
url(BG.jpeg);
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: #0bfbdf;
font-size: 40px;
font-weight: 700;
letter-spacing: 3px;
}
span {
color: rgb(24, 150, 196);
}
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: rgb(11, 109, 154);
}
::placeholder {
color: white;
}
form button {
border: 0;
outline: none;
padding: 5px 20px;
color: white;
border-radius: 10px;
background: #00d5ff;
cursor: pointer;
}
#search.hover {
border: 1px;
padding: 10px;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
background: #0ef;
color: #081b29;
box-shadow: 0 0 20px #0ef;
}
.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;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
background: red;
color: #081b29;
box-shadow: 0 0 20px red;
}
.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 red;
padding: 13px 35px;
letter-spacing: 1px;
color: white;
border-radius: 30px;
background-color: red;
text-decoration: none;
}
.login:hover {
border: 2px solid red;
color: red;
background-color: white;
transition: 0.5s;
cursor: pointer;
}
.signup {
margin: 0px 10px;
border: 2px solid rgb(235, 231, 20);
padding: 13px 35px;
letter-spacing: 1px;
color: white;
border-radius: 30px;
background-color: rgb(183, 212, 14);
text-decoration: none;
}
.signup:hover {
border: 2px solid rgb(240, 222, 33);
color: green;
background-color: white;
transition: 0.5s;
cursor: pointer;
}
footer {
border: 1px;
padding: 10px;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
background: red;
color: #081b29;
box-shadow: 0 0 20px red;
}
</style>
</head>
<body>
<div class="banner">
<br />
<div class="navbar">
<h1 class="logo">TE<span>CHY</span>T<span>ECH</span></h1>
<ul>
<li><a href="index.html"> Home </a></li>
<li><a href="products.html"> Products </a></li>
<li><a href="council.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 id="search" type="submit">Search</button>
</form>
</div>
<div class="content">
<div class="text">
<h2>
" progress through a Great Achievement And a Good Engineering. "
</h2>
<br />
<br />
<div>
<a href="#" class="login"> Log In </a>
<a href="#" class="signup"> Sign Up </a>
</div>
</div>
</div>
</div>
<footer>
<center>DESIGNED AND DEVELOPED BY Vijay R(212221230121)</center>
</footer>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Page</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.banner {
width: 100%;
height: 95vh;
background-image: linear-gradient(
#110101e3,
rgb(15, 230, 223)
),
url(BG.jpeg);
background-size: cover;
background-position: center;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.bg-product {
border: 1px;
padding: 10px;
color: white;
background-color: rgb(55, 250, 246);
border-radius: 30px;
}
.logo {
color: #32eff9;
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: white;
border-radius: 10px;
background: rgb(41, 221, 253);
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;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
background: red;
color: #081b29;
box-shadow: 0 0 20px red;
}
.container {
background: transparent;
padding: 10px 5%;
padding-bottom: 100px;
}
.container .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 100px;
}
.container .box-container .box {
color: white;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
background: transparent;
border: 1px solid white;
padding: 30px 20px;
}
.container .box-container .box img {
height: 70px;
border-radius: 20px;
}
.container .box-container .box h3 {
color: red;
font-size: large;
padding: 20px 0;
}
.container .box-container .box p {
color: white;
font-size: small;
line-height: 1.5;
}
footer {
border: 1px;
padding: 10px;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
background: red;
color: #081b29;
box-shadow: 0 0 20px red;
}
</style>
</head>
<body>
<div class="banner">
<br />
<div class="navbar">
<h1 class="logo">TE<span>CHY</span>T<span>ECH</span></h1>
<ul>
<li><a href="home.html"> Home </a></li>
<li><a href="products.html" class="bg-product"> Products </a></li>
<li><a href="council.html"> People </a></li>
<li><a href="contact_us.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">
<h3>C++</h3>
<p>
Efficiency Redefined: Harnessing the Power of C++ for Next-Level Development
</p>
</div>
<div class="box">
<h3>C</h3>
<p>
Crafting Performance: Where Precision Meets C Programming.
</p>
</div>
<div class="box">
<h3>JAVASCRIPT</h3>
<p>
Scripting Success: Unleashing the Power of JavaScript.
</p>
</div>
<div class="box">
<h3>PHP</h3>
<p>
PHP is a server side scripting language that is embedded in HTML.
</p>
</div>
<div class="box">
<h3>PYTHON</h3>
<p>
Unlocking Innovation: Python Paving the Way to Progress.
</p>
</div>
<div class="box">
<h3>SQL</h3>
<p>
SQL is a standard language for accessing and manipulating
databases.
</p>
</div>
<div class="box">
<h3>SHELL</h3>
<p>
Shell can be accessed by users using a command line interface.
</p>
</div>
<div class="box">
<h3>RUBY</h3>
<p>
Ruby: Where Simplicity Meets Power in Programming
</p>
</div>
<div class="box">
<h3>TYPESCRIPT</h3>
<p>
Empower Your Code: Embrace the Future with TypeScript
</p>
</div>
<div class="box">
<h3>F#</h3>
<p>
F# is an Open-source programming language with a lot of features.
</p>
</div>
</div>
</div>
</div>
<footer>
<center>Designed and DEVELOPED BY Vijay R(212221230121)</center>
</footer>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>people page</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.banner {
width: 100%;
height: 95vh;
background-image: linear-gradient(
rgba(7, 224, 244, 0.75),
rgba(0, 0, 0, 0.75)
),
url(BG.jpeg);
background-size: cover;
background-position: center;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.bg-people {
border: 1px;
padding: 10px;
color: white;
background-color: red;
border-radius: 30px;
}
.logo {
color: #fb0b0b;
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: white;
border-radius: 10px;
background:red;
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;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
background: red;
color: #081b29;
box-shadow: 0 0 20px red;
}
.image {
position: relative;
border: 0;
top: 150px;
background: transparent;
}
.image table {
border: 0;
color: white;
position: relative;
left: 200px;
border: 10PX;
padding-left: 10px;
}
.image table img {
height: 140px;
width: 140px;
border: 2px solid white;
padding: 5px;
border-radius: 50%;
}
.image table td {
color:red;
}
footer {
border: 1px;
padding: 10px;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
background: red;
color: #081b29;
box-shadow: 0 0 20px red;
}
.space{
padding-left: 30px;
}
</style>
</head>
<body>
<div class="banner">
<br />
<div class="navbar">
<h1 class="logo">TE<span>CHY</span>T<span>ECH</span></h1>
<ul>
<li><a href="home.html"> Home </a></li>
<li><a href="products.html"> Products </a></li>
<li><a href="council.html" class="bg-people"> People </a></li>
<li><a href="contact_us.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="image">
<table cellspacing="65" >
<tr align="center">
<td><img src="1.jpg" /></td>
<td><img src="mark.jpg"></td>
<td><img src="steve.jpg" /></td>c:\Users\VIJAY\Pictures\The me\1.jpg
<td><img src="sundar.jpg" /></td>
<td><img src="tata.jpg" /></td>
<td><img src="elon.jpg" /></td>
</tr>
<tr align="center" class="space">
<th>VIJAY</th>
<th>Mark zuckerberg</th>
<th>STEVE JOBS</th>
<th>SUNDAR</th>
<th>Ratan Tata</th>
<th>ELON MUSK</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>DESIGNED AND DEVELOPED BY Vijay R(212221230121))</center>
</footer>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us Page</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.banner {
width: 100%;
height: 95vh;
background-image: linear-gradient(
rgba(12, 227, 231, 0.75),
rgba(0, 0, 0, 0.75)
),
url(BG.jpeg);
background-size: cover;
background-position: center;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.bg-contact {
border: 1px;
padding: 10px;
color: white;
background-color:RED;
border-radius: 30px;
}
.logo {
color: red;
font-size: 40px;
font-weight: 700;
letter-spacing: 3px;
}
span {
color: white;
}
.navbar 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%);
}
.navbar form input {
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 12px 20px;
font-size: 15px;
color: white;
}
::placeholder {
color: white;
}
.navbar form button {
border: 0;
outline: none;
padding: 5px 20px;
color: white;
border-radius: 10px;
background: red;
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;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
background: red;
color: #081b29;
box-shadow: 0 0 20px red;
}
.box {
display: flex;
column-gap: 40px;
background: transparent;
position: relative;
top: 50px;
width: 220px;
}
.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 #7300ff;
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: 20px;
border: 1px solid white;
border-radius: 10px;
width: 300px;
}
.box-1 form button {
border: 0;
outline: none;
padding: 10px 20px;
color: white;
border-radius: 30px;
background: red;
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: red;
font-size: 20px;
}
footer {
border: 1px;
padding: 10px;
transition: 0.5s;
cursor: pointer;
border-radius: 30px;
background: red;
color: #081b29;
box-shadow: 0 0 20px red;
}
</style>
</head>
<body>
<div class="banner">
<br />
<div class="navbar">
<h1 class="logo">TE<span>CHY</span>T<span>ECH</span></h1>
<ul>
<li><a href="home.html"> Home </a></li>
<li><a href="products.html"> Products </a></li>
<li><a href="council.html"> People </a></li>
<li><a href="contact_us.html" class="bg-contact"> 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 />
<br />
<button type="submit">Submit</button>
</center>
</form>
</div>
<div class="box-2">
<h2>Contact Information</h2>
<p>
<span>Address</span> :3RD Floor,VRV
Building No.11,TECH CITY, Anna nagar,Chennai 600 006
</p>
<p><span>Email</span> : [email protected]</p>
<p><span>Phone</span> : 1223334444</p>
</div>
</div>
</div>
<footer>
<center>DESIGNED AND DEVELOPED BY Vijay R(212221230121)</center>
</footer>
</body>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent