À propos de la page

2,619 Anes_unk

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

13 October 2026

Effet de cœur animé Dil avec HTML et JavaScript

26 May 2025

Un code par mironovbogdan341

1 January 2025

Un code par codex

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