# **Building a Stunning Lobe Website Clone with HTML & CSS**

**Introduction**
Lobe,is a product by Microsoft,that simplifies machine learning for everyone no coding required. In this article, i'll walk through the process of building a clean and modern Lobe website clone using HTML and CSS. This guide covers the structure, styling, and layout techniques used to recreate a responsive and visually appealing interface.
An overview of the Project
The Lobe website consists of these key sections:
- [ ] A header with navigation and a "Download" button
- [ ] A hero section highlighting Lobe's machine learning features
- [ ] A video preview section
- [ ] A testimonial section promoting Lobe's training capabilities
- [ ] A footer with helpful links and social media icons

Now let's breakdown our already outlined sections.

1. Header and Navigation: The navigation includes a logo, a list of menu items, and a download button.

<header>
    <nav class="nav">
        <div class="logo">
            <span class="lobe">lobe</span>
            <img src="images/lobe-icon.png" alt=""> 
        </div>
        <div class="nav-lists">
            <ul>
                <li>Overview</li>
                <li>Examples</li>
                <li><b>Tour</b></li>
                <li>Blog</li>
                <li>Help</li>
            </ul>
        </div>
        <div>
            <button class="download">Download</button>
        </div>
    </nav>
</header>

2. Hero Section: This section introduces Lobe with a bold headline and a short description.

<section class="hero">
    <div class="center">
        <h1>Lobe <span>Tour</span></h1>
        <p>Build your first machine learning model in 10 minutes. <br>No code or experience required.</p>
    </div>
</section>

3. Features Section: The video preview gives users a sneak peek of Lobe's features.

<section class="features">
    <div class="hero-img">
       <img src="images/Video.jpg" alt="">
    </div>
</section>

4. Buttons & Hover Effects: The buttons have a rounded look with a hover effect.

.download {
    background-color: #04ddb2;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
}
.download:hover {
    background-color: #02b798;
}

5. Footer & Social Icons:We'll arrange the footer items using Flexbox.

.footer-div {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}
.icons i {
    background-color: #04ddb2;
    border-radius: 50%;
    color: #fff;
    padding: 10px;
    margin-right: 5px;
    cursor: pointer;
}

**Conclusion**
By using HTML and CSS, we've built a modern and responsive version of the Lobe website. This project is a great practice exercise for anyone looking to improve their frontend development skills.Will you be trying this out or something similar? Remember you can always customize it your style.