Plantilla de página personal HTML CSS

232 malonjax000

Abrir en el editor Publica tu código

Recomendado

4 December 2024

Página de inicio de CodePen ThreeJS 'Portal Planes' con Matcaps

14 January 2025

Ejemplo de página web de portafolio

14 October 2024

Una plantilla de página web para "Anes Development" con un mensaje de bienvenida y navegación.

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>

CSS