Scribd
Upload
3 views

Css Assignments

The document contains three separate HTML and CSS code examples demonstrating different layouts: a login page, a box layout, and a layout with a header, sidebar, main content, and footer. Each section includes structured HTML elements and corresponding CSS styles for visual presentation and responsiveness. The examples showcase fundamental web design principles using flexbox and responsive design techniques.

Uploaded by

Mohammad suhail thaha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Css Assignments

The document contains three separate HTML and CSS code examples demonstrating different layouts: a login page, a box layout, and a layout with a header, sidebar, main content, and footer. Each section includes structured HTML elements and corresponding CSS styles for visual presentation and responsiveness. The examples showcase fundamental web design principles using flexbox and responsive design techniques.

Uploaded by

Mohammad suhail thaha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

CSS ASSIGNMENT-SUHAIL

1
html code:
<!DOCTYPE html>
<html lang="en">
<head>

<title>Login</title>
<link rel="stylesheet" href="2.css">
</head>
<body>
<div class="container">
<div class="login-left">
<h1>Login</h1>
<p>Get access to your Orders, Wishlist and
Recommendations</p>
<div class="image-placeholder">
<!-- Add your image here -->
</div>
</div>
<div class="login-right">
<form>
<label for="email-mobile">Enter Email/Mobile
number</label>
<input type="text" id="email-mobile" name="email-
mobile" required>
<p>By continuing, you agree to Flipkart's <a
href="#">Terms of Use</a> and <a href="#">Privacy Policy</a></p>
<button type="submit">Request OTP</button>
<p><a href="#">New to Flipkart? Create an
account</a></p>
</form>
</div>
</div>
</body>
</html>
css code

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}

.container {
display: flex;
width: 800px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
}

.login-left {
background-color: #2874f0;
color: white;
padding: 40px;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

.login-left h1 {
margin-bottom: 20px;
}

.login-left p {
margin-bottom: 20px;
}

.login-left .image-placeholder {
width: 100px;
height: 100px;
background: url('your-image-url-here') no-repeat center center;
background-size: contain;
}

.login-right {
padding: 40px;
width: 60%;
}

.login-right form {
display: flex;
flex-direction: column;
}

.login-right label {
margin-bottom: 10px;
font-size: 14px;
color: #888;
}

.login-right input {
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}

.login-right p {
font-size: 12px;
color: #888;
margin-bottom: 20px;
}

.login-right p a {
color: #2874f0;
text-decoration: none;
}

.login-right button {
padding: 10px;
font-size: 16px;
color: white;
background-color: #ff5722;
border: none;
border-radius: 4px;
cursor: pointer;
}
.login-right button:hover {
background-color: #e64a19;
}

.login-right p:last-of-type {
text-align: center;
margin-top: 20px;
}
2.
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Box Layout</title>
<link rel="stylesheet" href="3.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-box">
<div class="small-box">Box1</div>
<div class="small-box">Box2</div>
<div class="small-box">Box3</div>
</div>
<div class="large-box">
<div class="small-box">Box1</div>
<div class="small-box">Box2</div>
<div class="small-box">Box3</div>
</div>
<div class="large-box">
<div class="small-box">Box1</div>
<div class="small-box">Box2</div>
<div class="small-box">Box3</div>
</div>
<div class="large-box">
<div class="small-box">Box1</div>
<div class="small-box">Box2</div>
<div class="small-box">Box3</div>
</div>
<div class="large-box">
<div class="small-box">Box1</div>
<div class="small-box">Box2</div>
<div class="small-box">Box3</div>
</div>
<div class="large-box">
<div class="small-box">Box1</div>
<div class="small-box">Box2</div>
<div class="small-box">Box3</div>
</div>
</div>
<div class="row">
<div class="large-box">
<div class="small-box">Box1</div>
<div class="small-box">Box2</div>
<div class="small-box">Box3</div>
</div>
<div class="large-box">
<div class="small-box">Box1</div>
<div class="small-box">Box2</div>
<div class="small-box">Box3</div>
</div>
<div class="large-box">
<div class="small-box">Box1</div>
<div class="small-box">Box2</div>
<div class="small-box">Box3</div>
</div>
</div>
</div>
</body>
</html>

css code:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(45deg, #ff6f91, #ff9671, #ffc75f,
#f9f871);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.container {
display: flex;
flex-direction: column;
}

.row {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}

.large-box {
width: 100px;
height: 100px;
background: linear-gradient(to bottom right, #ffcc33, #ff9933);
border: 2px solid #ffcc33;
display: flex;
flex-wrap: wrap;
padding: 5px;
box-sizing: border-box;
}

.small-box {
width: calc(33.3333% - 4px);
height: calc(33.3333% - 4px);
background: linear-gradient(to bottom right, #0066cc, #0033cc);
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 2px;
font-size: 10px;
border: 1px solid #0033cc;
box-sizing: border-box;
}
3.
HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>

<title>Layout with Header, Sidebar, Main, and Footer</title>


<link rel="stylesheet" href="1.css">
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
<aside class="sidebar">
<h2>Sidebar</h2>
<p>The Menu or quick access contain here</p>
</aside>
<section class="main-content">
<h2>Main Content</h2>
<p>The Website Contain display here.</p>
</section>
</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
CSS CODE

body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}

header {
background-color:black;
color: white;
padding: 1em;
text-align: center;
}

main {
display: flex;
flex: 1;
flex-direction: row;
}

.sidebar {
background-color: #f4f4f4;
width: 250px;
padding: 1em;
}

.main-content {
flex: 1;
padding: 1em;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}

/* Responsive Design */
@media (max-width: 768px) {
main {
flex-direction: column;
}

.sidebar {
width: 100%;
}
}

You might also like