@itsyanQASubmitted about 1 year ago
SecretariatV
@SecretariatVAll comments
- @Azazek6Submitted 4 months ago
- @OlatoyanSubmitted 4 months ago
- @xyhomi3Submitted about 1 year ago@SecretariatVPosted 4 months ago
Hi, @xyhomi3. Nice to meet you.
Your solution is very good.
But in your poject you using multi h1 tags. I think it's drop code quality. But your solution is good.
I hope you success.
Thanks.
0 - @lalaholmesssSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I finished this one challenge pretty quickly which I'm really happy about because it means I'm learning, it motivates me.
What challenges did you encounter, and how did you overcome them?Vertically centering the container, did some googling.
@SecretariatVPosted 4 months agoHi, @lalaholmesss. Hope doing well.
Your workig very good.
But have got some implement.
In your project you using margin:auto; top: 50%; for move center your card. Of cource it's correct. But it isn't best solution.
The best solution is using flex or grid on parent tag.
Like this.
This is your code.
.container { width: 400px; margin: auto; border: 1px solid black; background-color: hsl(0, 0%, 100%); position: relative; top: 50%; transform: translateY(25%); border-radius: 20px; box-shadow: 8px 8px black; }
And solution.
<main> <div class="container"> </div> </main>main { width: 100%; min-height: 100vh; or height: 100vh; // One way display: flex; align-items: center; justify-content: center;
//Other way display: grid; place-items: center;}
I wish you success.
Thanks.
0 - @Agyemang99Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
That have been able to understand how to make custom radio buttons and also the JS to select them
What challenges did you encounter, and how did you overcome them?The placeholder customizing gave me a lot of hell
What specific areas of your project would you like help with?If anyone could help with the placeholder, I will appreciate it As you can see is a mess
@SecretariatVPosted 4 months agoHi, @Agyemang99. Nice to meet you.
Your working is good.
But have got some problems.
It's input parts.
Your inputs are mess. Becouse you use only input for this.
If you complete this part you use input and other.
This is my solution. (Of course it's not best solution. Only me)
<div class="input"> <input type="number" name="amount" id="amount"/> </div>.input { border: 1px solid var(--slate-700); border-radius: 6px; position: relative; transition: all ease-in-out .2s; overflow: hidden; cursor: pointer; width: 100%; }
.input::before { position: absolute; height: 100%; top: 0; display: flex; align-items: center; justify-content: center; background-color: var(--slate-100); transition: all ease-in-out .2s; font-size: 16px; font-weight: 700; color: var(--slate-700); }
input { outline: none; border: none; padding: 15px; width: 100%; font-weight: 700; font-size: 16px; }
I hope this helps you.
Thanks.
0 - @artsupawatSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
For this challenge, I practice CSS Flexbox and CSS Positioning
@SecretariatVPosted 4 months agoHi, @artsupawat. Nice to meet you.
Your work very good.
Congraturation.
But in your project have got some implement part.
It's shadow part. You use a div tag for shadow. Of cource it's GOOD. But if you use dorp-shadow, you don't use a new div.
This is update code.
.blog-card { display: flex; flex-direction: column; background-color: var(--white); width: 336px; height: 486px; border-radius: 20px; padding: 24px; border: 1px solid var(--black);
// update filter: drop-shadow(8px 8px 0px black);}
I wish you success.
Thanks.
1 - @BANKOLEDOSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I was able to make a quite responsive result. i would like to fully implement the challenge design
What challenges did you encounter, and how did you overcome them?I was not able to style the tips of the reaction, memory container
What specific areas of your project would you like help with?I would need feedbacks and the process to style the tips of a container
@SecretariatVPosted 4 months agoHi, @BANKOLEDO. Nice to meet you.
Your working is good. But in your project have got some implement part.
First, in your left part have got incorrect background.
This would be correct if it were done as follows: .card-1 { width: 100%; height: 50%; background: linear-gradient(0deg, var(--violet-blue-circle), var(--light-royal-blue-background)); display: flex; flex-direction: column; align-items: center; /* Center content horizontally / border-radius: 0 0 2.3rem 2.3rem; / Rounded bottom corners */ }
And you add style justify-content: center.
Or use 'display:grid; place-items: center;' instead of 'display:flex; align-items: center'.
This code.
.card-1 { width: 50%; height: 100%; border-radius: 1.3rem 0 0 1.3rem; display: grid; place-items: center; }I wish your success.
Marked as helpful3 - @Daniuy3Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
About the project
I tried to make the best practices, using components and states to manage the page obiously with React. I only used vanilla CSS
I discovered a way to give a money format to any number, the function is in utilidades/utilidades.js if you want to use it, it just needs a number and returns a USD format
What specific areas of your project would you like help with?I had an especific problem while I reload the page, it's supose to remember the cart before the reloading and it works, but i couldn't find I way to change the button who increase the quantity of products after the reload, it's just like at the begining
@SecretariatVPosted 4 months agoHi, @Daniuy3. Nice to meet you.
Your solution is good. But have got some improvement.
I think in the confirm modal you set the border radius for individual orders. It's incorrect.
{cart.map( prod => ( <div className="modal__prod" key={prod.id} >... </div> )};
It will be sufficiently improved if you set the 'div' before this part and set the 'background' and 'border radius'.
I wish you success.
Marked as helpful0 - @emerald-nomadSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I would say that I'm most proud that I was able to jump back into writing FE code again after years of being away. The one thing I would pay attention to and do differently next time is structuring my code.
What challenges did you encounter, and how did you overcome them?There weren't many challenges with this one. I mainly had to dig through the next.js and styled components documentation to figure out how to work with both of them.
What specific areas of your project would you like help with?I would love feed back on the organization of this project, if I'm going about setting global styles the correct way and if I could've implemented a more efficient way of solving this challenge.
- @oshaxgioSubmitted about 1 year ago
hello to everyone i'm new to this so advices would be aprecieited i built it using only html and css from my knowlege so there migth be many mistakes, i had to experiment with some things to make them work. i used position fixed so if someone has screen height less than 900px it migth not open fully for them
@SecretariatVPosted about 1 year agoIt looks like you haven't implemented a corner border effect on the child components of the right panel. This can be implemented using a mask. The following is example code.
--corner: conic-gradient(from -90deg at 15px 15px, red 25%, #0000 0) 0 0 / calc(100% - 15px) calc(100% - 15px) border-box; --inner: conic-gradient(red 0 0) padding-box; -webkit-mask: var(--corner), var(--inner); mask: var(--corner), var(--inner); -webkit-mask-composite: source-out;https://github.com/SecretariatV/FM-Results-summary-component/blob/main/src/components/Right-card.tsx
0
