/r/q?req.query.q -- Subreddit Search

47,446 Subscribers

need help with this

I cant get the background picture to the middle of the screen and make it appear in dark mode, can someone help? here is the code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>A Student Made Progress</title>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

<link rel="icon" href="https://progres.mesrs.dz/webfve/images/logo.png" type="image/png">

<style>

body {

font-family: 'Poppins', sans-serif;

margin: 0;

padding: 0;

background-image: url("https://i.imgur.com/gIqCCzo.jpg"); /* The image from Imgur */

background-repeat: no-repeat;

background-size: cover;

color: #333;

transition: background-color 0.7s ease, color 0.7s ease, transform 0.7s ease, box-shadow 0.7s ease;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

width: 100vw; /* Added width to make the image cover the whole viewport */

}

.logo {

text-align: center;

margin-bottom: 30px;

transition: transform 0.7s ease, color 0.7s ease;

}

.logo img {

max-width: 150px;

height: auto;

transition: transform 0.7s ease;

}

label {

display: block;

margin-bottom: 5px;

font-weight: bold;

transition: color 0.7s ease;

}

input, select {

width: 100%;

max-width: 300px; /* Added max-width to select */

margin-bottom: 20px;

padding: 12px;

border: 1px solid #ccc;

border-radius: 10px;

background-color: #f9f9f9;

color: #333;

box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);

transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.7s ease, color 0.7s ease;

}

input:focus, select:focus {

outline: none;

border-color: #007bff;

box-shadow: 0 0 15px rgba(0, 123, 255, 1);

}

.btn {

width: 100%;

max-width: 300px;

padding: 12px;

background: linear-gradient(135deg, #007bff, #0056b3);

color: white;

border: none;

border-radius: 10px;

cursor: pointer;

font-size: 1rem;

font-weight: bold;

box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);

transition: transform 0.2s ease, background-color 0.7s ease, box-shadow 0.7s ease;

}

.btn:hover {

transform: scale(1.05);

background-color: #0069d9;

}

.dark-mode {

position: fixed;

bottom: 10px;

right: 10px;

padding: 10px;

border: none;

border-radius: 5px;

background-color: #007bff;

color: white;

cursor: pointer;

font-size: 1rem;

transition: transform 0.3s ease, background-color 0.7s ease, box-shadow 0.7s ease;

}

.dark-mode:hover {

transform: scale(1.1);

background-color: #0069d9;

}

.dark-theme {

background: linear-gradient(135deg, #222, #333);

color: #fff;

transition: background-color 0.7s ease, color 0.7s ease, transform 0.7s ease;

}

.dark-theme input, .dark-theme select {

background-color: #333;

color: #fff;

border-color: #666;

box-shadow: 0 0 10px rgba(255, 0, 0, 0.9);

transition: background-color 0.7s ease, color 0.7s ease, box-shadow 0.7s ease;

}

.dark-theme input:focus, .dark-theme select:focus {

border-color: #ff0000;

box-shadow: 0 0 15px rgba(255, 0, 0, 1);

}

.dark-theme .btn {

background: linear-gradient(135deg, #ff0000, #cc0000);

box-shadow: 0 0 10px rgba(255, 0, 0, 1);

}

.dark-theme .btn:hover {

background-color: #cc0000;

}

.dark-theme .dark-mode {

background-color: #ff0000;

box-shadow: 0 0 10px rgba(255, 0, 0, 1);

}

</style>

</head>

<body>

<div class="logo">

<img src="https://progres.mesrs.dz/webfve/images/logo.png" alt="PROGRES Logo">

</div>

<label for="bacYear">Select the BAC Year</label>

<select id="bacYear">

<option value="" disabled selected>Select the BAC year</option>

<script>

const currentYear = new Date().getFullYear();

for (let year = 1990; year <= currentYear; year++) {

document.write(`<option value="${year}">${year}</option>`);

}

</script>

</select>

<label for="bacNumber">BAC Number</label>

<input type="number" id="bacNumber" placeholder="Enter your BAC number" oninput="validateNumberInput(this)">

<label for="bacPassword">BAC Password</label>

<input type="password" id="bacPassword" placeholder="Enter your BAC password">

<button class="btn">Submit</button>

<button class="dark-mode" onclick="toggleDarkMode()">Toggle Dark Mode</button>

<script>

function validateNumberInput(input) {

// Remove any non-numeric characters

input.value = input.value.replace(/[^0-9]/g, '');

}

function toggleDarkMode() {

document.body.classList.toggle('dark-theme');

}

</script>

</body>

</html>

0 Comments

2025/01/26
11:40 UTC

Guidance on using MIME types vs. file extensions in the accept attribute?

When providing file type hints to the browser with the accept attribute on an input element, we have the option to either specify MIME types (e.g. accept="image/png,image/jpeg") or file extensions (e.g. accept=".png,.jpg,.jpeg").

Are there any advantages to using one over the other?

2 Comments

2025/01/23
21:00 UTC

Seeking Stranger Things Superfan to Help Bring a Web Project to Life

Hi everyone,

I’ve been working on a personal project that’s very close to my heart, and I need some help to bring it to life. It’s inspired by Stranger Things, and I’ve created a website tied to a series of themed escape rooms I designed. The goal of the site is to lead someone special to the “Upside Down” (a metaphorical and emotional culmination of the journey) where we can finally connect.

This project isn’t paid—unfortunately, I don’t have a budget for it—but I’m hoping to find someone who shares a passion for creativity and a love for Stranger Things. I believe this could be a fun and fulfilling collaboration for someone who enjoys working on unique, heartfelt projects.

Here’s what I’d love help with:

Thematic Design: Adding fonts, colors, and visuals inspired by Stranger Things (e.g., glowing text, dark Upside Down tones, flickering Christmas lights).
Interactive Elements: Subtle animations or effects (e.g., text that flickers, lights that react to clicks, hover effects).
Sound Effects: Incorporating sounds like the hum of Christmas lights or eerie Upside Down ambient noise.
Polishing the Overall Look: Making the site feel immersive and engaging while keeping it simple to navigate.

If you’re a fan of Stranger Things and enjoy working on creative passion projects, I’d love to hear from you! I can share more details about the site and my vision. Your expertise and enthusiasm would mean so much to me.

Thanks for taking the time to read this!

2 Comments

2025/01/21
01:54 UTC

What else can html be used other than building websites?

This might seem stupid but wherever I search html is just used for building websites so what else can we develop or integrate html with other tools so that we can also build something else entirely?

(Ps: I am a beginner in html)

16 Comments

2025/01/08
04:36 UTC

I am attempting to get and html file into google sites. Anyone have help?

All I need is a tutorial or something to be honest.

Edit : (I meant "an html file" not "and html file")

1 Comment

2024/12/25
21:40 UTC

need help downloading a game and its files

if this is the wrong subreddit for this question pleaseeee let me know but yeah I’m looking for help downloading an HTML5 online game and its files. The game is Descendants Smarte Couture, published by Disney for its website a long time ago. It’s a fairly simple dress up game.

I used inspect element on it and was able to download a few JavaScript files of the character packs (the characters and what clothes they come with) but I’d like to get the full thing, including all of the art made specifically for the game.

2 Comments

2024/12/19
02:06 UTC

Signals and Effects Using Vanilla JavaScript & Web APIs

0 Comments

2024/11/30
19:48 UTC

Phaser.js HTML5 Cat game in development. Ghost room test footage

7 Comments

2024/11/27
20:25 UTC

Help with Amazon Developer Web App

Hey Everyone, I have an HTML5 (Construct 3) Web App, and have tried to upload it to the Amazon App Store, but each time it fails, and just shows a Blank Black Screen upon launch. I know that it works properly, because I have it up and running on my website. I have no clue what to do, if someone knew I would appreciate some help.

The apps are hosted, and listed below:
https://dk865.github.io/ninja
https://dk865.github.io/planetclicker-fire

Thank you all!

0 Comments

2024/11/06
13:36 UTC

Why don't people use more semantic html tags?

Why's everything a "div"?

19 Comments

2024/10/18
03:14 UTC

r/ratemyweb - Check it and fill the community

0 Comments

2024/10/01
00:36 UTC

How to create link inside meta description in html? Like on screen

2 Comments

2024/09/26
20:17 UTC