CSS BING Like

Vous souhaitez une présentation façon BING de Microsoft ? Voici un petit code CSS qui va vous aider dans le projet. Je viens de le réaliser pour un ami qui souhaitait ce genre de mise en page

Le code HTML de la page index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple Bing</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">Exemple Bing</div>
        <nav>
            <a href="#">Images</a>
            <a href="#">Vidéos</a>
            <a href="#">Actualités</a>
            <a href="#">Cartes</a>
        </nav>
    </header>
    <main>
        <div class="search-container">
            <input type="text" class="search-input" placeholder="Recherche...">
            <button class="search-btn">Rechercher</button>
        </div>
    </main>
    <footer>
        <p>&copy; 2023 Exemple Bing. Tous droits réservés.</p>
    </footer>
</body>
</html>

Le code CSS du fichier styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f3f3f3;
}

header {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

nav a {
    margin-left: 1rem;
    text-decoration: none;
    color: #333;
}

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 100px);
}

.search-input {
    width: 400px;
    height: 2rem;
    padding: 0 1rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 1rem;
}

.search-btn {
    display: inline-block;
    margin-left: 1rem;
    padding: 0.5rem 1rem;
    background-color: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 1rem;
    cursor: pointer;
}

.search-btn:hover {
    background-color: #3c7bcf;
}

footer {
    background-color: #fff;
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

Le résultat obtenu !