Un modello di pagina web per "Anes Development" con un messaggio di benvenuto e la navigazione.

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

27 May 2025

un sistema creato con directory

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 modello di pagina web per "Anes Development" con un messaggio di benvenuto e la navigazione.

Consigliato

Animazione

Un codice di alejandrokundrah

un sistema creato con directory

HTML

CSS

JS

Consigliato

Animazione

Un codice di alejandrokundrah

un sistema creato con directory

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS