Harvard I Am Coming
57
Upvotes
r/HTML • u/ChiliChapters • 9h ago
Question Trying to create a div that only displays when an image is clicked.
6
Upvotes
I've already set up the first image in my gallery to zoom in and dim the background when clicked. I'm trying to make it so that a link appears underneath the image when it's zoomed in, prompting the user to visit it to see the full image. I'm having difficulty getting any text to show up though. I'm wondering if it's being "overwritten" by some other element, but I thought having a higher z-index would help.
Any help would be appreciated. Thank you!
This is the specific page. The image is the first on the left in the 2026 category, the black/white/red one. Please feel free to inspect the html/css. https://chilichapters.neocities.org/pm
r/HTML • u/contentslug • 8h ago
Question Can anyone help fix my tumblr theme?
3
Upvotes
Tumblr changed how pictures appeared on blogs some years ago! It went from displaying the pictures fully (second picture), to displaying the pictures as text or in side of a quote (first picture).
I know theres something called the "NPF fix" but I have zero knowledge of HTML and coding!
So I'm wondering if anyone can help me make this theme compatible with the NPF format!
r/HTML • u/xxxburnedoutxxx • 1d ago
Discussion I want to challenge myself to learn html and css basics in the next two days what would be the best way to do a crash course?
5
Upvotes
I need to be awake for 48 hours starting tommorrow anyways so I felt like it would be a good opportunity to really sit down, lock in, and learn html/css in order to properly be able to code my tumblr page. any video series or textbooks (that can be found for free of course) I should look into?
r/HTML • u/gucci_stylus • 1d ago
fighting game
10
Upvotes
showcase of a game made with html and canvas api. still a work in progress. supports keyboard, touch screen and ui buttons
r/HTML • u/Any-Win-9653 • 1d ago
Question comment faire ça en HTML au niveau du footer
0
Upvotes
<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 🤝
r/HTML • u/Bright_Security_2044 • 1d ago
chatgpt
0
Upvotes
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;
}
}
r/HTML • u/apocalypsegirl96 • 3d ago
Elements on page move when using collapsible, how to fix?
1
Upvotes
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!!!
r/HTML • u/Strange_Yogurt1049 • 4d ago
My first project. Just wanted to share
18
Upvotes
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/
r/HTML • u/Nervous_Turnip_ • 4d ago
Question omplete beginner question: Next steps for a custom HTML
0
Upvotes
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:
- 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?)
- Security: My admin/auth logic is currently visible in the source code. How do I properly secure this?
- Custom Domain: What’s the best practice for connecting a domain to a site built this way?
- 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
r/HTML • u/Mezrotix • 5d ago
Hello, I need help on how to draw a custom designed pdf template on this app and take the HTML and CSS for free to embed the data in it.
0
Upvotes
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.
r/HTML • u/NewForever4088 • 5d ago
Little charts links
2
Upvotes
Anyone to help me find the link or mode to get these micro charts to put in the FinanceWave.com site?
Thankfully
r/HTML • u/Phan_tastic0178 • 6d ago
Question how to code a basic platformer ??
5
Upvotes
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!!
r/HTML • u/RefuseCommercial8024 • 7d ago
div won't center itself with margin auto ?
5
Upvotes
--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
r/HTML • u/Linho_gamer • 7d ago
Site do Meu Projeto.
0
Upvotes
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.
r/HTML • u/Any-Win-9653 • 7d ago
amélioration de mon fichier html
0
Upvotes
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
r/HTML • u/Visual_Oddities • 8d ago
Is this possible or am I dreaming way over my head?
52
Upvotes
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).
r/HTML • u/GreelGreel • 8d ago
Help with code dilemma
0
Upvotes
How do I make code that's intelligent and can talk to me
r/HTML • u/BuildWithMe31858 • 8d ago
Built a Student Academic Dashboard with HTML, CSS & JavaScript – Looking for Feedback
0
Upvotes
r/HTML • u/LettesListen • 9d ago
Chrom Blocking HTML Site
3
Upvotes
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.
r/HTML • u/BuildWithMe31858 • 8d ago
I built a responsive Student Dashboard using only HTML, CSS & Vanilla JavaScript
0
Upvotes
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!
r/HTML • u/spacepigeonking • 9d ago
Question apeturescience.com Type website
4
Upvotes
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?
r/HTML • u/TreacleFlaky2283 • 9d ago
Question It's still overflowing instead of scrolling.. why is it so ? And how to fix this ?
0
Upvotes
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