tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tidied code a bit, fixed naming of some bits. Redid screenshots.

This commit is contained in:
Robert McGovern 2022-10-12 22:19:16 +01:00
parent 18507c0697
commit c1f5a140e4
9 changed files with 102 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
projects/FrontendMentor/newbie/equalizer-landing-page/README.md
View File

@ -63,33 +63,11 @@ Then crop/optimize/edit your image however you like, add it to your project, and
### What I learned ### What I learned
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. To only be so beholden to the design. If I was in a position to I would be actively going to the designer to ask why certain padding areas are uneven (for instance the product card, the left/right padding is odd / unbalanced. Particularly around the price block, where for tablet and mobile its more indented)
To see how you can add code snippets, see below:
```html
<h1>Some HTML code I'm proud of</h1>
```
```css
.proud-of-this-css {
color: papayawhip;
}
```
```js
const proudOfThisFunc = () => {
console.log('🎉')
}
```
If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more.
**Note: Delete this note and the content within this section and replace with your own learnings.**
### Continued development ### Continued development
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
**Note: Delete this note and the content within this section and replace with your own plans for continued development.**
### Useful resources ### Useful resources
@ -100,17 +78,12 @@ https://chenhuijing.com/blog/css-card-shadow-effects/#%F0%9F%A6%8A
- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. - [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.**
## Author ## Author
- Website - [Add your name here](https://www.your-site.com) - Website - [Robert McGovern](https://tarasis.net)
- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) - Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
- Twitter - [@yourusername](https://www.twitter.com/yourusername) - Twitter - [@tarasis](https://www.twitter.com/tarasis)
**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**
## Acknowledgments ## Acknowledgments

2
projects/FrontendMentor/newbie/equalizer-landing-page/assets/icon-facebook.svg
View File

@ -1 +1 @@
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0Z" fill="#191826"/></svg> <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0Z" fill="currentColor"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 399 B

After

Width:  |  Height:  |  Size: 404 B

2
projects/FrontendMentor/newbie/equalizer-landing-page/assets/icon-instagram.svg
View File

@ -1 +1 @@
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058ZM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0Zm0 4.865a5.135 5.135 0 1 0 0 10.27 5.135 5.135 0 0 0 0-10.27Zm0 8.468a3.333 3.333 0 1 1 0-6.666 3.333 3.333 0 0 1 0 6.666Zm5.338-9.87a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z" fill="#191826"/></svg> <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058ZM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0Zm0 4.865a5.135 5.135 0 1 0 0 10.27 5.135 5.135 0 0 0 0-10.27Zm0 8.468a3.333 3.333 0 1 1 0-6.666 3.333 3.333 0 0 1 0 6.666Zm5.338-9.87a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z" fill="currentColor"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 964 B

After

Width:  |  Height:  |  Size: 969 B

2
projects/FrontendMentor/newbie/equalizer-landing-page/assets/icon-twitter.svg
View File

@ -1 +1 @@
<svg width="20" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M20 2.172a8.192 8.192 0 0 1-2.357.646 4.11 4.11 0 0 0 1.805-2.27 8.22 8.22 0 0 1-2.606.996A4.096 4.096 0 0 0 13.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 0 1 1.392 1a4.109 4.109 0 0 0 1.27 5.478 4.086 4.086 0 0 1-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 0 1-1.853.07 4.106 4.106 0 0 0 3.833 2.849A8.25 8.25 0 0 1 0 14.658a11.616 11.616 0 0 0 6.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0 0 20 2.172Z" fill="#191826"/></svg> <svg width="20" height="17" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M20 2.172a8.192 8.192 0 0 1-2.357.646 4.11 4.11 0 0 0 1.805-2.27 8.22 8.22 0 0 1-2.606.996A4.096 4.096 0 0 0 13.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 0 1 1.392 1a4.109 4.109 0 0 0 1.27 5.478 4.086 4.086 0 0 1-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 0 1-1.853.07 4.106 4.106 0 0 0 3.833 2.849A8.25 8.25 0 0 1 0 14.658a11.616 11.616 0 0 0 6.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0 0 20 2.172Z" fill="currentColor"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 543 B

After

Width:  |  Height:  |  Size: 568 B

118
projects/FrontendMentor/newbie/equalizer-landing-page/css/style.css
View File

@ -96,13 +96,13 @@ header {
padding: 0 1.5rem; padding: 0 1.5rem;
} }
.page-header { .intro-section__header {
font-size: var(--fs-header-page); font-size: var(--fs-header-page);
line-height: var(--lh-header-page); line-height: var(--lh-header-page);
letter-spacing: var(--ls-header-page); letter-spacing: var(--ls-header-page);
font-weight: var(--fw-header-page); font-weight: var(--fw-header-page);
} }
.main-body { .intro-section__body {
margin-top: 1.25rem; margin-top: 1.25rem;
font-size: var(--fs-body-page); font-size: var(--fs-body-page);
@ -110,6 +110,7 @@ header {
font-weight: var(--fw-body-page); font-weight: var(--fw-body-page);
} }
.product-card { .product-card {
margin: auto;
margin-top: 34.125rem; /* ehh */ margin-top: 34.125rem; /* ehh */
padding: 3rem 2.25rem 2.875rem 2.25rem; padding: 3rem 2.25rem 2.875rem 2.25rem;
@ -119,11 +120,13 @@ header {
border-radius: var(--border-radius); border-radius: var(--border-radius);
position: relative; position: relative;
max-width: 25rem;
} }
.product-card__image { .product-card__image {
position: absolute; position: absolute;
width: 208.97px; width: 13.0606rem;
margin: -33rem 3rem; margin: -33rem 3rem;
} }
@ -131,7 +134,7 @@ header {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
background-color: #191826; background-color: #191826;
background-image: url(../assets/bg-pattern-2.svg); background-image: var(--image-card-background);
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 17.5rem; background-size: 17.5rem;
@ -217,13 +220,13 @@ header {
background-color: var(--col-orange); background-color: var(--col-orange);
} }
footer { .footer {
margin-top: 3.875rem; /* per design 4rem; */ margin-top: 3.875rem; /* per design 4rem; */
padding: 0 1.5rem; padding: 0 1.5rem;
} }
.logo-footer { .footer__logo {
margin-bottom: 1.8125rem; /* per design 2rem; */ margin-bottom: 1.8125rem; /* per design 2rem; */
} }
.footer__body { .footer__body {
@ -237,12 +240,22 @@ footer {
.footer__email { .footer__email {
font-weight: var(--fw-700); font-weight: var(--fw-700);
} }
.social-image-block { .footer__social-block {
display: flex; display: flex;
gap: 1.25rem; gap: 1.25rem;
align-items: center;
} }
@media screen and (min-width: 700px) { .footer__social-block a {
color: black;
}
.footer__social-block svg:is(:hover, :focus) {
/* fill: currentColor; */
color: var(--col-orangey-red);
}
@media screen and (min-width: 750px) {
:root { :root {
--fs-header-page: 4rem; --fs-header-page: 4rem;
--lh-header-page: 4rem; --lh-header-page: 4rem;
@ -256,7 +269,7 @@ footer {
} }
body { body {
background-position: 13rem -2rem; background-position: -25rem -18rem;
} }
header::before { header::before {
@ -265,8 +278,8 @@ footer {
background-position: top right; background-position: top right;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 16.666875rem; background-size: 16.666875rem;
top: -32px; top: -2rem;
left: 36px; left: 2.25rem;
width: 100%; width: 100%;
height: 500%; height: 500%;
content: " "; content: " ";
@ -280,30 +293,32 @@ footer {
} }
.intro-section { .intro-section {
margin-top: 90px; margin-top: 5.625rem;
width: 61ch; width: 61ch;
padding: 0 2.4375rem; padding: 0 2.4375rem;
} }
.main-body { .intro-section__body {
margin-top: 1.75rem; margin-top: 1.75rem;
} }
.product-card::before { .product-card::before {
top: -150px; top: -9.375rem;
left: -14.9375rem; left: -14.9375rem;
width: 699px; width: 43.6875rem;
height: 600px; height: 37.5rem;
background-position: 230px -30px; background-position: 14.375rem -1.875rem;
} }
.product-card { .product-card {
margin-top: 400px; margin-top: 25rem;
width: 24.9375rem; width: 24.9375rem;
margin-left: 17rem; margin-left: 17rem;
padding: 3rem 3rem 2.875rem 3rem; padding: 3rem 3rem 2.875rem 3rem;
max-width: unset;
} }
.product-card__image { .product-card__image {
@ -312,9 +327,9 @@ footer {
z-index: -1; z-index: -1;
} }
footer { .footer {
margin-top: 87px; margin-top: 85px;
padding: 0 33px; padding: 0 2.0625rem;
position: relative; position: relative;
} }
@ -323,10 +338,10 @@ footer {
width: 40ch; width: 40ch;
} }
.social-image-block { .footer__social-block {
position: absolute; position: absolute;
right: 39px; right: 2.4375rem;
bottom: 33px; bottom: 1.75rem;
} }
} }
@ -339,8 +354,8 @@ footer {
--fs-header-card: 2.5rem; --fs-header-card: 2.5rem;
--lh-header-card: 3.25rem; --lh-header-card: 3.25rem;
--fs-body: 1.25rem; --fs-body-page: 1.25rem;
--lh-body: 2.125rem; --lh-body-page: 2.125rem;
--fs-body-card: 1.25rem; --fs-body-card: 1.25rem;
--lh-body-card: 2.125rem; --lh-body-card: 2.125rem;
@ -348,56 +363,56 @@ footer {
--image-background: url(../assets/bg-main-desktop.png); --image-background: url(../assets/bg-main-desktop.png);
} }
body {
background-position: -20rem -15rem;
}
header::before { header::before {
top: -35px; top: -2.1875rem;
left: 0; left: 0;
background-size: auto; background-size: auto;
} }
header { header {
padding: 0 165.15px; padding: 0 10.3219rem;
} }
.intro-section { .intro-section {
margin-top: 125.01px; margin-top: 7.8131rem;
padding: 0 165.15px; padding: 0 10.3219rem;
width: 130ch; width: 130ch;
} }
.main-body { .intro-section__body {
margin-top: 40px; margin-top: 2.5rem;
font-size: var(--fs-body);
line-height: var(--lh-body);
width: 70ch; width: 70ch;
} }
.product-card::before { .product-card::before {
background-size: 19.5rem; background-size: 19.5rem;
background-position: 333px -40px; background-position: 20.8125rem -2.5rem;
width: 1110px; width: 69.375rem;
top: -90px; top: -5.625rem;
left: -570px; left: -35.625rem;
} }
.product-card { .product-card {
margin-top: 411px; margin-top: 25.6875rem;
width: 446px; width: 27.875rem;
margin-left: 46rem; margin-left: 46rem;
padding: 58px 59px 48px 54px; padding: 3.625rem 3.6875rem 3rem 3.375rem;
} }
.product-card__image { .product-card__image {
width: 19.5rem; width: 19.5rem;
margin: -362px -525px; margin: -22.625rem -32.8125rem;
} }
.product-card__body { .product-card__body {
margin-top: 22px; margin-top: 1.375rem;
width: ;
} }
.price-block { .price-block {
@ -405,30 +420,29 @@ footer {
} }
.button-block { .button-block {
margin-top: 46px; margin-top: 2.875rem;
padding: unset; padding: unset;
} }
footer { .footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.logo-footer { .footer__logo {
/* margin-left: initial; */
align-self: flex-start; align-self: flex-start;
height: 100%; height: 100%;
margin-right: 137px; margin-right: 8.5625rem;
margin-bottom: unset; margin-bottom: unset;
} }
.footer__body { .footer__body {
margin-bottom: 0; margin-bottom: 0;
margin-right: 340px; margin-right: 21.25rem;
} }
.social-image-block { .footer__social-block {
position: relative; position: relative;
right: initial; right: initial;
bottom: initial; bottom: initial;

37
projects/FrontendMentor/newbie/equalizer-landing-page/index.html
View File

@ -19,9 +19,9 @@
<main> <main>
<section class="intro-section"> <section class="intro-section">
<h1 class="page-header">We make your music sound extraordinary.</h1> <h1 class="intro-section__header">We make your music sound extraordinary.</h1>
<p class="main-body"> <p class="intro-section__body">
A system audio equalizer specifically designed for Android and iOS. Freely tune the A system audio equalizer specifically designed for Android and iOS. Freely tune the
way your music sounds with a professional grade parametric EQ & volume mixer. Control way your music sounds with a professional grade parametric EQ & volume mixer. Control
bass, mids, treble, gain control, reverb, and more! bass, mids, treble, gain control, reverb, and more!
@ -54,9 +54,9 @@
</main> </main>
<footer> <footer class="footer">
<img class="logo-footer" src="assets/logo.svg" alt="equalizer company logo"> <img class="footer__logo" src="assets/logo.svg" alt="equalizer company logo">
<p class="footer__body"> <p class="footer__body">
All rights reserved © Equalizer 2021<br /> All rights reserved © Equalizer 2021<br />
@ -64,10 +64,31 @@
class="footer__email">equalizer@example.com</span> class="footer__email">equalizer@example.com</span>
</p> </p>
<div class="social-image-block"> <div class="footer__social-block">
<img src="assets/icon-facebook.svg" alt="Image for Facebook Logo"> <a href="#" target="_blank" rel="noopener noreferrer" aria-label="Link to equalizer on Facebook">
<img src="assets/icon-instagram.svg" alt="Image for Instagram Logo">
<img src="assets/icon-twitter.svg" alt="Image for Twitter Logo"> <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0Z"
fill="currentColor" />
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Link to equalizer on Instagram">
<svg width=" 20" height="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path
d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058ZM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0Zm0 4.865a5.135 5.135 0 1 0 0 10.27 5.135 5.135 0 0 0 0-10.27Zm0 8.468a3.333 3.333 0 1 1 0-6.666 3.333 3.333 0 0 1 0 6.666Zm5.338-9.87a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z" />
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Link to equalizer on Twitter">
<svg width="20" height="17" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path
d="M20 2.172a8.192 8.192 0 0 1-2.357.646 4.11 4.11 0 0 0 1.805-2.27 8.22 8.22 0 0 1-2.606.996A4.096 4.096 0 0 0 13.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 0 1 1.392 1a4.109 4.109 0 0 0 1.27 5.478 4.086 4.086 0 0 1-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 0 1-1.853.07 4.106 4.106 0 0 0 3.833 2.849A8.25 8.25 0 0 1 0 14.658a11.616 11.616 0 0 0 6.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0 0 20 2.172Z"
fill="currentColor" />
</svg>
</a>
</div> </div>
</footer> </footer>

BIN
projects/FrontendMentor/newbie/equalizer-landing-page/screenshots/desktop.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 553 KiB

After

Width:  |  Height:  |  Size: 726 KiB

BIN
projects/FrontendMentor/newbie/equalizer-landing-page/screenshots/mobile.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 591 KiB

After

Width:  |  Height:  |  Size: 342 KiB

BIN
projects/FrontendMentor/newbie/equalizer-landing-page/screenshots/tablet.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 374 KiB

After

Width:  |  Height:  |  Size: 522 KiB