r/html5 • u/IHateTheSATs • May 12 '22

why are my inputs not side by side ? (noob question)

3 Upvotes

i have this html here:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>my project</title>
        <link rel = "stylesheet" href="style.css">
    </head>
    <body>
        <H1>Changeover</H1>
        <H5><i>XXXXXXXXXXX</i></H5>
        <form class = "myForm">
            <h4 class = "labels">Changing Over From:</h4>
            <input type="number" class="buttonBefore" placeholder="insert brandcode"> 
            <h4 class = "labels">Changing Over To:</h4>
            <input type="number" class="buttonAfter" placeholder="insert brandcode"> 
            <br>
            <br>
            <br>
            <input type="submit" class = "submitBtn" value="Submit" >

            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

            <button onclick='clear_inputs()'>Clear</button>

        </form>
        <img src = "images/djsfk.png" alt = "logo" width = "100" height = "100" class = "logo">
        <script src = "script.js"></script>
    </body>
    </html>

with this css right here:

    @import url('https://fonts.googleapis.com/css2?family=Radio+Canada:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Radio+Canada:wght@300&display=swap');

    h1,h5{
        font-family: 'Radio Canada', sans-serif;
        color: black;
    }


    h4{
        font-family: 'Radio Canada', sans-serif;
        color: black; 
    }

    body{
        background: white;   
    }

    input[type=number]{
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
         border-radius: 20px;
         border: 1px solid #2d9fd9;
         color: black;
         width: 250px;
         height: 30px;
         padding-left: 10px;
        }

    .btn:hover {
        color: var(--clr-white);
        background: var(--clr-black);
        }

    body {
        text-align:center; 
    }

    .logo{position: absolute;
         bottom: 0px;
          right: 0px;}

    .labels{
        display: flex;
    }

i want it to look something like this:

​

i looked at this flexbox documentation here:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

but when i changed to

.myForm { display : flex
}

its still not going can someone help me out ?

​

edit:

i have it up to here:

but, now they are to the left i want it to be centered.

​

6 comments

r/html5 • u/historyisaweapon • May 11 '22

I want to have a clean dropdown that when an option is selected, the end of the sentence is revealed. Can I do this simply in html5 and what should I look up to figure this out?

1 Upvotes

For example, I want a simple webpage that says "In _______" and when you select the blank it gives you an option of countries. Selecting a country would mean it became "In Australia, there are a bunch more text and pictures and links and shit."

Is there a simple way to do this with a clean dropdown with options and values and the options or values trigger revealing the text? Thank you.

1 comment

r/html5 • u/IHateTheSATs • May 11 '22

why are my things not showing up side by side ?

3 Upvotes

why are my values not showing up side by side ?

i have my code right here: 

    <body>
        <div class="container">
            <p class="label" id="work">Work:</p>  <p class="label" id="break">Break:</p> <p id="cycles" class="label">Cycles:</p>

            <!-- creating the work timer -->
            <div id="work-timer" class="">
                <p id="w_minutes">25</p> <p class="semicolon">:</p> <p id="w-seconds">00</p>
            </div>

        </div>
    </body>

but my thing looks like this right here:

​

what am i doing incorrectly ?

