Alexander Kluge
Ay invent, act, build, travel, write. — Home = naii.io
  • 🔥 1
  • 📍 Berlin
  • 📅 Jan '18
  • 👻 112

I’m glad you enjoyed what I wrote ;) And I agree: If some news are so „important” (whatever that means) then it will pop up at some place or another, and that’s when I’ll check. Apart from that I’m happy to be in liaison with JOMO (joy of missing out) for sanity reasons.

That’s a great advice. I’ve been documenting daily using a macOS app called „The Archive” https://zettelkasten.de/the-archive/. It was a surprise that I found it but since February 2018 I’ve been using it daily. I wouldn’t know what other tool to document or journal my life. On mobile I’m using 1Writer (https://1writerapp.com) because of the Markdown support and Dropbox sync.

Except for email and social media (Twitter, Mastodon, LinkedIn, Telegram/WhatsApp, Nomad List, FB), I visit and interact in my topic-centric communities (copywriting community: https://copychief.com, creator’s business community: https://seanwes.community, and https://WIP.chat though I prefer the Q&A and Roasts at WIP, not so much the Telegram group chat). I don’t check daily news because they don’t matter. Instead, I'm receiving all the important news that matter to me via email, f2f conversations or through word of mouth (hearsay).

TIL f2f conversations 😂

Good to know your different sites. Two of them I didn't knew :)

And regarding news, they are the events that have already happened & there is nothing we can do about it except get angry or spoil are mood so even I don't pay attention to news anymore. Stopped reading newspaper for the same reasons. But if someone is sharing something too much, then I check it out otherwise I also don't like it.

I’m glad you enjoyed what I wrote ;) And I agree: If some news are so „important” (whatever that means) then it will pop up at some place or another, and that’s when I’ll check. Apart from that I’m happy to be in liaison with JOMO (joy of missing out) for sanity reasons.

I don't know what is considered a "best" example but here is an example: the public diary for my startup studiolist.org, documented on Instagram - https://www.instagram.com/explore/tags/startupdiarystudiolist/ - for 4+ months (Feb-May) but now I'm taking a break to concentrate on client work (the startup is a potential long-term money-maker not immediately like client work).

:) I wasn't expecting it neither. It just happened :P

Sure, take your time. I hope you can fix the links.

Again, for documentation purposes here's the screenshot of the current page so that future readers see the - for now - final result :)

04-http-::digitallywell.website-2019-07-09-newer-amendments-applied.png
remove

Here are my suggestions (you can see the final result in the attached screenshot):

In the CSS comment out the background color even with an opacity of 0.3:

.call-to-action .overlay {
/background-color: #212529;/
}

You want maximum contrast. For reference, see „The 100% Easy-2-Read Standard“ by Oliver Reichenstein https://ia.net/topics/100e2r (a quick 5-minute read). Don’t be afraid to use higher font sizes.

Now get the text sorted. It looks a bit iffy right now.

h2 gets a font-size of 3rem…

.h2, h2 {
	font-size: 3rem;
}

…and a line-height of 1.4. h3 gets the same line-height and font-size of 2rem:

.h2, h2 {
	font-size: 2rem;
}

Make the overall line-height in the area a bit higher:

body {
	line-height: 1.6;
}

The paragraph („Every Friday you get the latest…“) is placed within an h4 tag. Change it to tag (for semantic purposes):

<p "mb-4"="">Every Friday you get the latest research for digital well-being, practical tips for better health without ditching your smartphone, and apps, tools and gadgets that improve your life without being glued to the screen.</p>

Then set the paragraph font size to 1.8 rem and adapt margins:

p {
	margin-top: 1rem;
	margin-bottom: 2rem;
	font-size: 1.8rem;
}

Let’s adjust the padding of the .call-to-action section a little:

.call-to-action {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

It looks less „lost in (white) space“ now.

The yellow links in the footer are calling for my attention although they shouldn’t at least not that strong. Let’s assign a new color to them and adjust their alignment a little.

footer a {
	color: #6C757D;
}

The hover color can be yellow:

footer a:hover {
	color: #FFF952; /*rgb(255, 249, 82)*/
}

We achieved now highlights where highlights are supposed to be. Yellow is your highlight color and the two buttons (GET DIGITALLY WELL and Get A Healthier Tech Life!) are your call-to-action leading to the same thing: newsletter subscription.

A bit more fine-tuning of the footer will be happening now.

footer.footer {
	font-weight: 300;
}

.small, small {
	/*font-size: 80%;*/
	/*font-weight: 400;*/
}

Now we adjust the alignment of the footer’s content:

@media (min-width: 992px) {
	.col-lg-6 {
		flex: 0 0 65%;
		max-width: 50%;
	}
}

footer .row {
	width: 865px;
	margin: 0 auto;
}

The last thing is the input field and submit button.

Alternate the border color of the call-to-action button to a darker tone to benefit from a better contrast. Yellow on white is not optimal and the current border color is a bit too weak:

#mc_embed_signup input[type="submit"] {
	background: #343A40;
	border: 1px solid #343A40;
	border-bottom: 3px solid #343A40;
}

#mc_embed_signup input[type="email"] {
	border-bottom: 1px solid #6C757D;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0;
}

The input field for the email address now looks more minimalist which suits the overall design aesthetics of the site.

The input field can be wider as well. No need to limit it to 75%.

@media (min-width: 768px) {
	col-md-9 {	
	flex: 0 0 75%;
	/* max-width: 75%; */
}

I also centered the submit button by editing the HTML code (I changed the col-md-8 to col-md-10 and added margin: 0 auto;):

<div class="col-12 col-md-10">
 <input type="submit" class="btn btn-block btn-lg btn-primary" value="Get A Healthier Tech Life!" name="subscribe" id="mc-embedded-subscribe" style="/* background: none; */border: 1px solid #343A40;border-bottom: 3px solid #343A40;margin: 0 auto;">
</div>

This looks already good.

Some final touches.

Increase the font size of input field:

#mc_embed_signup .mc-field-group input {
	font-size: 1.8rem;
}

The submit can keep the size.

The last (and minor) thing is the hover color of the links, starting with the yellow button in the form area with white background:

form .btn-primary:hover {
	color: #FFF952;
	background-color: #343A40;
}

The yellow button above the photo can stay black.

Change the hover color for the footer links to #FFF952.

Done :)

03-http-::digitallywell.website-2019-07-08-my-suggestions-second-round.png
remove

Thank you so so much! I did not expect that you would help me this much. I did everything you said and it's looking great now except for certain kinks I'll fix on my own when I have time (on mobile "Find harmony with technology looks weird, and the "Become a Patron" button does not load--not even sure I should be putting the button in the first place but I forgot to put a link to the Telegram group so it's moved down). Thank you again! You're a lifesaver.

:) I wasn't expecting it neither. It just happened :P

Sure, take your time. I hope you can fix the links.

Again, for documentation purposes here's the screenshot of the current page so that future readers see the - for now - final result :)

04-http-::digitallywell.website-2019-07-09-newer-amendments-applied.png
remove

It looks better. You changed to top font and replaced the photo. Good steps :)

Some things are still off, according to how I’m seeing it in my browser, see attached screenshot.

02-http-::digitallywell.website-2019-07-08-amendments-applied.png
remove

Here are my suggestions (you can see the final result in the attached screenshot):

In the CSS comment out the background color even with an opacity of 0.3:

.call-to-action .overlay {
/background-color: #212529;/
}

You want maximum contrast. For reference, see „The 100% Easy-2-Read Standard“ by Oliver Reichenstein https://ia.net/topics/100e2r (a quick 5-minute read). Don’t be afraid to use higher font sizes.

Now get the text sorted. It looks a bit iffy right now.

h2 gets a font-size of 3rem…

.h2, h2 {
	font-size: 3rem;
}

…and a line-height of 1.4. h3 gets the same line-height and font-size of 2rem:

.h2, h2 {
	font-size: 2rem;
}

Make the overall line-height in the area a bit higher:

body {
	line-height: 1.6;
}

The paragraph („Every Friday you get the latest…“) is placed within an h4 tag. Change it to tag (for semantic purposes):

<p "mb-4"="">Every Friday you get the latest research for digital well-being, practical tips for better health without ditching your smartphone, and apps, tools and gadgets that improve your life without being glued to the screen.</p>

Then set the paragraph font size to 1.8 rem and adapt margins:

p {
	margin-top: 1rem;
	margin-bottom: 2rem;
	font-size: 1.8rem;
}

Let’s adjust the padding of the .call-to-action section a little:

.call-to-action {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

It looks less „lost in (white) space“ now.

The yellow links in the footer are calling for my attention although they shouldn’t at least not that strong. Let’s assign a new color to them and adjust their alignment a little.

footer a {
	color: #6C757D;
}

The hover color can be yellow:

footer a:hover {
	color: #FFF952; /*rgb(255, 249, 82)*/
}

We achieved now highlights where highlights are supposed to be. Yellow is your highlight color and the two buttons (GET DIGITALLY WELL and Get A Healthier Tech Life!) are your call-to-action leading to the same thing: newsletter subscription.

A bit more fine-tuning of the footer will be happening now.

footer.footer {
	font-weight: 300;
}

.small, small {
	/*font-size: 80%;*/
	/*font-weight: 400;*/
}

Now we adjust the alignment of the footer’s content:

@media (min-width: 992px) {
	.col-lg-6 {
		flex: 0 0 65%;
		max-width: 50%;
	}
}

footer .row {
	width: 865px;
	margin: 0 auto;
}

The last thing is the input field and submit button.

Alternate the border color of the call-to-action button to a darker tone to benefit from a better contrast. Yellow on white is not optimal and the current border color is a bit too weak:

#mc_embed_signup input[type="submit"] {
	background: #343A40;
	border: 1px solid #343A40;
	border-bottom: 3px solid #343A40;
}

#mc_embed_signup input[type="email"] {
	border-bottom: 1px solid #6C757D;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0;
}

The input field for the email address now looks more minimalist which suits the overall design aesthetics of the site.

The input field can be wider as well. No need to limit it to 75%.

@media (min-width: 768px) {
	col-md-9 {	
	flex: 0 0 75%;
	/* max-width: 75%; */
}

I also centered the submit button by editing the HTML code (I changed the col-md-8 to col-md-10 and added margin: 0 auto;):

<div class="col-12 col-md-10">
 <input type="submit" class="btn btn-block btn-lg btn-primary" value="Get A Healthier Tech Life!" name="subscribe" id="mc-embedded-subscribe" style="/* background: none; */border: 1px solid #343A40;border-bottom: 3px solid #343A40;margin: 0 auto;">
</div>

This looks already good.

Some final touches.

Increase the font size of input field:

#mc_embed_signup .mc-field-group input {
	font-size: 1.8rem;
}

The submit can keep the size.

The last (and minor) thing is the hover color of the links, starting with the yellow button in the form area with white background:

form .btn-primary:hover {
	color: #FFF952;
	background-color: #343A40;
}

The yellow button above the photo can stay black.

Change the hover color for the footer links to #FFF952.

Done :)

03-http-::digitallywell.website-2019-07-08-my-suggestions-second-round.png
remove

Thank you so so much! I did not expect that you would help me this much. I did everything you said and it's looking great now except for certain kinks I'll fix on my own when I have time (on mobile "Find harmony with technology looks weird, and the "Become a Patron" button does not load--not even sure I should be putting the button in the first place but I forgot to put a link to the Telegram group so it's moved down). Thank you again! You're a lifesaver.

:) I wasn't expecting it neither. It just happened :P

Sure, take your time. I hope you can fix the links.

Again, for documentation purposes here's the screenshot of the current page so that future readers see the - for now - final result :)

04-http-::digitallywell.website-2019-07-09-newer-amendments-applied.png
remove

:) For documentation purposes, here is a screenshot of the original page before you applied the amendments. It's important to see the before and after because it makes you appreciate the changes and progress you made.

http-::digitallywell.website-2019-07-08-original.png
remove

It looks better. You changed to top font and replaced the photo. Good steps :)

Some things are still off, according to how I’m seeing it in my browser, see attached screenshot.

02-http-::digitallywell.website-2019-07-08-amendments-applied.png
remove

Here are my suggestions (you can see the final result in the attached screenshot):

In the CSS comment out the background color even with an opacity of 0.3:

.call-to-action .overlay {
/background-color: #212529;/
}

You want maximum contrast. For reference, see „The 100% Easy-2-Read Standard“ by Oliver Reichenstein https://ia.net/topics/100e2r (a quick 5-minute read). Don’t be afraid to use higher font sizes.

Now get the text sorted. It looks a bit iffy right now.

h2 gets a font-size of 3rem…

.h2, h2 {
	font-size: 3rem;
}

…and a line-height of 1.4. h3 gets the same line-height and font-size of 2rem:

.h2, h2 {
	font-size: 2rem;
}

Make the overall line-height in the area a bit higher:

body {
	line-height: 1.6;
}

The paragraph („Every Friday you get the latest…“) is placed within an h4 tag. Change it to tag (for semantic purposes):

<p "mb-4"="">Every Friday you get the latest research for digital well-being, practical tips for better health without ditching your smartphone, and apps, tools and gadgets that improve your life without being glued to the screen.</p>

Then set the paragraph font size to 1.8 rem and adapt margins:

p {
	margin-top: 1rem;
	margin-bottom: 2rem;
	font-size: 1.8rem;
}

Let’s adjust the padding of the .call-to-action section a little:

.call-to-action {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

It looks less „lost in (white) space“ now.

The yellow links in the footer are calling for my attention although they shouldn’t at least not that strong. Let’s assign a new color to them and adjust their alignment a little.

footer a {
	color: #6C757D;
}

The hover color can be yellow:

footer a:hover {
	color: #FFF952; /*rgb(255, 249, 82)*/
}

We achieved now highlights where highlights are supposed to be. Yellow is your highlight color and the two buttons (GET DIGITALLY WELL and Get A Healthier Tech Life!) are your call-to-action leading to the same thing: newsletter subscription.

A bit more fine-tuning of the footer will be happening now.

footer.footer {
	font-weight: 300;
}

.small, small {
	/*font-size: 80%;*/
	/*font-weight: 400;*/
}

Now we adjust the alignment of the footer’s content:

@media (min-width: 992px) {
	.col-lg-6 {
		flex: 0 0 65%;
		max-width: 50%;
	}
}

footer .row {
	width: 865px;
	margin: 0 auto;
}

The last thing is the input field and submit button.

Alternate the border color of the call-to-action button to a darker tone to benefit from a better contrast. Yellow on white is not optimal and the current border color is a bit too weak:

#mc_embed_signup input[type="submit"] {
	background: #343A40;
	border: 1px solid #343A40;
	border-bottom: 3px solid #343A40;
}

#mc_embed_signup input[type="email"] {
	border-bottom: 1px solid #6C757D;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0;
}

The input field for the email address now looks more minimalist which suits the overall design aesthetics of the site.

The input field can be wider as well. No need to limit it to 75%.

@media (min-width: 768px) {
	col-md-9 {	
	flex: 0 0 75%;
	/* max-width: 75%; */
}

I also centered the submit button by editing the HTML code (I changed the col-md-8 to col-md-10 and added margin: 0 auto;):

<div class="col-12 col-md-10">
 <input type="submit" class="btn btn-block btn-lg btn-primary" value="Get A Healthier Tech Life!" name="subscribe" id="mc-embedded-subscribe" style="/* background: none; */border: 1px solid #343A40;border-bottom: 3px solid #343A40;margin: 0 auto;">
</div>

This looks already good.

Some final touches.

Increase the font size of input field:

#mc_embed_signup .mc-field-group input {
	font-size: 1.8rem;
}

The submit can keep the size.

The last (and minor) thing is the hover color of the links, starting with the yellow button in the form area with white background:

form .btn-primary:hover {
	color: #FFF952;
	background-color: #343A40;
}

The yellow button above the photo can stay black.

Change the hover color for the footer links to #FFF952.

Done :)

03-http-::digitallywell.website-2019-07-08-my-suggestions-second-round.png
remove

Thank you so so much! I did not expect that you would help me this much. I did everything you said and it's looking great now except for certain kinks I'll fix on my own when I have time (on mobile "Find harmony with technology looks weird, and the "Become a Patron" button does not load--not even sure I should be putting the button in the first place but I forgot to put a link to the Telegram group so it's moved down). Thank you again! You're a lifesaver.

:) I wasn't expecting it neither. It just happened :P

Sure, take your time. I hope you can fix the links.

Again, for documentation purposes here's the screenshot of the current page so that future readers see the - for now - final result :)

04-http-::digitallywell.website-2019-07-09-newer-amendments-applied.png
remove

My pleasure :) It's an important topic that I care about 😊

