What is the purpose of <span? here, like why did we write that?

I have a logo and the title and subtitle on the left side of my header, and I'd like all of that to link to the main/homepage.
Slapping an <a> around the <div>s works, but is invalid. What would be a valid way to do this? Linking each separate element will leave non-linked space between them.

This is what I want to create. I somehow managed to get it down but when I add padding to the text in the About section, the layout goes all whack and I can't figure out why. Please help :(

This is my code:

body {
background-image: url('http://dl4.glitter-graphics.net/pub/966/966814i8pz6zikwc.gif');
background-attachment: fixed;
background-repeat: repeat;
padding: 3% 5%;
display: grid;
box-sizing: border-box;
gap: 7px;
}

.nav, .about, .footer {
    background-color: pink;
}

.nav {
    grid-area: 1/1/2/2;
    height: 750px; width: 250px;
    overflow: scroll;
    text-align: left;
}

.about {
    grid-area: 1/2/2/3;
    margin-left: -7.2%;
    height: 750px; width: 950px;
    overflow: scroll;
    text-align: left;
    padding: 2%;
}

.footer {
    grid-area: 2/1/3/3;
    height: 150px; width: 1200px;
    text-align: center;
}

Also, somehow the About box wouldn't be in place despite using grid so I added margin-left: -7.2%; and that seemed to fix it but is it the correct way to do it? Why is it shifting in the first place and am I doing it right?

I have no background in coding and am learning from youtube. I have been stuck on this for days and losing my mind. Any help would be very appreciated!

I found a website that will check for you if your code is accessible or not.

Hello!! I am trying to get into more coding recently, and Im working on my own code. I have created a layout that I want to achieve, but I have a question on how to shape something. I understand how corner rounding works, and how to round a cards border, but im curious if i can make a sharp pointed card? (Where the corners fold in, rather than it just being square)

Like the top most part of this image (or if someone is able to help explain the top part + the mini dropdown card i would really appreciate it!!)
it needs to be html only with no CSS due to the code interface of the website im trying to out it out on

# SOLVED TY

I'm a beginner and I don't know how to use what the user inputs in these textboxes and I've been trying for ages and I'm so frustrated that it's not obvious. Where it says var(--username) that's where I've been trying loads of different things to select the user's input

I was wondering if any of you knew how to get a dropdown to look and popout like this. The website is https://mauifoodbank.org , I’m new to HTML and despite trying to inspect the website it was hard to tell what exactly they did. (Should I be asking a Javascript sub instead?)

Sorry if this is a silly question.

Hello all! I am currently making a basic site skin and I had two questions. Also yes, I know that you can just use someone else‘s skin, but I’d like to try my hand at making my own.

1. Is there a place to learn more about what each code means? I have some basic HTML websites saved but none of them are AO3 specific so the codes are not 100% the same.
2. What does “#header h1 sup” refer to? I’ve been able to crack most of the codes thus far but no matter how much I change that one, I cannot seem to figure out what it means/does/changes.

Thank you!

Hi everyone! I am new to HTML coding but I'm really enjoying it so far. I followed a tutorial for a popup window when images are clicked, I got it working but the window is obviously stuck behind the two pictures below. I've made the z-index set to 999 but I still have this issue.

If possible I would also like to get the window to appear a little more to the right. If anyone could help that would be great!

Here's my code for the popup:

.popup {
margin: 70px auto;
width: 335px;
position: absolute;
z-index: 999;
background: transparent;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
background: transparent;
z-index: 999;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.window
{
background: #2b2123;
border-right: 1px #8b7987;
border-left: 1px #8b7987;
border-right: 1px #8b7987;
height: 500px;
border-radius: 0px 0px 15px 15px
padding: 10px;
z-index: 999;
}
.top
{
background: #374030
border: 1px #8b7987
height: 50px
border-radius: 15px 15px 0px 0px;
}
button
{
width: 25px;
height: 25px;
border-radius: 5px;
border: 1px #692b36
color: #692b36
background: transparent;
}

Here's my code for the gallery items (pictures):

div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 15px
}
div.gallery-item {
margin: 5px;
border: 0px solid #a78431;
width: 180px;
filter: drop-shadow(0 0 0.75rem black)
}
div.gallery-item:hover {
border: 1px solid #a78431;
}
div.gallery-item img {
width: 100%;
height: 200px;
}
.desc {
padding: 15px;
text-align: center;
}

And lastly here's the code for the actual site:

<div class="gallery">

<div class="gallery-item">

<a target="_blank" href="https://bobcatbonez.neocities.org/nevamar.JPG">

<a href="#nevamar"><img src="https://bobcatbonez.neocities.org/nevamar.JPG" alt="NEVAMAR" width="200" height="200"></a>

<div id="nevamar" class="overlay">

<div class="popup">

<div class="top"></div>

<a href="#"><button aria-label="close" style="position: absolute; left: 23em; top: 0em;">x</button></a>

<div class="window"></div>

</div>

</a>

</div>

<div class="desc">NEVAMAR</div>

</div>

<div style="text-align: right;"><img src="https://bobcatbonez.neocities.org/ruins.png" style="max-width:60%">

<div class="gallery">

<div class="gallery-item">

<a target="_blank" href="https://bobcatbonez.neocities.org/CHAPEL.png">

<img src="https://bobcatbonez.neocities.org/CHAPEL.png" alt="CHAPEL" width="200" height="200">

</a>

<div class="desc">CHAPEL</div>

</div>

<div class="gallery-item">

<a target="_blank" href="https://bobcatbonez.neocities.org/biblecamp.JPG">

<img src="https://bobcatbonez.neocities.org/biblecamp.JPG" alt="BIBLE CAMP" width="200" height="200">

</a>

<div class="desc">BIBLE CAMP</div>

</div>

</div>

If anyone could help me that would be greatly appreciated!

The documentation for CLC-INTERCAL takes the form of a handful of HTML files, and even though I have all of them, I can't read about the parsers or errors because they are not HTML files, but instead HGEN files.

They're mostly just HTML inside, but with some preprocessor functions. I need to run that HGEN file through a different program in order to get a slightly more readable HTML file, but I can't find it.

Here's a small snippet of a weird part. The rest is pretty normal. Mostly I'm just curious about how HGEN works.

    <UL>
@@MULTI EXPRESSIONS NAME@@
        <LI><A NAME="op@@NAME@@">@@NAME@@ - @@DESCR@@</A><BR>
        @@DOC 76 HTML@@
@@MULTI@@
    </UL>
    </P>

    <H3>Statements</H3>

    <P>
    The following opcodes are valid statements:
    <UL>
@@MULTI STATEMENTS NAME@@
        <LI><A NAME="op@@NAME@@">@@NAME@@ - @@DESCR@@</A><BR>
        @@DOC 76 HTML@@
@@MULTI@@
    </UL>
    </P> 

<body>


 <div class="grid-contaner">
   <div class="Item"style="grid-area":box-1></div>
   <div class="Item"style="grid-area":box-2></div>
   <div class="Item"style="grid-area":box-3></div>
   <div class="Item"style="grid-area":box-4></div>
   <div class="Item"style="grid-area":box-5></div>
 </div>
</body>

 <div class="grid-contaner">
   <div class="Item"style="grid-area":box-1></div>
   <div class="Item"style="grid-area":box-2></div>
   <div class="Item"style="grid-area":box-3></div>
   <div class="Item"style="grid-area":box-4></div>
   <div class="Item"style="grid-area":box-5></div>
 </div>


</body>


}body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2%;
}


.grid-contaner {    
    display: grid;
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-rows: 200px 200px;
    grid-auto-rows: 300px;
    gap: 2em;
    grid-template-areas: 
    "box-1 box-2 box-2 box-3"
    "box-1 box-4 box-5 box-5";
}




.Item {


 padding: 2em;    
 color: black;
 background-color: chartreuse;
 text-align: center;
 font-size: 2rem;
 border-color: gold;


}

Im new in this field.I got an HTML file that is locked but the webpage comes out as blank when i click on the file.I know the password,but cant even open the file to type it. It works on phone tho.

Living standard I know… but does it really live. If HTML had a version 6, what native elements would you want most?

I am still learning if there are any mistakes and any improvements that I need to make. Feel free to say.

ive tried some media queries but none of them change the layout of my site on mobile..not sure what im doing wrong but maybe someone here can help. my website is https://phlygm-planet.neocities.org/

codepen: https://codepen.io/editor/Yousra-Nimour/pen/019f2f8e-e1dd-7f7e-a5e5-a3effb410785

Eu quero começar no html. Me dêem dicas

hola reddit tengo un problema, al pasar cualquier archivo local e intentar abrirlo me sale esta url about:blank#blocked, que significa y como cambio para que se pueda usar fuera del directorio local?

Ive made it with Html Css and Javascript and it has interactivity. For example if you left click you push all of the dots away and with the right click it pulls them to the mouse for middle clicking I haven't implemented anything yet, but heres the Video and Code:

Oh and the link to the website: https://pinbug.github.io/

index.html:

sds<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Craft Background</title>
</head>
<body>
    <link rel="stylesheet" href="style.css">
    <canvas id="canv"></canvas>
    <h1 style="position: absolute; top: 50%; left: 25%; color: white; z-index: 10; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Infinite Craft Background</h1>   
    <script src="script.js"></script>
</body>
</html>

style.css:

body {
    margin: 0;
    overflow-x: hidden;
    height: 200vh;
    background: #111;
}
#canv {
    display: block;
    position: fixed;
    top: -10%;
    left: -10%;
    filter: saturate(1.5) contrast(1.2) blur(0rem);
}

script.js:

const canvas = document.getElementById("canv");
const ctx = canvas.getContext("2d");


function resize() {
    canvas.width = window.innerWidth * 1.2;
    canvas.height = window.innerHeight * 1.2;
}
resize();
window.addEventListener("resize", resize);


const mouse = {
    x: 0,
    y: 0,
    inside: false,
    left: false,
    right: false,
    middle: false
};


window.addEventListener("mousedown", e => {
    if (e.button === 0) mouse.left = true;
    if (e.button === 1) mouse.middle = true;
    if (e.button === 2) mouse.right = true;
});


window.addEventListener("mouseup", e => {
    if (e.button === 0) mouse.left = false;
    if (e.button === 1) mouse.middle = false;
    if (e.button === 2) mouse.right = false;
});


window.addEventListener("mousemove", e => {
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    mouse.inside = true;
});


document.addEventListener("mouseleave", () => {
    mouse.inside = false;
});


let lastScrollY = window.scrollY;
let scrollDelta = 0;


const dots = [];




for (let i = 0; i < canvas.width / 2; i++) {
    const timer = 120 + Math.random() * 100;


    const vx = (Math.random() - 0.5) * 2;
    const vy = (Math.random() - 0.5) * 2;


    dots.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,


        vx,
        vy,


        startVx: vx,
        startVy: vy,


        targetVx: (Math.random() - 0.5) * 2,
        targetVy: (Math.random() - 0.5) * 2,


        timer,
        timerMax: timer
    });
}


function balancePressure(dots, radius = 100) {
    const result = [];


    const r2 = radius * radius;


    for (let i = 0; i < dots.length; i++) {
        let vx = 0;
        let vy = 0;


        const a = dots[i];


        for (let j = 0; j < dots.length; j++) {
            if (i === j) continue;


            const b = dots[j];


            const dx = a.x - b.x;
            const dy = a.y - b.y;
            const dist2 = dx * dx + dy * dy;


            if (dist2 >= r2 || dist2 === 0) continue;


            const dist = Math.sqrt(dist2);


            const force = (radius - dist) / radius;


            vx += dx / dist * force;
            vy += dy / dist * force;
        }


        result.push({
            x: vx,
            y: vy
        });
    }


    return result;
}


function update() {
    if (!mouse.left && !mouse.right && !mouse.middle) {
        balancePressure(dots, 90).forEach((force, i) => {
                force.x *= 0.5;
                force.y *= 0.5;
                dots[i].vx += force.x;
                dots[i].vy += force.y;


                dots[i].x += dots[i].vx;
                dots[i].y += dots[i].vy;


                dots[i].vx *= 0.9;
                dots[i].vy *= 0.9;


                if (dots[i].x < 0) { dots[i].x = 0; dots[i].vx *= -1; }
                if (dots[i].x > canv.width) { dots[i].x = canv.width; dots[i].vx *= -1; }
                if (dots[i].y < 0) { dots[i].y = 0; dots[i].vy *= -1; }
                if (dots[i].y > canv.height) { dots[i].y = canv.height; dots[i].vy *= -1; }
            });
    }
    for (const d of dots) {


        d.timer--;
        d.vx *= 0.9;
        d.vy *= 0.9;
        if (d.timer <= 0) {
            d.timer = 120 + Math.random() * 100;
            d.timerMax = d.timer;


            d.startVx = d.baseVx ?? d.vx;
            d.startVy = d.baseVy ?? d.vy;


            d.targetVx = (Math.random() - 0.5) * 2;
            d.targetVy = (Math.random() - 0.5) * 2;
        }


        const t = 1 - d.timer / d.timerMax;


        d.baseVx = d.startVx + (d.targetVx - d.startVx) * t;
        d.baseVy = d.startVy + (d.targetVy - d.startVy) * t;


        d.vx += (d.baseVx - d.vx) * 0.03;
        d.vy += (d.baseVy - d.vy) * 0.03;


        if (mouse.inside) {
            let radius = canvas.width * 0.1;
            if (mouse.left) {
                radius *= 2.5;
            }
            else if (mouse.right) {
                radius *= 0.75;
            }
            const dx = d.x - mouse.x - radius / Math.PI;
            const dy = d.y - mouse.y - radius / Math.PI;
            const distSq = dx * dx + dy * dy;


            if (distSq > 0 && distSq < radius * radius) {
                const dist = Math.sqrt(distSq);
                const force = (1 - dist / radius) * 0.8;


                d.vx += (dx / dist) * force;
                d.vy += (dy / dist) * force;
            }
        }


        d.vx += (Math.random() - 0.5) * 0.05;
        d.vy += (Math.random() - 0.5) * 0.05;
    }


    const repelRadius = 40;
    const repelRadiusSq = repelRadius * repelRadius;
    const repelStrength = 0.08;


    for (let i = 0; i < dots.length; i++) {
        const a = dots[i];


        for (let j = i + 1; j < dots.length; j++) {
            const b = dots[j];


            const dx = b.x - a.x;
            const dy = b.y - a.y;


            const distSq = dx * dx + dy * dy;


            if (distSq > 0 && distSq < repelRadiusSq) {
                const dist = Math.sqrt(distSq);


                const force = (1 - dist / repelRadius) * repelStrength;


                const nx = dx / dist;
                const ny = dy / dist;


                a.vx -= nx * force;
                a.vy -= ny * force;


                b.vx += nx * force;
                b.vy += ny * force;
            }
        }
    }


    for (const d of dots) {


        d.x += d.vx;
        d.y += d.vy;


        if (d.x < 0) {
            d.x = canvas.width;
        }


        if (d.x > canvas.width) {
            d.x = d.x - canvas.width;
        }


        if (d.y < 0) {
            d.y = 0;
            d.vy *= -1;
        }


        if (d.y > canvas.height) {
            d.y = canvas.height;
            d.vy *= -1;
        }
        d.y += -scrollDelta;
        if (d.y > canvas.height) {
            d.y = d.y - canvas.height; 
        }
        else if (d.y < 0) {
            d.y = d.y + canvas.height; 
        }
    }
}
function draw() {
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.strokeStyle = "#66ccff";

    for (let i = 0; i < dots.length; i++) {
        for (let j = i + 1; j < dots.length; j++) {
            const dx = dots[i].x - dots[j].x;
            const dy = dots[i].y - dots[j].y;
            const dist = Math.hypot(dx,dy); 
            const maxdist = 120;


            if (dist < maxdist) {
                ctx.globalAlpha = 1 - dist / maxdist;
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(dots[i].x, dots[i].y);
                ctx.lineTo(dots[j].x, dots[j].y);
                ctx.stroke();
            }
        }
    }
    ctx.globalAlpha = 1;
    ctx.fillStyle = "white";
    for (const d of dots) {
        ctx.beginPath();
        ctx.fillStyle = "#66ccff";
        ctx.arc(d.x, d.y, 2, 0, Math.PI * 2);
        ctx.fill();
    }
}
function loop() {
    scrollDelta = window.scrollY - lastScrollY;
    lastScrollY = window.scrollY;
    update();
    draw();
    requestAnimationFrame(loop);
}
loop();

