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

2041 Anes_unk

Abrir en el editor Publica tu código

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

Recomendado

26 May 2025

Barra de navegación moderna HTML 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;
}

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

Recomendado

Un código de mironovbogdan341

Goku contra Vegeta

Barra de navegación moderna HTML CSS

HTML

CSS

JS

Recomendado

Un código de mironovbogdan341

Goku contra Vegeta

Barra de navegación moderna HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS