Offline Notepad View raw

Shared snapshot

11. 5. 8. 9. 7.

5. Design system development
11. Designing Website Sections and cntent
8. Designing Sections and Adding Contents 
9. framework strategy
7. early protype


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

    <title>Nurse Hiring Platform</title>
    <style>/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}

h1, h2, h3 {
    color: #333;
    margin: 0;
}

a {
    color: #1a73e8;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Container */
.container {
    width: 80%;
    margin: 0 auto;
}

/* Hero Section */
.hero {
    position: relative;
    background: url('hero-background.jpg') no-repeat center center/cover;
    color: white;
    text-align: center;
    padding: 120px 20px;
}

.hero-overlay {
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for better text visibility */
    padding: 40px;
    border-radius: 10px;
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    background-color: #1a73e8;
    color: white;
    padding: 15px 30px;
    font-size: 1.2em;
    border-radius: 5px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #155ab5;
}

/* Services Section */
.services {
    background-color: #f4f4f4;
    padding: 60px 20px;
    text-align: center;
}

.services h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
}

.service-item {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px 0;
    position: relative;
}

.service-item h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
}

.service-item p {
    font-size: 1em;
    margin-bottom: 20px;
}

.service-button {
    display: inline-block;
    background-color: #1a73e8;
    color: white;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.service-button:hover {
    background-color: #155ab5;
}

/* Contact Section */
.contact {
    padding: 60px 20px;
    text-align: center;
}

.contact h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form input, form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

form button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #155ab5;
}

/* Footer */
.footer {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

.footer p {
    margin: 0;
}
</style>
</head>
<body>
    <!-- Hero Section -->
    <header class="hero">
        <div class="hero-overlay">
            <div class="hero-content">
                <h1>Find the Perfect Nurse for Your Care Needs</h1>
                <p>Connecting patients with qualified nurses to provide personalized care.</p>
                <a href="#services" class="cta-button">Explore Our Services</a>
            </div>
        </div>
    </header>

    <!-- Services Section -->
    <section id="services" class="services">
        <div class="container">
            <h2>Our Services</h2>
            <div class="service-item">
                <h3>Home Nursing</h3>
                <p>Professional nursing care provided in the comfort of your home.</p>
                <a href="#home-nursing-details" class="service-button">Know More</a>
            </div>
            <div class="service-item">
                <h3>Post-Surgery Care</h3>
                <p>Expert care to assist in recovery after surgery.</p>
                <a href="#post-surgery-care-details" class="service-button">Know More</a>
            </div>
            <div class="service-item">
                <h3>Specialized Care</h3>
                <p>Care for chronic illnesses and specialized medical needs.</p>
                <a href="#specialized-care-details" class="service-button">Know More</a>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <div class="container">
            <h2>Contact Us</h2>
            <form action="#" method="post">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" placeholder="Your Name" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="Your Email" required>
                
                <label for="message">Message:</label>
                <textarea id="message" name="message" placeholder="Your Message" rows="4" required></textarea>
                
                <button type="submit">Send Message</button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Nurse Hiring Platform. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>