Plantilla de sitio web de presentaciones HTML y CSS

Abrir en el editor Video Publica tu código

Recomendado

7 June 2025

Cómo crear una barra lateral de cuadrícula en CSS

4 August 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

Un código de alejandrokundrah

Cómo crear una barra lateral de cuadrícula en CSS

Cambio de realidad simulada

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

Cómo crear una barra lateral de cuadrícula en CSS

Cambio de realidad simulada

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS