Anene Praise

Latest comments

• 

  Luan Barcaça•600

  @barcaca

  Submitted 5 months ago

  

  Blog Review Card | Frontend Mentor

  #framer-motion#next#react#tailwind-css#typescript

  1

  00
  

  P

  Anene Praise•20

  @Praise25

  Posted 19 days ago

  Hi there, first off congratulations on completing this challenge. Your work looks really good and I'm also happy to see a felllow motion (framer motion) user. There's a chance you might've also noticed this and just decided it wasn't too much of a big deal, but I'm just gonna point them out regardless, just in case.

  For starters, the border radius of the main card component, as well as the card image are a bit off. The exact border radius sizes are given in the figma design file, so you can easily use that to fix it. Then the vertical alignment is also a bit off. A wrapping div around the main card component set as a flexbox with a width of 100% and height of 100vh can help to fix this. Then it's just as simple as using flexbox to center the card horizontally and vertically.

  All in all, job well done once again, and happy coding!!!

  0
• 

  Monu Soni•10

  @Monu-Soni

  Submitted 26 days ago

  

  qr-code-component-solution using vite react

  #react#vite

  1

  20
  

  P

  Anene Praise•20

  @Praise25

  Posted 24 days ago

  Hi, noticed you had a similar issue to mine where your card component wasn't properly centered verticaly. I fixed mine by wrapping the Card component within my App component with a <main> element, then making that main element a flexbox and applying the align-items: center property and setting the height to 100vh. Also needed to give the body a height of 100% as well.

  App.tsx

  import Card from "./components/Card";
  import CardImage from "./components/CardImage";
  import CardContent from "./components/CardContent";
  
  import "./App.css";
  
  function App() {
    return (
      <main className="container">
        <Card>
          <CardImage />
          <CardContent />
        </Card>
      </main>
    );
  }
  
  export default App;
  

  App.css

  body {
    margin: 0;
    background-color: var(--slate-300);
    height: 100%;
  }
  
  .container {
    display: flex;
    align-items: center;
    height: 100vh;
  }
  
  

  Also your font colors are a bit off. You can get the right font colors from the design system section of the figma design file that was provided. As for the font, it's named "Outfit". You can find it here on google fonts, and then import it directly into your css file. Then you can set the specific font variants using the font-weight property. The google fonts page will show you what font-weight corresponds to which variant, just scroll down a bit under the "Specimen" section. You'll see it under "Styles", e.g "Thin 100", "ExtraLight 200", "Light 300" and so on. I'll add a code snippet for reference.

  CardContent.module.css

  @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
  
  .sub-heading {
    text-align: center;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: calc(22rem / 16);
    line-height: 120%;
    letter-spacing: 0;
    color: var(--slate-900);
    margin-top: calc(10rem / 16);
    margin-bottom: calc(16rem / 16);
  }
  
  .description {
    text-align: center;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: calc(15rem / 16);
    line-height: 140%;
    letter-spacing: 0.2px;
    color: var(--slate-500);
    margin-top: 0;
    margin-bottom: calc(40rem / 16);
  }
  
  

  Finally, as much as I understand the desire to throw in a little tweak here and there (referring to the text under your card), I believe for situations like a frontend development task, it's important to stick to the design exactly as presented, to avoid shooting yourself in the foot.

  P.S: I felt this one was obvious but I figured I might as well call it out for completeness sake, your background color isn't also exactly right. The right one is also located in the figma design file

  Happy Coding!!!

  0