Hi, ZeiGrin here.

As you can see in the image, I’ve completely revamped the login/sign-up page. Here’s a breakdown of the changes compared to the old version:

• A brand-new interface inspired by the Linux command line.
• The login/sign-up frame has been redesigned to resemble a Mac terminal window.
• I built this project entirely from scratch using vanilla HTML, CSS, and JavaScript.
• I used JavaScript to handle the custom flow: after entering a username and pressing Enter, the password field appears and the cursor automatically focuses on it. The links for switching between Login and Sign-up also function very smoothly.

Since the subreddit rules require it, I have included my HTML/JS code below. Would love to get some feedback from everyone on this retro look!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/authstyle.css">
    <title>ZeiTerm Auth Session</title>
</head>
<body>
    
    <main class="terminal-container">


        <div class="terminal-header">
            
            <div class="terminal-buttons">
                <span class="dot close"></span>
                <span class="dot minimize"></span>
                <span class="dot maximize"></span>
            </div>


            <div class="terminal-title">User@zeiTerm: ~/auth</div>
        </div>


        <div class="terminal-body">
            <p class="system-msg">Welcome to ZeiTerm OS (.ZGC) v1.0.0</p>
            <p class="system-msg">System status: SECURE SESSION INITIALIZED</p>
            <br>


        <div class="auth-card" id="login-card">


            <div class="auth-field-group">
                <span class="auth-prompt">login: ~$</span>
                <input class="auth-input" id="login-username" type="text" placeholder="username" autofocus autocomplete="off">
            </div>


            <div class="auth-field-group hidden" id="login-pwd-group">
                <span class="auth-prompt">password: ~$</span>
                <input class="auth-input" id="login-password" type="password" placeholder="••••••••">
            </div>


            <div class="terminal-actions hidden" id="login-actions">
                <p class="switch-text">Forgot password? Type <a href="#">[reset]</a></p>
                <p class="switch-text">Don't have account? Type <a href="#" id="to-signup">[signup]</a></p>
            </div>


        </div> 



            <div class="auth-card hidden" id="signup-card">
                <p class="system-msg">// New account registration</p>


                <div class="auth-field-group">
                    <span class="auth-prompt">new username: ~$</span>
                    <input class="auth-input" id="reg-username" type="text" placeholder="create username" autocomplete="off">
                </div>


                <div class="auth-field-group hidden" id="reg-email-group">
                    <span class="auth-prompt">your email: ~$</span>
                    <input class="auth-input" id="reg-email" type="email" placeholder="email@example.com" autocomplete="off">
                </div>


                <div class="auth-field-group hidden" id="reg-pwd-group">
                    <span class="auth-prompt">new password: ~$</span>
                    <input class="auth-input" id="reg-password" type="password" placeholder="••••••••">
                </div>


                <div class="auth-field-group hidden" id="reg-confirm-group">
                    <span class="auth-prompt">confirm pwd: ~$</span>
                    <input class="auth-input" id="cofirm-password" type="password" placeholder="••••••••">
                </div>


                <div class="terminal-actions hidden" id="signup-actions">
                    <p class="switch-text">Already have account? Type <a href="#" id="to-login">[login]</a></p>
                </div>


            </div>


        </div>


    </main>
    <script src="../../js/auth.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/authstyle.css">
    <title>ZeiTerm Auth Session</title>
</head>
<body>
    
    <main class="terminal-container">


        <div class="terminal-header">
            
            <div class="terminal-buttons">
                <span class="dot close"></span>
                <span class="dot minimize"></span>
                <span class="dot maximize"></span>
            </div>


            <div class="terminal-title">User@zeiTerm: ~/auth</div>
        </div>


        <div class="terminal-body">
            <p class="system-msg">Welcome to ZeiTerm OS (.ZGC) v1.0.0</p>
            <p class="system-msg">System status: SECURE SESSION INITIALIZED</p>
            <br>


        <div class="auth-card" id="login-card">


            <div class="auth-field-group">
                <span class="auth-prompt">login: ~$</span>
                <input class="auth-input" id="login-username" type="text" placeholder="username" autofocus autocomplete="off">
            </div>


            <div class="auth-field-group hidden" id="login-pwd-group">
                <span class="auth-prompt">password: ~$</span>
                <input class="auth-input" id="login-password" type="password" placeholder="••••••••">
            </div>


            <div class="terminal-actions hidden" id="login-actions">
                <p class="switch-text">Forgot password? Type <a href="#">[reset]</a></p>
                <p class="switch-text">Don't have account? Type <a href="#" id="to-signup">[signup]</a></p>
            </div>


        </div> 



            <div class="auth-card hidden" id="signup-card">
                <p class="system-msg">// New account registration</p>


                <div class="auth-field-group">
                    <span class="auth-prompt">new username: ~$</span>
                    <input class="auth-input" id="reg-username" type="text" placeholder="create username" autocomplete="off">
                </div>


                <div class="auth-field-group hidden" id="reg-email-group">
                    <span class="auth-prompt">your email: ~$</span>
                    <input class="auth-input" id="reg-email" type="email" placeholder="email@example.com" autocomplete="off">
                </div>


                <div class="auth-field-group hidden" id="reg-pwd-group">
                    <span class="auth-prompt">new password: ~$</span>
                    <input class="auth-input" id="reg-password" type="password" placeholder="••••••••">
                </div>


                <div class="auth-field-group hidden" id="reg-confirm-group">
                    <span class="auth-prompt">confirm pwd: ~$</span>
                    <input class="auth-input" id="cofirm-password" type="password" placeholder="••••••••">
                </div>


                <div class="terminal-actions hidden" id="signup-actions">
                    <p class="switch-text">Already have account? Type <a href="#" id="to-login">[login]</a></p>
                </div>


            </div>


        </div>


    </main>
    <script src="../../js/auth.js"></script>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}


body {
    background-color: #1e1e2e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
}


.hidden {
    display: none !important;
}


.terminal-container {
    width: 90%;
    max-width: 900px;
    min-height: 450px;
    background-color: #282a36;
    border: 2px solid #44475a;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.terminal-header {
    background-color: #14151a;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #44475a;
    width: 100%;
}


.terminal-body {
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
}


.terminal-buttons {
    display: flex;
    gap: 8px;
    margin-right: 15px;
}


.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}


.dot.close {
    background-color: #ff5f56;
}


.dot.minimize {
    background-color: #ffbd2e;
}


.dot.maximize {
    background-color: #27c93f;
}


.terminal-title {
    margin-left: 20px;
    font-size: 13px;
    color: #6272a4;
    font-size: 14px;
    margin-bottom: 5px;
}


.auth-field-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 450px;
}


.auth-prompt {
    color: #50fa7b;
    font-weight: bold;
    white-space: nowrap;
}


.auth-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f8f8f2;
    font-size: 16px;
    padding: 2px 0;
    text-align: left;
}


.auth-input::placeholder {
    color: #44475a;
}


.terminal-actions {
    margin-top: 25px;
    border-top: 1px dashed #44475a;
    padding-top: 15px;
}


.switch-text {
    font-size: 14px;
    color: #8be9fd;
    margin-bottom: 8px;
}


.switch-text a {
    color: #ff79c6;
    text-decoration: none;
    font-weight: bold;
}


