Acerca de la página

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

Recomendado

21 October 2024

Viejo proyecto...nuevas vibraciones

9 September 2024

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

Acerca de la página

Recomendado

Viejo proyecto...nuevas vibraciones

Generador de contraseñas

Página de destino

HTML

CSS

JS

Recomendado

Viejo proyecto...nuevas vibraciones

Generador de contraseñas

Página de destino

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS