Scribd
Upload
26 views10 pages

ETE

The document contains code for a responsive layout design with flexbox. It defines a container div with flex-wrap and items within it with fixed widths. A media query changes the layout to a single column on screens smaller than 600px, allowing items to expand to full width.

Uploaded by

Achal Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
26 views10 pages

ETE

The document contains code for a responsive layout design with flexbox. It defines a container div with flex-wrap and items within it with fixed widths. A media query changes the layout to a single column on screens smaller than 600px, allowing items to expand to full width.

Uploaded by

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

Q40.

<!DOCTYPE html>
<html>
<head>
<style>
/* Button Styles */
.button {
display: inline-block;
position: relative;
padding: 10px 20px;
font-size: 18px;
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
border: none;
background-color: #4286f4;
overflow: hidden;
transition: all 0.3s ease;
}

.button::before,
.button::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #ffffff;
transition: all 0.3s ease;
}

.button::before {
top: 0;
}

.button::after {
bottom: 0;
}

/* Hover Effects */
.button:hover {
background-color: transparent;
color: #4286f4;
}

.button:hover::before,
.button:hover::after {
width: 0;
}
</style>
</head>
<body>
<a href="#" class="button">Hover Me</a>
</body>
</html>

.....................................................

Q39.
<!DOCTYPE html>
<html>
<head>
<style>
/* Slider Styles */
.slider {
width: 500px;
height: 300px;
overflow: hidden;
}

.slider img {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
</style>
</head>
<body>
<div class="slider">
<img src="1.jpg" alt="Image 1">
<img src="2.jpg" alt="Image 2">
<img src="3.jpg" alt="Image 3">
</div>

<script>
// JavaScript Code
const slider = document.querySelector('.slider');
const images = slider.getElementsByTagName('img');
let currentIndex = 0;

function showImage(index) {
for (let i = 0; i < images.length; i++) {
images[i].style.transform = `translateX(-${index * 100}%)`;
}
}

function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}

// Change image every 3 seconds


setInterval(nextImage, 3000);
</script>
</body>
</html>

.....................................................................

Q38.

<!DOCTYPE html>
<html>
<head>
<script>
function calculateAge() {
var birthdate = document.getElementById('birthdate').value;
var today = new Date();
var birthdateObj = new Date(birthdate);

var age = today.getFullYear() - birthdateObj.getFullYear();


var monthDiff = today.getMonth() - birthdateObj.getMonth();

if (monthDiff < 0 || (monthDiff === 0 && today.getDate() <


birthdateObj.getDate())) {
age--;
}

document.getElementById('result').textContent = "Your age is: " + age;


}
</script>
</head>
<body>
<h2>Age Calculator</h2>
<label for="birthdate">Enter your birthdate:</label>
<input type="date" id="birthdate">
<button onclick="calculateAge()">Calculate</button>
<p id="result"></p>
</body>
</html>

............................................................................

Q37.

<!DOCTYPE html>
<html>
<head>
<style>
/* Progress Steps Styles */
.progress-container {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}

.step {
flex-basis: 25%;
position: relative;
}

.step::before {
content: "";
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f2f2f2;
border: 2px solid #ddd;
}

.step.active::before {
background-color: #4286f4;
border-color: #4286f4;
}

.step::after {
content: "";
position: absolute;
top: 25px;
left: calc(50% + 15px);
height: 2px;
width: calc(100% - 30px);
background-color: #f2f2f2;
}

.step.active::after {
background-color: #4286f4;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="step active">Step 1</div>
<div class="step">Step 2</div>
<div class="step">Step 3</div>
<div class="step">Step 4</div>
</div>

<script>
// JavaScript Code
const steps = document.querySelectorAll('.step');

steps.forEach((step, index) => {


step.addEventListener('click', () => {
updateProgress(index);
});
});

function updateProgress(selectedIndex) {
steps.forEach((step, index) => {
if (index <= selectedIndex) {
step.classList.add('active');
} else {
step.classList.remove('active');
}
});
}
</script>
</body>
</html>

.............................................

Q36.

<!DOCTYPE html>
<html>
<head>
<style>
/* Tab Bar Styles */
.tab {
display: flex;
justify-content: center;
margin-bottom: 40px;
}

.tab button {
position: relative;
margin-right: 20px;
padding: 10px 20px;
font-size: 20px;
font-weight: bold;
background-color: transparent;
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

.tab button:hover {
color: #4286f4;
}

.tab button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f2f2f2;
border-radius: 10px;
z-index: -1;
transition: all 0.3s ease-in-out;
}

.tab button.active {
color: #fff;
}

.tab button.active::before {
background-color: #4286f4;
transform: scale(1.1);
}

/* Tab Content Styles */


.tab-content {
display: none;
padding: 20px;
border-radius: 10px;
background-color: #f2f2f2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<button class="active" data-tab="tab1">Tab 1</button>
<button data-tab="tab2">Tab 2</button>
<button data-tab="tab3">Tab 3</button>
</div>

<div class="tab-content active" id="tab1">


<p>This is the content for Tab 1.</p>
</div>

<div class="tab-content" id="tab2">


<p>This is the content for Tab 2.</p>
</div>

<div class="tab-content" id="tab3">


<p>This is the content for Tab 3.</p>
</div>

<script>
// JavaScript Code
const tabs = document.querySelectorAll('.tab button');
const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach((tab) => {
tab.addEventListener('click', () => {
const selectedTab = tab.dataset.tab;

// Update active tab button


tabs.forEach((tab) => {
tab.classList.remove('active');
});
tab.classList.add('active');

// Update active tab content


tabContents.forEach((tabContent) => {
tabContent.classList.remove('active');
if (tabContent.id === selectedTab) {
tabContent.classList.add('active');
}
});
});
});
</script>
</body>
</html>

.......................................................

Q35.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Color Picker</title>
<style>
/* Styles for the color picker container and image */
#color-picker-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

#color-picker-container img {
width: 50%;
max-width: 500px;
height: auto;
}

/* Styles for the color display div */


#color-display {
width: 50px;
height: 50px;
margin-top: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="color-picker-container">
<img src="1.jpg" alt="Image">
<div id="color-display"></div>
</div>

<script>
// JavaScript code for image color picker
const img = document.querySelector('img');
const colorDisplay = document.querySelector('#color-display');

img.addEventListener('mousemove', (e) => {


// Get pixel data at the mouse position
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
const pixelData = context.getImageData(e.offsetX, e.offsetY, 1, 1).data;

// Convert RGB values to hexadecimal color code


const colorCode = rgbToHex(pixelData[0], pixelData[1], pixelData[2]);

// Update color display div with the selected color


colorDisplay.style.backgroundColor = colorCode;
});

// Function to convert RGB values to hexadecimal color code


function rgbToHex(r, g, b) {
let hexR = r.toString(16);
let hexG = g.toString(16);
let hexB = b.toString(16);

if (hexR.length === 1) {
hexR = "0" + hexR;
}
if (hexG.length === 1) {
hexG = "0" + hexG;
}
if (hexB.length === 1) {
hexB = "0" + hexB;
}

return "#" + hexR + hexG + hexB;


}
</script>
</body>
</html>

...................................................................

Q21.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Layout Design</title>
<style>
/* Container styles */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

/* Item styles */
.item {
flex: 1 1 300px; /* Set a fixed width of 300px for each item */
margin: 10px;
padding: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
box-sizing: border-box;
}

/* Responsive styles */
@media screen and (max-width: 600px) {
/* Change to a single column layout on screens smaller than 600px */
.container {
flex-direction: column;
}

.item {
flex: 1 1 auto; /* Allow items to expand to full width */
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item">
<h2>Item 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item">
<h2>Item 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item">
<h2>Item 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item">
<h2>Item 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item">
<h2>Item 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>

.........................................................

........................................

Q32.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

h1 {
text-align: center;
}

label, input {
display: block;
margin-bottom: 10px;
}

input[type="text"], input[type="password"] {
width: 100%;
padding: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Login</h1>
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
</div>

<script>
document.getElementById("login-form").addEventListener("submit",
function(event) {
event.preventDefault(); // Prevent form submission

// Get the values entered by the user


var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

// Here, you can perform your login logic


// For this example, let's simply check if the username and password are not
empty
if (username !== "" && password !== "") {
alert("Login successful");
// Redirect to another page or perform any other action after successful login
} else {
alert("Username and password are required");
}
});
</script>
</body>
</html>

........................................

You might also like