Jump to content
Sign in to follow this  
Max Nachamkin

Second Md Site (Waves!)

Recommended Posts

Hey all,


My second site using the MD framework launched today!


Click here to check it out.


I made it for my friend Diana, who is an amazing woman who has an uncanny ability to help people. She traveled for a week, and I wanted to surprise her to the site when she got back.


She's never had a website before, and my intention was to create a platform for her to help her spread her message to others.


It felt so good to give this to her. She cried when she saw it for the first time, it was adorable :)


Mainly with this site, I learned:

  • Mobile responsive CSS
  • More about JS animations 
  • Random HTML/CSS tweaks per usual
  • The importance of colors and design elements (it took me a while to find the right color scheme)
  • The elegance of simplicity
  • A better understanding of the template system which made this project a breeze

As you'll see, the header is derived from Alex's tutorial (thanks Alex!), and there are a few bugs in there - mainly around the footer (anyone know how to make the footer sticky without adding more content?) and some font stuff.


If you see anything that you'd change or have suggestions on, I'm all ears.






PS. I made a timelapse of myself working on the project from (almost) beginning to finish, excluding 3rd-party integrations like Drip and Center. It's pretty cool to watch.


Watch it here on Facebook.




  • Like 2

Share this post

Link to post
Share on other sites

Max, I might cry after seeing this too (though it won't be as adorable) it's so good! Apart from the email form after the post I don't even recognize this as MD. Seriously good work.


My only feedback on this design:

  1. Increase the margin-right in the header menu on .header-left to at least 260px so the nav links don't touch the logo
  2. So the nav menu isn't touching the top of the header, increase the padding-top on .header-nav to around 30px.
  3. I'd like to see the 'Want More Insights?' text as the same Avenir font like the other headlines

As for the sticky footer, you can use this very simple CSS trick:


Make the body background color the same color as the end of the footer, and the .content-box class the body color. So your CSS would be:

body {
    background-color: #44694F;

.content-box {
    background-color: #FFEDDB;

Awesome idea for the timelapse, I think I found my coding music for the rest of the night. Can't wait to see what's next man... when do we get the Transformation Agency website? :D

Share this post

Link to post
Share on other sites

Glad you like it, Alex! I'm happy to report, again, that the structure of MD made everything easy.


Seriously - the hooks, the template structure, the base layout, the admin panel, etc, makes the difference between making websites fun and making websites a hassle. So kudos to the amount of work and level of intention you've put into this, sir!


Good looks on the CSS modifications. I'll give those a shot.


Ah yes...that mix was the one I listened to on repeat while I made this site. Highly recommended.


Here's the full link on Soundcloud.


As for the Transformation Agency website, I think that's up next. It's going to be a way bigger project, but I'm really excited for it.  :D

Share this post

Link to post
Share on other sites
Sign in to follow this