Skip to content
OverviewSolutions
3
Comments
5

Rachel Mozzetta

@Mozzarella-chzWinthrop, Washington135 points

Hi! My name is Rachel. I am total newb to the world of Code and have a goal to one day work as a developer!

I’m currently learning...

HTML, CSS and JavaScript

Latest solutions

Latest comments

  • Rachel Mozzetta•135
    @Mozzarella-chz

    In my solution I rearranged the stats and stat heading like so:

    ``` <div class="stats">
                <div class="stat">
                    <h2>10k+</h2>
                    <p class="stat-p">companies</p>
                </div>
                <div class="stat">
                    <h2>314 </h2>
                    <p class="stat-p">templates</p>
                </div>
                <div class="stat">
                    <h2>12m+</h2>
                    <p class="stat-p">queries</p>
                </div>
            </div>```

    If they are identifiable as three different divs within the parent div "stats" then you can use flexbox to seamlessly arrange them for your mobile view.

    Other things worth pointing out:

    -Not sure your <div class="card"> is really doing much as it's function is basically just like the body of the page. So semantically it seems pointless. I would omit.

    -In your HTML markup you have two divs labeled "left-box" and "right-box." I believe these descriptors to be somewhat incorrect as the format of the content will change depending on mobile versus web view. As such, I would keep the class description more vague such as "content-text" and "context-img" that way no matter what screen size you're on the description is correct.

    Hope that is helpful. Keep up the hard work!!!

    Marked as helpful
  • Rachel Mozzetta•135
    @Mozzarella-chz

    The color overlay definitely gave me the most trouble as well. There are alot of different ways to do it but here is the solution i landed on that gave me minimal headache......

    In my HTML markup:

                <div class="card-picture">
                <div class="color-overlay"></div>
            </div>
*!all the other code within the "container" div....etc. etc. etc.!*
</div>```

and in my CSS markup:
```.container .card-picture {
                background: url("images/image-header-mobile.jpg");
                background-repeat: no-repeat;
                background-size: contain;
                width: 100%;
                height: 300px;
                border-radius: 10px 10px 0 0;
            }
            
            .container .card-picture .color-overlay {
                height: 275px;
                width: 100%;
                background: hsl(277, 64%, 61%);
                opacity: .5;
                border-radius: 10px 10px 0 0;
            }```

Hope that is helpful!
    Marked as helpful
  • Rachel Mozzetta•135
    @Mozzarella-chz

    First thing i noticed with your code is your exclusive use of ID selectors for your elements. I would suggest learning when to use ID selectors versus class selectors. With proper usage of class selectors you could skim down your code to be much easier to work with and you will be all the more efficient. For example:

    <div id="details"> <div id="companies"> <h2>10k+</h2> <p>COMPANIES</p> </div> <div id="templates"> <h2>314</h2> <p>TEMPLATES</p> </div> <div id="queries"> <h2>12M+</h2> <p>QUERIES</p> </div>

    Instead of giving each statistic an ID you could give all three of those divs a class to group them similarly. It would look like this:

    <div class="Statistics"> <div class="stat"> <h2>10k+</h2> <p>COMPANIES</p> </div> <div class="stat"> <h2>314</h2> <p>TEMPLATES</p> </div> <div class="stat"> <h2>12M+</h2> <p>QUERIES</p> </div>

    This will make your CSS markup much easier to edit and format. My next suggestion would be to learn flexbox. It is incredibly helpful with layout and moving divs around in the exact way you want em. I did alot of reading on flex which it is a little overwhelming at first, but gets easier with practice. Here is a fun little game to get aquainted https://flexboxfroggy.com/

    Good luck and good job!!! Keep coding!

    Marked as helpful
  • Rachel Mozzetta•135
    @Mozzarella-chz

    This is some clean looking code! Nice work!!!!

    Excuse me for being a total beginner, but my one thought is that maybe instead of identifying individual properties in certain elements that are similar you could group them in a class for those shared properties. Specifically I am looking at your buttons: For the "Proceed to Payment" & "Cancel Order" buttons you have shared properties of: -border:none -cursor:pointer -font-size: 0.95rem

    You could create a new class of "buttons" for those properties.

    Not sure what the semantic rules are on that sort of grouping....

    Marked as helpful
  • Rachel Mozzetta•135
    @Mozzarella-chz

    Hey nice work! I am a TOTAL newb so please bear with me as I provide feedback and questions to your project....

    1. I was messing around with 'inspect' and noticed that when i was resizing my browser horizontally the elements within div.info collapsed in on themselves causing the elements to stack atop one another. This 'collapsing' happened at about 850px. My thought is that maybe you need to utilize flex? (I think...? Again I am a total newb.....)

    here is what i would add .info{ display: flex; flex-wrap: wrap; }

    div.row{ display:flex

    ... and then you could put Annual plan and $59.99 into its own div as a child of div.row? From there you would need to put the Music.img and the newly created div (Annual plan + $59.99) inline with one another... There are alot of different ways to do that: https://morioh.com/p/84b3ea38043c

    Not sure if any of that makes sense or is enough to get you at least started with a possible solution to your 'flex issue'....

    Good luck to you on your coding journey!!!

    Additionally my suggestion is to create a separate div for the background image.

    Marked as helpful