Skip to content
OverviewSolutions
5
Comments
5
Sina Khodaparast
@30vam

All comments

  • Sina Khodaparast•110
    @30vamPosted 7 months ago

    You could set the card's overflow property to hidden to make the image have round corners only where it is exceeding the card instead of being rounded on all 4 corners with border-radius:

    .container { overflow: hidden; }

    1
  • Gurpreet Singh•60
    @shappydevSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of my css skills. I will use CSS Grid in next challenge if there will be need of it.

    What challenges did you encounter, and how did you overcome them?

    1. To make page responsive

    2. To adjust the size of image

    3. I overcome this challenge by using font size "rem" and using CSS Flex.

    4. I give the maximum width 100% to image.

    What specific areas of your project would you like help with?

    In CSS Grid

    Responsive recipe page

    1
    Sina Khodaparast•110
    @30vamPosted 8 months ago

    Good luck with grids. I myself have to learn it too.

    0
  • Cynthia Agu•110
    @cynthiachinenyeSubmitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    would like to make use of the CSS framework to build because of the responsive pattern

    What challenges did you encounter, and how did you overcome them?

    it is really nice to master flexbox to an extend

    What specific areas of your project would you like help with?

    learn the major area to use

    blog-preview-card using css flexbox

    1
    Sina Khodaparast•110
    @30vamPosted 8 months ago

    To center the card using flexbox you can do this: body { display: flex; //Makes the page act like a flexbox instead of a block element justify-content: center; //Centers the content on the main axis (horizontally) align-items: center; //Centers the content on secondary axis (which is vertical by default) min-height: 100vh; //Sets the page height to browser viewport height }

    I think you could also simply use the <img> tag with a source attribute to import the card banner instead of copying the entire svg code in index.html file.

    Marked as helpful
    0
  • Nicholas Moser•40
    @nrmoser50Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I took a bootcamp over a year ago. This was my first look at any sort of project since then. I'm most proud of the fact that I knew where to look and heeding the advice of my instructor "just break stuff and put it back together."

    What I would do differently next time would be not making things more difficult than they need to be. That looked like extra divs and editing multiple parts that could have been condensed into one div.

    What challenges did you encounter, and how did you overcome them?

    The challenges were mainly in recalling the different parts of the HTML and CSS files. "Div" "class" and then how to style them in the CSS file ".class." I overcame them by digging into old homework and having "ah ha" moments.

    What specific areas of your project would you like help with?

    I need help in all areas. Any and all feedback is welcome.

    HTML and CSS

    4
    Sina Khodaparast•110
    @30vamPosted 8 months ago

    You could try changing the <body> font-family property to the font linked in style-guide.md:

    <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=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Outfit:[email protected]&family=Rubik:ital,wght@0,300..900;1,300..900&family=Vazirmatn:[email protected]&display=swap" rel="stylesheet">

    Simply add these in your html file's <head> tag and set font-family property to 'Outfit'.

    Also to make the card smaller you can also change the width and height property of the QR code <img> I think.

    Marked as helpful
    1
  • Soledad Fernández•10
    @SoleFernandezSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I've ordered the classes and I think that the code is better now. Next time I'll take more time to oreder the structure.

    What challenges did you encounter, and how did you overcome them?

    The challenge that I encountered was the width and the height.

    I think that I could resolve the width, but I'm not sure about the height.

    What specific areas of your project would you like help with?

    Please, I need some help with the height and how to center the image. I'm not sure about it...

    First change with Git

    2
    Sina Khodaparast•110
    @30vamPosted 8 months ago

    You could make the body element a flexbox and center the card div in the middle like this:

    body { display: flex; justify-content: center; align-items: center;

    min-height: 100vh; //This sets the height of the html body to the actial viewport size of the browser }

    I don't think it is necessary to make the div card a flexbox.

    Marked as helpful
    0