Thank you again! If you check it I used all the copy you made. Forever grateful. 🙌🙌

:) For documentation purposes, here is a screenshot of the original page before you applied the amendments. It's important to see the before and after because it makes you appreciate the changes and progress you made.

http-::digitallywell.website-2019-07-08-original.png
remove

It looks better. You changed to top font and replaced the photo. Good steps :)

Some things are still off, according to how I’m seeing it in my browser, see attached screenshot.

02-http-::digitallywell.website-2019-07-08-amendments-applied.png
remove

Here are my suggestions (you can see the final result in the attached screenshot):

In the CSS comment out the background color even with an opacity of 0.3:

.call-to-action .overlay {
/background-color: #212529;/
}

You want maximum contrast. For reference, see „The 100% Easy-2-Read Standard“ by Oliver Reichenstein https://ia.net/topics/100e2r (a quick 5-minute read). Don’t be afraid to use higher font sizes.

Now get the text sorted. It looks a bit iffy right now.

h2 gets a font-size of 3rem…

.h2, h2 {
	font-size: 3rem;
}

…and a line-height of 1.4. h3 gets the same line-height and font-size of 2rem:

.h2, h2 {
	font-size: 2rem;
}

Make the overall line-height in the area a bit higher:

body {
	line-height: 1.6;
}

The paragraph („Every Friday you get the latest…“) is placed within an h4 tag. Change it to tag (for semantic purposes):

<p "mb-4"="">Every Friday you get the latest research for digital well-being, practical tips for better health without ditching your smartphone, and apps, tools and gadgets that improve your life without being glued to the screen.</p>

Then set the paragraph font size to 1.8 rem and adapt margins:

p {
	margin-top: 1rem;
	margin-bottom: 2rem;
	font-size: 1.8rem;
}

Let’s adjust the padding of the .call-to-action section a little:

.call-to-action {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

It looks less „lost in (white) space“ now.

The yellow links in the footer are calling for my attention although they shouldn’t at least not that strong. Let’s assign a new color to them and adjust their alignment a little.

footer a {
	color: #6C757D;
}

The hover color can be yellow:

footer a:hover {
	color: #FFF952; /*rgb(255, 249, 82)*/
}

We achieved now highlights where highlights are supposed to be. Yellow is your highlight color and the two buttons (GET DIGITALLY WELL and Get A Healthier Tech Life!) are your call-to-action leading to the same thing: newsletter subscription.

A bit more fine-tuning of the footer will be happening now.

footer.footer {
	font-weight: 300;
}

.small, small {
	/*font-size: 80%;*/
	/*font-weight: 400;*/
}

Now we adjust the alignment of the footer’s content:

@media (min-width: 992px) {
	.col-lg-6 {
		flex: 0 0 65%;
		max-width: 50%;
	}
}

footer .row {
	width: 865px;
	margin: 0 auto;
}

The last thing is the input field and submit button.

Alternate the border color of the call-to-action button to a darker tone to benefit from a better contrast. Yellow on white is not optimal and the current border color is a bit too weak:

#mc_embed_signup input[type="submit"] {
	background: #343A40;
	border: 1px solid #343A40;
	border-bottom: 3px solid #343A40;
}

#mc_embed_signup input[type="email"] {
	border-bottom: 1px solid #6C757D;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0;
}

The input field for the email address now looks more minimalist which suits the overall design aesthetics of the site.

The input field can be wider as well. No need to limit it to 75%.

@media (min-width: 768px) {
	col-md-9 {	
	flex: 0 0 75%;
	/* max-width: 75%; */
}

I also centered the submit button by editing the HTML code (I changed the col-md-8 to col-md-10 and added margin: 0 auto;):

<div class="col-12 col-md-10">
 <input type="submit" class="btn btn-block btn-lg btn-primary" value="Get A Healthier Tech Life!" name="subscribe" id="mc-embedded-subscribe" style="/* background: none; */border: 1px solid #343A40;border-bottom: 3px solid #343A40;margin: 0 auto;">
</div>

This looks already good.

Some final touches.

Increase the font size of input field:

#mc_embed_signup .mc-field-group input {
	font-size: 1.8rem;
}

The submit can keep the size.

The last (and minor) thing is the hover color of the links, starting with the yellow button in the form area with white background:

form .btn-primary:hover {
	color: #FFF952;
	background-color: #343A40;
}

The yellow button above the photo can stay black.

Change the hover color for the footer links to #FFF952.

Done :)

03-http-::digitallywell.website-2019-07-08-my-suggestions-second-round.png
remove

Thank you so so much! I did not expect that you would help me this much. I did everything you said and it's looking great now except for certain kinks I'll fix on my own when I have time (on mobile "Find harmony with technology looks weird, and the "Become a Patron" button does not load--not even sure I should be putting the button in the first place but I forgot to put a link to the Telegram group so it's moved down). Thank you again! You're a lifesaver.

:) I wasn't expecting it neither. It just happened :P

Sure, take your time. I hope you can fix the links.

Again, for documentation purposes here's the screenshot of the current page so that future readers see the - for now - final result :)

04-http-::digitallywell.website-2019-07-09-newer-amendments-applied.png
remove

Here is what I'm noticing:

  1. I didn't notice a popup.

  2. The leading headline "An online platform dedicated to helping your digital well-being." doesn't arouse any curiosity. Try something like "Did you see the color of his eyes? See, me neither."

  3. Rewrite the three bullet points, be precise (avoid being vague), and agitate pain points first, e.g.:

  • Nobody's talking to you, and you wonder why?
  • He looked at you but he only saw the back of your phone with a spongebob sticker. Your first impression went straight to the bin
  • She saw you and walked towards you, you got nervous and put your hands in the pockets to hide the tremble and luckily found your phone to hold on to. While you were busy with yourself she passed by and starting talking to someone else.
  1. Offer solutions, e.g.
  • Checking your phone without looking at the screen is a malformed habit. That's the bad the news. The good news is: You can change your bad habits and turn them into good habits. Even better: You can start today, actually right now. Here's the 3-step guide.
  • Technology is essential to our life and work. It's no longer work-life balance but tech-life balance. How much does tech affect your well-being? Is it too much? In a recent study by XZY, the team around Dr. X found out that…
  • The App Store is noisy. There are so many apps. How do you know which ones to try and which ones to ditch? Which apps make you healthier by sitting, calmer by being less anxious and more self-confident by not hiding behind the screen.
  1. Tidy up the page. It's a bit of a mess right now with elements that confuse my experience and too many call-to-actions (e.g. join the telegram group, subscribe, become a patreon, view archive, give feedback). You're confusing the visitor. What is the one thing you want him to do?

Attached is a screenshot how you could do it (I used the live HTML/CSS code no Photoshop or so):

Here is the copy I wrote:

  • Tech is part of your life but it shouldn't dominate you. Control your tech. Get tech-life balance.
  • Get/Join Digitally Well (and put your logo on the left on top of the photo - I only managed to put it to the right here with the live CSS in Safari)
  • Find harmony with technology.
  • Every Friday you get the latest research for digital well-being, practical tips for better health without ditching your smartphone, and apps, tools and gadgets that improve your life without being glued to the screen.
  • The latest tech 📱💻, newest research 🗞 and healthy habits to improve 💪 your life
  • Your best email for a better tech life / Your best email to subscribe
  • Get A Healthier Tech Life! / Get Digitally Well / Send me health! / Send me well-being! / Send me that!
http-::digitallywell.website-2019-07-08.png
remove

Oh wow thank you so much for putting so much effort into this! 😭 Will make all the changes you said. Thank you again!

My pleasure :) It's an important topic that I care about 😊

Thank you again! If you check it I used all the copy you made. Forever grateful. 🙌🙌

:) For documentation purposes, here is a screenshot of the original page before you applied the amendments. It's important to see the before and after because it makes you appreciate the changes and progress you made.

http-::digitallywell.website-2019-07-08-original.png
remove

It looks better. You changed to top font and replaced the photo. Good steps :)

Some things are still off, according to how I’m seeing it in my browser, see attached screenshot.

02-http-::digitallywell.website-2019-07-08-amendments-applied.png
remove

Here are my suggestions (you can see the final result in the attached screenshot):

In the CSS comment out the background color even with an opacity of 0.3:

.call-to-action .overlay {
/background-color: #212529;/
}

You want maximum contrast. For reference, see „The 100% Easy-2-Read Standard“ by Oliver Reichenstein https://ia.net/topics/100e2r (a quick 5-minute read). Don’t be afraid to use higher font sizes.

