Acerca de la página

2040 Anes_unk

Abrir en el editor Video Publica tu código

Recomendado

4 December 2025

Plantilla HTML para sitio web de portafolio

19 December 2025

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

Mala crianza

Plantilla HTML para sitio web de portafolio

Metehan

HTML

CSS

JS

Recomendado

Mala crianza

Plantilla HTML para sitio web de portafolio

Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS