Skip to content

Instantly share code, notes, and snippets.

@Nicholas-k-web

Nicholas-k-web/index.html

Created February 8, 2025 08:07
Show Gist options
  • Save Nicholas-k-web/77da88c88aca594488fb087c7d9f9d2b to your computer and use it in GitHub Desktop.
Save Nicholas-k-web/77da88c88aca594488fb087c7d9f9d2b to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Viewport" content="width=device-width,initial-scale=1.0">
<title>Nicholas codes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</div>
<form>
<input type="text">
<input id="firstname" required>
<input name="Nicholas">
<input email="karuganicholas04@gmail.com">
<input contact="+254790737878">
<input location="Nairobi">
<button>submit</button>
</form>
</body>
</html>
Raw
style.css
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
gap: 15px;
}
.box {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
font-size: 20px;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.1);
background-color: #2980b9;
}
@Nicholas-k-web
Copy link
Author

Good

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment