I had fun working on this page, had a chance to implement using bits of bootstrap. I found difficulties positioning the bootstrap buttons so i just decided to wrap them in divs and give them classes. I am still learning and any feedback will be highly appreciated,
@KingMisach Hello, it is a very good development, you can improve the background by adding the following lines of code in your body tag:
body {
background-repeat: no-repeat;
background-size: contain;
background-color: hsl(225, 100%, 94%);
}
@yallalaraja Hello, it is a very good development, you can improve the background by adding the following lines of code in your body tag:
body {
background-repeat: no-repeat;
background-size: contain;
background-color: hsl(225, 100%, 94%);
}
@anadutraoli Hello Ana Maria, your development looks great, so that the content is positioned in the center, you can apply the following css styles to the body tag:
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
👍
@Iamdodo22 Hello friend, I recommend that for the images you only establish the width and not its height, so you avoid that the image looks deformed.
Hi Guys! Here's my solution to this CSS & JS challenge. First time using CSS grid-areas, so any feedback is welcome! For the JS part, I added a noscroll class on the body to prevent vertical scrolling when the mobile menu is open. I feel like my JS might not be the most efficient, still learning. As usual, any feedback is greatly appreciated! Thank you! ✨
@debriks Hi Deborah, what a great job I love your project!... to avoid the horizontal scrolling generated by the mobile menu, you can apply the overflow-x property to the menu container (in your case the container class tag) as hidden, and position as relative:
.container {
display: flex;
flex-direction: column;
overflow-x: hidden;
position: relative;
}
With this the horizontal scroll should disappear, it is likely that your design will be broken but it will surely be some minimum adjustment of margin and/or padding, no more than that.
How to set the image in the div tag and how to give a border radius to image?
@coder-megha242 Hi Megha, here are some tips to make your project look better:
First I recommend you set both html and body, a width and height of 100%, so that later with display flex you can center your content horizontally and vertically:
html,
body {
width: 100%;
height: 100%;
}
Regarding the "*" element, I recommend setting the margin, padding, and box-sizing properties, and setting the font-family property on the body, along with display-flex, justify-content, and align-items:
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
font-family: 'Outfit', sans-serif;
background-color: hsl(212, 45%, 89%);
}
The element with class ".content" does not need properties, since its parent element (body) will take care of centering your content:
/* .content{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
} */
The element with class ".box" is the container of the qr code image and texts, this element has a width of 320px and a height of 520px, and the padding of 10px is set on this parent element, so you won't have to apply padding to the child elements, additionally I recommend you to set the following properties in ".box", ".box h2" and ".box p":
.box{
width: 320px;
height: 520px;
background: hsl(0, 0%, 100%);
border-radius: 10px;
padding: 16px;
}
.box h2{
/* padding: 10x; */
margin-top: 16px;
margin-bottom: 24px;
font-size: 24px;
text-align: center;
}
.box p{
margin-top: 5px;
padding: 10px;
text-align: center;
font-size: 15px;
}
Finally, to the ".box img" element you only assign a width of 100% and the height will adjust automatically, and I recommend setting the border-radius property to the same value as its container (10px):
.box img{
width: 100%;
border-radius: 10px;
}
I hope these tips are useful, a hug!
@agelitaeme That's an excellent job!... maybe you think it's a good idea to apply a transition effect to the "Learn More" buttons, to make the hover effect look smoother, you can apply the following line in your code:
.card a {
width: 150px;
height: 50px;
border-radius: 30px;
text-decoration: none;
background-color: var(--gray);
display: flex;
justify-content: center;
align-items: center;
transition: all .25s ease-in-out;
}
A hug and continue happy coding 😁
Ainda possuo uma dificuldade com o css , é algo que preciso aperfeiçoar.
Hello Nayara, your solution looks great, you can add some properties in the background pattern of the body, for example:
body {
background-image: url(./images/pattern-background-desktop.svg);
background-repeat: no-repeat;
background-position: top;
background-size: 100vw 45vh;
background-color: hsla(230, 81%, 94%, 0.993);
}
With background-position: top; you make sure that the pattern is always positioned at the top, and with background-size: 100vw 45vh; it will take 100% of the width of the device screen and 45% of the height of the device screen, so it will be more similar to the design.