Inboxes

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

+New inbox

<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=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSIsInRpbWUiOjE3MDU2MzgxNjYuMTAzNjk3OH0:1rQgP0:ioUAqHZzuTCTWGweygxFNSE8Ku3QNFyG2j9iInsNix4" style="max-width:165px;margin-top:30px;"/>
   </div>
   <h1 style="max-width:400px;margin:auto;">
    Companies do it, why shouldn't we?
   </h1>
   <h2 class="block">
    Hey Sarah,
   </h2>
   <div class="block">
    <p>
     Do you have one project you're proud of? A piece of art, a product you designed, a successful client campaign? Here's a crazy idea:
    </p>
    <p>
     <strong>
      ✨ Make your portfolio entirely about this 1 project ✨
     </strong>
    </p>
    <p>
     Think of it like a landing page or marketing page just for that project, similar to what you see for the latest Apple product releases. It's not only more exciting &amp; shareable online, it keeps things simple. You only need ONE project.
    </p>
    <p>
     Have one in mind? Let's go.
    </p>
   </div>
   <div class="block">
    <h2>
     1. Add a straightforward headline
    </h2>
    <div class="graphic">
     <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252FaHY8bWVHguaeANWzk15guV%253B600x415.jpeg%253Fauto%253Dwebp/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSIsInRpbWUiOjE3MDU2MzgxNjYuMTA0NDk2NX0:1rQgP0:cN4QIVYuvk8maQKHKVW2WZpV6KX-XY3kxm4V56OXMhk" style="max-width:480px;"/>
    </div>
    <p>
     One sentence is enough. Try to focus on the most positive or successful element of the project, for example:
     <em>
      'The app redesign that got me my first job.'
     </em>
    </p>
    <p>
     👾 The
     <strong>
      Title &amp; Teaser block
     </strong>
     will work perfectly for this.
    </p>
   </div>
   <div class="block">
    <h2>
     2. Write a quick list of project details
    </h2>
    <div class="graphic">
     <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252F2rg1Tlx5DFMfE2NfAy8pm1%253B600x415.png%253Fauto%253Dwebp/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSIsInRpbWUiOjE3MDU2MzgxNjYuMTA0Njg0Nn0:1rQgP0:GPRIi7JTq9BaBdhbOB5p2g7k_sgZAK4qb77Txecqjek" style="max-width:480px;"/>
    </div>
    <p>
     Think of the project highlights: What was the biggest challenge? Was there something interesting or unique about the process? How was it successful (even if you just learned something new)? Write down a 1 sentence caption for each. You'll use these in the next step.
    </p>
   </div>
   <div class="block">
    <h2>
     3. Build your page layout
    </h2>
    <div class="graphic">
     <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252Fc1lYGJYmjoXg1FR2GCUNsT%253B600x415.png%253Fauto%253Dwebp/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSIsInRpbWUiOjE3MDU2MzgxNjYuMTA0ODU4OX0:1rQgP0:Unmppf2hL21lSmI-BmEDnepvUsCOsv0TAB607TdFkjk" style="max-width:480px;"/>
    </div>
    <p>
     Drag &amp; drop images from your desktop and lay them out on the page, along with your project captions. Think of the story you want to tell as people scroll down the page.
    </p>
    <p>
     👾 Mix &amp; match blocks to build your own case study layout. I love the
     <strong>
      Side by Side block
     </strong>
     for this.
    </p>
    <p>
     (If you have already have a Portfolio Grid block on your page linking to other projects, you will want to remove it. We're building a one-pager today!)
    </p>
   </div>
   <div class="block">
    <h2>
     4. Add your contact info
    </h2>
    <div class="graphic">
     <img src="https://inboxflows.com/_/image/https%253A%252F%252Fcarbon-media.accelerator.net%252F00000000001%252FbcB7CDxfi5nfqjW8MCDskv%253B600x415.jpeg%253Fauto%253Dwebp/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib24tbWVkaSIsInRpbWUiOjE3MDU2MzgxNjYuMTA1MDI5Nn0:1rQgP0:0Beqa-lj79ZzS50GLSF8xtIK1zredN9CIJzIsOsnNuQ" style="max-width:480px;"/>
    </div>
    <p>
     At the bottom of the page, add your email address and (if you want) a quick summary of who you are and what you do. Give people who love your project a way to reach out and learn more about you!
    </p>
    <p>
     👾 The
     <strong>
      About Intro
     </strong>
     block or
     <strong>
      Contact Info
     </strong>
     block will work nicely for this.
    </p>
   </div>
   <div class="block">
    <h2>
     That's it!
    </h2>
    <p>
     Press LAUNCH and put your new page out into the world. Share it proudly everywhere again &amp; again, using different images, captions and screenshots straight from your page. (Think of it like your own personal product campaign.)
    </p>
    <p>
     If you want to add more later, you can! Drag &amp; Drop the
     <strong>
      Portfolio Grid
     </strong>
     block onto the page and add more projects, or create a new section on the page to feature other work.
    </p>
    <p>
     Let's do it!
    </p>
   </div>
   <div class="centered block">
    <a class="cta" style="color:#fff">
     Build your page
    </a>
   </div>
   <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%252F8f88f45efee51bdbeba09714385219d4%252Fopen.gif/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZjYXJib25tYWRlLiIsInRpbWUiOjE3MDU2MzgxNjYuMTA1MjAzNH0:1rQgP0:iHpfu53d-4HQnuTWoSxb2aTKkS9fz65gFrHIgcHT7Qw" style="border: 0 none; height: 1px; width: 1px; outline: none; text-decoration: none;"/>
  </div>
 </body>
</html>