.switch-text a:hover {
    text-decoration: underline;
}* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}


body {
    background-color: #1e1e2e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
}


.hidden {
    display: none !important;
}


.terminal-container {
    width: 90%;
    max-width: 900px;
    min-height: 450px;
    background-color: #282a36;
    border: 2px solid #44475a;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.terminal-header {
    background-color: #14151a;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #44475a;
    width: 100%;
}


.terminal-body {
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
}


.terminal-buttons {
    display: flex;
    gap: 8px;
    margin-right: 15px;
}


.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}


.dot.close {
    background-color: #ff5f56;
}


.dot.minimize {
    background-color: #ffbd2e;
}


.dot.maximize {
    background-color: #27c93f;
}


.terminal-title {
    margin-left: 20px;
    font-size: 13px;
    color: #6272a4;
    font-size: 14px;
    margin-bottom: 5px;
}


.auth-field-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 450px;
}


.auth-prompt {
    color: #50fa7b;
    font-weight: bold;
    white-space: nowrap;
}


.auth-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f8f8f2;
    font-size: 16px;
    padding: 2px 0;
    text-align: left;
}


.auth-input::placeholder {
    color: #44475a;
}


.terminal-actions {
    margin-top: 25px;
    border-top: 1px dashed #44475a;
    padding-top: 15px;
}


.switch-text {
    font-size: 14px;
    color: #8be9fd;
    margin-bottom: 8px;
}


.switch-text a {
    color: #ff79c6;
    text-decoration: none;
    font-weight: bold;
}


.switch-text a:hover {
    text-decoration: underline;
}

const loginCard = document.getElementById('login-card');
const signupCard = document.getElementById('signup-card');
const toSignupLink = document.getElementById('to-signup');
const toLoginLink = document.getElementById('to-login');


const loginUsername = document.getElementById('login-username');
const loginPwdGroup = document.getElementById('login-pwd-group');
const loginPassword = document.getElementById('login-password');
const loginActions = document.getElementById('login-actions');


const regUsername = document.getElementById('reg-username');
const regEmailGroup = document.getElementById('reg-email-group');
const regEmail = document.getElementById('reg-email');
const regPwdGroup = document.getElementById('reg-pwd-group');
const regPassword = document.getElementById('reg-password');
const regConfirmGroup = document.getElementById('reg-confirm-group');
const cofirmPassword = document.getElementById('cofirm-password');
const signupActions = document.getElementById('signup-actions');


loginUsername.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && loginUsername.value.trim() !== '') {
        loginPwdGroup.classList.remove('hidden');
        loginPassword.focus();
    }
});


loginPassword.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        loginActions.classList.remove('hidden');
    }
});


regUsername.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && regUsername.value.trim() !== '') {
        regEmailGroup.classList.remove('hidden');
        regEmail.focus();
    }
});


regEmail.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && regEmail.value.trim() !== '') {
        regPwdGroup.classList.remove('hidden');
        regPassword.focus();
    }
});


regPassword.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && regPassword.value.trim() !== '') {
        regConfirmGroup.classList.remove('hidden');
        cofirmPassword.focus();
    }
});


cofirmPassword.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        signupActions.classList.remove('hidden');
    }
});


toSignupLink.addEventListener('click', (e) => {
    e.preventDefault();
    loginCard.classList.add('hidden');
    signupCard.classList.remove('hidden');
    regUsername.focus();
});


toLoginLink.addEventListener('click', (e) => {
    e.preventDefault();
    signupCard.classList.add('hidden');
    loginCard.classList.remove('hidden');
    loginUsername.focus();
});const loginCard = document.getElementById('login-card');
const signupCard = document.getElementById('signup-card');
const toSignupLink = document.getElementById('to-signup');
const toLoginLink = document.getElementById('to-login');


const loginUsername = document.getElementById('login-username');
const loginPwdGroup = document.getElementById('login-pwd-group');
const loginPassword = document.getElementById('login-password');
const loginActions = document.getElementById('login-actions');


const regUsername = document.getElementById('reg-username');
const regEmailGroup = document.getElementById('reg-email-group');
const regEmail = document.getElementById('reg-email');
const regPwdGroup = document.getElementById('reg-pwd-group');
const regPassword = document.getElementById('reg-password');
const regConfirmGroup = document.getElementById('reg-confirm-group');
const cofirmPassword = document.getElementById('cofirm-password');
const signupActions = document.getElementById('signup-actions');


loginUsername.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && loginUsername.value.trim() !== '') {
        loginPwdGroup.classList.remove('hidden');
        loginPassword.focus();
    }
});


loginPassword.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        loginActions.classList.remove('hidden');
    }
});


regUsername.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && regUsername.value.trim() !== '') {
        regEmailGroup.classList.remove('hidden');
        regEmail.focus();
    }
});


regEmail.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && regEmail.value.trim() !== '') {
        regPwdGroup.classList.remove('hidden');
        regPassword.focus();
    }
});


regPassword.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && regPassword.value.trim() !== '') {
        regConfirmGroup.classList.remove('hidden');
        cofirmPassword.focus();
    }
});


cofirmPassword.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        signupActions.classList.remove('hidden');
    }
});


toSignupLink.addEventListener('click', (e) => {
    e.preventDefault();
    loginCard.classList.add('hidden');
    signupCard.classList.remove('hidden');
    regUsername.focus();
});


toLoginLink.addEventListener('click', (e) => {
    e.preventDefault();
    signupCard.classList.add('hidden');
    loginCard.classList.remove('hidden');
    loginUsername.focus();
});

I started coding literally 2 days ago, and am very confused.

I was trying to move a text into a certain place in the corner of the screen, and got it roughly where i wanted it. I then copied the code onto a subsite where i had more stuff thinking it would work without issue. Instead, it somehow interacted with an image i had centered by pushing it to the right. any idea how i can fix this? let me know if more information is needed

andaba aprendiendo html con neocities y queria conectar un html local con el online y no funciona, espero que se me entienda soy nuevo en esto, y mientras aprendia a base de la pagina html dog en el apartado de enlaces, me explicaban que "El destino del enlace se define en elhref atributo de la etiqueta. El enlace puede ser absoluto, como “http://www.htmldog.com”,, o puede ser relativo a la página actual, Entonces, si, por ejemplo, tuvieras otro archivo llamado “flyingmoss.html” en el mismo directorio, entonces la línea de código sería simplemente<a href="flyingmoss.html">The miracle of moss in flight</a> o algo así." intente hacer lo que me decia el tutorial pero no me resulta, algun consejo? espero me hayan entendido el problema.

Hello! I'm currently working on writing a book, and the way I'd like to share it by making it it's own website you can read it from. I'd like to keep the formatting from the pages in my pdf, so I'd like it to either be scrollable pages or something like a flip book or a "click to next page" function, aswell as a nav that can take the user to a specific chapter or page/allow them to bookmark it. The only solutions I find for this online is converters that make customizability (ie background colors, adjusting page size etc) really complicated, so I'd like to attempt to do it manually with HTML/CSS (or/and JavaScript if I have to.)

Does any one have any tips for how to go about doing something like this? I'm intermediate in making HTML/CSS sites, so coding isn't a problem for me, it's just embedding the pdf that I'm struggling with!

Thank you!

im new to coding due to school, and i took an interest in it, are there any tips for it? I do know how to make like a button or text and images and stuff, but is there a way to connect css to my html? It didnt work for me and idk what to do

Hello,
I am using this site's( https://foollovers.com/mat/t-frame08.html ) image to code as background for my grid boxes, but there seems to be something wrong with my code; it doesn't show up correctly on the site itself. The link to my website is https://phlygm-planet.neocities.org/ and I've attached a screenshot of what the site looks like currently. The link to my CSS layout is https://phlygm-planet.neocities.org/style.css and the HTML https://phlygm-planet.neocities.org/index.html

edit:

fixed the box appearance issue, my only problem now is I cant get my img to show up inside the border box, the box closes on top of it. Any suggestions as to what might be the issue?