Inboxes

Create an inbox to save and track emails. It's free!

+New inbox
Back
Back
Back 
<html>
 <head>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <style>
   .body {
    background: #eff0f5;
    font-family: 'Avenir Next', 'Arial';
    padding: 0;
    margin: 0px;
    width: 100%;
  }

  .bar {
    height: 5px;
    background: #9974BA;
    max-width: 600px;
    margin: auto;
  }

  .link {
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    box-sizing: border-box;
    border-radius: 100px;
  }

  .main {
    max-width: 600px;
    margin: auto;
    background: #fff;
    padding: 0 20px;
    min-height: 100%;
    box-sizing: border-box;
  }

  a {
    color: #5ECA89;
  }

  .salutation {
    font-size: 25px;
    line-height: 38px;
    letter-spacing: -0.02em;

    color: #5ECA89;
  }

  p {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.01em;
    font-family: 'Avenir Next', 'Arial';
  }

  h1 {
    font-size: 50px;
    line-height: 1.2em;
    text-align: center;
    letter-spacing: -0.02em;
    font-weight: 400;
  }

  .intro {
    font-size: 25px;
    line-height: 38px;
    letter-spacing: -0.02em;
  }


  .centered {
    text-align: center;
  }

  .footer {
    border-top: 1px solid #EBEBEB;
    padding-top: 10px;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #B1B1B1;
    padding-bottom: 50px;
  }

  .graphic {
    text-align: center;
    margin-bottom: 20px;
  }

  .logo {
    max-width:165px;margin-top:30px;
  }
  
  .cta {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    background: #9974BA;
    border-radius: 25px;
    color: #fff;
    padding: 0px 25px;
    text-decoration: none;
    letter-spacing: 2px;
 }

h2 {
   font-size: 25px;
   line-height: 38px;
   letter-spacing: -0.02em;
   color: #5ECA89;
   font-weight: 500;
}

.block {
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 0 40px;
 }

.content {
  font-size: 18px;
  line-height: 32px;
  letter-spacing: -0.01em;
  box-sizing: border-box;
}

strong {
  font-weight: 500;
}

a {
  color: #9974ba; 
}

@media only screen and (max-width:480px) {
  .block {
    padding: 0 15px;
  }

   h1 {
      font-size: 40px; 
   }

}
  </style>
 </head>
 <body class="body">
  <div class="bar">
  </div>
  <div class="main">
   <div class="graphic">
    <img class="logo" src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252FfAhPXMcC71xf5HLAsy0g26%253B330x63.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSJ9:1pMxVT:95buuni0Z7xmwsXsBDS4euWpEj5yma4nSDi3vrJbmkQ" style="max-width:165px;margin-top:30px;"/>
   </div>
   <h1 style="max-width:400px;margin:auto;">
    So easy, anyone can do it.
   </h1>
   <div class="block">
    <div class="graphic">
     <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252Fb3vfK2hP10deNd2rOidkWH%253B156x156.png%253Fauto%253Dwebp/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSJ9:1pMxVT:95buuni0Z7xmwsXsBDS4euWpEj5yma4nSDi3vrJbmkQ" style="width:92px;height:92px"/>
    </div>
    <p style="max-width:200px;margin:auto;">
     ✨ Nice to meet you✨ Zoe from Carbonmade
    </p>
   </div>
   <div class="block">
    <p>
     Some portfolios look so good, you can't imagine how they did it. They must have hired a developer and worked for hours on the design.
    </p>
    <p>
     Unless they used Carbonmade.
    </p>
    <p>
     There's no big secret – anything is possible with Carbonmade blocks. In fact, today I'll show you exactly how
     <a>
      Aran Quinn
     </a>
     used them to create his animation &amp; illustration portfolio.
    </p>
   </div>
   <div class="block">
    <h2>
     Step 1. Project pages
    </h2>
   </div>
   <div class="block">
    <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252FcnHbgM31cmncZgN90G06dw%253B600x294.gif/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSJ9:1pMxVT:95buuni0Z7xmwsXsBDS4euWpEj5yma4nSDi3vrJbmkQ" style="max-width:480px;"/>
   </div>
   <div class="block">
    <p>
     On his project pages, Aran first dragged a
     <strong>
      Title block
     </strong>
     onto the page, then clicked the ⚙️ icon and hid the Subheading and Divider.
    </p>
    <p>
     He then added a combination of
     <strong>
      Text + Image Blocks
     </strong>
     underneath. To center the text, click the ⚙️ icon next to the block and choose the center dot under 'Alignment.'
    </p>
   </div>
   <div class="block">
    <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252FeIteXfxam1obPVfBxCrVip%253B600x294.png%253Fauto%253Dwebp/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSJ9:1pMxVT:95buuni0Z7xmwsXsBDS4euWpEj5yma4nSDi3vrJbmkQ" style="max-width:480px;"/>
   </div>
   <div class="block">
    <p>
     Aran then changed every project background color to complement the illustration or brand. To change a project background color, click the project and then click
     <strong>
      Page Settings
     </strong>
     at the top of the left panel. Choose a unique background for each project.
    </p>
   </div>
   <div class="block">
    <h2>
     Step 2. The Homepage
    </h2>
   </div>
   <div class="block">
    <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252F2m5W4DJnUOrfTZRwf3mX2V%253B600x294.gif/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSJ9:1pMxVT:95buuni0Z7xmwsXsBDS4euWpEj5yma4nSDi3vrJbmkQ" style="max-width:480px;"/>
   </div>
   <div class="block">
    <p>
     First, the homepage title, which you'll create the same way you did for your project pages. Just highlight the text to change the typeface and text sizing.
    </p>
    <p>
     Your projects will display automatically in the default Portfolio Grid on your homepage. Click the ⚙️ icon next to the Portfolio Grid block, click
     <strong>
      Layout
     </strong>
     and choose the
     <strong>
      Masonry Grid
     </strong>
     layout. This will make your projects appear in the 'Pinterest style' you see on Aran's homepage.
    </p>
    <p>
     To make the project thumbnails change color on hover, click
     <strong>
      Thumbnail Hover
     </strong>
     under the grid settings and play with your color and opacity. Aran chose an orange color with low opacity and clicked the
     <strong>
      Show Project Title
     </strong>
     toggle so the titles show on hover.
    </p>
   </div>
   <div class="block">
    <h2>
     Step 3. Logo &amp; Background Color
    </h2>
   </div>
   <div class="block">
    <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252Fh7CIP5CzuKYcIXT0bJ4TJL%253B600x294.gif/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSJ9:1pMxVT:95buuni0Z7xmwsXsBDS4euWpEj5yma4nSDi3vrJbmkQ" style="max-width:480px;"/>
   </div>
   <div class="block">
    <p>
     Click
     <strong>
      Design 🎨
     </strong>
     in the panel on the left side of the Carbonmade editor. Now click
     <strong>
      Logo &amp; Title
     </strong>
     and drop an image or GIF into the space. (Aran used a cute GIF for his logo, which appears at the top left corner.)
    </p>
    <p>
     Next, click
     <strong>
      Global Styles
     </strong>
     under the same section and choose your background color. You can also experiment with different link and text colors.
    </p>
   </div>
   <div class="block">
   </div>
   <div class="block">
    <h2>
     Step 4. The About Page
    </h2>
   </div>
   <div class="block">
    <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252F7e9rRRA9DredzdWSbNcNQE%253B600x294.gif/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSJ9:1pMxVT:95buuni0Z7xmwsXsBDS4euWpEj5yma4nSDi3vrJbmkQ" style="max-width:480px;"/>
   </div>
   <div class="block">
    <p>
     On his About page, Aran added a
     <strong>
      Title
     </strong>
     block followed by an
     <strong>
      About
     </strong>
     block, then dragged his image into the profile image placeholder. Below that, he dragged in an
     <strong>
      Experience
     </strong>
     block to share his work history, clients, awards &amp; contact info.
    </p>
   </div>
   <div class="block">
    <h2>
     Step 5. The Personal Work page
    </h2>
   </div>
   <div class="block">
    <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252F5SYdSAo7Kw4goqC7hYTWbW%253B600x294.png%253Fauto%253Dwebp/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSJ9:1pMxVT:95buuni0Z7xmwsXsBDS4euWpEj5yma4nSDi3vrJbmkQ" style="max-width:480px;"/>
   </div>
   <div class="block">
    <p>
     Aran added another page to his nav called Craic, which shows off his personal work. To add your own extra page, go to
     <strong>
      Design 🎨
     </strong>
     again, click
     <strong>
      Site Navigation
     </strong>
     and then click the
     <strong>
      Mange Menu Items
     </strong>
     button. From there, you can add a new page. Drop images onto it along with a
     <strong>
      Title
     </strong>
     block, and you're done!
    </p>
    <p>
     Want to give it a go? Follow these steps and experiment along the way to create your own unique layout. And if you have questions, just reply to this email and I'll point the way.
    </p>
   </div>
   <div class="centered block">
    <a class="cta" style="color:#fff">
     LET'S MAKE A WEBSITE
    </a>
   </div>
   <table class="block" style="width:100%">
    <tr>
     <td style="width:92px;padding-right:30px;">
      <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252Fb3vfK2hP10deNd2rOidkWH%253B156x156.png%253Fauto%253Dwebp/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSJ9:1pMxVT:95buuni0Z7xmwsXsBDS4euWpEj5yma4nSDi3vrJbmkQ" style="width:92px;height:92px"/>
     </td>
     <td style="width:100%;font-family: 'Avenir Next', 'Arial';">
      <p style="margin:0;">
       Don't forget to water your plants!
      </p>
      <p style="margin:0;">
       ✨Zoe from Carbonmade✨
      </p>
     </td>
    </tr>
   </table>
   <div style="height:40px">
   </div>
   <div class="footer">
    <span style="font-weight:500">
     Need help?
    </span>
    Check out our
    <a>
     help site
    </a>
    or respond to this email.
    <span style="display:block;margin-top:10px;">
     <span style="opacity:0.8">
      <a>
       Unsubscribe
      </a>
     </span>
    </span>
   </div>
   <img class="tracker" src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbonmade.com%252Femails%252Ff15ff0a8d2a962979b5cee50bb04ac25%252Fopen.gif/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib25tYWRlLiJ9:1pMxVT:altX-06r4BD72dWem9NM8oT_VLWtZpWSZOdIWiljekI" style="border: 0 none; height: 1px; width: 1px; outline: none; text-decoration: none;"/>
  </div>
 </body>
</html>