Yooo 
Here is my little project guys.
I really like the way it turned out, but I have a little problem. I applied background linear gradient to my h1 and h2 tags and it looks really cool on desktop, but when I open the website on my iPhone with Safari or Chrome the background-blend-mode property simply does not work and the text looks washed out as it falls back to the gradient without blending.
Here is the code in my style sheet.
If someone knows the solution to the problem, please enlighten me! 
P.S.
I have applied the same background gradient with background-blend-mode on my nav links and body tag and it works perfectly fine on mobile, so I assume it has something to do with the text and background-blend-mode not being supported for text on mobile devices?
Hi guys, just a quick update! Apparently this is an iOS specific issue and my h1 and h2 display perfectly on Android devices. Browsers on iOS are only allowed to use the same rendering engine (Webkit) as Safari, so on iPhone the issue will be the same regardless of what browser you use.
I just thought I’d let you guys know in case you try to use background-blend-mode and wonder why it does not display on iPhones!
Happy coding everyone! 
Hello, here is my project, I chose a photography club in a fictitious city.
Hello everyone 
Here’s my Club Website project.
Comments welcome! 
GitHub Repository:
Live Site:
https://napetico.github.io/the-hiking-club/
My fake club responsive website
Live Site: PhotoGens Club
GitHub Repository: GitHub - sm-fuller/responsiveclubwebsite.io
Here is my responsive club website
https://www.codecademy.com/workspaces/6418968e86564fb043662899?preview=true
Hi everyone!
Glad to be here.
I think I am starting to figure it out 
It’s not the best website, but practice makes perfect right?
Here is my page and code
Demo: Macro Photography Scuba Club
Code: GitHub - Dre2124/clubpage: Club Page - CodeCademy
Feedback is always welcome! Thanks again
Hi everyone!
Glad to be here.
I think I am starting to figure it out
It’s not the best website, but practice makes perfect right?
Here is my page and code
Page: https://nghiatrangamedev.github.io/Challenge-Project-Responsive-Club-Website/
Code: https://github.com/nghiatrangamedev/Challenge-Project-Responsive-Club-Website
Feedback is always welcome! Thanks again
Your code looks good to me.
Thank you very much for taking the time to review my code, I appreciate it!
Have a nice day!
Hello guys!
This is my version of the project, please go over it and tell me your opinion 
Live version: Grounds & Gold
The code: GitHub - Parviz-khrl/parviz_khrl.github.io
Hello,
here is my responsive club website - Community yoga project.
I would be really glad for a feedback
Hi everyone,
I tried to combine different CSS layouts in a responsive website. I am appreciated that you can give me some feedback, especially on nesting aspects. Maybe you can suggest to me how to simplify the codes also. Thanks!
GitHub: GitHub - wtpbell/Reponsive-Business-Website: Html & CCS
Live: Panda's Bakery
When the screen size shrinks the nav, header and footer background colour don’t span the width of the page if anyone could leave a comment on how to fix that that would be great thanks.
Critiques are welcomed.
Hi,
I’ve just finished my Responsive Club Website and would love to hear any thoughts on my coding.
Thanks
Torfaen Cycling Club Events Results Partnering RestaurantsTorfaen Cycling Club
Meet up. Work out. Celebrate.
Come join our vibrant community whose focus is training hard and enjoying local post-workout cuisine - guilt-free!
body {
background-color: #add8e6;
width: 100%;
font-family: Century Gothic;
}
.nav-bar {
background-color: #00008b;
padding-bottom: 3em;
border: 1px solid;
}
.nav-list {
text-decoration: none;
padding-left: 5em;
padding-right: 5em;
padding-top: 1em;
padding-bottom: 3em;
font-size: 16px;
color: #5f9ea0;
}
h1 {
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
background-color: #5f9ea0;
color: #00008b;
margin-top: 5em;
}
#id, a {
color: #00008b;
padding-left: 0;
text-decoration: underline;
}
h2 {
color: #000080;
margin-top: 3em;
padding-left: 2rem;
}
p {
margin-top: 3em;
padding-left: 2rem;
}
aside {
margin-bottom: 5em;
padding-left: 2rem;
}
.pics {
width: 275px;
height: 275px;
display: inline-block;
padding: 0 3rem 2em 3.5rem;
justify-content: center;
}
#photos {
padding-top: 3em;
}
#quote {
background-color: #5f9ea0;
padding-bottom: 2em;
width: 100%;
font-size: 25px;
color: #ffff00;
max-height: 80px;
}
.name {
height: 50px;
font-size: 15px;
padding-top: 1em;
}
.fun {
margin-left: auto;
margin-right: auto;
display: center;
}
.fun, h2 {
text-align: center;
}
.fun, p {
padding-bottom: 2em;
color: #00008b;
font-size: 20px;
}
@media only screen and (max-width: 480px) {
body {
width: 95vw;
display:center;
}
}
@media only screen and (min-width: 320px) and (max-width: 480px), (orientation: portrait) { .pics {
width: 70vw;
display: center;
}
}