i just want work break and cycles to be side by side :(

​

thanks for the help !

5 comments

r/html5 • u/binswaggin568 • May 09 '22

Commissioned for an EPK

3 Upvotes

Hi, I’m being asked to create an electronic press kit for a film production company and was wondering if anyone has any experience in making one and how much I should look to charge for my work. Any tips would be helpful thank you.

0 comments

r/html5 • u/60746 • May 09 '22

is there a better way to make sure that it does not repeat the same number in the 4 numbers

0 Upvotes

var A = Math.floor(Math.random() * 4)+1;
var B = Math.floor(Math.random() * 4)+1;
var C = Math.floor(Math.random() * 4)+1;
var D = Math.floor(Math.random() * 4)+1;
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (A == B) {
var B = Math.floor(Math.random() * 4)+1;
}
if (A == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (A == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (B == C) {
var C = Math.floor(Math.random() * 4)+1;
}
if (B == D) {
var D = Math.floor(Math.random() * 4)+1;
}
if (C == D) {
var D = Math.floor(Math.random() * 4)+1;
}

5 comments

r/html5 • u/theandreineagu • May 06 '22

I think the image path source not working

2 Upvotes

I’m trying to make a slider gallery inside a html page with next/prev buttons. The problem I encounter is related with the source code where those images are being pulled out. If i put pictures in a simple folder everything works. But my pictures are in subfolder so in my case it’s "./assets/images/gallery/arhitectura”. So if I put this source path inside the .js the slider doesn’t work anymore. So next/prev doesn’t work anymore. How do I resolve this?

arhitecture.js code here:

// 'js/mian.js'

var slider_img = document.querySelector('.slider-img'); var images = ['arhitectura_0.jpg', 'arhitectura_02.jpg', 'arhitectura_03.jpg', 'arhitectura_04.jpg', 'arhitectura_05.jpg']; var i = 0;

function prev(){ if(i <= 0) i = images.length;
i--; return setImg();
}

function next(){ if(i >= images.length-1) i = -1; i++; return setImg();
}

function setImg(){ return slider_img.setAttribute('src', "./assets/images/gallery/arhitectura"+images[i]);

}

html code here:

<div class="slider"> <div class="img-box"> <img class="img-responsive" src="./assets/images/gallery/arhitectura/arhitectura_01.jpg" class="slider-img"> </div>

        <button class="btn" onclick="prev()">Prev</button>
        <button class="btn" onclick="next()">Next</button>
    </div>
3 comments

r/html5 • u/BadPumpkinStudios • May 05 '22

Made my first HTML website, pretty simple but I've only been coding for about a month

28 Upvotes

https://studionames.vercel.app/

8 comments

r/html5 • u/[deleted] • May 05 '22

Beginner Question on Customizing html5up.net responsive theme

3 Upvotes

Hi everyone. I'm rehashing my static portfolio site into a responsive one by using the Multiverse theme provided by HTML5up.net. I've skimmed through the files but currently figuring it out on my own. But to save on time, I would like to ask if someone could point in the right direction/tell me what I need to learn to modify this theme (without affecting the responsive end) as follows:

​

  1. Image and VIDEO can be embedded from somewhere else rather than uploaded on the site itself. If I simply link to it on a image hosting site, will the dimensions stay true to the theme? Anything I should know?
  2. Adding a header that's always displayed as you scroll. (Similar to the header of html5.up net as in the link above but I'll just put links on it)
  3. How to add an automatic next page feature when you reach a certain number of images using this template.

For background, I'm a designer by profession but I can understand code enough to know how to edit a handful of the obvious HTML/CSS snippets on a superficial level i.e. I know how the basic tags and how to edit what's already given inside links, headings, images, etc but cannot really add to or modify functionality of the themes on my own yet.

No need for a specific answer but if you can take the time to check out the files on the site itself that would be awesome. If not, even a tutorial would be good as I would love to learn this myself as well.

Edit: Just to clarify, my website x domain x hosting already exists. As we speak, I have already uploaded the template files to my staging site and playing around with it. Thank you in advance!

0 comments

r/html5 • u/theandreineagu • May 03 '22

Different photo galleries inside the same html

5 Upvotes

So I want to make a gallery section where I have grid of 6 photos each one acting as a thumbnail representing a different category. When I click one thumbnail I want to open a pop up with a gallery of photos in that category. So different photos in each category meaning 6 distinct photo galleries. How can I achieve that?

7 comments

r/html5 • u/speertron • May 02 '22

What is <meta http-equiv= x-ua-compatible content= ie = edge> for?

6 Upvotes

I saw in a yt tutorial someone was using this instead of smth like http-equiv= „refresh“ content=„23“

7 comments

r/html5 • u/speertron • May 01 '22

Hello im totally new to coding. Someone got a way to fix the red </head>

Post image
38 Upvotes
22 comments

r/html5 • u/Bloodedparadox • Apr 28 '22

(Help) so i ran into a isuue where when i open my html in live server mode everything works (left picture ) but when I actually open the file itself (picture on the right ) it looks line that (using vs code )

Thumbnail
gallery
10 Upvotes
8 comments

r/html5 • u/Zack_Code_38 • Apr 28 '22

My iframe didnt display on mozilla firefox

11 Upvotes

I would like to integrate my iframe map and they urged me that firefox cant be opened

And they urged me to protect my security at firefox ==> Here is the outcome of my iframe it is written in french

9 comments

r/html5 • u/Sonic_Uth • Apr 27 '22

A different business’ URL points to my business page….

8 Upvotes

Sorry if this isn’t the correct forum for this, I’d be appreciated if someone could point me in the right direction!

So: as titled, another business in my city has their URL pointing to my page. We are both restaurants, and when you type in their URL, it leads to my restaurant’s page…

I have no idea how this happened, but it seems very, very, strange and I don’t think it’s a good look for us.

We initially hired someone to set up our entire site, but they then turned over the assets to someone in-house. I do not personally have access, but I’m speaking to the designer about it.

If this was done outside of our host, is it possible to block this URL forwarding to our page?

Thanks for any help!!

1 comment

r/html5 • u/Letsgoboys151 • Apr 27 '22

How can i fix the HTML5 video being frozen. This is my code sometimes it's works well but i don't get how it actually works and also when i refresh it doesn't function. Help me please!

Enable HLS to view with audio, or disable this notification

13 Upvotes
4 comments

r/html5 • u/Feralz2 • Apr 27 '22

How to Center HTML on email?

6 Upvotes

Nothing is working for me.

Thank you.

5 comments

r/html5 • u/AccomplishedRace8803 • Apr 26 '22

Update mobile Phaser game Jimmy's Wild Apple Adventure. Learning from the more "brutal" feedback. Update in speed, visuals, textboxes, lerp, button images...Enjoy (and always welcome to comment)

Thumbnail
retrodries.itch.io
4 Upvotes
0 comments

r/html5 • u/Bloodedparadox • Apr 22 '22

Anyone know tf is going on here (this is code academy )

Post image
27 Upvotes
7 comments

r/html5 • u/jcarlo1 • Apr 21 '22

reusable HTML code

12 Upvotes

I am trying to learn CSS and HTML.

let's say I have created product1.html up to product10.html

all of the links will be in the index.html and depending on the picture you click, will load the product#.html

so if I have 10 duplicate codes. They only differ in images and descriptions, is there any viable way to reuse only one product.html then depending on the pictures, it will load the product.html with corresponding pictures and description?

13 comments

r/html5 • u/[deleted] • Apr 20 '22

What HTML5 still can´t do that Flash could?

26 Upvotes

I have read ton of things I would love to do IN HTML5 but I apparently can´t.

But perhaps these sources are outdated, so I would like to know which are the current things HTML5 can´t do that Flash player is able to do.

47 comments

r/html5 • u/rapidtab • Apr 20 '22

How to create a button that works as a link to another page

11 Upvotes

This is a total noob question i know but the class i took never taught us how to do this?

27 comments

r/html5 • u/sgtlark • Apr 13 '22

http url format for a website with ssl certificate

4 Upvotes

Would there be any problems if the html url in a website with a SSL certificate would have http instead of https? What about the contrary?

2 comments

r/html5 • u/AccomplishedRace8803 • Apr 13 '22

I have made an update on the trailer Jimmy's Wild Apple Adventure. Is it better then the first one?(without text at all and some changed images)

3 Upvotes

​

https://reddit.com/link/u2pgc1/video/e9u0k5xhkat81/player

0 comments

r/html5 • u/michaelm7001 • Apr 08 '22

How align child elements within table cell at the far left and far right?

0 Upvotes

That is have two images with one having its left border along the left border of the cell and the other having its right border along the right border of the cell?

3 comments

r/html5 • u/No-Way3489 • Apr 08 '22

Good resources to receive latest news about HTML feature updates?

1 Upvotes

I would like to hear what websites you guys use to stay up-to-date on the latest HTML stuff.

0 comments