Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sona College of Technology</title>
<script src="https://kit.fontawesome.com/6b9ade393d.js" crossorigin="anonymous"></script>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
hr {
height: 10px;
width: 100vw;
background-color: yellow;
}
.header1 {
height: 100px;
width: 100vw;
display: flex;
justify-content: start;
gap: 50px;
align-items: center;
background-color: rgb(255, 255, 255);
}
.header1 button {
height: 50%;
font-size: 20px;
color: #355e9a;
border: none;
background-color: rgb(255, 255, 255);
font-weight: 900;
cursor: pointer;
}
.header2 {
height: 60px;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
background-color: rgb(235, 233, 233);
padding-left: 12%;
}
.header2 button {
font-size: 20px;
border: none;
font-weight: 900;
background-color: rgb(235, 233, 233);
cursor: pointer;
color: grey;
}
.img {
height: 800px;
width: 100vw;
}
.content {
height: 30px;
width: 100vw;
display: flex;
justify-content: start;
gap: 45%;
background-color: #355e9a;
}
.one {
display: flex;
}
.two {
display: flex;
}
.one h3 {
height: 40%;
color: white;
}
.two h3 {
height: 40%;
color: white;
}
.admission {
height: 5px;
width: 100vw;
display: flex;
justify-content: space-between;
}
.ad {
margin-top: 70px;
height: 200px;
width: 95vw;
display: flex;
margin-left: 50px;
gap: 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.c {
background-color: white;
color: grey;
height: 90%;
width: 30%;
display: flex;
flex-direction: column;
justify-content: start;
font-size: 25px;
padding-top: 20px;
padding-left: 20px;
}
main {
height: 600px;
width: 90vw;
margin-top: 60px;
margin-left: 100px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.anonce {
border: 1px solid rgb(187, 184, 184);
}
header {
height: 15%;
width: 100%;
font-size: 50px;
color: white;
background-color: #355e9a;
padding-left: 10px;
}
.anonce p {
font-size: 25px;
gap: 20px;
margin-top: 10px;
padding-left: 5px;
}
.h1 {
border: 0.5px solid #355e9a;
height: 15%;
width: 100%;
display: flex;
}
.c2 {
border: 1px solid gainsboro;
height: 100%;
width: 20%;
text-align: center;
background-color: #355e9a;
color: rgb(255, 217, 0);
}
.content3 {
margin-top: 15px;
height: 60%;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.lab {
border: 1px solid gainsboro;
}
.lab img {
height: 45%;
width: 100%;
}
.lab p {
font-size: 17px;
color: blue;
font-weight: bolder;
}
.sonabook {
background-color: gainsboro;
border: 2px solid gainsboro;
height: 800px;
width: 95vw;
margin-top: 100px;
margin-left: 50px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.left {
border: 1px solid gainsboro;
display: flex;
justify-content: center;
align-items: center;
}
.right {
border: 1px solid gainsboro;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.right h1 {
color: blue;
}
.right p {
margin: 10px;
font-size: 25px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
br {
margin: 10px;
}
.buy {
width: 100%;
display: flex;
justify-content: start;
}
.buy button {
margin: 5px;
font-size: 20px;
padding: 5px;
background-color: rgb(110, 144, 255);
border-radius: 10px;
color: rgb(0, 0, 0);
font-weight: bolder;
cursor: pointer;
}
.activities {
border: 1px solid gainsboro;
height: 1000px;
width: 100vw;
background-color: #355e9a;
}
.pic {
width: 90vw;
height: 70%;
margin-top: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px;
margin-left: 100px;
}
.sona5 {
background-color: white;
}
.sona5 img {
height: 40%;
width: 100%;
}
.sona5 h1 {
color: #00d4fa;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 30px;
padding-left: 10px;
}
.sona5 p{
color: rgb(88, 87, 87);
font-size: 25px;padding:10px;
}
.collab{
height: 500px;
width: 100vw;
}
.collab img{
height: 100%;
width: 100%;
}
footer{
height: 100px;
width: 100vw;
background-color: #355e9a;
margin-top: 100px;
display: flex;
align-items: center;
font-size: 25px;
gap:730px;
color: rgb(168, 167, 167);
}
</style>
</head>
<body>
<hr>
<div class="header1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSv6BD0IwJau9q43NwvHBFt8mTdznYsigPQJg&s">
<button> NAAC-Accredited 'A++'-Grade</button>
<button>2(f) & 12(B) status (UGC) </button>
<button>ISO 9001:2015 Certified </button>
<button> NBA Accredited Programmes</button>
<button> FIST Funded (DST) SIRO(DSIR) </button>
</div>
<div class="header2">
<button>Home</button>
<button>About us</button>
<button>Department</button>
<button>Academics</button>
<button>Admission</button>
<button>COE</button>
<button>Placement</button>
<button>Alumini</button>
<button>Library</button>
<button>Sports</button>
<button>Research</button>
<button>Facilities</button>
</div>
<div class="img">
<img height="100%" width="100%" src="sona.png">
</div>
<div class="content">
<div class="one">
<i style="border: 1px solid red;font-size: 25px;background-color: red;" class="fa-brands fa-napster"></i>
<h3>Online Fee Payment for 2026-27 : B.E(IV, III & II year), MBA, MCA and ME/MTECH || Exam Fee</h4>
</div>
<div class="two">
<i style="border: 1px solid red;font-size: 25px;background-color: red;" class="fa-brands fa-napster"></i>
<h3>360° Virtual Tour</h4>
</div>
</div>
<div class="admission">
<h1 style="color: red;">Admission 2026</h1>
<h1 style="color: rgb(219, 219, 61);">Counselling code - 2168</h1>
</div>
<div class="ad">
<div class="c">
<h3>B.E / B.Tech / M.E / M.Tech</h3>
<h5>Online Application</h5>
<h5>Online Enquiry</h5>
<h5>+91 6379287643</h5>
</div>
<div class="c">
<h3>MBA</h3>
<h5>Online Application</h5>
<h5>Online Enquiry</h5>
<h5>+91 6379287643</h5>
</div>
<div class="c">
<h3>MCA</h3>
<h5>Online Application</h5>
<h5>Online Enquiry</h5>
<h5>+91 6379287643</h5>
</div>
<div class="c">
<h3>Foreign Admission-Contact</h3>
<h5>+91 7889567869(Nepal)</h5>
<h5>+91 6379287643</h5>
</div>
</div>
<main>
<div class="anonce">
<header>Anoncement</header>
<p>Sona College of Technology : A blend of legacy, Research Excellence, Placement and Global Vision</p>
<p>Proud Collaboration with Dynex Moonshots, Europe – Advancing Quantum Fluency</p>
<p>The SONATIMES Newsletter - May 2026 edition </p>
<p>Sona student's innovation set to revolutionise textile designing</p>
<p>Open Education Resources (OER)</p>
<p>Google Calendar</p>
</div>
<div class="anonce">
<div style="border: none;" class="h1">
<div class="c2">
<i style="height: 40px;width: 40px;margin-left: 20px;" class="fa-solid fa-landmark-dome"></i>
<p>Achievements</p>
</div>
<div class="c2">
<i style="height: 40px;width: 40px;margin-left: 15px;" class="fa-solid fa-newspaper"></i>
<p>News</p>
</div>
<div class="c2">
<i style="height: 40px;width: 40px;margin-left: 15px;" class="fa-solid fa-calendar"></i>
<p>Events</p>
</div>
<div class="c2">
<i style="height: 40px;width: 40px;margin-left: 15px;" class="fa-solid fa-font-awesome"></i>
<p>NRIF</p>
</div>
<div class="c2">
<i style="height: 40px;width: 40px;margin-left: 15px;" class="fa-solid fa-trophy"></i>
<p>ARIIA</p>
</div>
</div>
<div class="content3">
<div class="lab">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKxfT1PfMNHOBmigkr7g6dNSnhRY3J3lS7oBDkhK_6gf5A4O3jnSIrfmA&s=10">
<p>KRIVVAS '26 was a national-level inter-collegiate cultural festival organized by the Sona Modern
Theatre (SMT) club at the Sona College of Technology in Salem</p>
</div>
<div class="lab">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnbOEWwhoz6g-IrsDLzccDNdTZK-XGz4PV8xLr4K4C7A&s=10">
<p>The 2025 Graduation Ceremonies for Sona Institutions were held on October 24, 2025, which
celebrated graduating students across various programs</p>
</div>
<div class="lab">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0fIlzNkhA_mf3zf-2QKxmWUci3DkKOFTCX6Sdp95aPA&s=10">
<p>Sona College of Technology in Salem offers a highly industry-aligned B.Tech in Information
Technology program. </p>
</div>
</div>
</div>
</div>
<div class="anonce">
<header style="text-align: center;">Latest News</header>
<img style="height: 70%;width: 80%;margin-left: 45px;" src="sona2.png">
<h3 style="padding: 5px;">From Campus to the Global Stage — Celebrating an Extraordinary Alumnus! From Sona
College Of Technology
Batch 2000-2004</h3>
</div>
</main>
<div class="sonabook">
<div class="left">
<img style="height: 75%;width: 75%;"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpASPjzfnIhpFRsuGhd6cb8Y3_TuyyIB6nKZlvjM-zpQ&s=10">
</div>
<div class="right">
<h1>The Sona Story: The Textile to Tech Journey of Chettiar </h1>
<h1>Industrialist C. Valliappa </h1>
<p>
"The Sona Story" by Chitra Narayanan chronicles the remarkable transformation of The Sona Group under
the visionary leadership of C. Valliappa. This compelling narrative takes readers from the company's
textile foundations to its evolution into a technological powerhouse</p>
<p>The book offers an in-depth exploration of The Sona Group's rich heritage, highlighting pivotal moments
and innovative strategies that propelled the organization to prominence. Readers will gain valuable
insights into the business acumen and forward-thinking approaches that have sustained the company's
growth over generations.</p>
<p>C. Valliappa's journey embodies the essence of perseverance, unwavering dedication, and commitment to
excellence. His story serves as an inspiration for entrepreneurs and business leaders alike,
demonstrating how visionary leadership can navigate challenges and transform industries.</p>
<p>This essential read provides a fascinating window into industrial development and the profound impact of
strategic leadership in building a lasting business legacy. </p>
<div class="buy">
<button>Buy Now</button>
<button>Know More</button>
</div>
</div>
</div>
<div class="activities">
<header style="color:white;margin-left:850px;font-size: 70px;padding-top:50px ;">Campus <span
style="color: yellow;">Life</span></header>
<p style="font-size:30px;color: white;margin-left: 480px;">The Arcadian environ @ Sona makes the College life
the most memorable experience!</p>
<div class="pic">
<div class="sona5">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSv4koGNoqIBAGvgVdgKJMVJRz7SKStYkBp5lGcTe5QA&s">
<h1>Student life</h1>
<p>Students are made to realise their potential for self-development so as to become better persons in terms of physical, emotional, intellectual, aesthetic and moral well-being and character.</p>
</div>
<div class="sona5">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTG-LOVrq51zB0F7ZPR7orwO-9PY-Hr_dsGo-2HFGR2zw&s=10">
<h1>Speakers Forum</h1>
<p>Students are made to realise their potential for self-development so as to become better persons in terms of physical, emotional, intellectual, aesthetic and moral well-being and character.</p>
</div>
<div class="sona5">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZC8fpV468eLHv3sSZ7Vuml7fboDqAAValYa2Y4XOdog&s=10">
<h1>Student Clubs</h1>
<p>The soul of college life is the fraternities on the campus the clubs that become a surrogate family for a student, helping him/her grow and explore latent talents in fields other than academics.</p>
</div>
<div class="sona5">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQFOMLD6KRm4bxCtXbJwml09xLmKi6BxfRVa3Cx-Jrww&s=10">
<h1>Innovative Learnings</h1>
<p>SONA is one of the pioneering institutions in India to introduce Lecture Capturing System to help students keep in touch with the academic curriculum anytime, anywhere! No more talks of missed classes!</p>
</div>
</div>
</div>
<div class="collab">
<img src="collab.png">
</div>
<footer>
<p>© 2026 Sona College of Technology. All Rights Reserved. </p>
<p>Junction Main Road, Salem 636 005. Tamilnadu, India.</p>
</footer>
</body>
</html>
Output:
Top comments (0)