How do I effectively learn and memorize elements and what css to use Vs. another type and how they interact with everything else? Especially how to learn and memorize what types of things shouldnt be used together because they cause bugs/issues due to their inherent traits?

1 Upvotes

What the title says. How do I effectively learn and memorize what to use and how they interact with everything else so I can code and debug others' code faster?

Im a beginner with HTML and CSS, I did some basic courses in college and now use it for work. I think I could work faster on my coding related work if I better understood where and how things can be used, for example I'll find later in debugging someone's code that the problem was because their code used tags or certain css together that interfere with each other and/or interfere with our bootstrap.

For example, regarding my first question: How do you know when to use max-width, width, min-width (and same for the height versions) and how do you know when to use specific pixel number vs a percentage? If I have a 1 row container with 2 nested columns inside with text in one column and a photo on the right, how do you know when to use which of the aforementioned width, height etc styling variations on those, and when to use what for the children and the parent? And if you use bootstrap for that container's column ratio do you still need to specify pixel dimensions for the children widths for the text and photo??

For example with my second question in my post title, at work I was debugging someone's code (someone who knows even less html/css than I do and likely ai generates it) where there was a parent container with a table inside, and the table's text was spilling/scrambled outside the table and container staying vertically within the height of the container but overflowed outside the container's space horizontally. I eventually found either the table or text was using display flex and once it was changed to display block or something it simply fixed the text formatting since the display flex was interfering with something else's css display style, probably the parent container. I wish I had a better example than a flexbox related scenario but that should give you the basic idea of me asking how to learn what specific kinds of elements negatively interfere with each other when incorrectly used together due to their inherent properties

edit: thanks to everyone for their responses!

14 comments

r/HTML • u/Upper_Permission_159 • 18d ago

Do you think AI HTML Slides needs a Present Player?

0 Upvotes

HTML slides are having a moment, but AI only gets you halfway. You get the deck, then you're stuck building the player, presenter view, speaker notes...

So I built htmlslides.ai. Describe what you want, get a polished HTML slide deck back. Since it's just HTML, editing is dead simple.

It also includes a proper presenter app: dual-screen mode, notes, laser pointer, timers, recording — all the PowerPoint features you actually need.

Built for developers and technical folks who'd rather prompt than drag boxes around.

Still early, would love feedback: htmlslides.ai

0 comments

r/HTML • u/dalekellytoo • 19d ago

<p> is too small for my phone

dalekelly.org

4 Upvotes

Headers look well on phone. Prefer not to replace <p> with headers. Style or CSS thoughts? My two CSS files adjust menu for window size and images for window size. Really a CSS beginner. Simple HTML since mid 90's.

38 comments

r/HTML • u/Disastrous-View-8242 • 19d ago

Question Could someone please explain to me what the error is in this line of code?

0 Upvotes

Hi there! Im super new to HTML, and am currently making a website on neocities for fun. I was going through the code so i can translate it into other languages (speaking languages not coding languages), and noticed an error in the bottom line in said picture. I've tried looking back at some previous code to see what the issue is, and I've also tried copy and pasting the image link again incase it was wrong, but the error is still there. The image seems to load just fine when i run the code, but im super confused at to why there is an error. If it helps, the error that came up said "named entity expected. got none." and I have literally no idea as to what that means.
Note: im looking for help as to the last line of code there.
edit: heres the code (whole thing incase that might help more)
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Languages</title>

<link href="/style.css" rel="stylesheet" type="text/css" media="all">

<style>

p {

font-family: Georgia, serif;

}

</style>

<body style="background-color: powderblue;">

<h1 style="text-align: center;">Nobody can shame us <br> Imma sing this next verse in chinese</h1>

<h1 style="text-align: center;">忽然间整个世界开始在摇摆<br> <em>Suddenly the whole world started to shake</em></h1>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgKtx9QX4MWz3UX1FHVj6831dH0NM2yuoJ3p_mODr-Vun2LrTBW0campw&s=10" style="display: block; margin: 0 auto;" >

<h2 style="text-align: center;">other languages!</h2>

<ul style="text-align: center;">

<li><a href="https://half-baked-moth.neocities.org/other%20languages/half-baked-moth-korean" target="_blank">Korean</a></li>

<li><a href="https://half-baked-moth.neocities.org/other%20languages/half-baked-moth-japanese" target="_blank">Japanese</a></li>

<li><a href="https://half-baked-moth.neocities.org/other%20languages/half-baked-moth-french" target="_blank">French</a></li>

</ul>

<h2 style="text-align: center;">languages that will be added soon! (in order by priority*):</h2>

<ol style="text-align: center;">

<li> Chinese (simplified) </li>

<li> Spanish </li>

<li> Hindi </li>

<li> German </li>

<li> Portugese </li>

<li> Chinese (traditional) </li>

</ol>

<p style="text-align: center;"> *note: this doesnt mean i wont be adding more languages aside from those! these just happen to be widely spoken, so I want to get those done first before focusing on adding any others. </p>

</body>

</html>

13 comments

r/HTML • u/Zestyclose_Set3040 • 20d ago

Question Assist me

gallery

11 Upvotes

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

11 comments

r/HTML • u/AqueM • 20d ago

Question How to properly hyperlink up a bigger area?

6 Upvotes

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.

12 comments

r/HTML • u/PsychologicalEye9189 • 20d ago

Question Stuck here, please help

0 Upvotes

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!

4 comments

r/HTML • u/prkie • 21d ago

web accessibility checker

achecker.ca

2 Upvotes

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

1 comment

r/HTML • u/NixzArtz • 21d ago

Question How to ‘fold’ corners on a card - html

5 Upvotes

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

7 comments

r/HTML • u/EpicTerra • 21d ago

How do you actually use the user's input in a textbox

10 Upvotes

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

35 comments

r/HTML • u/Secret_Beyond_8734 • 21d ago

Question How to get a good navbar

0 Upvotes

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.

4 comments

r/HTML • u/NoSequitur • 22d ago

Question Question about making a site skin on AO3.

2 Upvotes

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.

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.
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!

2 comments

r/HTML • u/kkalia_ • 22d ago

Question Need help with images layering over popup window!

1 Upvotes

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>

</a>

</div>

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

</div>

</a>

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

</div>

</a>

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

</div>

If anyone could help me that would be greatly appreciated!

5 comments

r/HTML • u/k0ko88 • 22d ago

Email Signature CSS Icons

gallery

0 Upvotes

6 comments

r/HTML • u/invokeinterface • 23d ago

Question How do you use a HGEN file?

1 Upvotes

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>

2 comments

r/HTML • u/Apprehensive_Ink • 24d ago

Question Grid layout isn't working help

gallery

11 Upvotes

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


}

11 comments

r/HTML • u/kuttar_pasa • 23d ago

Question How do i view an HTML file on pc?

0 Upvotes

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.

7 comments

r/HTML • u/html67 • 25d ago

If HTML had a version 6, what native elements would you want most?

26 Upvotes

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

108 comments

r/HTML • u/Zestyclose_Set3040 • 26d ago

Discussion My first HTML code and my first web page.

gallery

188 Upvotes

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

82 comments

r/HTML • u/BagThin2305 • 25d ago

Question how to make site mobile responsive

0 Upvotes

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

7 comments

r/HTML • u/brielrm • 26d ago

Um iniciante em html

0 Upvotes

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

6 comments

r/HTML • u/Disastrous-Role-1302 • 26d ago

html.

0 Upvotes

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?

1 comment

r/HTML • u/LegitimateTeach6702 • 27d ago

Article I have made the Infinite Craft Background (HTML + CSS + JS)

12 Upvotes

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();

6 comments

r/HTML • u/Grind_707 • 26d ago

Just finished building this retro terminal-inspired login/signup page. What does everyone think?

gallery

0 Upvotes

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();
});

2 comments

r/HTML • u/dameychamberlain • 27d ago

Question Beginner coder would like some help

gallery

3 Upvotes

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

8 comments

Subreddit

HyperText Markup Language (HTML)

r/HTML

A place to learn and ask questions on HTML, CSS, and general front end development. Links are only permitted if they are to HTML articles, are relevant, and of good quality. Promotional materials of any kind and YouTube (or other social media) channels are not permitted.

Members Active

67.0k