@vij6
Submitted
I'm a Newbie here feel free to comment so I can be better Thanks in advance!!
Atul kumar
@AtulKumar0001
All comments
- Atul kumar• 200
@AtulKumar0001
Posted
Hey @vij6 The first thing I want to say is that you should learn about some media queries so that you can create responsive pages. And if there is only one heading on your page, rather than using h2, use h1 first, and then you can use other heading levels.
0 - Ali Mahmoud• 390
@AliMahmoud21
Submitted
Hi Guys! I don't know how to make the background color on the photo so I'm asking if there's anyone who can help me.
Ok I Made It.
Atul kumar• 200@AtulKumar0001
Posted
Hey @Ritesh-Virulkar, To do so, add the class image-2 (or change the name, but then you must also change the CSS selector name provided below) to the div where you have placed your desktop header.jpg, and then apply this after adding the class.
.image-2{
width: 50%;
position: relative;
background-color: hsl(277, 64%, 61%);
opacity: 1;
}
After that, add another class to your img selector -> img (you can change this as well) and apply this style.
.img {
display: block;
object-fit: cover;
min-width: 100%;
opacity: .75;
mix-blend-mode: multiply;
}
Marked as helpful
2 - Saitraru• 150
@Saitraru
Submitted
Siempre lo más difícil, es poder hacer la diferencia entre padding y margin y calcular los valores para estas propiedades. De a poco voy entiendo cada vez más. Gracias.
Atul kumar• 200@AtulKumar0001
Posted
Hola, @saitraru Consulte esta página para obtener más información sobre el margen y el relleno.
https://blog.hubspot.com/website/css-margin-vs-padding#:~:text=In%20CSS%2C%20a%20margin%20is,the%20space%20inside%20an%20element.
Y hay un error de validación html en su archivo index.html. Debe corregir su <bod> a <body>.
0 - Jacob Seymour• 50
@Jacwilalasey
Submitted
Second challenge completed! (sort of)
I have 3 questions;
-
When resizing the screen down to mobile, the sub containers all spill over their content e.g. the text and buttons spill out the bottom, how do I manage this?
-
Also when resizing, the sub containers stack from a row, to two on top and one on bottom before going into a full column, how do I avoid this?
-
How to I get border-radius to work on only the 4 corners? each time I added it in, it would curve all 4 corners of each sub container.
Thanks everyone! Jac
Atul kumar• 200@AtulKumar0001
Posted
Hey there, @Jacwilalasey If I understand correctly, the answer to your first query, "How can you avoid the overflowing content," is either by reducing the font size and margin or padding you have provided inside your cards, or by simply increasing the size of your cards.
Your second question is a little unclear to me.
The third question's response is that you can use the styling listed below if you want to give each of your cards a different border-radius and you have to give each of your cards a different class.
border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-right-radius: ;
border-bottom-left-radius: ;
Additionally, you can employ short-hand properties.
border-radius:(first value for top-left radius) (second value for top right radius) (third value for bottom-right radius) (fourth value for bottom-left radius);
e.g : bottom-radius: 2px 10px 10px 20px;
I will give you a link to learn more about border-radius. https://www.w3schools.com/cssref/css3_pr_border-radius.asp I hope this helps you.
Marked as helpful
1 -
- Dylan• 20
@dylancatala
Submitted
Hello! Here's a new project, I did it in (approximatively) 7 hours, I know it can be a lot for a small project like this, but feels good to deploy it (even If some settings aren't the same as intended).
For example;
-
Background of the body, I don't know how to setup to make a Bubble in the top corner left and another in the bottom corner right. (See the solution)
-
Difficulties to setup the top background of the card, I wasn't using "display : flex" to the picture div.
I still feel very happy with the progress I'm making! (2 months ago I would have given up, and found it very difficult)
Your feedback is always highly appreciated! Help me to be better.
Atul kumar• 200@AtulKumar0001
Posted
Hey Dylan, I have a solution for your bg-pattern that you were unable to set in the background. You can replace your body in the style.css file with the code I have given below. I hope this is going to help you.
body {
font-family: 'Kumbh Sans', sans-serif; background: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: bottom 40vh right 105vh, left 105vh top 50vh; background-color: hsl(185, 75%, 39%);}
Marked as helpful
0 -
- Augustine Asare• 120
@AustinKing5
Submitted
Ireally struggled with styling "divs". I want to know if there sre any rules regarding when and when not to use divs in my HTML structure/ I am newbie so any words of encourage will come a long way to help my development.
Atul kumar• 200@AtulKumar0001
Posted
Hey Augustine Asare, I have a suggestion for you. Instead of using div, you should use other html tags like <header>,<section>,<footer>,<main> etc. because they are going to help you better in the long run and they are also much more preferable and helpful for screen readers. I will give you an article link where you can find more info about them and why not use Divs too much.
https://www.w3schools.com/tags/ref_byfunc.asp
https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i
And I have one more suggestion for you. You should read about how to link images in html. I will give you some info.
- / = Root directory.
- . = This location.
- .. = Up a directory.
- ./ = Current directory.
- ../ = Parent of current directory.
- ../../ = Two directories backwards.
0 - Atul kumar• 200
@AtulKumar0001
Submitted
Any advice on how to make this better would be greatly appreciated.
Atul kumar• 200@AtulKumar0001
Posted
@correlucas Hey, thanks for the suggestion. It was helpful. And I want to ask you: should I always use rem, or are there some particular situations where I should use rem, em, or %? If so, would you kindly offer some?
0 - Adriel Murray• 90
@AdrielMurray
Submitted
I found it difficult to use media queries to make the project responsive. Can someone give me advice on that? I want all my future projects to be responsive from now on.
Atul kumar• 200@AtulKumar0001
Posted
To make your image exactly match the design preview, set the opacity to 0.75.
.right-card img {
opacity: 0.75;
}
and you can also use this to center your .container:-
body {
display: flex; justify-content: center; align-items: center; min-height: 100vh; width:100%;}
.container{
background-color:hsl(244, 38%, 16%); width:65%; margin:0 auto; //To center your div from left and right display:grid; border-radius:5px; overflow:hidden; grid-template-columns: 1fr 1fr;}
Marked as helpful
0
