@lanszesz
Submitted
I cannot imagine how to position those cards
@riccardofano
@lanszesz
Submitted
I cannot imagine how to position those cards
@riccardofano
Posted
Hello Erwin, you can position the cards using CSS grid!
On the desktop version you'll see there are 3 columns of equal size. Then there are what might appear to be 3 rows but in reality there are only 2, the cards on the side start at the first row but span 2, they are then centered. On the mobile version there's only one column so you can change the grid accordingly.
I hope this was helpful, take a look at my solution if you need any pointers.
Marked as helpful
@wendeltm
Submitted
My dificult was to put the cards separate and to find a way to put the colors on the top of div, i tried 2 codes until finally do the final code to share on the site.
@riccardofano
Posted
Hey José, good job on this challenge already, but it would be a great way to learn how to use CSS grid!
If you look at the design of the desktop version you'll see there are 3 columns of equal size.
Then there are what might appear to be 3 rows as well but in reality there are only 2, the cards on the side start at the first row but span 2 and then are centered. On the mobile version there's only one column so you can change the grid accordingly.
Hopefully this was helpful, take a look at my solution if you need any pointers.
Marked as helpful
@MURRAY122
Submitted
Any feedback on this or anything else would be great. Thanks for viewing
@riccardofano
Posted
Hello Murray, good job on the challenge!
Regarding your question about svgs:
I personally use <img src="picture.svg" />
whenever I don't need to modify their color but I want them to take up space in the document so I can position them as you would with any other element in the dom.
background-image
is used when I don't want it to occupy physical space, it just needs to be in the background.
You can look at this blue Slack banner under the comments for reference, the first line is an img
tag, while the dark blue logo in the bottom right corner is in a background-image
.
One takes up physical space, the other does not.
An inline svg
is for when you want to take up space and modify its properties with CSS, like your dropdown arrow.
Depending on how the svg was made you'll want to modify either the fill
or the stroke
, you can look at the actual file to know for sure.
<svg class="icon" width="10" height="6" xmlns="http://www.w3.org/2000/svg">
<path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"></path>
</svg>
As you can see the stroke
is a color while the fill
is none
so in this case you'll want to modify the stroke.
@melad99
Submitted
Just finished this challenge ... the JavaScript was the most difficult when I try to validate the email and show the error but finally, I did it also I will update the mobile responsive and enhance it soon.
@riccardofano
Posted
Hello Melad, excellent job on getting the javascript working!
I wanted to let you know there's an easier way to validate an email, in fact, the browser already does it for you.
Instead of checking if inputText
's value matches the regular expression you can just access inputText.validity.valid
thanks to having set <input type="email">
.
It does the exact same thing but it's a lot less work for you!
Having set input as type="email"
also allows you to style css elements by accessing its :valid
or :invalid
state so if you want to add a red border if your input is invalid you could do
.base-input:invalid {
border: 1px solid red;
}
You can take a look at my solution for more details. Hope this was helpful and have a wonderful day!
Marked as helpful