Now get the text sorted. It looks a bit iffy right now.

h2 gets a font-size of 3rem…

.h2, h2 {
	font-size: 3rem;
}

…and a line-height of 1.4. h3 gets the same line-height and font-size of 2rem:

.h2, h2 {
	font-size: 2rem;
}

Make the overall line-height in the area a bit higher:

body {
	line-height: 1.6;
}

The paragraph („Every Friday you get the latest…“) is placed within an h4 tag. Change it to tag (for semantic purposes):

<p "mb-4"="">Every Friday you get the latest research for digital well-being, practical tips for better health without ditching your smartphone, and apps, tools and gadgets that improve your life without being glued to the screen.</p>

Then set the paragraph font size to 1.8 rem and adapt margins:

p {
	margin-top: 1rem;
	margin-bottom: 2rem;
	font-size: 1.8rem;
}

Let’s adjust the padding of the .call-to-action section a little:

.call-to-action {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

It looks less „lost in (white) space“ now.

The yellow links in the footer are calling for my attention although they shouldn’t at least not that strong. Let’s assign a new color to them and adjust their alignment a little.

footer a {
	color: #6C757D;
}

The hover color can be yellow:

footer a:hover {
	color: #FFF952; /*rgb(255, 249, 82)*/
}

We achieved now highlights where highlights are supposed to be. Yellow is your highlight color and the two buttons (GET DIGITALLY WELL and Get A Healthier Tech Life!) are your call-to-action leading to the same thing: newsletter subscription.

A bit more fine-tuning of the footer will be happening now.

footer.footer {
	font-weight: 300;
}

.small, small {
	/*font-size: 80%;*/
	/*font-weight: 400;*/
}

Now we adjust the alignment of the footer’s content:

@media (min-width: 992px) {
	.col-lg-6 {
		flex: 0 0 65%;
		max-width: 50%;
	}
}

footer .row {
	width: 865px;
	margin: 0 auto;
}

The last thing is the input field and submit button.

Alternate the border color of the call-to-action button to a darker tone to benefit from a better contrast. Yellow on white is not optimal and the current border color is a bit too weak:

#mc_embed_signup input[type="submit"] {
	background: #343A40;
	border: 1px solid #343A40;
	border-bottom: 3px solid #343A40;
}

#mc_embed_signup input[type="email"] {
	border-bottom: 1px solid #6C757D;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 0;
}

The input field for the email address now looks more minimalist which suits the overall design aesthetics of the site.

The input field can be wider as well. No need to limit it to 75%.

@media (min-width: 768px) {
	col-md-9 {	
	flex: 0 0 75%;
	/* max-width: 75%; */
}

I also centered the submit button by editing the HTML code (I changed the col-md-8 to col-md-10 and added margin: 0 auto;):

<div class="col-12 col-md-10">
 <input type="submit" class="btn btn-block btn-lg btn-primary" value="Get A Healthier Tech Life!" name="subscribe" id="mc-embedded-subscribe" style="/* background: none; */border: 1px solid #343A40;border-bottom: 3px solid #343A40;margin: 0 auto;">
</div>

This looks already good.

Some final touches.

Increase the font size of input field:

#mc_embed_signup .mc-field-group input {
	font-size: 1.8rem;
}

The submit can keep the size.

The last (and minor) thing is the hover color of the links, starting with the yellow button in the form area with white background:

form .btn-primary:hover {
	color: #FFF952;
	background-color: #343A40;
}

The yellow button above the photo can stay black.

Change the hover color for the footer links to #FFF952.

Done :)

03-http-::digitallywell.website-2019-07-08-my-suggestions-second-round.png
remove

Thank you so so much! I did not expect that you would help me this much. I did everything you said and it's looking great now except for certain kinks I'll fix on my own when I have time (on mobile "Find harmony with technology looks weird, and the "Become a Patron" button does not load--not even sure I should be putting the button in the first place but I forgot to put a link to the Telegram group so it's moved down). Thank you again! You're a lifesaver.

:) I wasn't expecting it neither. It just happened :P

Sure, take your time. I hope you can fix the links.

Again, for documentation purposes here's the screenshot of the current page so that future readers see the - for now - final result :)

04-http-::digitallywell.website-2019-07-09-newer-amendments-applied.png
remove