[go: up one dir, main page]
Scribd
Upload
7 views6 pages

Css4 - Lab Task Two

The document contains HTML code for a simple webpage with a navigation menu, radio buttons for gender selection, and a login form. The menu uses flexbox for layout and includes hover effects, while the radio buttons change label colors based on selection. The login form features styled input fields and a submit button with specific focus and hover effects.

Uploaded by

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

Css4 - Lab Task Two

The document contains HTML code for a simple webpage with a navigation menu, radio buttons for gender selection, and a login form. The menu uses flexbox for layout and includes hover effects, while the radio buttons change label colors based on selection. The login form features styled input fields and a submit button with specific focus and hover effects.

Uploaded by

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

1)

Code:
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
background-color: #2c3e50;
}

.menu li {
padding: 15px 25px;
color: white;
cursor: pointer;
transition: 0.3s;
}

.menu li:hover {
background-color: tomato;
color: white;
text-decoration: underline;
text-align: center;
}
</style>
</head>
<body>

<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>

</body>
</html>
Output:
2)
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.male:checked + label {
color: blue;
}

.female:checked + label {
color: pink;
}
</style>
</head>
<body>

<input type="radio" name="gender" class="male" id="male">


<label for="male">Male</label>

<input type="radio" name="gender" class="female" id="female">


<label for="female">Female</label>

</body>
</html>
Output:
3)
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.login-input {
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
transition: 0.3s;
}

.login-input:focus {
background-color: pink;
border: 2px solid red;
outline: none;
}

.submit-btn {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>

<form>
<input type="text" placeholder="Username" class="login-input"><br>
<input type="password" placeholder="Password" class="login-input"><br>
<button type="submit" class="submit-btn">Login</button>
</form>

</body>
</html>
Output:

You might also like