A Code by Skyrreum

Open In Editor Publish Your Code Need a Website?

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

A Code by Skyrreum

Recommended

Animated Weather Card

Login Form with Social Login

HTML Product Website Template

HTML

CSS

JS

Recommended

Animated Weather Card

Login Form with Social Login

HTML Product Website Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS