Una plantilla de página web para "Anes Development" con un mensaje de bienvenida y navegación.

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

13 June 2025

menú de la barra de navegación

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;
}

Una plantilla de página web para "Anes Development" con un mensaje de bienvenida y navegación.

Recomendado

Un código de ashimadison8

Botón de página no válida

menú de la barra de navegación

HTML

CSS

JS

Recomendado

Un código de ashimadison8

Botón de página no válida

menú de la barra de navegación

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS