*simple webpage with background color*
<!DOCTYPE html>
<html>
<head>
<style>
Body { background-color: lightblue; }
</style>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
*text formatting*
<!DOCTYPE html>
<html>
<head>
<style>
P { color: green; font-size: 18px; font-style: italic; }
</style>
</head>
<body>
<p>This is styled text.</p>
</body>
</html>
*centred content*
<!DOCTYPE html>
<html>
<head>
<style>
Div {
Text-align: center;
Margin-top: 50px;
</style>
</head>
<body>
<div><h2>Centered Heading</h2></div>
</body>
</html>
*button styling*
<!DOCTYPE html>
<html>
<head>
<style>
Button {
Background-color: teal;
Color: white;
Padding: 10px 20px;
Border: none;
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
*hover effect*
<!DOCTYPE html>
<html>
<head>
<style>
A:hover { color: red; }
</style>
</head>
<body>
<a href=”#”>Hover over me</a>
</body>
</html>
*box model example*
<!DOCTYPE html>
<html>
<head>
<style>
Div {
Padding: 20px;
Border: 5px solid black;
Margin: 30px;
</style>
</head>
<body>
<div>This is a box.</div>
</body>
</html>
*flexbox layout*
<!DOCTYPE html>
<html>
<head>
<style>
.container {
Display: flex;
Justify-content: space-between;
.box {
Width: 100px;
Height: 100px;
Background-color: orange;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”box”></div>
<div class=”box”></div>
<div class=”box”></div>
</div>
</body>
</html>
*navigation bar*
<!DOCTYPE html>
<html>
<head>
<style>
Ul {
List-style-type: none;
Margin: 0;
Padding: 0;
Background-color: #333;
Li {
Display: inline;
Padding: 10px;
}
Li a {
Color: white;
Text-decoration: none;
</style>
</head>
<body>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
</ul>
</body>
</html>
*gradient background*
<!DOCTYPE html>
<html>
<head>
<style>
Body {
Background: linear-gradient(to right, red, yellow);
</style>
</head>
<body>
<h1>Gradient Background</h1>
</body>
</html>
*Css grid layout*
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
Display: grid;
Grid-template-columns: auto auto;
Gap: 10px;
.item {
Background-color: lightgray;
Padding: 20px;
</style>
</head>
<body>
<div class=”grid”>
<div class=”item”>Box 1</div>
<div class=”item”>Box 2</div>
<div class=”item”>Box 3</div>
<div class=”item”>Box 4</div>
</div>
</body>
</html>
*responsive image*
<!DOCTYPE html>
<html>
<head>
<style>
Img {
Width: 100%;
Max-width: 400px;
Height: auto;
</style>
</head>
<body>
<img src=https://via.placeholder.com/400 alt=”Placeholder Image”>
</body>
</html>
*circle with border*
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
Width: 100px;
Height: 100px;
Background: blue;
Border-radius: 50%;
Border: 5px solid black;
</style>
</head>
<body>
<div class=”circle”></div>
</body>
</html>
*sticky header*
<!DOCTYPE html>
<html>
<head>
<style>
Header {
Position: sticky;
Top: 0;
Background-color: gray;
Color: white;
Padding: 10px;
</style>
</head>
<body>
<header>Sticky Header</header>
<p style=”height:2000px;”>Scroll down to see the sticky effect.</p>
</body>
</html>
*Login from design*
<!DOCTYPE html>
<html>
<head>
<style>
.login {
Width: 300px;
Margin: auto;
Padding: 20px;
Border: 1px solid #ccc;
Border-radius: 10px;
Input {
Width: 100%;
Padding: 8px;
Margin: 10px 0;
</style>
</head>
<body>
<div class=”login”>
<h2>Login</h2>
<input type=”text” placeholder=”Username”>
<input type=”password” placeholder=”Password”>
</div>
</body>
</html>
*card ui*
<!DOCTYPE html>
<html>
<head>
<style>
.card {
Border: 1px solid #ddd;
Border-radius: 8px;
Padding: 16px;
Width: 200px;
Box-shadow: 2px 2px 5px gray;
</style>
</head>
<body>
<div class=”card”>
<h3>Card Title</h3>
<p>This is a simple card.</p>
</div>
</body>
</html>
*animated loader*
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
Border: 8px solid #f3f3f3;
Border-top: 8px solid #333;
Border-radius: 50%;
Width: 50px;
Height: 50px;
Animation: spin 1s linear infinite;
Margin: auto;
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
</style>
</head>
<body>
<div class=”loader”></div>
</body>
</html>
*tooltip on hover*
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
Position: relative;
Display: inline-block;
.tooltip .tip {
Visibility: hidden;
Background-color: black;
Color: #fff;
Padding: 5px;
Position: absolute;
Bottom: 125%;
Left: 50%;
Transform: translateX(-50%);
Border-radius: 4px;
.tooltip:hover .tip {
Visibility: visible;
</style>
</head>
<body>
<div class=”tooltip”>
Hover me
<span class=”tip”>Tooltip Text</span>
</div>
</body>
</html>
*table styling*
<!DOCTYPE html>
<html>
<head>
<style>
Table {
Border-collapse: collapse;
Width: 50%;
Margin: auto;
Td, th {
Border: 1px solid #999;
Padding: 8px;
Text-align: center;
}
Th {
Background-color: #eee;
</style>
</head>
<body>
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>24</td></tr>
<tr><td>Bob</td><td>30</td></tr>
</table>
</body>
</html>
*text shadow and box shadow*
<!DOCTYPE html>
<html>
<head>
<style>
H1 {
Text-shadow: 2px 2px 5px gray;
Div {
Box-shadow: 4px 4px 8px lightgray;
Padding: 20px;
</style>
</head>
<body>
<h1>Shadow Text</h1>
<div>Box with shadow</div>
</body>
</html>
*responsive layout in media queries*
<!DOCTYPE html>
<html>
<head>
<style>
Body {
Background-color: lightblue;
@media (max-width: 600px) {
Body {
Background-color: lightcoral;
</style>
</head>
<body>
<h2>Resize the browser window</h2>
</body>
</html>
