Here's my solution for this challenge. Wasn't entirely sure how to rearrange the stats and stat headings for mobile and quite liked how they looked as they were. If anyone has any pointers for me then I'd love to hear them!
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!!!
I'm aware it's not responsive and has useless code, I kinda forgot until the end and then just gave up cause I wanna move on. Looks fine on desktop though. Curious what others solutions were for the purple filter on the image, that was rather difficult.
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!
I would like some tips on how to make pages to adapt with mobiles too, I welcome any comments
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!
Hello guys I would like to know what could I do differently for a cleaner code, also any suggestions are appreciated.
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....
Another challenge done! I tried to use more em instead of px this time. It was a fun project. I would love to know all your feedback and tips!
Hey nice work! I am a TOTAL newb so please bear with me as I provide feedback and questions to your project....
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.
