Flex Samples
Example of a responsive Flexbox layout for the homepage of "Varanasi Software Junction". This layout will adapt to different screen sizes and provide a clean and organized presentation of the company's information:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Varanasi Software Junction</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #444;
padding: 10px 0;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 15px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
.feature {
flex: 1 1 250px;
background-color: #f0f0f0;
border-radius: 5px;
padding: 20px;
margin: 10px;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Varanasi Software Junction</h1>
<p>Building the future of software</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<div class="feature">
<h2>Quality Assurance</h2>
<p>We ensure high quality standards in all our projects.</p>
</div>
<div class="feature">
<h2>Responsive Design</h2>
<p>Our websites and applications are optimized for all devices.</p>
</div>
<div class="feature">
<h2>Expert Team</h2>
<p>Our team consists of highly skilled and experienced professionals.</p>
</div>
</div>
<footer>
<p>© 2024 Varanasi Software Junction. All rights reserved.</p>
</footer>
</body>
</html>
```
This code creates a simple and responsive homepage layout using Flexbox. The header contains the company name and slogan, followed by a navigation bar. The main content area is divided into three sections (features), each showcasing a different aspect of the company. Finally, a footer at the bottom contains copyright information. This layout will adjust its appearance based on the screen size, making it suitable for various devices.
Below is a sample registration page layout using Flexbox. This layout is responsive and adjusts to different screen sizes:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page - Varanasi Software Junction</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form button {
width: 100%;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.form button {
background-color: #333;
color: #fff;
cursor: pointer;
}
@media (min-width: 768px) {
.form {
width: 400px;
}
}
</style>
</head>
<body>
<div class="container">
<form class="form" action="#">
<h2>Register</h2>
<input type="text" name="username" placeholder="Username" required>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<input type="password" name="confirmPassword" placeholder="Confirm Password" required>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
```
This code creates a registration page with a simple form. The form includes fields for the username, email, password, and confirm password, along with a register button. The layout is centered vertically and horizontally on the page using Flexbox. Additionally, media queries are used to adjust the width of the form container for larger screens, providing a better user experience.
Contact us for software training, education or development
.png)
0 Comments