Untitled

avatar
unknown
html
2 months ago
4.5 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Programming</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="navbar">
        <h1 class="logo">Pro Connect</h1>
        <ul class="menu">
            <li>
                <a href="#">Features</a>
            </li>
            <li>
                <a href="#">Pricing</a>
            </li>
            <li>
                <a href="#">Support</a>
            </li>
            <li>
                <a href="#">Pricing</a>
            </li>
            <li>
                <a href="#">Support</a>
            </li>
        </ul>
        <div class="nav-buttons">
            <div>
                <h3>John Smith</h3>
                <p>Admin</p>
            </div>
            <div class="circle">JS</div>
        </div>
    </div>
    <div class="main-container">
        <div class="left-box">
            <h1 class="title">Build Your Professional Portfolio</h1>
            <h3>Showcase your skills, experience, and projects to potential employers.</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, molestias placeat perferendis debitis hic
                at dolorem architecto magni veritatis laborum assumenda maxime totam odio. Est similique natus ipsa
                aperiam sapiente!</p>

            <ul class="bullet-points">
                <li> Real-time collaboration</li>
                <li> Adavance reporting</li>
                <li> Entrerprise Grade</li>
            </ul>

            <div class="buttons">
                <button class="btn1">Get Started</button>
                <button class="btn2">Learn More</button>
            </div>
        </div>
        <div class="right-box">
            <h1>Start your free trial</h1>
            <form>
                <div>
                    <label for="name">Full Name</label>
                    <input type="text" id="name" placeholder="Full Name">
                </div>
                <div>
                    <label for="email">Email Address</label>
                    <input type="email" id="email" placeholder="Email Address">
                </div>
                <div>
                    <label for="password">Password</label>
                    <input type="password" id="password" placeholder="Password">
                </div>

                <div class="checkbox-div">
                    <input type="checkbox" class="checkbox">
                    <label>I agree to the terms and conditions</label>
                </div>
                <button type="submit">Create Account</button>
            </form>
            <p>Already have an account? <a href="#" class="signin">Sign In</a></p>
        </div>
    </div>
    
    <!-- Progress Bar -->
    <div class="stats-card">
            <div class="stat-item">
                <p class="stat-label">PROJECT COMPLETION</p>
                <div class="progress-container">
                    <div class="progress-bar blue-bar" style="width: 80%;"></div>
                </div>
                <p class="stat-value">80%</p>
            </div>
           
    </div>
   


    <h1 class="hello">Hello <span class="world">world</span> bangladesh</h1>


    <!-- Status Box -->
    
    <div class="box1">
        <div class="pricing-card">
            <h3 class="card-header">Free Website Builder</h3>
            <div class="price-section">
                <h1 class="price">$0</h1>
                <span class="price-text">and up</span>
            </div>
            <button class="pricing-btn">START FOR FREE</button>
            <p class="card-footer">No Credit Card Required</p>
        </div>
    </div>

    <!-- Course Card -->

    <div class="course-card">
        <div class="card-top">
            <h2 class="course-title">CSE 4165: Web Programming</h2>
            <p class="course-prof">Prof. Rahman</p>
        </div>
        <div class="card-bottom">
            <div class="course-progress-container">
                <div class="course-progress-bar" style="width: 75%;"></div>
            </div>
            <div class="course-info">
                <span class="progress-text">Progress: 75%</span>
                <span class="grade-text">Grade: A</span>
            </div>
        </div>
    </div>
</body>



</html>
Editor is loading...
Leave a Comment