DEV Community: A K I L A N

Object in js

A K I L A N — Mon, 13 Jul 2026 18:32:42 +0000

*Object *

object are varaiable which can store both values and functions
value are stores as key:valuesthis pairs is called properties.
function are stores a key:function() this pair is called a methods
key can be randomly name but values should proper
in values we can assign variables ex:caretype:type;
while in object we can use keyvaules as key or functionkeys.
we can use space in key but it should be only in string and in while print also should in string form ex:console.log(car["type"])
we can delete a particular properties use object.value ex:delete car.price
we can add properties after creating object ex:car['discount'] = 250000;
we can change the values of a properties by reassign the value ex:car.price = 5000000;
we can use function in the object and this.

Types of function

A K I L A N — Sun, 12 Jul 2026 12:52:52 +0000

Expression Function

Function expression is stored in a variable

const multiply = function(a, b) {
  return a * b;
};

the variable can be used as a function
function expression are used to create anonymous functions.
A expresion function can be assigned to a varaiable the passed a arrugument to another function and returned from function
In JavaScript, function declarations and function expression refer to different ways of defining functions, there are different in the syntax but both the works are same .

Hosting

function decleration can be called top of the function
function expression can be called after function decleration.
use function decleration in general - purpose function.
use function expression to assign a variable in another function and for callback .

*Arrow function *

Arrow function are shorten of expression function

const add = (a, b) => {
  return a + b;
};

arrow function uses the arrow symbole
This arrow function does the same thing as a regular function expression.
Arrow functions are not hoisted
Parentheses are required for zero or multiple parameters.

Functions In javascript

A K I L A N — Thu, 09 Jul 2026 03:27:14 +0000

Functions

reusable blocks of code designed to perform specific tasks.
they allow you to organize ,resue , and modularize code .

Default Parameters

default parameters are used when no argument is provided.
if no value is passed the function automatically uses the default value.

function greet(name = "Guest") {
  console.log("Hello, " + name);
}

*Return Statement *

The return statement is used to send a result back from a function
the returned value can be stored in variable or used directly

function add(a, b) {
  return a + b; // returns the sum
}

let result = add(5, 10);
console.log(result);

prime number logic

let i = 1;
let given = 6;
let count = 0;



for(i=1;i<=given;i++){
    if(given%i==0 ){
        count++;
    }
}

    if(count == 2){

        console.log("given is prime number"+ i)
    }else{

        console.log ("given is not a prime number")
    }

JS TASK

A K I L A N — Tue, 07 Jul 2026 11:06:27 +0000

The task is to get 5 subjects where to find avg & grade and total if the student had fail in one subject no no grade .


let eng = 80;
let tamil = 90;
let maths = 95;
let sci = 70;
let ss = 88;

let total = eng+tamil+maths+sci+ss;

let avg = total/5;

if(eng<=35||tamil<=35||maths<=35||sci<=35||ss<=35){

    console.log("NO grade");

}
else if(avg>=90){
    console.log("o")
    console.log(avg)
    console.log(total)
}
else if(avg<90 && avg >=70) {

    console.log("A")
     console.log(avg)
     console.log(total)

}

else if(avg < 70 && avg >= 50){

    console.log("b")
    console.log(avg)
    console.log(total)
}
else if (avg < 50 && avg >= 40){

    console.log("c")
    console.log(avg)
    console.log(total)
}

OUTPUT

IF condition (JS )

A K I L A N — Mon, 06 Jul 2026 11:10:57 +0000

** IF statement **

if statement runs a block of code when a condition is true.
you can use if statement another if statement. - this is called nested if .

if else statement

else statement runs a block of code when if condition is false

if (hour < 18) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

here we have else if is use to specifie the new condition first is false.

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

*Terinary operator *

shorthand of if else () ? x : y

Switch statement

Switch statement select one or more code blocks to be executed
Switch is often used as a more readable alternative to many if.. else if...else statements, especially when dealing with multiple possible values

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

break- it break out the switch block.this will stop the execution inside the switch block.

default - keyword specifies a block of code to run if there is no case match.The default keyword is optional.

Type Converstion (JS)

A K I L A N — Sat, 04 Jul 2026 03:20:25 +0000

Type Converstion

string to number
number to string
Dates to numbers
Numbers to dates
Booleans to numbers
numbers to booleans

Converting Strings to Numbers

