Informazioni sulla pagina

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

2 June 2025

Un codice di youssefdahroug2005

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

Informazioni sulla pagina

Consigliato

Un codice di youssefdahroug2005

Portafoglio reattivo

Progettare un algoritmo

HTML

CSS

JS

Consigliato

Un codice di youssefdahroug2005

Portafoglio reattivo

Progettare un algoritmo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS