@UgochukwuPeterSubmitted over 3 years ago
Guliye
@guliye91All comments
- @guliye91Posted over 3 years ago
Hi first congratulations for completing the project and making such huge achievement. the layout of the project is nicer in destop and fit very well.
but at the bottom(footer) where you placed the logo. the logo is not visible because of dark background.
you can change the logo into white color in 2 ways.:
- by using css filter property
- open the logo.svg in the text-editor and change the 'fill' attribute to this color #ffffff
1 - @ShirajukiSubmitted over 3 years ago
Hello! 👋
This is my 3rd solution on Frontend Mentor, and also my 3rd week here! As this was my first intermediate challenge, and also quite simple, I chose to build it using static HTML5 and CSS3 and vanilla javascript. 🙂
I used more time on this solution this week as Easter break 🐣 just began for me and thus I it took 4-5 hours on this solution in the span of 2 days. Feedbacks on my excessively use of pseudo-element ::before/::after, if that may be unnecessary or not, to my solution of the flipping animation of the card are appreciated. I tend to also write lots of redundant and unclean code but I am willing to improve, thus any feedback from the community on that or anything else are also greatly appreciated!
Once again I used Figma 🎨 for measuring which has made it a lot easier to get the measurement, but is still difficult to get the solution to be "pixel correct" on a big display as my monitor is smaller than 1440px. The solution uses the WebStorage API / LocalStorage for saving the countdown timer, and the use of setInterval for the countdown. 💻
I'll be back for another challenge next week, happy Easter and see you all again next week! 🙂
- Shirajuki
@guliye91Posted over 3 years agoThe overall layout and the design is Ok. But am getting -1 in the minutes when first the page loads. What is it? I think you need to check that
0 - @DownTheMatrixSubmitted almost 4 years ago
In order to move the illustration image as per the design (displaced from its original position and overlapping the container), I used the "transform: translate()" property. Now, I initially tried with "position: absolute", but I wasn't too happy with the result. I would love to hear what you guys think :)
- @DownTheMatrixSubmitted almost 4 years ago
In order to move the illustration image as per the design (displaced from its original position and overlapping the container), I used the "transform: translate()" property. Now, I initially tried with "position: absolute", but I wasn't too happy with the result. I would love to hear what you guys think :)
@guliye91Posted almost 4 years agoThe first question doesnt work. Look at it. When i click it, i get the same question. The other thing the answers are the same as the one given in the project.
When i click the question, the answer should be low fade grey in color.
0 - @deborahtrotaSubmitted almost 4 years ago
Any feedback or suggestions will be appreciated :)
@guliye91Posted almost 4 years agoHi Congratulation for trying and building the site. Your site is not responsive. For layout make use of either of Css grid and Css flexbox. Set the image to be "max-width: 100%" height to be 100% or auto. Either works. This ensures the image to be perfectly inside its parent element. It also makes responsive. Learn responsive design
0 - @tcase629Submitted almost 4 years ago
I'm having trouble with the responsiveness. Any feedback would be great.
@guliye91Posted almost 4 years agoYou are better although your site is not responsive. Make use of css grids and flexbox for better layout. This is the same project you built. I built using css grid and flexbox. Kindly go through to get better understanding on how layout and responsivenes work https://www.frontendmentor.io/solutions/single-price-grid-component-using-css-grid-and-flexbox-RF2eD1iIC
2 - @argentLammingSubmitted almost 4 years ago
Hi all,
I am very bad on CSS even if I keep trying it since long time now, I am very dependant on Bootstrap specially for grid design. I have to tell I code CSS by trying many different declarations until I get the result, I don't always know which declaration I should use, I think is one but then it's not... In short I really suck at CSS and design... I was able to accomplish this challenge but I think there is a lot which could be better, please your feedback is more than welcome I really need it...
Thanks in advance, Diogo
@guliye91Posted almost 4 years agoThe site is responsive although you used bootstrap for the grid design(main layout of the project). if css sucks you, i advice you to take this youtube course https://www.youtube.com/watch?v=-8ORfgUa8ow&t=83s it is very much comprehensive.
meanwhile am planning to start learning Bootstrap. How did you learned bootstrap? give me advice on tips and resources you used. am very very good at css.
This is the same project you buit. i buit it css(flexbox and css grid) kindly check to get hints https://www.frontendmentor.io/solutions/single-price-grid-component-using-css-grid-and-flexbox-RF2eD1iIC
0 - @sagar-tanwarSubmitted almost 4 years ago
Hey, Thank you for visiting. Please share your valuable feedback.
@guliye91Posted almost 4 years agoVery nice bro. When i reach this project, your source code will be my mentor. Thanks.
Otherwise where are you in javascript??
1 - @guliye91Submitted almost 4 years ago
Just concluded my 2nd day project. I built responsive profile card component using ONLY CSS Flexbox. Kindly go through and give me feedback to improve.
@guliye91Posted almost 4 years agoSorry guys I just forgot to add the top-left background color and the bottom-right background color. Any person who knows how to add that, please help
0 - @memsbdmSubmitted almost 4 years ago
My third work using Flexbox, I put all cards in position : absolute and then with a transform : translate I placed them. If there was an easier solution you can comment !
@guliye91Posted almost 4 years agoFirst happy new year. After that, I cloned your code and gone through every line of code. I made the following observations:
- Too much use of transform in your layout. Transform layout has been extensively used in your layout to position element. Try to use CSS GRID to layout the items correctly.
- use of big margin-top before the 'supervisor item' that pushes the item more downwards.
- limit use of absolute positioning as removes the eleent from normal flow.
- makes the image smaller to perfect them.
- set the width of the item to space them correctly.
1
