Skip to content
OverviewSolutions
10
Comments
17
marvellous cephas
@marviecephas

All comments

  • CochranDani•40
    @CochranDaniSubmitted 12 months ago

    Hello. Please I would like help about put the color black at the end os the letter N and about the arrow.

    Thank you

    Art-gallery

    2
    marvellous cephas•270
    @marviecephasPosted 12 months ago

    Don't really know what you want to do to the arrow but from my observation you want to remove the black border and change the text to uppercase.... do this to the element

    .class {

    border: none;

    text-transform: uppercase;

    }

    Nice code you got there I must say

    Marked as helpful
    0
  • CochranDani•40
    @CochranDaniSubmitted 12 months ago

    Hello. Please I would like help about put the color black at the end os the letter N and about the arrow.

    Thank you

    Art-gallery

    2
    marvellous cephas•270
    @marviecephasPosted 12 months ago

    span the letter N then add this styles

    span {

    background: linear-gradient(to right, white 70%, black 30%);

    color: transparent; /* Make text transparent */

    background-clip: text; /* Clip background to text */

    display: inline-block; /* Ensure the gradient spans the entire width */

    }

    You can adjust the percentage to fit it.

    Marked as helpful
    0
  • marvellous cephas•270
    @marviecephasPosted 12 months ago

    👌

    1
  • ar-ten•50
    @Little-coder9Submitted about 1 year ago

    Thank you Scrimba and Kevin Powell for the amazing tutorial.

    Don't know what the issue with crew page is but sometimes the layout won't fit in my screen and a vertical scrollbar will appear and other times it works just fine excluding the second tab (the Mark Shuttleworth image is too big).

    The technology page is not quite accurate to the design. The image, which is supposed to stick to the edge has some space in this implementation. I tried to but was overwhelmed by the overflow issues it created. If you can help me figure out the solution for this, it would be really helpful.

    Responsive space website using Grid layout

    1
    marvellous cephas•270
    @marviecephasPosted about 1 year ago

    Set the pic parent container to position:relative;

    I think it'll help...

    0
  • Simonas•40
    @SimasCodeSubmitted about 1 year ago

    Hello, Front end Mentor community. Here is my solution for "Product preview card component". It still looks like the desktop response image is a bit off and too wide. Feel free make a comment. Thank you in advance :)

    Product preview card component

    1
    marvellous cephas•270
    @marviecephasPosted about 1 year ago

    Good work :)

    Specify the width and height of the image to fit the div...

    0
  • Joeybur•310
    @JoeyburSubmitted about 1 year ago

    HI,

    Question about the hover effect on the buttons:

    Even with the delay it doesn't look exactly as smooth as i'd liked it to be, was there something i could've changed to make it look smoother without any further delay?

    3-column preview card component

    1
    marvellous cephas•270
    @marviecephasPosted about 1 year ago

    The transition on hover is cool, just remove the outline by using outline:none then add a border-radius to the hover state :)

    0
  • Igor•230
    @For1207Submitted about 1 year ago

    I would appreciate it if someone could explain how to adjust the screenshot sizes when working with md-files. I was working with my Readme.md and came across a situation where the screenshot size for mobile devices was much bigger than I wanted, but I couldn't find how to do it in Visual Studio Code.

    Thank you!

    Results summary component

    1
    marvellous cephas•270
    @marviecephasPosted about 1 year ago

    To adjust the screenshot size for .md (Markdown) files, you can use Markdown syntax along with HTML to control the image size. Here's how you can do it:

    • Markdown Image Syntax: Use the standard Markdown image syntax to embed your screenshot:

      ![Alt Text](image-url)

      Replace "Alt Text" with a descriptive alternative text for the image, and "image-url" with the URL or file path to your screenshot.

    • HTML <img> Tag: You can also use HTML within your Markdown file to control the image size. To adjust the size, you can set the width and height attributes in pixels or other units:

      <img src="image-url" alt="Alt Text" width="300" height="200">

      In this example, the width is set to 300 pixels and the height is set to 200 pixels. Adjust these values as needed.

    • CSS Styling: You can further style your image using CSS if needed. For example, to make the image responsive to the screen size:

      <img src="image-url" alt="Alt Text" style="max-width: 100%;">

      This will ensure that the image scales down to fit the available width while maintaining its aspect ratio.

    By using these techniques, you can adjust the size of screenshots in your Markdown files to suit your needs. Remember to replace "Alt Text" and "image-url" with appropriate values for your specific case.

    Marked as helpful
    0
  • marvellous cephas•270
    @marviecephasPosted about 1 year ago

    I've seen the error.... the file path in your github is wrong... I had similar problems myself.

    Instead of this in your html;

    <link rel="stylesheet" href="/projects/front end mentor/3-column-preview-card-component-main/normalize.css">

    <link rel="stylesheet" href="/projects/front end mentor/3-column-preview-card-component-main/all.min.css">

    `<link rel="stylesheet" href="/projects/front end mentor/3-column-preview-card-component-main/style.css">`

    Use this;

    <link rel="stylesheet" href="normalize.css">

    <link rel="stylesheet" href="all.min.css">

    <link rel="stylesheet" href="style.css">

    Marked as helpful
    1
  • Mtalafa•350
    @MtalafaSubmitted about 1 year ago

    Didnt know how to add the svg when you hover over the image. Didnt use media queries much before so any suggestion on how to improve that, and the code in overall is more than welcome

    NFT-preview-card

    1
    marvellous cephas•270
    @marviecephasPosted about 1 year ago

    The media query and your entire code is nice, I wouldn't recommend changing anything :) Then for the svg on hover... you can add an img:hover svg (I used space as the relationship between the elements, you can change it if it isn't a child of the img using any of the relationship selector)... after which you add the style you wish.... thumbs up once again on your code.

    0
  • Amad-Mlinka•20
    @Amad-MlinkaSubmitted about 1 year ago

    I just cant figure out why my fonts are different than on the figma if I used the exact same font. This is my first react app so any tips and tricks are welcome!

    Workit landing page (React/Sass)

    1
    marvellous cephas•270
    @marviecephasPosted about 1 year ago

    The url to your code isn't correct.... I need to access it to see what's wrong.

    0
  • Thomas TS•810
    @ttsoaresSubmitted about 1 year ago
    • This was my very first project here in FEM but, somehow, forgot to post my solution...

    NextJS, Tailwind

    2
    marvellous cephas•270
    @marviecephasPosted about 1 year ago

    Hi, marvie here!

    I love your work. Can we connect :) [my github] (https://github.com/marviecephas)

    0
  • marvellous cephas•270
    @marviecephasPosted about 1 year ago

    Well done... you used em rather than px✅... flexed your items perfectly✅.... ensured responsiveness is accurate✅.... you did quite well, but I'll advice one thing, avoid using 100% for height and width, rather you use auto. You're quite lucky you didn't add padding to the container if not the total width and height of your box will be 100% + the padding you added, forcing you to add a box-sizing property.... but auto will automatically adjust that for you. I hope you implement it, Nathan as you carry out more projects.... ;)

    Marked as helpful
    0