tidied code a bit, fixed naming of some bits. Redid screenshots.
|
@ -63,33 +63,11 @@ Then crop/optimize/edit your image however you like, add it to your project, and
|
|||
|
||||
### 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
|
||||
|
||||
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
|
||||
|
||||
|
@ -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 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
|
||||
|
||||
- Website - [Add your name here](https://www.your-site.com)
|
||||
- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername)
|
||||
- Twitter - [@yourusername](https://www.twitter.com/yourusername)
|
||||
|
||||
**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**
|
||||
- Website - [Robert McGovern](https://tarasis.net)
|
||||
- Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
|
||||
- Twitter - [@tarasis](https://www.twitter.com/tarasis)
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
|
|
|
@ -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>
|
Before Width: | Height: | Size: 399 B After Width: | Height: | Size: 404 B |
|
@ -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>
|
Before Width: | Height: | Size: 964 B After Width: | Height: | Size: 969 B |
|
@ -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>
|
Before Width: | Height: | Size: 543 B After Width: | Height: | Size: 568 B |
|
@ -96,13 +96,13 @@ header {
|
|||
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.page-header {
|
||||
.intro-section__header {
|
||||
font-size: var(--fs-header-page);
|
||||
line-height: var(--lh-header-page);
|
||||
letter-spacing: var(--ls-header-page);
|
||||
font-weight: var(--fw-header-page);
|
||||
}
|
||||
.main-body {
|
||||
.intro-section__body {
|
||||
margin-top: 1.25rem;
|
||||
|
||||
font-size: var(--fs-body-page);
|
||||
|
@ -110,6 +110,7 @@ header {
|
|||
font-weight: var(--fw-body-page);
|
||||
}
|
||||
.product-card {
|
||||
margin: auto;
|
||||
margin-top: 34.125rem; /* ehh */
|
||||
padding: 3rem 2.25rem 2.875rem 2.25rem;
|
||||
|
||||
|
@ -119,11 +120,13 @@ header {
|
|||
border-radius: var(--border-radius);
|
||||
|
||||
position: relative;
|
||||
|
||||
max-width: 25rem;
|
||||
}
|
||||
|
||||
.product-card__image {
|
||||
position: absolute;
|
||||
width: 208.97px;
|
||||
width: 13.0606rem;
|
||||
margin: -33rem 3rem;
|
||||
}
|
||||
|
||||
|
@ -131,7 +134,7 @@ header {
|
|||
position: absolute;
|
||||
z-index: -1;
|
||||
background-color: #191826;
|
||||
background-image: url(../assets/bg-pattern-2.svg);
|
||||
background-image: var(--image-card-background);
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 17.5rem;
|
||||
|
@ -217,13 +220,13 @@ header {
|
|||
background-color: var(--col-orange);
|
||||
}
|
||||
|
||||
footer {
|
||||
.footer {
|
||||
margin-top: 3.875rem; /* per design 4rem; */
|
||||
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.logo-footer {
|
||||
.footer__logo {
|
||||
margin-bottom: 1.8125rem; /* per design 2rem; */
|
||||
}
|
||||
.footer__body {
|
||||
|
@ -237,12 +240,22 @@ footer {
|
|||
.footer__email {
|
||||
font-weight: var(--fw-700);
|
||||
}
|
||||
.social-image-block {
|
||||
.footer__social-block {
|
||||
display: flex;
|
||||
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 {
|
||||
--fs-header-page: 4rem;
|
||||
--lh-header-page: 4rem;
|
||||
|
@ -256,7 +269,7 @@ footer {
|
|||
}
|
||||
|
||||
body {
|
||||
background-position: 13rem -2rem;
|
||||
background-position: -25rem -18rem;
|
||||
}
|
||||
|
||||
header::before {
|
||||
|
@ -265,8 +278,8 @@ footer {
|
|||
background-position: top right;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16.666875rem;
|
||||
top: -32px;
|
||||
left: 36px;
|
||||
top: -2rem;
|
||||
left: 2.25rem;
|
||||
width: 100%;
|
||||
height: 500%;
|
||||
content: " ";
|
||||
|
@ -280,30 +293,32 @@ footer {
|
|||
}
|
||||
|
||||
.intro-section {
|
||||
margin-top: 90px;
|
||||
margin-top: 5.625rem;
|
||||
width: 61ch;
|
||||
|
||||
padding: 0 2.4375rem;
|
||||
}
|
||||
|
||||
.main-body {
|
||||
.intro-section__body {
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.product-card::before {
|
||||
top: -150px;
|
||||
top: -9.375rem;
|
||||
left: -14.9375rem;
|
||||
width: 699px;
|
||||
height: 600px;
|
||||
width: 43.6875rem;
|
||||
height: 37.5rem;
|
||||
|
||||
background-position: 230px -30px;
|
||||
background-position: 14.375rem -1.875rem;
|
||||
}
|
||||
.product-card {
|
||||
margin-top: 400px;
|
||||
margin-top: 25rem;
|
||||
width: 24.9375rem;
|
||||
margin-left: 17rem;
|
||||
|
||||
padding: 3rem 3rem 2.875rem 3rem;
|
||||
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.product-card__image {
|
||||
|
@ -312,9 +327,9 @@ footer {
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 87px;
|
||||
padding: 0 33px;
|
||||
.footer {
|
||||
margin-top: 85px;
|
||||
padding: 0 2.0625rem;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
@ -323,10 +338,10 @@ footer {
|
|||
width: 40ch;
|
||||
}
|
||||
|
||||
.social-image-block {
|
||||
.footer__social-block {
|
||||
position: absolute;
|
||||
right: 39px;
|
||||
bottom: 33px;
|
||||
right: 2.4375rem;
|
||||
bottom: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -339,8 +354,8 @@ footer {
|
|||
--fs-header-card: 2.5rem;
|
||||
--lh-header-card: 3.25rem;
|
||||
|
||||
--fs-body: 1.25rem;
|
||||
--lh-body: 2.125rem;
|
||||
--fs-body-page: 1.25rem;
|
||||
--lh-body-page: 2.125rem;
|
||||
|
||||
--fs-body-card: 1.25rem;
|
||||
--lh-body-card: 2.125rem;
|
||||
|
@ -348,56 +363,56 @@ footer {
|
|||
--image-background: url(../assets/bg-main-desktop.png);
|
||||
}
|
||||
|
||||
body {
|
||||
background-position: -20rem -15rem;
|
||||
}
|
||||
|
||||
header::before {
|
||||
top: -35px;
|
||||
top: -2.1875rem;
|
||||
left: 0;
|
||||
background-size: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 0 165.15px;
|
||||
padding: 0 10.3219rem;
|
||||
}
|
||||
|
||||
.intro-section {
|
||||
margin-top: 125.01px;
|
||||
padding: 0 165.15px;
|
||||
margin-top: 7.8131rem;
|
||||
padding: 0 10.3219rem;
|
||||
|
||||
width: 130ch;
|
||||
}
|
||||
|
||||
.main-body {
|
||||
margin-top: 40px;
|
||||
|
||||
font-size: var(--fs-body);
|
||||
line-height: var(--lh-body);
|
||||
.intro-section__body {
|
||||
margin-top: 2.5rem;
|
||||
|
||||
width: 70ch;
|
||||
}
|
||||
|
||||
.product-card::before {
|
||||
background-size: 19.5rem;
|
||||
background-position: 333px -40px;
|
||||
width: 1110px;
|
||||
top: -90px;
|
||||
left: -570px;
|
||||
background-position: 20.8125rem -2.5rem;
|
||||
width: 69.375rem;
|
||||
top: -5.625rem;
|
||||
left: -35.625rem;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
margin-top: 411px;
|
||||
width: 446px;
|
||||
margin-top: 25.6875rem;
|
||||
width: 27.875rem;
|
||||
margin-left: 46rem;
|
||||
|
||||
padding: 58px 59px 48px 54px;
|
||||
padding: 3.625rem 3.6875rem 3rem 3.375rem;
|
||||
}
|
||||
|
||||
.product-card__image {
|
||||
width: 19.5rem;
|
||||
margin: -362px -525px;
|
||||
margin: -22.625rem -32.8125rem;
|
||||
}
|
||||
|
||||
.product-card__body {
|
||||
margin-top: 22px;
|
||||
width: ;
|
||||
margin-top: 1.375rem;
|
||||
}
|
||||
|
||||
.price-block {
|
||||
|
@ -405,30 +420,29 @@ footer {
|
|||
}
|
||||
|
||||
.button-block {
|
||||
margin-top: 46px;
|
||||
margin-top: 2.875rem;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
footer {
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-footer {
|
||||
/* margin-left: initial; */
|
||||
.footer__logo {
|
||||
align-self: flex-start;
|
||||
height: 100%;
|
||||
margin-right: 137px;
|
||||
margin-right: 8.5625rem;
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
.footer__body {
|
||||
margin-bottom: 0;
|
||||
margin-right: 340px;
|
||||
margin-right: 21.25rem;
|
||||
}
|
||||
|
||||
.social-image-block {
|
||||
.footer__social-block {
|
||||
position: relative;
|
||||
right: initial;
|
||||
bottom: initial;
|
||||
|
|
|
@ -19,9 +19,9 @@
|
|||
|
||||
<main>
|
||||
<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
|
||||
way your music sounds with a professional grade parametric EQ & volume mixer. Control
|
||||
bass, mids, treble, gain control, reverb, and more!
|
||||
|
@ -54,9 +54,9 @@
|
|||
</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">
|
||||
All rights reserved © Equalizer 2021<br />
|
||||
|
@ -64,10 +64,31 @@
|
|||
class="footer__email">equalizer@example.com</span>
|
||||
</p>
|
||||
|
||||
<div class="social-image-block">
|
||||
<img src="assets/icon-facebook.svg" alt="Image for Facebook Logo">
|
||||
<img src="assets/icon-instagram.svg" alt="Image for Instagram Logo">
|
||||
<img src="assets/icon-twitter.svg" alt="Image for Twitter Logo">
|
||||
<div class="footer__social-block">
|
||||
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Link to equalizer on Facebook">
|
||||
|
||||
<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>
|
||||
</footer>
|
||||
|
||||
|
|
Before Width: | Height: | Size: 553 KiB After Width: | Height: | Size: 726 KiB |
Before Width: | Height: | Size: 591 KiB After Width: | Height: | Size: 342 KiB |
Before Width: | Height: | Size: 374 KiB After Width: | Height: | Size: 522 KiB |