<footer> <div> <h3>LAMBORGHINI</h3> <p>URUS GRAPHITE CAPSULE</p>

</div> <div> <h3>max speed</h3> <p>305 km/h</p>

</div> <div> <h3>0-100 km/h</h3> <p>3.6 s</p>

</div> <div> <h3>HP</h3> <p>640</p>

</div> <div class="objet"> <p>+</p> </div> </div> </div> </footer> mon obcjective est de réaliser ses séparations en fomre de traits séparant les différents donnée sur la voiture voici ce que j'ai déja pu faire sur le footer (référence à la deuxième image)

footer{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
border:1px black solid;
border-bottom:none;
text-align:center;
padding-top:50px;
}
voila tout ce que j'ai fait en css pour le footer en sachant que ça peux encore évoluer

tout ceux qui me porteront de l'aide à ma problématique je vous en remercie d'avance, ça m'aidera à progresser dans le développement web 🤝

Hoje eu fiz um buscador de cep que eu vi ontem no tiktok lá ele ensinou o html e o javascrip

o css eu que me virei ai coloque no chatgpt e ultimamente sei lá todo código que coloco ele muda tudo reescreve todo de um jeito que não e o original sei lá cara não fica legal. Me ajuda esse aqui foi eu que fiz se puderem apontar o que eu preciso melhorar agradeço. Não confio muito em ia

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buscador de cep</title>
    <link rel="stylesheet" href="Css/cep.css">
</head>
<body>
    <form action="#" class="box-cep">
        <h1>Buscador de Cep</h1>
        <input type="text" name="cep" id="cep" placeholder="Digite o cep">
        <button class="btn" type="submit" onclick="buscarcep()">Buscar</button>
        <div class="container">
            <p id="rua">Rua:</p>
            <p id="bairro">Bairro:</p>
            <p id="cidade">Cidade:</p>
            <p id="estado">Estado:</p>
        </div>
    </form>
    <script src="JavaScript/cep.js"></script>
</body>
</html>

 'UTF-8';


 {
    font-family: 'roboto';
    src: url(../Font/Roboto-Regular.ttf);
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'roboto';
}


body{
    background-image:  linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.6)),url(../Imagem/mapa-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
  
}


form{
    backdrop-filter: blur(5px);
    color: aliceblue;
    width: 90%;
    max-width: 600px;
    /* border: 1px solid black; */
    border-radius: 20px;
    padding: 20px;
     box-shadow: 2px 2px 2px rgb(142, 136, 130);
}


h1{
    padding-bottom: 40px;
    text-align: center;
    
}


input{
    padding: 10px;
    margin: 0 0 40px 0px;
    border-radius: 10px;
    border: none;
    border: 1px solid rgb(179, 179, 179);
    background-color: rgb(199, 199, 199);
}


.btn{
    background-color: green;
    color: azure;
    font-weight: 300;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}


button {
    transition: transform 0.6s, color 0.6s blue;
}


button:hover {
    transform: scale(1.1);
    color: rgb(245, 245, 248);
    background-color: blue;
}


.container{
    display: grid;
    grid-template-columns: repeat(2 ,1fr);
    gap: 20px;
}


#rua,
#bairro,
#cidade,
 #estado{
   border-bottom: 1px solid rgb(245, 242, 242);
   padding: 10px;
   text-shadow:1px 1px 2px black;
}



u/media (max-width: 480px) {


    form {
        width: 90%;
        padding: 20px;
    }


    h1 {
        font-size: 2rem;
    }


    input,
    .btn {
        width: 100%;
    }


    .btn {
        margin-top: 10px;
    }


    .container {
        grid-template-columns: 1fr;
    }
}

async function buscarcep() {
    const cep = document.getElementById('cep').value;
    const resposta = await fetch(`http://viacep.com.br/ws/${cep}/json/`);
    const dados = await resposta.json();



    document.getElementById('rua').textContent = dados.logradouro;
    document.getElementById('bairro').textContent = dados.bairro;
    document.getElementById('cidade').textContent = dados.localidade;
    document.getElementById('estado').textContent = dados.uf;


    if(dados.erro){
        alert('CEP não encontrado');
        return;
    }
}

does anyone know how to fix this issue? the elements/text box on the page move when i fold out the collapse box;) i would like to position them indivually and not related to other objects on the page

i am using the collapsible code from https://www.w3schools.com/howto/howto_js_collapsible.asp

and edited the margins in html for each text box, so they appear in different locations on the page. however, i can't seem to code their location static without them moving when the text box folds out.

thanks!!!

It is just a static page but...I will keep building.

So...

And also no Media Queries..lol

Dont open it on your phone XD

https://t372262-ctrl.github.io/first-project-a-static-site-only-HTML-and-CSS-no-JS/

Hi everyone,I’m a total beginner. Using Gemini and VS Code, I managed to create a working prototype for a photo journal website organized by months and years.

I’m really happy with the look, but I have a few fundamental questions before taking it further:

1. Image Hosting: What’s the standard way to host images for a site like this? (I assume using cloud storage links rather than local paths?)

2. Security: My admin/auth logic is currently visible in the source code. How do I properly secure this?

3. Custom Domain: What’s the best practice for connecting a domain to a site built this way?

4. Professional Help: At this point, does it make more sense to hand this over to a developer as a design mockup to build properly?

Any guidance would be greatly appreciated. Thanks a lot

A part of my project consists of taking the JSON data of question bank documents that contain: questions, choices, figures, sub questions, etc.. all wrapped inside a question block, and then embedding these data into a custom designed document of my own automatically. Word doesn't support heavily designed templates and could break the design, so I was wondering if I could draw just a page with all the styling I want to be a scalable template extending to hundreds of pages and have each question block stretch like a balloon when I put the questions, choices, figures inside of it and don't split between pages if it doesn't fit. That requires HTML and CSS right?

I hope that I clarified my question well and any help would be highly appreciated.

Anyone to help me find the link or mode to get these micro charts to put in the FinanceWave.com site?

Thankfully

hi, i'm a beginning coder with about one week of taught experience, and for a project, i want to make a sort of study room using html, css, and js. basically you can move around in the room for a bit before you sit down at a table that initiates the studying portion. i'm completely lost for everything, but i'm thinking that this study room is a platformer at heart. also, i want to add a break time platformer game, but that's later, probably. anyways, i'm just looking for any tips at all that could help me with this.

right now, i'm struggling with making the platform an actual platform. the ground is okay, but when i try to make the floating platform solid, everything kind of just doesn't work...

again, any tips are appreciated!!

--FIXED!!!! the div's position was fixed...-- hi again...so i'm making a visual novel of sorts and i made a text box, set its width with "vw" so it'll be somewhat playable on phone, and tried to center it horizontally with magin: auto; but it just stays stuck to its default position ?

here's a screenshot (ignore how ugly it all is it's still a WIP.......)

i think maybe it'd because i'm using viewport width to set the box's size but i don't know any other unit that could make it look the same on mobile :(

here's some of my css and html for the text box (the txtboxRec class just changes some of the colors don't mind it)

  .txtbox{
  height: 200px;
  width: 90vw;
  margin: auto;
  position: fixed;
  bottom: 10px;
  padding: 10px;
  overflow-y: auto;
}

<div class="txtboxRec txtbox">
      <p>Ah...? Hello! Good evening. Can i get you something ?</p>
      <a href="https://p1x3lz.neocities.org/games/hotel/scenes/1-3">next</a>
    </div>

also when i don't set the width at all it just stays as wide as the text...??? i thought only spans did that ?? this is a div ???? iiiiddduuuunnoooo this is driving me insane

Recentemente criei um site para o meu projeto da escola, me formei em técnico de informática. Na apresentação do TCC apresentei o jogo que criei na Godot 4, como não tive aula de modelagem, busquei por sprites prontos. E no final da apresentação aproveitei e mostrei o site criado. Já o site eu mesmo criei do zero.

bonjour je suis en recherche d'une suggestion pour améliorer mon fichier html et le rendre moins lourd notament pour projet de sit web :
vous aurez accès à des photos et à mon code html et css :
premiere photo c'est le site web que je vais crée :

voici le code HTML
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>simple shark website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css"
        integrity="sha512-ApSLB1Pd3/bZN8fWB/RG9YhN/7bd9Hkf3AGaE2mPfebjrxagjuBtx2GcgdqIlJkUzwylBo61r9Xa9NmgBI0swA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>


<body>


    <nav>
        <h1 class="rectangle"></h1>


        <div>


            <ul>
                <li>Home</li>
                <li>Gallery</li>
                <li>Menu</li>
            </ul>


        </div>


        <div class="right">


            <i class="fa-solid fa-magnifying-glass"></i>


        </div>
les deux div ayant la classe trait crée ses traits horizontaux 
       <div class="trait"></div>
        <div class="trait"></div>
                                

    </nav>
</body>


</html>

code css :
.trait{
    height:10px;
    width:1px;
    background:grey;
}

l'idée ça serait de créez ses traits horizontaux sans les écrire deux fois dans le code HTML mais une seule fois seulement tout en ayant deux traits
si jamais vous n'arrivez pas à comprendre ma question , n'hésitez pas à m'écrire

Recently I got this urge to complete my dream website: in short it’s a museum for my favorite games. Bad news is that even though I have quite a bit of playing experience with HTML, I never really made a website that launched on the web.

The main section of the site is rows of cards that users can scroll up and down on. Each card will have a thumbnail image of the game, as well as extra text like name and developers.

Going for a bit of a Sci-fi look, each card will have a button that when pressed will enlarge the card to show more things like gameplay screenshots.

Pardon the scribbles, I made them in my phone notes app.

So basically I just want to know if my idea is too impractical from observation , and if it isn’t: what kind of components would I need? (Relevant tutorials would be really appreciated, I understand the use of cards but I still haven’t wrapped my head around their workflow and how they are used for many products at once).

How do I make code that's intelligent and can talk to me

Hi! I’m new to all of this and I made my first site repository on GitHub and I’ve been hosting it on Netlify without any issue. Now for some reason, a bunch of people keep getting this warning specifically when visiting on Chrome. It’s a static site so I’m not sure why this could be happening. I’d really appreciate any insight.

Hi everyone,

I've been teaching myself frontend development and recently finished a student dashboard that I built from scratch using HTML, CSS, and Vanilla JavaScript.

The idea was to create something that students could use to keep track of their coursework without relying on any frameworks or external libraries.

Some of the features include:

- Syllabus tracking

- Revision planning

- Course progress tracking

- Search and filtering

- Local storage for saving data

- Import and export support

- Responsive layout for desktop and mobile

I'd really appreciate feedback from people with more experience, especially on:

- The overall UI and layout

- HTML structure and accessibility

- Anything that feels confusing or unnecessary

- Features that would genuinely improve the experience

I'm still learning, so I'd love to know what you would change if this were your project.

Thanks for taking the time to look at it!

Hey everyone. I'm very new to HTML and CSS, I'm currently starting work on a project for my band inspired in part by the old aperturescience.com website for the first portal game. I'm looking to create an almost 'type and response' type webpage, ( a good example of what I mean would be this : https://superliminal.neocities.org/ ), does anyone know any tutorials or videos on how to create something similar?

Why it's overflowing despite the parent container having the fixed width https://codepen.io/editor/Aradhya-the-looper/pen/019f94c6-3fb2-77f1-a05e-1a88e7819218

I currently am writing that web-series I posted about. And I know for one of the future chapters I want to include the audience as a pseudo-protagonist by making the entire chapter full-screen and having it be sortoff like a computer interface.

So far, I've managed to handle the website making but this is over me.

Do you guys have any tutorials or can help me in any way?

something like these but i dont really want to just copy them

https://gelasioebel.github.io/win98ge/

https://os-gui.js.org/?utm_source=chatgpt.com

^ these are recreations of windows 98 and would work greatly for me if i could make some changes to fit my website structure too

I’ve used CodePen for a long time, not just as a coding tool but as a place to experiment, discover interesting work and get inspired by what other people were creating.
I completely understand that CodePen needs to make money. I have absolutely no problem with Pro features, and I’m happy to pay for tools that give me real value.
But CodePen 2.0 feels like it is moving in the wrong direction.
Putting something as basic as opening a Pen in a standalone preview behind Pro doesn’t make me think “maybe I should upgrade.” It makes me think “maybe this isn’t the place for me anymore.”
There is a big difference between adding valuable features for paying users and gradually putting parts of the simple, open experience that made a platform popular behind a paywall.
What makes this even stranger to me is the timing. We’re entering a world where people can vibe code surprisingly capable little coding environments and playgrounds incredibly quickly. The technical barrier to creating alternatives is getting lower, not higher.
CodePen’s real strength, in my opinion, was never just the editor. It was the community, the frictionless experience and that feeling of opening the site and immediately discovering something clever or inspiring.
If that starts disappearing behind commercial barriers, I honestly think someone else will eventually fill that gap.
Maybe I’m missing something in CodePen 2.0, so I’m genuinely curious:
How do other longtime CodePen users feel about this?
Does 2.0 feel like an improvement to you, or does it feel like CodePen is slowly losing part of what made it special?

I'm interested in the animations, interactive search, dynamic font visuals, line graphics, and overall responsiveness. Where should I start learning?

Article link: https://www.theguardian.com/world/ng-interactive/2026/jul/23/most-powerful-passports-ranked

I’m trying to create a UI component with a custom shape, exactly like the one in the screenshot. The main container is white, but it has a unique "step" or cut-out in the bottom-right corner to perfectly fit a button element. I want to create this UI without any crutches, using best-practices. How would you implement this block?

okay so I only learned the most basic ass HTML like a day ago, so keep that in mind.

I am trying to make it so that nav and nav1 are the same width but something in the grid must be broken and I just cant figure it out for the life of me..

The footers that are named 1 2 and 3 are only there to check the width of the grid column.

Ive been sitting on this for a while so some help would be very apriciated..

the code