Modèle de page personnelle HTML CSS

30 malonjax000

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

20 June 2025

Modèle de tableau de bord d'administration HTML

29 July 2024

Évaluation des émojis

25 November 2024

Site Web de données sur les étudiants réactif

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My CodeHS Project</title>
    <style>
        body {
            background-color: #f4f4f9;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

header {
            background-color: #2c3e50;
            color: white;
            padding: 40px 20px;
            text-align: center;
        }

nav {
            background-color: #34495e;
            padding: 10px;
            text-align: center;
            position: sticky;
            top: 0;
        }

nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
            transition: color 0.3s;
        }

nav a:hover {
            color: #3498db;
        }

.container {
            max-width: 800px;
            margin: 30px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 8px;
        }

.profile-img {
            display: block;
            margin: 0 auto 20px;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid #2c3e50;
            object-fit: cover;
        }

h2 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }

ul {
            list-style-type: square;
            padding-left: 20px;
        }

.footer {
            text-align: center;
            padding: 20px;
            font-size: 0.9em;
            color: #777;
            margin-top: 40px;
        }

table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

table, th, td {
            border: 1px solid #ddd;
        }

th, td {
            padding: 12px;
            text-align: left;
        }

th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<header>
        <h1>Welcome to My Personal Page</h1>
        <p>A simple project built on CodeHS</p>
    </header>

<nav>
        <a href="#about">About</a>
        <a href="#interests">Interests</a>
        <a href="#skills">Skills</a>
    </nav>

<div class="container">
        <section id="about">
            <img src="https://codehs.com/static/img/logo.png" alt="Placeholder Profile" class="profile-img">
            <h2>About Me</h2>
            <p>Hello! This is a recreation of a web design project. This layout is designed to showcase basic HTML structures and CSS styling techniques learned in introductory computer science courses.</p>
        </section>

<section id="interests">
            <h2>My Interests</h2>
            <ul>
                <li>Web Development & Coding</li>
                <li>Digital Art and Design</li>
                <li>Video Game Mechanics</li>
                <li>Open Source Projects</li>
            </ul>
        </section>

<section id="skills">
            <h2>Technical Skills</h2>
            <table>
                <tr>
                    <th>Skill</th>
                    <th>Level</th>
                </tr>
                <tr>
                    <td>HTML5</td>
                    <td>Advanced</td>
                </tr>
                <tr>
                    <td>CSS3</td>
                    <td>Intermediate</td>
                </tr>
                <tr>
                    <td>JavaScript</td>
                    <td>Beginner</td>
                </tr>
            </table>
        </section>
    </div>

<div class="footer">
        <p>© 2023 Student Project | Created for CodeHS Web Design</p>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Game Editor</title>
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: #1e1e1e;
            color: white;
        }
        header {
            padding: 10px 20px;
            background: #252526;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #333;
        }
        .container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        #editor {
            width: 50%;
            height: 100%;
            background: #1e1e1e;
            color: #d4d4d4;
            border: none;
            padding: 15px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;
            resize: none;
            outline: none;
            border-right: 1px solid #333;
        }
        #preview {
            width: 50%;
            height: 100%;
            background: white;
            border: none;
        }
        button {
            background: #007acc;
            color: white;
            border: none;
            padding: 8px 15px;
            cursor: pointer;
            border-radius: 3px;
            font-weight: bold;
        }
        button:hover {
            background: #005a9e;
        }
    </style>
</head>
<body>

<header>
    <div><strong>Game Editor</strong> (HTML/JS)</div>
    <button onclick="updatePreview()">Run Game</button>
</header>

<div class="container">
    <input id="editor" spellcheck="false"<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; overflow: hidden; background: #000; color: white; text-align: center; }
        canvas { border: 2px solid #555; background: #111; margin-top: 20px; }
    </style>
</head>
<body>
    <h3>Simple Square Move (Use Arrows)</h3>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

window.addEventListener('keydown', e => keys[e.code] = true);
        window.addEventListener('keyup', e => keys[e.code] = false);

function update() {
            if (keys['ArrowUp']) player.y -= player.speed;
            if (keys['ArrowDown']) player.y += player.speed;
            if (keys['ArrowLeft']) player.x -= player.speed;
            if (keys['ArrowRight']) player.x += player.speed;
            
            // Boundary checks
            player.x = Math.max(0, Math.min(canvas.width - player.size, player.x));
            player.y = Math.max(0, Math.min(canvas.height - player.size, player.y));
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.size, player.size);
        }

function loop() {
            update();
            draw();
            requestAnimationFrame(loop);
        }

loop();
    </script>
</body>
</html>/>
    <iframe id="preview"></iframe>
</div>

// Initialize preview on load
    window.onload = updatePreview;

// Optional: Tab key support in textarea
    document.getElementById('editor').addEventListener('keydown', function(e) {
        if (e.key == 'Tab') {
            e.preventDefault();
            var start = this.selectionStart;
            var end = this.selectionEnd;
            this.value = this.value.substring(0, start) + "    " + this.value.substring(end);
            this.selectionStart = this.selectionEnd = start + 4;
        }
    });
</script>

</body>
</html>

Recommandé

Modèle de tableau de bord d'administration HTML

Évaluation des émojis

Site Web de données sur les étudiants réactif

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS