Plantilla de sitio web de presentaciones HTML y CSS

Abrir en el editor Publica tu código

Recomendado

25 September 2023

Interfaz de usuario del reloj: botón oscuro/claro

22 May 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" type="x-icon" href="images/Logo.jpg">
    <title>Reda Dev</title>
    
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-N26NW1ZG1M"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

gtag('config', 'G-N26NW1ZG1M');
    </script>
</head>
<body>
    <header>
        <a href="#" class="logo">Reda Dev</a>
        <nav class="navigation">
            <a href="#services">About Me</a>
            <a href="#contact">Contact</a>
            <div class="language-tab" onclick="toggleLanguages()">
                Language
                <div class="language-options" id="languageOptions">
                    <button onclick="setLanguage('ar')">Arabic</button>
                    <button onclick="setLanguage('de')">Deutsch</button>
                    <button onclick="setLanguage('?')">?</button>
                </div>
        </nav>
    </header>

<section class="main">
        <div>
            <h2>Welcome, I'm Reda Dev<br><span>Developer</span></h2>
            <h3>I'm a student, developer, and designer from Morocco</h3>
        </div>
    </section>

<section class="cards" id="services">
        <h2 class="title">About Me</h2>
        <div class="content">
            <div class="card">
                <div class="icon">
                    <i class="fab fa-python"></i>
                </div>
                <div class="info">
                    <h3>Programming</h3>
                    <p>I can create simple website, but I'm still learning programming</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-language"></i>
                </div>
                <div class="info">
                    <h3>Languages</h3>
                    <p>I speak Arabic, French .</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-user"></i>
                </div>
                <div class="info">
                    <h3>Age</h3>
                    <p>I'm 15 years old</p>
                </div>
            </div>
        </div>
    </section>

<section class="cards contact" id="contact">
        <h2 class="title">Let's Work Together</h2>
        <div class="content">
            <div class="card" style="height: 250px;">
                <div class="icon">
                    <i class="fas fa-envelope"></i>
                </div>
                <div class="info">
                    <h3>Email</h3>
                    <p>zouhrireda54@gmail.com</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fab fa-discord"></i>
                </div>
                <div class="info">
                    <h3>Discord</h3>
                    <p>Username: frechhh</p>
                </div>
            </div>
        </div>
    </section>
    <script>
        function setLanguage(language) {
            if (language === 'de') {
                window.location.href = 'deindex.html'; // Redirect to the German version
            } else if (language === 'ar') {
                window.location.href = 'arindex.html'; // Redirect to the Arabic version
            } else {
                // Redirect to the default version or any other language-specific version
                window.location.href = 'index.html';
            }
        }
        function toggleLanguages() {
    var options = document.getElementById("languageOptions");
    if (options.style.display === "none") {
        options.style.display = "block";
    } else {
        options.style.display = "none";
    }
}

</script>
    <footer class="footer">
        <p class="footer-title">Copyright © <span>Reda Dev</span></p>
    </footer>
    
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TG3SNWNX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    
</body>
</html>
 
 --------------------------------------------------------------------------------------------------------------------
 German Version : 
 
 <!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" type="x-icon" href="images/Logo.jpg">
    <title>Reda Dev</title>
    
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-N26NW1ZG1M"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

gtag('config', 'G-N26NW1ZG1M');
    </script>
</head>
<body>
    <header>
        <a href="#" class="logo">Reda Dev</a>
        <nav class="navigation">
            <a href="#services">Über Mich</a>
            <a href="#contact">Kontakt</a>
            <div class="language-tab" onclick="toggleLanguages()">
                Sprache
                <div class="language-options" id="languageOptions">
                    <button onclick="setLanguage('en')">Englisch</button>
                    <button onclick="setLanguage('ar')">Arabisch</button>
                </div>
        </nav>
    </header>

<section class="main">
        <div>
            <h2>Willkommen, Ich bin Reda Dev<br><span>Entwickler</span></h2>
            <h3>Ich bin ein Schüler, Entwickler und Designer aus Marokko</h3>
        </div>
    </section>

<section class="cards" id="services">
        <h2 class="title">Über Mich</h2>
        <div class="content">
            <div class="card">
                <div class="icon">
                    <i class="fab fa-python"></i>
                </div>
                <div class="info">
                    <h3>Programmierung</h3>
                    <p>Ich kann eine einfache Website erstellen, aber ich lerne immer noch das Programmieren</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-language"></i>
                </div>
                <div class="info">
                    <h3>Sprachen</h3>
                    <p>Ich spreche Arabisch, Französisch .</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-user"></i>
                </div>
                <div class="info">
                    <h3>Alter</h3>
                    <p>Ich bin funfzehn Jahre alt</p>
                </div>
            </div>
        </div>
    </section>

<section class="cards contact" id="contact">
        <h2 class="title">Lass uns zusammenarbeiten</h2>
        <div class="content">
            <div class="card" style="height: 250px;">
                <div class="icon">
                    <i class="fas fa-envelope"></i>
                </div>
                <div class="info">
                    <h3>E-Mail</h3>
                    <p>zouhrireda54@gmail.com</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fab fa-discord"></i>
                </div>
                <div class="info">
                    <h3>Discord</h3>
                    <p>Benutzername: frechhh</p>
                </div>
            </div>
        </div>
    </section>
    <script>
        function setLanguage(language) {
            if (language === 'de') {
                window.location.href = 'deindex.html'; // Redirect to the German version
            } else if (language === 'ar') {
                window.location.href = 'arindex.html'; // Redirect to the Arabic version
            } else {
                // Redirect to the default version or any other language-specific version
                window.location.href = 'index.html'; // Assuming index.html is your default version
            }
        }
        function toggleLanguages() {
    var options = document.getElementById("languageOptions");
    if (options.style.display === "none") {
        options.style.display = "block";
    } else {
        options.style.display = "none";
    }
}

</script>
    <footer class="footer">
        <p class="footer-title">Urheberrecht © <span>Reda Dev</span></p>
    </footer>
    
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TG3SNWNX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    
</body>
</html>
 
 ------------------------------------------------------------------------------------------------------------
 Arabic Version : 
 
 <!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" type="x-icon" href="images/Logo.jpg">
    <title>RedaDev</title>
    
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-N26NW1ZG1M"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

gtag('config', 'G-N26NW1ZG1M');
    </script>
</head>
<body>
    <header>
        <a href="#" class="logo">يحيى ديف</a>
        <nav class="navigation">
            <a href="#services">عني</a>
            <a href="#contact">الاتصال</a>
            <div class="language-tab" onclick="toggleLanguages()">
                اللغة
                <div class="language-options" id="languageOptions">
                    <button onclick="setLanguage('en')">الانجليزية</button>
                    <button onclick="setLanguage('de')">الالمانية</button>
                </div>
        </nav>
    </header>

<section class="main">
        <div>
            <h2>مرحبًا، أنا يحيى ديف<br><span>مطور</span></h2>
            <h3>أنا طالب ومطور ومصمم من المغرب</h3>
        </div>
    </section>

<section class="cards" id="services">
        <h2 class="title">عني</h2>
        <div class="content">
            <div class="card">
                <div class="icon">
                    <i class="fab fa-python"></i>
                </div>
                <div class="info">
                    <h3>البرمجة</h3>
                    <p>أيمكنني إنشاء موقع ويب بسيط، لكني مازلت أتعلم البرمج</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-language"></i>
                </div>
                <div class="info">
                    <h3>اللغات</h3>
                    <p>أستطيع التحدث باللغة العربية والفرنسية والإنجليزية</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-user"></i>
                </div>
                <div class="info">
                    <h3>العمر</h3>
                    <p>أنا في خمسة عشر من العمر</p>
                </div>
            </div>
        </div>
    </section>

<section class="cards contact" id="contact">
        <h2 class="title">لنعمل معًا</h2>
        <div class="content">
            <div class="card" style="height: 250px;">
                <div class="icon">
                    <i class="fas fa-envelope"></i>
                </div>
                <div class="info">
                    <h3>البريد الإلكتروني</h3>
                    <p>zouhrireda54@gmail.com</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fab fa-discord"></i>
                </div>
                <div class="info">
                    <h3>ديسكورد</h3>
                    <p>اسم المستخدم: frechhh</p>
                </div>
            </div>
        </div>
    </section>
    <script>
        function setLanguage(language) {
            if (language === 'de') {
                window.location.href = 'deindex.html'; // Redirect to the German version
            } else if (language === 'ar') {
                window.location.href = 'arindex.html'; // Redirect to the Arabic version
            } else {
                // Redirect to the default version or any other language-specific version
                window.location.href = 'index.html'; // Assuming index.html is your default version
            }
        }
        function toggleLanguages() {
    var options = document.getElementById("languageOptions");
    if (options.style.display === "none") {
        options.style.display = "block";
    } else {
        options.style.display = "none";
    }
}

</script>
    <footer class="footer">
        <p class="footer-title">حقوق الطبع © <span>رضا ديف</span></p>
    </footer>
    
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TG3SNWNX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    
</body>
</html>

-------------------------------------------------------------------------------------------------

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

header {
    background-color: #f0f0f0;
    width: 100%;
    position: fixed;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 200px;
    font-style: oblique;
}

.logo {
    text-decoration: none;
    color: #0f2f88;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.8em;
    font-style: oblique;
}

.navigation {
    display: flex;
    align-items: center;
}

.navigation a {
    color: #062d99;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    padding-left: 30px;
}

.navigation a:hover {
    color: #000000;
}

.language-tab {
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    margin-left: 20px; /* Adjusted margin to separate it from other navigation links */
    color:#062d99
}
.language-tab:hover a{
    color: #000000; /* Change to the desired color */
}
.language-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f0f0f0; /* Changed background color to match navigation background */
    border: 1px solid #ccc;
    border-top: none;
    z-index: 1;
}
.language-tab:active {
    color: #000; /* Change to the desired color */
}

.language-options button {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: left;
    border: none;
    background-color: transparent;
}
.language-options button:hover {
    background-color: #c7c7c7; /* Changed hover background color */
}

.section {
    padding: 100px 200px;
}

.main {
    width: 100%;
    min-height: 100vh;
    background: url(images/v1016-b-09.jpg) no-repeat;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.main div {
    text-align: center; /* Center the text inside the div */
}

.main h2 {
    color: #ffffff;
    font-size: 2.4em;
    font-weight: 700;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-style: oblique;
    
}

.main h2 span {
    display: inline-block;
    margin-top: 10px;
    color: #0163f79d;
    font-size: 3em;
    font-weight: 800;
    font-style: oblique;
    
}

.main h3 {
    color: #ffffff;
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 10px;
    margin-bottom: 30px;
    font-style: oblique;
    border-top: 3px #0018f0 double;
    border-right: 3px #0018f0 double;
    border-bottom: 3px #0018f0 double;
    border-left: 3px #0018f0 double;
}

.title {
    display: flex;
    justify-content: center;
    color: #000000;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 30px;
}

.content {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.card {
    background-color: #ffffff;
    width: 21.25em;
    box-shadow: 0 5px 25px rgba(1 1 1 / 15%);
    border-radius: 10px;
    padding: 25px;
    margin: 15px;
    transition: 0.7s ease;
}

.card:hover {
    transform: scale(1.1);
}

.card .icon {
    color: #5e41ff;
    font-size: 8em;
    text-align: center;
}

.info {
    text-align: center;
}

.info h3 {
    color: #000000;
    font-size: 1.2em;
    font-weight: 700;
    margin: 10px;
}

.projects {
    background-color: #ffffff;
}

.projects .content {
    margin-top: 30px;
}

.project-card {
    background-color: #ffffff;
    border: 1px solid #fff;
    min-height: 14em;
    width: 23em;
    overflow: hidden;
    border-radius: 10px;
    margin: 20px;
    transition: 0.7s ease;
}

.project-card:hover {
    transform: scale(1.1);
}

.project-card:hover .project-image {
    opacity: 0.9;
}

.project-image img {
    width: 100%
}

.project-info {
    padding: 1em;
}

.project-category {
    font-size: 0.8em;
    color: #000;
}

.project-title {
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 10px;
}

.more-details {
    text-decoration: none;
    color: #3a6cf4;
}

.more-details:hover {
    color: #601cfc;
}

.contact .icon {
    font-size: 4.5em;
}

.contact .info h3 {
    color: #000;
}

.contact .info p {
    font-size: 1.5em;
}

.footer {
    background-color: #000016;
    color: #fff;
    padding: 2em;
    display: flex;
    justify-content: space-between;
}

.footer-title {
    font-size: 1.3em;
    font-weight: 600;
}

.footer-title span {
    color: #5e41ff;
}

.footer .social-icons a {
    font-size: 1.3em;
    padding: 0 12px 0 0;
}

@media (max-width:1023px) {
    header {
        padding: 12px 20px;
    }

.navigation a {
        padding-left: 10px;
    }

.title {
        font-size: 1.8em;
    }

section {
        padding: 80px 20px;
    }

.main-content h2 {
        font-size: 1em;
    }

.main-content h3 {
        font-size: 1.6em;
    }

.content {
        flex-direction: column;
        align-items: center;
    }

}

@media (max-width:641px) {
    body {
        font-size: 12px;
    }

.main-content h2 {
        font-size: 0.8em;
    }

.main-content h3 {
        font-size: 1.4em;
    }
}

Plantilla de sitio web de presentaciones HTML y CSS

Recomendado

Efecto de botón de burbuja

Interfaz de usuario del reloj: botón oscuro/claro

Gran explosión html

HTML

CSS

JS

Recomendado

Efecto de botón de burbuja

Interfaz de usuario del reloj: botón oscuro/claro

Gran explosión html

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS