Scribd
Upload
11 views9 pages

Exp No 1

Uploaded by

22z136
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views9 pages

Exp No 1

Uploaded by

22z136
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

EXP NO: Societal Application

DATE:
Aim:
To create a responsive web layout for societal application.

Algorithm:
Step 1: Start the program
Step 2: Create the basic HTML structure with a navigation bar and cards for each product.
Step 3: Style the navigation bar using CSS to make the list items appear horizontally.
Step 4: Use CSS to style the cards, ensuring each card has an image, title, description, and
link.
Step 5: Use Flexbox or CSS Grid in card-main to arrange the cards in a grid or row layout.
Step 6: Add responsive design using media queries to adjust the layout on different screen
sizes.
Step 7: Stop the program.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Portfolio</title>
</head>
<style>
html {
scroll-behavior: smooth;
}
body {
background-image: url('background.jpg');
opacity: 0.5;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial,
sans-serif;
}
.header {
margin-top: 30px;
color: white;
font-weight: bold;
display: flex;
justify-content: space-around;
height: 60px;
text-align: center;
}
button:hover {
border: solid rgb(30, 72, 187) 1px;
color: #38d701;
background-image: -webkit-linear-gradient(0deg, #0165d7 0%, #913daa 60%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content {
color: #38d701;
background-image: -webkit-linear-gradient(0deg, #0165d7 0%, #c15ce0 60%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 10%;
margin-top: 10%;
margin-right: 10%;
}
button {
border: none;
border-radius: 20px;
background: none;
color: white;
font-size: 100%;
height: 40px;
font-weight: bold;
width: 20%;
}

@media screen and (min-width: 0px) {


.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.profile-img {
border-radius: 50%;
height: 300px;
width: 300px;
margin-right: 200px;
margin-top: 100px;
margin-left: 30%;
}
.greetings {
font-size: 20px;
font-weight: 400;
}
.name {
margin-top: -2%;
font-size: 70px;
font-weight: bold;
}
}
@media screen and (min-width: 800px) { }
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.profile-img {
border-radius: 50%;
height: 300px;
width: 300px;
margin-right: 10%;
margin-top: 30%;
margin-left: 60px;
}
.greetings {
font-size: 30px;
font-weight: 400;
}
.name {
margin-top: -2%;
font-size: 80px;
font-weight: bold;
}
.intro {
font-size: 25px;
}
#edu {
color: white;
margin-top: 500px;
}
#edu {
color: white;
margin-top: 200px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
margin-left: 10%;
margin-right: 10%;
}
#edu h2 {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
color: #ffffff;
background-image: -webkit-linear-gradient(0deg, #0165d7 0%, #c15ce0 60%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.education-section {
margin-bottom: 30px;
padding: 15px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.education-section h3 {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
color: #ffffff;
background-image: -webkit-linear-gradient(0deg, #0165d7 0%, #c15ce0 60%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.education-section p {
font-size: 18px;
margin: 5px 0;

}
.education-section p strong {
color: #588ffe;
}
}
</style>
<body>
<div class="main-div">
<div class="header">
<button class="about">About Me</button>
<a href="#edu"><button class="education">Education</button></a>
<a href="project.html"><button class="projects">Projects</button></a>
<button class="contacts">Contact</button>
</div>
<div class="container">
<div class="profile">
<img class="profile-img" src="person2.jpg" alt="Profile Picture">
</div>
<div class="content">
<p class="greetings">Hello Everyone,</p>
<p class="name">I'm Nithishkumar</p>
<p class="about">A Front-end Web Developer building the front end of websites
and web applications that leads to success in overall projects.</p>
</div>
</div>
<div id="edu">
<h2>Education</h2>
<div class="education-section">
<h3>Bachelor of Engineering in Computer Science</h3>
<p><strong>Institution:</strong> PSG Institute of Technology and Applied
Research</p>
<p><strong>Year of Completion:</strong> 2026</p>
<p><strong>Key Courses:</strong> Database Management Systems, Operating
Systems, Network Security, Full Stack Development</p>
<p><strong>CGPA:</strong> 9.3</p>
</div>
<div class="education-section">
<h3>Secondary Education</h3>
<p><strong>Institution:</strong> ARR Matriculation Higher Secondary School</p
<p><strong>Year of Completion:</strong> 2022</p>
<p><strong>Specialization:</strong> Science (with Mathematics, Physics,
Chemistry)</p>
<p><strong>percentage:
</strong> 96.67
</p>
</div>
</div>
</div>
</body>
</html>

Output:
Desktop View:
Mobile View:

Result:
Thus, the responsive layout has been developed and implemented successfully.

You might also like