Skip to content
OverviewSolutions
28
Comments
8

Matthias

@astrageniusGermany630 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

I'm learning Javascript and CSS/HTML

Latest solutions

View more solutions

Latest comments

  • Matthias•630
    @astragenius

    Hey your bg-images and icons dont load correctly.

    Remove "/" on all your img url path.

    for example:

    body {
    --bg-img: url("/images/bg-mobile-dark.jpg");
}

to

body {

    --bg-img: url("images/bg-mobile-dark.jpg");
}

    do this on all your image urls. After this all images should load correctly.

    Marked as helpful
  • Matthias•630
    @astragenius

    Hi my friend :)

    Delete the div and picture element with the class .background-image. And delete the class in the css file aswell. (these are not necessary) Set the background-image on the body via CSS. (less code)

    I make this change on your css file:

    body {
  background-image: url(./images/bg-intro-desktop.png);
  background-color: #ff7a7a;
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
}

    You can make a mediaquerie to change the mobile image aswell.

    media (max-width: 375px) {
   body {
  background-image: url(./images/bg-intro-mobile.png);
  
    }
}

    This shoult work:)

    have a nice day :)

  • Matthias•630
    @astragenius

    Hey ho :) Good solution so far. Your layout is really accurate.

    You should set the 'label' html element to each input element.

    For more Details:

    Link for further Reading

    for example

    <label for="email"></label>
<input type="email" id="email">

or

<label for="email">
<input type="email" id="email">
</label>

    Technical you don't need Javascript for clientsite formvalidation. You can it do only with CSS pseudo-classes. (its an alternative because some user have deactivate JS on their browser. So no JS validation possible.)

    For example

    input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-color: red;
}

input:valid {
  border: 2px solid green;
}

    For more Details:

    MDN Webdocs CSS Tricks

  • Matthias•630
    @astragenius

    Hey ho :) Good solution so far.

    Change

    background: url(/images/bg-intro-desktop.png);

(you have to add a dot)
to

background: url(./images/bg-intro-desktop.png);

(now your background image is loading).

    You can delete the body:after class completly

    Add the red background-color in the html element instead:

    html {
  font-size: 62.5%;
  background-color: hsla(0, 100%, 74%, 0.658);
}

    You should set the 'label' html element to each input element.

    For more Details:

    Link for further Reading

    for example

    <label for="email"></label>
<input type="email" id="email">

or

<label for="email">
<input type="email" id="email">
</label>

    Technical you don't need Javascript for clientsite formvalidation. You can it do only with CSS pseudo-classes.

    For example

    input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-color: red;
}

input:valid {
  border: 2px solid green;
}

    For more Details:

    MDN Webdocs CSS Tricks

  • Matthias•630
    @astragenius

    Hey ho :) Good solution so far. Your layout is really accurate.

    You should set a 'label' html element to each input element.

    For more Details:

    Link for further Reading

    for example

    <label for="email"></label>
<input type="email" id="email">

or

<label for="email">
<input type="email" id="email">
</label>

    Technical you don't need Javascript for clientsite formvalidation. You can it do only with CSS pseudo-classes.

    For example

    input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-color: red;
}

input:valid {
  border: 2px solid green;
}

    For more Details:

    MDN Webdocs CSS Tricks

    Marked as helpful
  • Matthias•630
    @astragenius

    Hey ho :) Good solution so far. Your layout is really accurate.

    For your question for the Email input:

    • Set a "required" attribute and the "pattern" attribute and set an RegEx for Email validation in it. For example
    <input type="email" id="email"  placeholder="Email Address" pattern="/[\w\-\._]+@[\w\-\._]+\.\w{2,10}/" required>

    You should set the 'label' html element to each input element.

    For more Details:

    Link for further Reading

    for example

    <label for="email"></label>
<input type="email" id="email">

or

<label for="email">
<input type="email" id="email">
</label>

    Technical you don't need Javascript for clientsite formvalidation. You can it do only with CSS pseudo-classes.

    For example

    input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-color: red;
}

input:valid {
  border: 2px solid green;
}

    For more Details:

    MDN Webdocs CSS Tricks

View more comments