Un code de Skyrreum

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

23 February 2024

Modèle gratuit de page d'accueil

12 April 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="css/styles.css">
    <link rel="shortcut icon" type="x-icon" href="images/Logo.jpg">
    <title>Skyrreum Info</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">Skyrreum</a>
        <nav class="navigation">
            <a href="#services">Sur moi</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

<section class="main">
        <div>
            <h2>Salut, je suis Skyrreum<br><span>Développeur</span></h2>
            <h2>Je suis étudiant, développeur et retextureur Français</h2>
        </div>
    </section>

<section class="cards" id="services">
        <h2 class="title">Sur moi</h2>
        <div class="content">
            <div class="card">
                <div class="icon">
                    <i class="fab fa-discord"></i>
                </div>
                <div class="info">
                    <h3>Mon Discord</h3>
                    <p>Pseudo: skyrreum</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-language"></i>
                </div>
                <div class="info">
                    <h3>Langages</h3>
                    <p>Je parle Français et Anglais.</p>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-user"></i>
                </div>
                <div class="info">
                    <h3>Age</h3>
                    <p>J'ai 15 ans</p>
                </div>
            </div>
        </div>
    </section>

<section class="cards contact" id="contact">
        <h2 class="title">Travaillons ensemble</h2>
        <div class="content">
            <div class="card" style="height: 250px;">
                <div class="icon">
                    <i class="fab fa-discord"></i>
                    <i class="fas fa-globe"></i>
                </div>
                <div class="info">
                    <h3>Mon Serveur de Leak</h3>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
                    <a href="https://discord.gg/invite/xHdsZUKpDj" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fas fa-globe"></i>
                </div>
                <div class="info">
                    <h3>Mon Site</h3>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
                    <a href="https://sk-leak.mysellauth.com" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                </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>Skyrreum</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: #dddddd;
    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: #000000;
    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: #000000;
    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: #dddddd;
    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;
    }
}

Un code de Skyrreum

Recommandé

Modèle gratuit de page d'accueil

Un code par fadlanbryan22

illusion de profondeur

HTML

CSS

JS

Recommandé

Modèle gratuit de page d'accueil

Un code par fadlanbryan22

illusion de profondeur

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS