Acerca de la página

2,461 Anes_unk

Abrir en el editor Publica tu código

Recomendado

25 February 2025

Un código de securearray494

22 January 2025

contraseña de inicio de sesión simple

10 December 2025

Minero Doge

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>About Us</title>
    <link rel="stylesheet" href="styles.css">
</head> 
<body>
    <header>
        <h1>Drx Development</h1>
    </header>
    <div class="intro">
        <p>Welcome to our website! We offer a range of specialized services to ensure your success online.</p>
    </div>
    <div class="container">
        <div class="feature-box">
            <div class="icon">⚡</div>
            <h2>Fast Response</h2>
            <p>Our high-speed infrastructure and advanced caching techniques provide exceptional load times.</p>
        </div>
        <div class="feature-box">
            <div class="icon">????</div>
            <h2>Security</h2>
            <p>Advanced security protocols and robust firewalls protect your information.</p>
        </div>
        <div class="feature-box">
            <div class="icon">✔️</div>
            <h2>Reliability</h2>
            <p>We guarantee uninterrupted service and a seamless online experience.</p>
        </div>
        <div class="feature-box">
            <div class="icon">➕</div>
            <h2>Customization</h2>
            <p>Our hosting solutions offer extensive customization options.</p>
        </div>
        <div class="feature-box">
            <div class="icon">⬆️</div>
            <h2>Scalability</h2>
            <p>Our hosting solutions are designed to be flexible and scalable.</p>
        </div>
        <div class="feature-box">
            <div class="icon">????</div>
            <h2>Support</h2>
            <p>24/7 support is available to assist you with any inquiries.</p>
        </div>
    </div>
    <footer>
        <p>© 2024 Anes Development. All rights reserved.</p>
    </footer>
</body>
</html>

CSS

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #0d0d2b;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    line-height: 1.6;
}

header {
    background: linear-gradient(135deg, rgba(29, 29, 69, 0.8), rgba(9, 9, 41, 0.8));
    width: 100%;
    padding: 60px 0;
    text-align: center;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}

h1 {
    margin: 0;
    color: #ffffff;
    font-size: 56px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
    letter-spacing: 2px;
}

.intro {
    text-align: center;
    margin: 20px;
    font-size: 22px;
    color: #cccccc;
    padding: 0 20px;
    max-width: 800px;
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    padding: 20px;
}

.feature-box {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.icon {
    font-size: 60px;
    margin-bottom: 20px;
    color: #ffffff;
    transition: transform 0.3s ease;
}

.feature-box:hover .icon {
    transform: scale(1.2);
}

h2 {
    font-size: 30px;
    margin: 10px 0;
    color: #ffffff;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    letter-spacing: 1px;
}

p {
    margin: 0;
    color: #cccccc;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

footer {
    color: #e0e0e0;
    padding: 20px;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    width: 100%;
    position: relative;
    transition: background-color 0.3s ease;
    margin-top: auto;
}

footer:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    h1 {
        font-size: 40px;
    }
    .intro {
        font-size: 18px;
    }
    .feature-box {
        padding: 20px;
    }
}