Skip to content
OverviewSolutions
11
Comments
8
John Omoke
@jomoke814

All comments

  • John Omoke•240
    @jomoke814Posted almost 2 years ago

    Hello @benj0s85, Great job at completing the challenge. To help you out with your problem of applying the pink color to the image. It would help if you created a div with of overlay on the image and styled it. Like so:

    <div class=image>
<img src="images/image-header-desktop.jpg" alt="image-header" class="img-hero">
<div class="image-overlay"></div>
</div>
.image {
    position: relative;
}

.image img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.image .image-overlay{
    background: hsl(277, 64%, 61%, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    overflow: hidden;
}

    I hope this helps, the style change to your preference, and good luck.

    0
  • John Omoke•240
    @jomoke814Posted about 2 years ago

    Hello, @vishal-singh5128 great work on your project. A suggestion to help you improve your code:

    • instead of using br you can just use flexbox on your cards like so: display: flex; flex-direction: column; justify-content: space-between; and this will space everything inside the cards.
    • The car images/icons in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.
    Marked as helpful
    1
  • Tony•50
    @Snorri967Submitted about 2 years ago

    I did enjoy creating this component, the only problem I had was the view icon svg with the cyan background-color. I managed to implement it through trial and error even though I know I have done it incorrectly as when changing the zoom of the page the svg background changes size. Any help would be greatly appreciated :)

    NFT Preview Card Component

    1
    John Omoke•240
    @jomoke814Posted about 2 years ago

    Hello, @Snorri967 the best way to solve your problem will be to wrap your image that's equilibrium-view and equilibrium-image to one div like so:

    <div class="image-equil"> <img src="images/image-equilibrium.jpg" alt=""> <div class="img-overlay"> <img src="images/icon-view.svg" alt="" class="eye"> </div> </div> then you apply this CSS style: .image-equil { position: relative; } .img-overlay { display: none; background: hsl(178, 100%, 50%, 0.5); border-radius: 10px; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .img-overlay .eye { position: absolute; top: 40%; left: 40%; width: 50px; } .image-equil img { display: block; border-radius: 10px; object-fit: cover; width: 100%; } .image-equil:hover .img-overlay { display: block; cursor: pointer; } I hope this helps you and remember to apply the style according to how you have named your elements.
    Marked as helpful
    1
  • Candice•50
    @candiukSubmitted about 2 years ago

    Hi there, this is my first solution submitted on Frontend Mentor. I used display:grid to achieve the pricing details layout and am wondering if this could be achieve with flexbox, and if so how? Secondly, which would be the better solution to achieve the pricing details and best practices: grid or flexbox? Any feedback would be greatly appreciated. Thank you.

    Order Summary Component using Flexbox

    1
    John Omoke•240
    @jomoke814Posted about 2 years ago

    Congratulation on completing your 1st frontend challenge. To answer your question is Yes, You can use flexbox on pricing details to align them simply by grouping the music icon and annul plan together like so:

    <div class="price"> <div class="section-price"> <img src="images/icon-music.svg" alt="music-icon"> <div> <h2>Annual Plan</h2> <p>$59.99/year</p> </div> </div> <p class="para-price">Change</p> </div> and you apply CSS flexbox styles .price { display: flex; border-radius: 10px; padding: 10px; gap: 50px; }

    Your second answer is that it comes down to personal preference and what a developer feels is easier for the given task. One way to think about the different uses of Grid and Flexbox is to consider whether your design originates with the content, or from the overall layout. If starting with the content, and working from the most minor parts outwards, then a developer is using Content-First Design. This is an excellent opportunity to use Flexbox because of the flexibility it provides in manipulating code in one dimension - along either rows or columns. If, however, a developer is given a specific overall layout to adhere to and needs explicit placement of elements in two dimensions, using both rows and columns, then Grid would be much better suited. For more about flexbox and grid read this article: https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184

    Marked as helpful
    0
  • raz hershko•100
    @razh23398Submitted about 2 years ago
    • I couldn't figure out how to remove the blank part at the bottom of the page.
    • It was very difficult for me to put all the boxes in their position and that they will not move if I change the resolution. Finally I added "min-width: 1000px;" to the body.

    only HTML & CSS (Problem with the layout of the page)

    2
    John Omoke•240
    @jomoke814Posted about 2 years ago

    Try using a grid or flexbox to position your boxes that will help you a lot and make your work easier when moving the boxes around and positioning them. When you use either grid or flexbox your problem of blank pages at the bottom will also be removed.

    Marked as helpful
    0
  • Marco Paolino•450
    @Marchino5791Submitted about 2 years ago

    Hello everyone!

    This is my solution about Profile Card.

    I have some difficulty about multiple background. How can I fix it like the original design?

    Thank you for helping me :)

    Profile Card Component

    2
    John Omoke•240
    @jomoke814Posted about 2 years ago

    you did everything the right way then only thing your code missing is to sign the value that you want your background to be positioned at. On your code you have background-position: left top, right bottom; include the value like so: background-position: right 50vw bottom 40vh, left 50vw top 40vh; that will move the svg's where you want them to be. I hope this helps.

    Marked as helpful
    1
  • John Omoke•240
    @jomoke814Posted about 2 years ago

    You should try applying some style in your div class prices that will target both prices and center them.

    0
  • John Omoke•240
    @jomoke814Posted about 2 years ago

    yes, you can combine both. Read this article https://levelup.gitconnected.com/when-to-use-css-flexbox-vs-grid-or-both-c1a5f01dc88a

    0