Un modèle de page Web pour « Anes Development » avec un message de bienvenue et une navigation.

Ouvrir dans l'éditeur Publiez votre code

Recommandé

29 July 2024

Extrait d'animation de chargement CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anes Development</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;600&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <ul class="nav-links">
                <li><a href="">Home</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="" target="_blank">Contact</a></li>
            </ul>
            <div class="auth-buttons">
                <a href="Login.html">
                    <button class="btn login">Login</button>
                </a>
            </div>
        </nav>
    </header>

<main>
        <section class="hero">
            <div class="hero-content">
                <div class="hero-text">
                    <div class="welcome-message">Welcome To Anes Development</div>
                    <p class="sub-message">Welcome dear customer, to continue searching and purchasing, please choose the item you wish to buy. If you encounter any issues, feel free to contact us via our Discord.</p>
                </div>
            </div>
        </section>
    </main>

<footer class="custom-footer">
        <div class="footer-section">
            <div class="footer-column">
                <h3>Contact Us</h3>
                <p>Email: <a href="mailto:aneschemma51@gmail.com">aneschemma51@gmail.com</a></p>
                <p>Website: <a href="https://www.web-leb.com/" target="_blank">Webleb</a></p>
            </div>
            <div class="footer-column">
                <h3>Payment Methods</h3>
                <div class="payment-methods">
                    <img src="https://cdn.discordapp.com/attachments/1276543088457683015/1281700630716616838/visa.png.png?ex=66dcac3b&is=66db5abb&hm=989383a99a2e62d6293980b1fb98d67a9c5d80f6863bfbedf48a1d4739a5863a&" alt="Visa">
                    <img src="https://cdn.discordapp.com/attachments/1276543088457683015/1281700631223992361/mastercard.png.png?ex=66dcac3b&is=66db5abb&hm=3dac6cd16463dad6ec1094adf933dab5ca3f20c3ea8791c34a3ba7dda8119d1b&" alt="MasterCard">
                    <img src="https://media.discordapp.net/attachments/1276543088457683015/1281700631853142131/paypal.png.png?ex=66dd54fb&is=66dc037b&hm=d5cb74dbf617c6c59259d97a662784fe297d5a447e5ba4959274c4ecbeb20f52&=&format=webp&quality=lossless" alt="PayPal">
                </div>
            </div>
            <div class="footer-column">
                <h3>Follow Us</h3>
                <ul>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Instagram</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>© 2024 Anes Development. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

CSS

body {
    background-color: #000000;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Poppins', sans-serif;
    margin: 0;
}
header {
    background-color: rgba(0, 0, 0, 0.8);
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: linear-gradient(90deg, #000000, #6d30084f);
    position: relative;
    z-index: 100;
}
.nav-links {
    display: flex;
    gap: 30px;
}
.nav-links a {
    text-decoration: none;
    color: #ffffff;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}
.nav-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2c2a29c9;
    z-index: -1;
    transition: opacity 0.3s;
    opacity: 0;
    border-radius: 8px;
}
.nav-links a:hover {
    color: #ffffff;
    border-color: #ff6700;
}
.nav-links a:hover::before {
    opacity: 0.2;
}
.auth-buttons {
    display: flex;
    gap: 10px;
}
.btn {
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 5px;
}
.btn.login {
    background-color: #2a2a2a;
    color: #ffffff;
}
.btn.start {
    background-color: #ff6700;
    color: #ffffff;
}
.btn:hover {
    background-color: #3d3d3d;
}
.hero {
    display: flex;
    align-items: center;
    height: 100vh;
    padding: 0 80px;
    background: none;
}
.hero-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 1120%;
    max-width: 1400px;
    padding: 40px;
    border-radius: 40px;
    position: relative;
    z-index: 1;
    direction: ltr;
}
.hero-text {
    flex: 2;
    padding-left: 10px;
    color: #ffffff;
    text-align: right;
}
.hero-logo {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}
.hero-logo img {
    max-width: 120%;
}
.welcome-message {
    font-family: 'Cairo', sans-serif;
    font-size: 70px;
    color: #ff6700;
    animation: fadeIn 2s ease-out;
    white-space: nowrap;
    margin-bottom: 20px;
}
.sub-message {
    font-size: 30px;
    color: #f7f7f7;
    line-height: 1.6;
    margin-top: 40px;
    animation: fadeIn 2s ease-out;
    font-family: 'Cairo', sans-serif;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.custom-footer {
    color: #e0e0e0;
    padding: 40px;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
}
.footer-section {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}
.footer-column {
    flex: 1;
}
.footer-column h3 {
    margin-top: 0;
    color: #ffffff;
    font-size: 20px;
}
.footer-column p,
.footer-column ul {
    margin: 0;
    color: #cccccc;
}
.footer-column ul {
    list-style-type: none;
    padding: 0;
}
.footer-column ul li {
    margin-bottom: 10px;
}
.footer-column ul li a {
    color: #e0e0e0;
    text-decoration: none;
}
.footer-column ul li a:hover {
    text-decoration: underline;
}
.payment-methods img {
    width: 40px;
    margin-right: 10px;
    vertical-align: middle;
}
.footer-bottom {
    text-align: center;
}

Un modèle de page Web pour « Anes Development » avec un message de bienvenue et une navigation.

Recommandé

Jeu de serpent

Un code de Mete

Extrait d'animation de chargement CSS

HTML

CSS

JS

Recommandé

Jeu de serpent

Un code de Mete

Extrait d'animation de chargement CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS