@ThessssiftSubmitted 11 months ago
Latest solutions
Manage Landing Page
#accessibility#tailwind-css#vite#reactSubmitted 11 months agoHi there! I would like some help with the carousel on desktop. For now, I create a copy of the array and concatenate it with the original array, but then it goes back to the first element. I want to know if there is a way to make the carousel on desktop infinite.
Thanks!
Job Listings With Filtering
#vite#vue#tailwind-cssSubmitted 11 months agoI'm still learning Vue; if you have some feedback on how to improve my code, please let me know!
Room Homepage
#vite#vue#tailwind-cssSubmitted 12 months agoI'm having some problems with the loading of the image on the first click of the carousel; it is slow and the layout breaks. Is there any way to fix this?
Thanks!
Latest comments
- @VickyAzolaPosted 11 months ago
Hi there! Good work on completing this challenge! I checked your solution and noticed that when the window is large, the content escapes the card.
To fix this you can create a container div with a background image of the card and place the content of the card inside. Something like this:
<div class="card-container"> <div class="card-back"> <p id="cardCVC" class="absolute right-16 text-white"> OOO </p> </div> <div class="card-front"> <div class="absolute top-5 left-8 bg-white h-[29%] w-[15%] rounded-full text-transparent">sss</div> <div class="absolute top-[41px] left-28 bg-transparent h-[10%] w-[5%] rounded-full border-2 text-transparent">sss</div> <p id="cardNum" class="absolute bottom-14 left-6 text-[2.4cqw] max-sm:text-xl text-white"> OOOO OOOO OOOO 0000 </p> <p id="cardName" class="absolute bottom-5 left-8 text-[1cqw] text-white max-sm:text-sm"> JANE APLESSED </p> <p class="absolute bottom-5 right-16 text-[1cqw] text-white max-sm:text-sm"> <span id="month">00</span>/<span id="year">00</span> </p> </div> </div>I added this line for the CVC since i didn't notice it in your code
<p id="cardCVC" class="absolute right-16 text-white"> OOO </p>and add the style to the css
.card-container { position: relative; min-height: 100vh; } .card-front { background-image: url('bg-card-front.png'); width: 28rem; height: 15.2rem; border-radius: .6rem; position: absolute; left: 10rem; top: 10rem } .card-back { background-image: url('bg-card-back.png'); width: 28rem; height: 15.2rem; border-radius: .6rem; position: absolute; left: 18rem; top: 28rem; }You would need to adjust the width, height, and position for responsiveness, but this way your content will stay inside the card no matter the size of the window.
Hope this help!
0 - @Squing0Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
In general, getting more used to tailwind and I'd definitely try to be more aware of the mobile design here before attempting the desktop design.
What challenges did you encounter, and how did you overcome them?The image here was the main problem both for the desktop and mobile design but by placing the image using absolute positing in the mobile design, I was able to allow it to scale down properly in comparison to using it's full width.
What specific areas of your project would you like help with?Mainly getting the border lines to work for the table as these while these are definitely applied styles, they aren't visible and also having space between list numbers and list items.
@VickyAzolaPosted 11 months agoHi there! 👋 Awesome job completing this challenge!.
So for the
<table>, the class border-separate is not allowing the border to show; if you remove it and add apyto the<th>, the space effect is still achieved.<table class="w-full text-left ml-5"> <tr class="border-b"> <th class="font-normal py-2">Calories</th> <td class="text-nutmeg font-bold">277kcal</d> </tr> ....... </table>And for the list, I don't know if there is a better way, but this is how I did it: I removed the
list-insidesince the design shows it is outside, added apx-4and amarker:font-boldfor the numbers. And to move the text further away from the number, I added a<span>inside the<li>with the classesrelativeandleft-2. I also removed the<br>since those aren't necessary.<ol class="list-decimal space-y-2 px-4 marker:font-bold"> <li> <span class="relative left-2"> <b>Beat the eggs:</b> In a bowl, beat the eggs with a pinch of salt and pepper until they are well mixed. You can add a tablespoon of water or milk for a fluffier texture. </span> </li> .......Another thing is that in the design, the text color should be 'darkCharcoal'.
Hope this Helps!
Marked as helpful1 - @AlhassanMariamSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud I didn't spend decades on this design
What specific areas of your project would you like help with?I would like suggestions on how to make the 'button and 'a' tags sync
@VickyAzolaPosted 11 months agoHi there! 👋 Awesome job completing this challenge.
So, <button> and <a> are not meant to be together since they have different purposes:
- button should be used when you want something to take action on the same page.
- a is used when you have links that take you away from the page.
In this case the more semantically appropriate tag is <a>
<main> ..... <a href="">GitHub</a> <a href="">Frontend Mentor</a> <a href="">LinkedIn</a> <a href="">Twitter</a> <a href="">Instagram</a> </main>Take the style on the button and add it to the a:
a { text-decoration: none; color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 20%); width: 230px; height: 30px; margin: 5px; border-radius: 5px; } a:hover{ color: hsl(0, 0%, 8%); background-color: hsl(75, 94%, 57%); }Hope this helps!
0 - @Berto8714Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I really enjoyed learning more how to use CSS and HTML, it's satisfying to see progress happening and I would have started this task sooner if I knew it would be easy.
What challenges did you encounter, and how did you overcome them?I really didn't know how to create tables in CSS, I had to research and watch videos to just discover that you just need to use two different tags, programming is complicated.
What specific areas of your project would you like help with?I would like to know how to better organize yourself in terms of margins and positioning of elements and I would also like to know why my image is not loading
@VickyAzolaPosted 11 months agoHi there! 👋 Awesome job completing this challenge.
So looking at your github repository, it looks like you didn't upload the image file; that's why it doesn't appear on the page. For it to show, you need the folder
assetsand the folderimagessince that is the way you declare it on the src:<img src="assets/images/image-omelette.jpeg" alt="Omelette on a plate">Also, adding an alt attribute is important for accessibility, and in cases like this when the image doesn't load properly.
Hope this helps!
Marked as helpful1 - @BobFisherman18Submitted 12 months agoWhat are you most proud of, and what would you do differently next time?
I am starting to understand on how to use the web development tools in Google Chrome and Firefox. Learning and understanding the box model in CSS is a fundamental tool to designing websites.
What challenges did you encounter, and how did you overcome them?One challenge is that I overcame is adjusting the proper width and height when it comes to mobile and desktop environments.
What specific areas of your project would you like help with?Specific areas I would like to work with is that I need to figure out how to implement the font family in CSS. Another thing is I need to adjust the colors of the words.
@VickyAzolaPosted 12 months agoHi there!
So, there are two ways to get the font: import it into your CSS or your HTML, and then apply it to the body or the necessary classes.
- First, go to style-guide.md and copy the font link on Google.
- Then, on the top right, click on the blue button get font
- Click the button get embed code
- On the left, you can see the selected fonts and the weights they have, you can change that and select the ones you want, or leave it like it is and get all the weights.
- On the right, select web, and there will appear two options: "<link>" (you can copy this and paste it on your head HTML) and "@import" (this goes on the top of your CSS). Choose whichever you want, and then copy the text and paste it on your CSS body or classes that require the font.
Here is an example:
With <link>: In the <head> of your HTML:
<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap" rel="stylesheet"> </head>In the CSS (the selected elements are just an example):
h1 { font-family: "Outfit", sans-serif; } p { font-family: "Young Serif", serif; }With @import: In your CSS:
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap'); h1 { font-family: "Outfit", sans-serif; } p { font-family: "Young Serif", serif; }0 - @mkalmetievaSubmitted 12 months agoWhat challenges did you encounter, and how did you overcome them?
I didn't know how to choose an image based on media size. Now I now that
What specific areas of your project would you like help with?picturetag can handle it.- I am not sure whether I configured element resizing based on media size properly
- Cart icon doesn't look aligned vertically despite all my attempts
@VickyAzolaPosted 12 months agoHi there! 👋 Awesome job completing this challenge.
The media query seems fine to me. The only thing that seems different compared to the design is the price on mobile; there, the
flex-direction: column;is not necessary:@media screen and (max-width: 768px) { ..... .price-block { gap: 0.5rem; margin: 1rem 0; ---> added to separate from the text and button } }And for the button, you can achieve the alignment by giving it a display of flex and deleting the class on the image. Here is an example:
button { ---- added ----- display: flex; align-items: center; justify-content: center; column-gap: .8rem; ----- width: 100%; padding: 1rem; font: inherit; font-weight: 600; color: var(--white); background-color: var(--dark-cyan); cursor: pointer; border: none; border-radius: 0.5rem; } --- Delete this one ---- .icon-cart { width: 0.75rem; vertical-align: middle; /* Aligns strangely, not in the middle */ margin-right: 0.5rem; }Hope this helps!
0