the gloabl method Number() converts a variable into a number
The unary + operator can be used to convert a variable to a number

** Converting number to string**

String()
x.tostring()

Converting date to String

String(Date())
Date().tostring()
(date.getMonth()+1).toString(); to get month the because the integer between 0(january) and 11 (december)

Converting Boolean to Number

number()

-true.tostring()

Condition

Operators in JS

A K I L A N — Thu, 02 Jul 2026 10:57:11 +0000

Operators from mathematical and logical compoutations
There are different type of operators

Arithmetic Operators
Assignment Operators
Comparsion operators 4 . Logical operators

*1. Arithmetic Operators *


- Addition +
- Subraction -
- mutiplication *
- division /
- Modules %
- increment ++
- decrement --
- Exponentiation - ** (this will used for power value like 5 square 2 =  25)

The numbers (in an arithmetic operation) are called operands.

2. Assignment Operators

This will assign values to js varialbes

- Operator Example Same As  Result
- = x = y   x = y           x = 5
- +=    x += y  x = x + y   x = 15
- -=    x -= y  x = x - y   x = 5
- *=    x *= y  x = x * y   x = 50
- **=   x **= y x = x ** y  x = 100000
- /=    x /= y  x = x / y   x = 2
- %=    x %= y  x = x % y   x = 0
- : x: 45   size.x = 45 x = 45

*3 . Logical Assignment operators *

Operator  Example   Result
&&=   true &&= 10     x = 10
||=   false ||= 10    x = 10
??=   null ??= 10     x = 10

Logical AND is used between two values :
If the first value is true, the second value is assigned.
Logical OR is used between two values :
If the first value is false, the second value is assigned.
Logical Nullish coalescing assignment operator is used between two values: If the first value is undefined or null, the second value is assigned.

*4.Comprasion Operators *

Operator   Description  
==  equal to
=== equal value and equal type          
!=  not equal       
!== not equal value or not equal type       
>   greater than    
<   less than       
>=  greater than or equal to        
<=  less than or equal to

NAN stands for Not-a-Number usually the resullt of an invalid math operation

SDLC

A K I L A N — Wed, 01 Jul 2026 04:11:48 +0000

SDLC

SDLC stands for Software development Life Cycle
It ensure a Systematic workflow and helps align software development with business goals and users requirements.
Provides a clear and organized framework for managing development phases
helps in early detection of defect , reducing overall cost and time.

Planning ----> Analysis ------> Design -------> Development ------> Testing ------> Deployment----->Maintenance.

1. Planning

The project planning phase establish the goals and scope of a softeware development project
Discussed about the project technically,financillay,and operationally feasible.
Activities - Feasibility analysis,coctestimation,scheduling ,resource planning
And overall user interface design of the software
AN inital software requirement specification (SRS) document.
SRS contain software functions,required resouce,possible risks and project timeline.

2.Analysis

During the analysis phase ,the development team collects and analyzes information on the project's requirements .
this will process advance the work they started in the planning phase ,moving from a high - level to pratical implementation plan.
often involves gathering user requirement, conducting market research and feasibility testing and resouses.

Design

In these stage the approved rrequirements are transformed into a technical buleprint foe implementation.
HLD (High - Level Design) : Define System architecture , technology stack ,database design and major mosules.

-LLD(LOW - Level Design): spesifices components logic,APIs,data structures,And workflows.

Finally released the Design Document Specification(DDS)

4.DEvelopment

Developers build the software based on the approved design
to write the code,code reviews,unit testing,version control management.

5.Testing

Testing ensures the software meets requirements and is free from defects before release

*Types of testing inculde: *

Unit Testing - verifies individual components.
Integration testing :Ensures modules work together
System Testing : validates the complete System
User Acceptance Testing (UAT):Confirms Bussiness Requiremnts Are met

7.Deloyment

The tested software is released to users.
Production setup ,development ,somke testing
Modern Approach: Continuous Integration and Continuous Deployment (CI/CD) pipelines for faster and reliable releases
live application

7.Manitenance

Post- deployment support ensure long -term usuability
Activities: Bug fixes,profromance tuning,upadtes,feature enhancements.
Patches,updates,new versions

Common Models

Waterfall Model
Agile Model
V-Model
Spiral Model
Incremental Model
RAD Model

Day - 2 (Js)

A K I L A N — Mon, 29 Jun 2026 13:35:54 +0000

*Intro *

one of many js HTML methods is .getElementById().

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

On the above code while clicking the button the content will be changed _

Js accepts both double an single Quetes
Js can change the attribute value ex(it can change the value of src (source) attributre of an image )


<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

Js can change the css style of an element
Js can hide and show hidding element in HTML

WRITTEN BY OR IN

In HTML javascript Code is inserted Between and tags
You can place any number of scripts in an HTML documnt.
SCripit can be placed in the body ,or in the head section of an html.or in both

Variables and datatypes

Variables ans date types in javaScript are fundatmental concepts used to store and manage data in aa program

variables - Declared using var ,let and const to store data values

1.var- this can be declared and can be reassumed
2.let - this can be declared and can't be reassumed but can be updated
3.const - this can be declared can't be changed

DAY - 1(JavaScript)

A K I L A N — Mon, 29 Jun 2026 12:43:09 +0000

What is JavaScript ?

Java script is a programming language for the web
Js can update and change both HTML and CSS
Js can manupilate,calculate and validate data
JS brings life to web pages by making them interactive.
It is use for building interactive web application and supports both client - side and server - side development
interpeted language : code is executed line by line.
Dynamically typed : Variable types are determined at runtime
Single - threaded:Executes one task at a time

Why JavaScript ?

JS is one of the world's top five programming language
This year roughly 70% of stack overflow users asked jS questions.
The Programming world's QA forum

What version ?

The Current JS version is ES2025
ECMAScript is oficial name of the JS
JS was invented by brendan Eich in 1995 And became an ECMA Standard In 1997 .
The first ECMAScript versions were abbreviated by numbers. (ES1, ES2, ES3, ES5, ES6).
From 2016, versions are named by year (ECMAScript 2016, 2017, 2018, ..., 2025).

Difference between JS and JAVA

JAVA - Java is compiled language ,meaning you write code ,run it through a compiler ,and create bytecode .the bytecode is then run in a JVM.Which is like your computer software

JS - JS is commanly used to create interactive websites.You are reading this right now on a running Java sciript.

Day - 21 & 22(clg project)

A K I L A N — Mon, 29 Jun 2026 03:20:51 +0000

Cloning the clg website
html code

   </style>
</head>
<body>
    <header>
        <div class="top">
         <img src="./PHOTO/sri eshwr.webp" alt="" style="width:400px;height: 130px;padding: 20px;padding-left: 70px;">
         <div class="topmenu">
            <nav>
            <a href="">STUDYININDIA</a>
            <a href="">ALUMNI</a>
            <a href="">ERP</a>
            <a href="">CAREERS</a>
            <a href="">IQAC</a>
            <a href="">NBADCP</a>
            <a href="">AUDITED STATEMENTS</a>
            <a href="">SDGCELL</a>
            <a href="">QUICKLINKS</a>
            </nav>
            <div class="button">
            <button style="height:50px ;width: 300px;background-color:#004A99;color:#FFFFFF;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">INTERNATIONAL INTERNSHIP 2026 @SECE</button>
            <button style="height: 50px;width: 150px;background-color: #F4B41A;color:#000000 ;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;"> <i class="fa-solid fa-street-view"></i>CAMPUS TOUR</button>
            <button class="third" style="height: 50px;width: 90px;margin-top: 10px;background-color: #F4B41A;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color: #004A99;">THEA CODE <span style="background-color: #FFFFFF;">2739</span> </button>
            <img src="./PHOTO/NBA.png" alt="" style="width: 70px;">
            <img src="./PHOTO/NIRF.webp" alt="">
            <img src="./PHOTO/INDIACLG.png" alt="">
            <img src="./PHOTO/SDG-LOGO-1.webp" alt="">
            </div>
         </div>
        </div>
        <div class="bootom">
            <nav>
                <a href="">HOME</a>
                <a href="">ABOUT</a>
                <a href="">ACADEMICS</a>
                <a href="">RESEARCH</a>
                <a href="">INNOVATION</a>
                <a href="">INTERNATIONALRELATIONS</a>
                <a href="">CAREERDEVELOPMENT</a>
                <a href="">CAMPUSLIFE</a>
                <a href="">ADMISSION</a>
            </nav>

        </div>
    </header>
    <main>
        <div class="slider">
             <div class="wrapper">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/02-18-July-768x432.jpg" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/02-19-July-768x432.jpg" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/10may-768x432.jpg" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/1115sep-768x432.jpg" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/11sep-768x432.jpg" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/12september-768x432.jpg" alt="">
             <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/02-18-July-768x432.jpg" alt="">

             </div>

    </div>
        <div class="part2">
            <div class="left2">
                <h1 style="color: #004A99;">TOPPERS' TOP CHOICE.</h1>
                <h1 style="color: #004A99;">EXPERIENTIAL LEARNING.</h1>
                <h1 style="color: #F4B41A;margin-top: 5px;">FANTABULOUS CAMPUS.</h1>
                <br>
                <img loading="lazy" decoding="async" width="222" height="8" src="https://sece.ac.in/wp-content/uploads/2024/05/Group-61-1.png"alt="">           
                <br>
                <p><strong> Sri Eshwar </strong> is the most preferred institution for high ranking students. With industry-relevant curriculum, project based learning, high energy faculty, corporate-like facilities, best amenities and vibrant activities, Sri Eshwar is the most sought after institution for high quality and holistic education. What’s more? We are proud to emerge, every year, as a <strong>TOP PLACEMENTS COLLEGE!</strong> </p>
            </div>
            <div class="right2">
                <img  src="./PHOTO/part img.png" alt="" style="height: 550px;">
            </div>
        </div>
        <div class="part3">
            <div class="left3">
            <h1 style="color: #FFFFFF;">ACADEMICS <span style="color: #F4B41A;">@ SRI ESHWAR </span></h1>
            <br>
            <img style="color: #FFFFFF;" loading="lazy" decoding="async" width="222" height="8" src="https://sece.ac.in/wp-content/uploads/2024/05/Group-61-1.png"alt="">   
            <br>
            <p style="color: #FFFFFF;">Industry-relevant course content and skill based learning methods form the crux of our programme offerings. We extensively engage industry professionals to empower our faculty and students and help them stay updated. We also constantly update our curriculum and stay agile to suit the changing needs of industries. Our goal is to ensure that students are industry-ready in all aspects for their <strong>BRIGHT CAREERS.</strong> </p>

            <div class="dept">
                <div class="deptleft">
                    <h3 style="margin-top: 10px;">Engineering</h3>
                    <a href=""> > B.E.Computer Science and Engineering </a>
                    <a href=""> > B.E.Computer Science and Engineering (Artificial Intelligence & Machine Learning) </a>
                    <a href="">> B.E.Computer and Communication Engineering</a>
                    <a href="">> B.E.Computer Science and Engineering (Cyber Security)</a>
                    <a href="">> B.E.Electronics and Communication Engineering</a>
                    <a href="">> B.E.Electrical and Electronics Engineering</a>
                    <a href="">> B.E.Mechanical Engineering</a>
                </div>
                <div class="deptright">
                    <h3 style="margin-top: 10px;">Technology</h3>
                    <a href=""> > B.Tech.Artificial Intelligence and Data Science</a>
                    <a href=""> > B.Tech.Computer Science and Business Systems</a>
                    <a href=""> > B.Tech.Information Technology</a>
                </div>

                </div>
               </div>
                <div class="right3"> 
                    <img  style="margin-left: 30px;" class="img1"  loading="lazy" decoding="async" width="615" height="338" src="https://sece.ac.in/wp-content/uploads/2025/04/Group-341.webp">
                    <img id="img2" loading="lazy" decoding="async" width="160" height="161" src="https://sece.ac.in/wp-content/uploads/2024/05/Group-112.svg" class="attachment-large size-large wp-image-4712   " alt="">  
                    <button style="width: 500px;height: 50px;background-color: #F4B41A;margin-right: 400px; margin-left: 30px; border-radius: 0;">ADMISSION</button>
                </div>

        </div>
        <div class="part4">
            <h1 style="color: #004A99;margin-top: 30px;">WORLDCLASS <span style="color: #F4B41A;">FACILITIES</span></h1>
             <img loading="lazy" decoding="async" width="222" height="8" src="https://sece.ac.in/wp-content/uploads/2024/05/Group-61-1.png"alt="">  
             <p style="width: 60%;">At Sri Eshwar, we go to great lengths to make sure we provide the best infrastructure and facilities for our students. With the right ambience, <strong> we can bring out the best potential hidden inside every student.
We give the best facilities and ambience to students and expect the best performance from them, in return! </strong></p>

            <div style="width: 900px; height: 300px;">
                <div class="carousel">
        <div class="group">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilities_labs-1-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_innovative-learning-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_recordingstudio-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_medicalcentre-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_makerspace-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_recordingstudio-768x373.jpg" alt="">
        </div>
         <div  aria-hidden class="group">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilities_labs-1-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_innovative-learning-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_recordingstudio-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_medicalcentre-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_makerspace-768x373.jpg" alt="">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/worldclass-facilties_recordingstudio-768x373.jpg" alt="">
        </div>
    </div>




          </div>

        </div>
        <div class="part5">

            <h1 style="color: #004A99; margin-left: 400px;">PLACEMENT <span style="color: #F4B41A;">STORIES</span></h1>
             <img loading="lazy" decoding="async" width="222" height="8" style="margin-left: 450px;" src="https://sece.ac.in/wp-content/uploads/2024/05/Group-61-1.png"alt="">  
             <p style="width: 40% ; margin-left: 350px;">Sharing the glorious success of our 2025 batch who are placed in more than 120 top multinational companies. <b> We are so proud of them!</b></p>
             <img style="margin-left: 30px;" src="./PHOTO/part5img.png" alt="">
             <div style="width: 1300px;height: 170px;margin-left: 20px; ">
                <div class="carousel">
        <div class="group">
           <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_kirthi.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_maheswari.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_naveen.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_preethi-1.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_sanjai.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_sudarssan-1.webp" alt="">
        </div>
         <div  aria-hidden class="group">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_kirthi.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_maheswari.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_naveen.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_preethi-1.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_sanjai.webp" alt="">
            <img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/videotestimonial_sudarssan-1.webp" alt="">
        </div>
    </div>
             </div>

        </div>
        <div class="part6">

            <h4 style="text-align: center; margin-top: 20px;">PLACEMENTS IN 120+ GLOBAL ORGANIZATIONS</h4>

            <div class="con">

   <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/Microsoft-.webp" alt="Microsoft"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/autodesk.jpg" alt="Autodesk"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/servicenow.jpg" alt="ServiceNow"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/commscope.jpg" alt="Commvault"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/juspay.jpg" alt="Juspay"></div>

    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/bp.jpg" alt="BP"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/wellsfargo.jpg" alt="Wells Fargo"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/cadence.jpg" alt="Cadence"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/philips.jpg" alt="Philips"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/caterpillar.jpg" alt="Caterpillar"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/Dell-Technologies.jpg" alt="Dell"></div>

    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/sahaj.jpg" alt="Sahaj"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/commscope.jpg" alt="CommScope"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/thoughtworks.jpg" alt="ThoughtWorks"></div>
    <div class="box"><img src="./PHOTO/SECE_ Best Engineering College in Tamil Nadu_files/rocket-logo.png" alt="Rocket"></div>


    </div>


        </div>
        <div class="part7">
            <div class="left7">
                 <h1 style="color: #004A99;">EXCELLENT RESEARCH</h1>
            <img  loading="lazy" decoding="async" width="222" height="8" style="margin-left: ; color: #09326c;" src="https://sece.ac.in/wp-content/uploads/2024/05/Group-61-1.png"alt="">
            <p style="width: 350px;">Research is the cornerstone of ground breaking innovations that will change the landscape of the world for the better. At Sri Eshwar, we commit to extensive research and igniting the spark of innovation among our students and faculty members. <b> Sri Eshwar is an extensive research institute!</b></p>
         <img src="./PHOTO/RE.png" alt="">
         <img src="./PHOTO/RE1.png" alt="">
         <img src="./PHOTO/RE2.png" alt="">
            </div>
            <div class="right7"> 
                <img  style="height: 590px;margin-left: 40px;margin: 10px;"   src="./PHOTO/research-introduction.jpg" alt="">
            </div>


        </div>
    </main>
    <footer></footer>

</body>
</html>

output

akilan46-project-bce2db.gitlab.io

Day - 20 (Key Frames & media )

A K I L A N — Mon, 29 Jun 2026 03:13:20 +0000

key Frames

the key frame is used to control the step in an animation sequences by defining css styles
An animation is created by gradually changing from one set of css styles to another.
during an animation,you can change the set of css styles many time

<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

from is the starting point and to is the ending point

*@media *

The CSS @media rule is used in media queries to apply different styles for different media types/devices.
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution

<style>
div.example {
  background-color: yellow;
  padding: 20px;
}

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
</style>