Flyer Design

HTML

              
                <div class="grid">
    
    <div class="cell--one">
     
     <a href="https://res.cloudinary.com/jduquain/f_auto,q_auto/flyer-03_zfaix3.jpg" class="inspiration" target="_blank" rel="noopener">Inspiration</a>
      
      <div class="header">
        <h1>Headline</h1>
        <h2>Lorem Ipsum</h2>
      </div>
      
      <div class="para--wrap-one">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores laborum esse mollitia quisquam fugiat voluptate, quia voluptates. Doloremque, officia, dignissimos. Dolor eveniet voluptatem voluptatibus, iste illum ullam doloribus distinctio ah bota ale sur.</p>
        <p>Est eius, saepe deserunt dolore illum facilis vel. Et eos error reiciendis, quod, laborum esse mollitia quisquam fugiat repellat ipsa aperiam! Et, quasi a consequat obcaecati, voluptat sapiente offici. </p>
      </div>
      <div class="para--wrap-two">
        <p>Quod voluptatem quasi perferendis velit reiciendis expedita, similique. Obcaecati, ah bota ale sur beatae libero, totam perferendis ipsum atque aliquid a dignissimos eos iusto, rem. Dolorum sunt sed obcaecati facere, amet, sapiente voluptates velit!</p>
        <p>Maiores totam aliquid odit, ah bota ale sur  sed sunt adipisci quas tempore. Minus, praesentium, adipisci. Enim ah bota ale sur laborum quae harum culpa a numquam dolor adipisci dolore labore architecto ea, consequuntur maxime quo cupiditate illum!</p>
      </div>
        
      <div class="why">
        <h4>Why Choose Us?</h4>
        <ul>
          <li>Lorem ipsum dolor point Q1</li>
          <li>Interdum et malesuada fames point Q2</li>
          <li>Vivamus porta hendrerit nisi point Q3</li>
        </ul>
        
        <div class="circle">2020</div>
        
      </div>
      
      <img class="img-forrest" src="https://res.cloudinary.com/jduquain/f_auto,q_auto/forrest_zwbypr.jpg" alt="picture of forest">
      
      <div class="footer--one">
        <h3>Headline title</h3>
        <p>Space Here</p>
        
        <h3>Sample Text Space Here</h3>
        <p>jasonduquain.me</p>
      </div>
      
      <div class="footer--two">
        <h3>
          <span>Business</span>
          <span>Optimization</span>
        </h3>
        
        
        <p>Lorem Ipsum Dolor</p>
        <p>Interdum et malesuada fames point</p>
      </div>
      
      
      <div class="triangle--gray"></div>
      <div class="triangle--green"></div>
      
    </div>
    <div class="cell--two">
      
      <div class="image--bg"></div>
      
      <div class="bifold">
        <div class="globe">
         <h2><span>Bi-Fold</span><span>Brochure</span></h2>
          <svg  width="180" height="180" class="icon-earth" viewBox="0 0 32 32">
          <path d="M16 32c-8.836 0-16-7.164-16-16s7.164-16 16-16c8.836 0 16 7.164 16 16s-7.164 16-16 16zM28.968 14.659c0.026-0.013 0.040-0.035 0.050-0.070 0.021 0.111 0.072 0.209 0.154 0.281 0.002 0.010-0.003 0.008 0.002 0.022 0.008 0 0.014-0.006 0.021-0.006 0.084 0.068 0.188 0.114 0.305 0.114 0.18 0 0.33-0.1 0.418-0.241 0.006 0.007 0.016 0.016 0.021 0.024-0.001-0.016-0.003-0.032-0.005-0.048 0.039-0.071 0.066-0.149 0.066-0.235 0-0.276-0.225-0.5-0.5-0.5-0.176 0-0.322 0.096-0.412 0.232-0.004-0.003 0-0.015-0.011-0.011 0.013-0.038-0.022-0.135-0.077-0.239v0.518c0 0.057-0.016 0.108-0.032 0.159zM5.992 14.509c0-0.151-0.344-0.408-0.433-0.408 0-0.027-0.14-0.335-0.193-0.335 0-0.104-0.365-0.571-0.423-0.367-0.038 0.132 0.279 0.31 0.279 0.463 0.059 0 0.307 0.47 0.356 0.552 0.542 0.916-0.405 0.29-0.405-0.098-0.121-0.060-0.312-0.521-0.312-0.647-0.071-0.057-0.281-0.502-0.264-0.502 0-0.292-0.161-0.432-0.481-0.432-0.015-0.029-0.284-0.407-0.289-0.407 0-0.12-0.216-0.492-0.336-0.551 0-0.249-0.128-0.556-0.071-0.814 0-0.271-0.014-0.578-0.106-0.856-0.835 1.793-1.314 3.785-1.314 5.893 0 6.041 3.834 11.174 9.196 13.137 0.006-0.496 0.043-1.090 0.156-1.090 0-0.074 0.063-0.384 0.12-0.384 0-0.19 0.023-0.419 0-0.647-0.071-0.143 0.094-0.326 0.144-0.551 0.277-0.139 0.081-1.533 0.29-1.533 0-0.697 0.156-1.103 0.047-1.749 0.053 0-0.315-0.391-0.312-0.384-0.353 0-0.6-0.566-0.6-0.814-0.034-0.109-0.121-0.272-0.121-0.407 0.081 0-0.505-0.856-0.505-0.839-0.31-0.172 0.017-0.412 0.048-0.694-0.269-0.089 0.003-0.815 0.12-0.815 0.012-0.092 0.060-0.155 0.145-0.191 0.060 0.239 0.339-0.119 0.12-0.119 0-0.158-0.018-0.496 0-0.575 0-0.244-0.216-0.722-0.384-0.216-0.18-0.089-0.634-0.073-0.673-0.359 0.028-0.141-0.259-0.429-0.36-0.479 0.094-0.246-0.487-0.575-0.697-0.575 0-0.053-0.111-0.029-0.144-0.096-0.214 0-0.263-0.288-0.505-0.288-0.279 0-0.56-0.191-0.817-0.191-0.086-0.171-0.485-0.104-0.577-0.288-0.209 0-0.291-0.396-0.297-0.542-0.009-0.18-0.152-0.802-0.402-0.802zM26.248 6.484c-0.002 0.006 0.002 0.002-0.008 0.022 0.015 0 0.033 0.017 0.050 0.024-0.015-0.015-0.028-0.030-0.042-0.046zM26.549 6.815c0.035 0.068 0.061 0.131 0.053 0.17 0.035 0.001 0.052-0.018 0.080-0.025-0.043-0.049-0.090-0.095-0.133-0.145zM27.418 11.371c0.016-0.432-0.36-0.36-0.479-0.6-0.124 0-0.169-0.096-0.337-0.096-0.109-0.037-0.195-0.011-0.258 0.078-0.257 0.098-0.102-0.125-0.295-0.125 0.009-0.247-0.089-0.315-0.361-0.288-0.156 0.352-0.396 0.563-0.36 0.959 0.115 0.026 0.095 0.052 0.072 0.167 0.153 0.008 1.081-0.048 1.081-0.144 0.032 0 0.193 0.331 0.193 0.048 0.129 0 0.197 0.303 0.505 0.215 0 0.062 0.514-0.214 0.239-0.214zM27.467 16.474c0.018-0.088-0.044-0.127-0.096-0.216 0.137 0-0.433-1.057-0.433-1.222-0.087-0.043-0.198-0.345-0.218-0.455-0.117-0.078-0.238-0.334-0.288-0.479-0.119-0.079-0.409-0.433-0.456-0.599 0.172 0.019 0.432 0.054 0.432-0.168-0.116 0-0.133-0.143-0.023-0.143-0.036-0.147 0.078-0.253 0.103-0.368 0.030-0.139 0.089-0.353 0.089-0.519-0.165 0-0.205 0.028-0.336 0.072 0 0.097-0.293-0.024-0.336-0.024-0.063-0.126-0.52 0.164-0.648-0.096-0.207-0.187-0.151-0.331-0.218-0.595-0.034-0.134-0.217-0.142-0.328-0.164-0.313-0.061-0.087 0.373-0.104 0.472 0.192 0-0.121 0.238-0.121 0.359-0.324-0.070-0.216-0.431-0.407-0.527-0.057-0.096-0.012-0.168-0.145-0.168 0-0.128 0.068-0.36-0.072-0.407 0-0.062-0.272-0.087-0.312-0.168-0.172 0-0.572-0.65-0.695-0.431-0.077 0.14 0.065 0.174 0.094 0.288 0.249-0.049 0.225 0.41 0.529 0.359 0 0.064 0.008 0.129 0.023 0.192 0.225-0.053 0.199 0.167 0.312 0.167-0.082 0.109-0.342-0.174-0.271 0.064 0.041 0.138 0.018 0.256-0.161 0.391 0-0.149-0.012-0.551-0.168-0.551-0.106-0.212-0.421-0.161-0.554-0.359-0.108 0-0.15-0.336-0.336-0.359-0.035 0.049-0.166 0.096-0.217 0.096-0.101 0.203-0.672 0.021-0.672 0.048-0.009 0.002-0.32 0.762-0.338 0.862-0.035 0.215-0.208 0.219-0.26 0.423-0.026 0.102-0.653 0.054-0.653 0.129-0.271-0.090-0.505-0.28-0.505-0.575-0.022 0 0.051-0.753 0.097-0.863 0.055 0.015 0.066 0.034 0.097 0.096 0.166-0.062 0.553 0.041 0.553-0.144 0.161 0.004 0.209 0.068 0.144 0.192 0.15 0.028 0.409 0.066 0.409-0.144-0.088 0-0.097-0.008-0.097-0.096 0.288-0.299-0.216-0.569-0.216-0.718-0.102-0.034-0.31-0.255-0.162-0.172 0.125 0.069 0.582 0.212 0.402-0.092 0.012-0.004 0.020-0.012 0.023-0.023 0.051 0.036 0.266 0.257 0.266 0.048 0.059 0 0.287-0.144 0.096-0.144 0.018-0.108 0.014-0.198 0.023-0.264 0.305 0.164 0.135-0.112 0.289-0.215 0 0.199 0.164-0.096 0.264-0.096 0.119-0.177 0.391-0.040 0.457-0.24-0.147-0.048-0.12-0.416-0.12-0.55 0.177 0.029 0.374-0.239 0.401-0.055 0.010 0.071 0.019 0.267 0.055 0.294 0.263 0.138 0.193-0.079 0.193-0.215-0.088 0-0.205-0.308-0.217-0.456-0.072 0.010-0.188 0.040-0.217 0.095-0.262 0-0.44-0.095-0.648-0.095-0.016-0.032-0.266-0.312-0.24-0.312-0.146-0.251 0.146-0.178 0.192-0.19 0-0.238 0.991-0.196 1.034-0.576-0.326 0 0.336-0.552 0.336-0.55 0.221-0.189 0.338-0.352 0.613-0.373 0.116-0.008 1.406-0.364 1.406-0.203 0.052 0.002 0.224 0.004 0.402 0.010-2.497-2.322-5.834-3.752-9.513-3.752-3.563 0-6.806 1.342-9.277 3.535 0.022 0.050 0.039 0.098 0.038 0.132 0.131-0.009 0.319-0.093 0.361 0.073-0.065-0.001-0.13-0.009-0.192-0.025 0.046 0.371-0.162 0.144-0.336 0.144 0-0.009-0.077-0.040-0.159-0.062-0.053 0.050-0.109 0.097-0.162 0.147 0.006 0.016-0.003 0.017 0.007 0.035 0.056 0 0.027 0.087 0.187 0.14 0.185 0.063 0.388 0.098 0.583 0.129 0.158 0.025 0.249-0.029 0.384-0.029 0-0.020 0.33-0.167 0.097-0.167 0.032-0.132-0.027-0.165-0.169-0.167 0.012-0.14 0.345-0.048 0.481-0.048 0.104-0.175 0.003-0.154 0.095-0.313 0.11-0.195 0.241-0.026 0.313-0.213 0.109 0.040 0.206 0.099 0.241 0.237 0.087 0.072 0.529 0.724 0.529 0.263 0.158 0.053 0.237 0.349 0.24 0.504 0.287-0.042 0.312-0.257 0.312-0.48 0.066 0-0.024-0.107-0.024-0.144 0.107-0.039 0.241 0.102 0.241-0.047 0.046 0 0.048 0.046 0.048 0.096 0.149 0.029 0.245-0.017 0.336 0.015 0.063 0.022 0.031 0.349 0.002 0.464-0.036 0.146-0.315 0.148-0.315 0.216-0.316 0.236 0.373 0.359 0.481 0.503-0.065 0-0.312-0.032-0.312-0.047-0.156 0-0.534 0.165-0.673 0.047 0.194 0 0.259-0.233 0.289-0.455-0.179-0.067-0.39 0.043-0.44 0.221-0.084 0.294-0.279-0.012-0.377 0.186-0.038 0.012-0.385 0.173-0.385 0.119-0.39 0.055-0.288 0.386-0.288 0.743 0.155 0.093 0.47 0.358 0.456 0.503 0.35 0.062 0.478 0.099 0.793 0.144 0.026 0.051 0.13 0.099 0.193 0.119 0 0.206 0.187 0.169 0.36 0.169 0-0.263 0.306 0.219 0.336 0.311-0.042 0 0.072 0.269 0.096 0.36-0.048-0.017-0.063 0-0.048 0.048 0.152 0.056 0.393 0.040 0.433-0.12-0.146 0-0.097-0.167-0.097-0.264-0.15-0.1-0.127-0.293 0.024-0.335 0 0.136 0.495-0.085 0.216-0.191 0.068-0.153 0.114-0.388 0.003-0.521-0.071-0.084-0.16 0-0.195-0.126 0.189-0.047 0.050-0.407 0.048-0.575 0.060-0.023 0.216 0.038 0.216 0 0.185 0 0.493 0.234 0.601-0.049 0.309 0.141 0.063 0.275 0.385 0.168 0 0.076 0.363 0.431 0.409 0.431 0 0.017-0.009 0.12 0.071 0.12 0 0.077-0.048-0.044-0.048 0.095 0.045 0.005 0.289 0.049 0.289-0.047 0.155 0 0.264-0.19 0.264-0.335 0.097-0.063 0.267 0.527 0.384 0.527 0.086 0.134 0.361 0.329 0.361 0.455 0.058 0.059 0.119 0.043 0.119 0.216 0.073 0 0.217-0.287 0.217-0.024 0.068 0 0.266 0.146 0.289 0.263-0.173 0-0.009 0.168-0.098 0.168 0 0.166-0.371 0.034-0.455 0.024-0.115 0.515-0.809 0.145-1.229 0.278-0.221 0.070-0.648 0.557-0.671 0.8 0.268 0.003 0.386-0.232 0.625-0.312 0.195 0 0.233-0.118 0.409-0.167 0 0.049 0.048 0.023 0.048 0.072-0.342 0-0.134 0.221-0.034 0.382 0.062 0.1 0.133 0.148 0.212 0.179-0.033 0.058-0.060 0.116-0.081 0.181 0 0.001-0.001 0-0.001 0.001-0.065 0.022-0.192 0.069-0.217 0.12-0.387 0.043-0.196 0.017-0.17-0.076 0.014 0.033 0.153 0.003 0.147 0.004-0.023-0.116-0.058-0.1-0.024-0.167-0.21 0-0.312 0.096-0.481 0.096-0.028 0.057-0.175 0.192-0.24 0.192-0.049 0.148-0.16 0.417-0.289 0.503 0-0.039-0.342 0.215-0.312 0.215-0.076 0.123-0.159 0.119-0.193 0.311-0.023 0.012-0.12 0.333-0.12 0.383-0.149 0.099-0.204 0.503-0.457 0.503-0.155 0.308-0.433 0.267-0.433 0.671 0.094 0.096 0.13 0.521 0.159 0.657 0.036 0.169 0.092 0.345-0.134 0.349-0.016-0.025-0.174-0.264-0.145-0.264 0-0.099-0.121-0.416-0.192-0.515-0.095-0.133-0.271 0.021-0.409-0.037-0.059-0.118-0.458-0.144-0.6-0.144 0.023 0.089 0.088 0.117 0.096 0.216-0.118 0.048-0.186 0.102-0.308 0.085-0.209-0.029-0.184-0.192-0.414-0.169-0.368 0.037-0.625 0.342-0.625 0.707-0.041 0-0.041 0.719 0 0.719 0 0.203 0.168 0.35 0.168 0.503 0.163 0 0.346 0.359 0.505 0.359 0.018 0.127-0.080 0.147 0.192 0.145 0-0.014 0.148-0.093 0.168-0.192-0.188-0.046-0.001-0.288 0.12-0.335 0 0.171 0.24-0.057 0.24-0.072 0.027-0.011 0.265-0.096 0.265-0.096 0-0.194 0.181 0.019 0.048 0.096-0.13 0-0.12 0.216-0.192 0.216-0.031 0.154-0.092 0.288-0.128 0.438-0.046 0.185 0.104 0.204 0.056 0.377 0.191 0.036 0.384 0.001 0.577 0 0.001-0.034-0.006-0.067-0.024-0.096 0.279 0 0.024 0.527 0.193 0.527 0 0.199 0.096 0.354 0.096 0.479 0.13 0.086 0.208 0.201 0.168 0.359 0.16 0.021 0.504 0.062 0.504-0.144 0.243 0 0.26 0.165 0.242 0.335 0.484 0 0.181-0.479 0.383-0.479 0.019-0.079 0.052-0.093 0.099-0.041 0.099 0.053 0.174-0.099 0.253-0.147 0.025-0.017 0.113-0.068 0.129-0.068 0.068 0.041 0.074 0.029 0.104 0.075 0.132-0.001 0.265-0.075 0.378-0.153 0.173 0.021 0.117 0.393 0.441 0.416 0.13 0.009 0.431 0.045 0.543-0.032 0.028-0.019 0.131 0.065 0.142 0.101 0.108 0 0.1 0.094 0.146 0.092 0.011 0.021 0.027 0.029 0.049 0.023 0.014 0.041 0.1 0.053 0.145 0.167 0 0.104 0.216 0.122 0.216 0.191 0.155 0.078-0.053 0.099 0.185 0.171 0.131 0.041 0.252 0.107 0.393 0.117 0.045-0.171 0.191 0.023 0.265 0.023 0.038 0.078 0.058 0.019 0.095 0.096 0.223 0.186 0.076 0.114 0.168 0.312 0.107 0.070 0.141 0.314 0.17 0.455-0.086 0-0.025 0.329-0.025 0.36-0.104 0 0.266 0.197 0.266-0.049 0.152 0.025 0.252 0.191 0.36 0.191-0.063 0.145 0.168 0.254 0.168 0.025 0.228 0.023 0.167 0.363 0.145 0.479 0.169 0 0.218-0.094 0.362-0.112 0.156-0.099 0.33-0.171 0.527-0.171 0.553 0 1 0.447 1 1 0 0.498-0.371 0.893-0.848 0.969-0.064 0.073-0.122 0.136-0.126 0.136 0 0.048-0.011 0.526-0.025 0.526 0 0.096-0.073 0.623-0.144 0.623 0 0.271-0.177 0.32-0.24 0.575-0.146 0.108-0.541 0.288-0.602 0.407-0.113 0-0.197 0.096-0.312 0.096-0.016 0.033-0.261 0.264-0.217 0.264-0.018 0.17 0.013 0.57-0.079 0.682-0.062 0.074-0.151 0.066-0.112 0.182-0.135 0 0.008 0.096-0.205 0.096-0.134 0-0.373 0.191-0.38 0.353-0.009 0.198-0.062 0.341-0.232 0.462 0 0.068-0.312 0.088-0.312 0.264 0.029 0 0 0.326 0 0.359-0.093-0.003-0.321 0.090-0.36 0.167-0.314 0-0.276 0.032-0.48 0.168 0 0.042-0.029 0.191-0.072 0.191 0 0.243-0.173 0.022-0.313 0.145 0.055 0 0.125 0.239 0.096 0.239 0 0.211-0.131 0.229-0.264 0.384-0.063 0.042-0.123 0.216-0.168 0.216 0 0.142-0.071 0.271-0.071 0.407 0.030 0 0.002 0.061 0.023 0.118 0.067-0.019 0.069-0.095 0.096-0.095 0-0.12 0.191 0.071 0.072 0.071-0.099 0.15-0.206 0.153-0.265 0.36-0.060 0-0.112 0.058-0.156 0.126 1.178 0.321 2.414 0.509 3.696 0.509 4.924 0 9.246-2.548 11.742-6.393 0.015-0.354 0.070-0.692 0.109-0.809 0.098 0.072 0.171 0.207 0.24 0-0.173-0.034-0.131-0.094-0.072-0.239 0.066 0.040 0.199 0.089 0.307 0.082 0.033-0.062 0.059-0.128 0.092-0.19-0.098-0.076 0.037-0.273 0.084-0.177 0.025-0.048 0.047-0.098 0.070-0.146-0.011-0.003-0.008 0.004-0.024-0.001 0-0.087 0.016-0.076 0.073-0.12 0.001 0.009 0 0.009 0.002 0.017 0.873-1.827 1.377-3.864 1.377-6.024 0-0.071-0.010-0.139-0.011-0.21-0.026 0.098-0.075 0.204-0.144 0.228 0 0.063-0.715 0.374-0.672 0.503-0.126 0-0.568 0.126-0.649 0.287-0.089 0-0.448 0.127-0.481 0.192-0.446 0.001-0.361-0.526-0.576-0.526zM29.5 11h-0.531c-0.004-0.005-0.008-0.006-0.012-0.013-0.027 0-0.14-0.254-0.096-0.312 0.043 0 0.063 0.004 0.086 0.006-0.045-0.11-0.094-0.218-0.143-0.327-0.108 0.074-0.203 0.168-0.352 0.177 0 0.041-0.213 0.455 0 0.455 0 0.008 0.004 0.014 0.006 0.021-0.255 0.024-0.458 0.232-0.458 0.493 0 0.276 0.224 0.5 0.5 0.5h0.197c0.012 0.091 0.061 0.17 0.236 0.209 0.055 0.231 0.467 0.313 0.529 0.071-0.174 0-0.117-0.167-0.102-0.28h0.14c0.275 0 0.5-0.224 0.5-0.5s-0.225-0.5-0.5-0.5zM28.043 17.502c0.035 0.002 0.266-0.004 0.266-0.045 0.209 0 0.492-0.029 0.697-0.097 0 0.31-0.261 0.483-0.217 0.791-0.173 0-0.097 0.178-0.097 0.239-0.112 0.069-0.129 0.195-0.264 0.264 0 0.139-0.312 0.369-0.404 0.488-0.104 0.133-0.417 0.364-0.458 0.533 0.011-0.040-0.572 0.607-0.436 0.607 0 0.121-0.164 1.078 0.048 1.078 0 0.084 0.181 0.887 0.071 0.887 0 0.258-0.168 0.416-0.168 0.622-0.082 0.056-0.199 0.087-0.24 0.169-0.147 0-0.218 0.312-0.288 0.312 0 0.333-0.097 0.58-0.097 0.958 0.027 0-0.192 0.539-0.192 0.574-0.177 0.119-0.625 0.546-0.625 0.768 0 0-0.312 0.438-0.36 0.503-0.094 0-0.818 0.136-0.818 0.192-0.154 0-0.552 0.121-0.648-0.024 0-0.152-0.083-0.345-0.096-0.552-0.074 0-0.086-0.311-0.168-0.311 0-0.066-0.459-0.983-0.385-0.983 0-0.095-0.082-0.407-0.096-0.407 0-0.33-0.241-0.605-0.241-0.91-0.071 0-0.218-0.67-0.144-0.67 0-0.352 0.123-0.582 0.174-0.973 0.057-0.429-0.027-0.69-0.102-0.993-0.041 0-0.179-0.229-0.193-0.287-0.193-0.128-0.264-0.382-0.264-0.622 0.126-0.144 0.176-0.685 0.145-0.863-0.243-0.115-0.34-0.072-0.602-0.072-0.155-0.311-1.196-0.119-1.491-0.119 0 0.17-0.725-0.033-0.793-0.168-0.177 0-0.528-0.376-0.528-0.551-0.194-0.129-0.504-0.771-0.504-0.982-0.168-0.084-0.117-0.408-0.025-0.408 0.023-0.090-0.059-0.374-0.098-0.509-0.029-0.101 0.098-0.21 0.098-0.33 0-0.334 0.008-0.488 0.195-0.845 0.059-0.112 0.134-0.217 0.189-0.357 0.1-0.251 0.13-0.012 0.265-0.236 0.129-0.064 0.204-0.278 0.337-0.383 0.058-0.077 0.060-0.109 0-0.168 0.026 0 0.168-0.369 0.168-0.454 0.188-0.261 0.055-0.142 0.24-0.12 0.068-0.074 0.181-0.264 0.288-0.264 0.047-0.093 0.165-0.144 0.265-0.144 0 0.144 0.392-0.047 0.433-0.047 0.067-0.135 0.499-0.288 0.601-0.288 0-0.164 0.852 0.046 0.986 0.024 0-0.024 0-0.048 0-0.072 0.182 0.043 0.514 0.773 0.48 0.935 0.14 0 0.27-0.023 0.361 0 0 0.155 0.292 0.193 0.425 0.2 0.185 0.009 0.728-0.019 0.728-0.272 0.143 0 0.27 0.1 0.242 0.263 0.162 0.018 1.125 0.037 1.057 0.239 0.141 0 0.177 0.241 0.312 0.241-0.027 0.166 0.168 0.599 0.312 0.599 0 0.144 0.090 0.409 0.217 0.502 0.068 0.206 0.293 0.64 0.504 0.767-0.090 0.17 0.137 0.31 0.193 0.479-0.013 0 0.049 0.251 0.119 0.288 0 0.17 0.358 0.863 0.554 0.863 0.013 0.084-0.184 0.122 0.072 0.141zM22.852 12.137c0.037-0.143 0.121-0.032 0.199-0.006 0.185 0.060 0.121-0.003 0.258-0.065 0 0.39-0.224 0.094-0.457 0.071zM22.346 11.418c0.098 0 0.125 0.44-0.144 0.359 0-0.109-0.069-0.311 0.073-0.311 0.041 0.17 0.071 0.101 0.071-0.048zM22.227 11.131c0.111 0.048 0.16 0.032 0.144-0.048 0.146 0.048-0.019 0.152-0.048 0.264-0.075-0.074-0.052-0.1-0.096-0.216zM19.654 8.998c-0.236-0.061 0.243-0.131 0.264-0.191-0.080 0-0.135-0.083-0.104-0.153 0.036-0.083 0.095 0.099 0.177 0.058 0.097-0.010 0.288-0.155 0.19 0.125-0.1 0.284-0.191 0.492-0.551 0.497-0.129-0.13-0.005-0.198 0.024-0.336zM20.544 8.016c0.194 0 0.024 0.144-0.019 0.144 0.033 0.013-0.006 0.129-0.006 0.167 0.18-0.002 0.183-0.112 0.312-0.144-0.027 0.161-0.207 0.192-0.031 0.33 0.093 0.073 0.188 0.159 0.151 0.27 0.229 0 0.263 0.22 0.216 0.479 0.127 0 0.121 0.006 0.121-0.121 0.123 0.034 0.114 0.145 0 0.145-0.114 0.225-0.413 0.215-0.625 0.215-0.002-0.174-0.035-0.185-0.196-0.136-0.22 0.067-0.048-0.175-0.044-0.295 0.024 0 0.499 0.022 0.216-0.072-0.015-0.258-0.073-0.335-0.312-0.335 0-0.176-0.062-0.163-0.091-0.356-0.041-0.285 0.223 0.020 0.308-0.291zM20.471 9.573c0 0.059-0.12 0.106-0.144 0.023 0.023 0.008 0.032 0 0.023-0.023 0.041 0 0.082 0 0.121 0zM18.5 7h-1c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5zM12.674 15.85c0.056 0 0.121 0.022 0.121 0.072-0.073 0-0.167 0.069-0.121-0.072zM11.762 15.899c-0.040 0.076-0.364 0.063-0.409-0.025 0.12 0 0.213 0.049 0.336 0 0-0.066-0.055-0.119-0.096-0.191 0.131 0 0.278 0.1 0.457 0.096 0-0.111-0.049 0.024 0-0.12 0.075 0.019 0.256 0.191 0.264 0.263-0.263-0.028-0.275-0.023-0.552-0.023zM10.704 15.324c-0.123 0-0.36-0.107-0.433-0.216 0.119 0.005 0.237 0.054 0.312-0.072 0.305 0.031 0.332 0.241 0.577 0.241 0.046 0.081 0.308 0.267 0.055 0.291-0.191 0.018-0.431-0.086-0.511-0.244zM10.896 15.995c-0.089 0-0.236 0.039-0.168-0.145 0.118 0.016 0.174 0.065 0.168 0.145zM11.064 15.971c-0.048 0.008-0.096 0.016-0.144 0.024 0.014-0.111 0.119-0.235 0.144-0.024zM11.953 17.024c-0.019 0.067-0.016 0.071-0.095 0.071 0.008-0.031 0.015-0.062 0.023-0.095 0.025 0.008 0.048 0.016 0.072 0.024zM9.79 15.036c0.023 0.008 0.048 0.017 0.072 0.024 0.031 0.119 0.096 0.060 0.168 0.024 0 0.139-0.322 0.179-0.24-0.048z"></path>
          </svg>
        </div>
      </div>
      
      <div class="triangle-corner">
        <svg class="icon-qrcode" viewBox="0 0 32 32">
          <path d="M10 2h-8v8h8v-8zM12 0v0 12h-12v-12h12zM4 4h4v4h-4zM30 2h-8v8h8v-8zM32 0v0 12h-12v-12h12zM24 4h4v4h-4zM10 22h-8v8h8v-8zM12 20v0 12h-12v-12h12zM4 24h4v4h-4zM14 0h2v2h-2zM16 2h2v2h-2zM14 4h2v2h-2zM16 6h2v2h-2zM14 8h2v2h-2zM16 10h2v2h-2zM14 12h2v2h-2zM14 16h2v2h-2zM16 18h2v2h-2zM14 20h2v2h-2zM16 22h2v2h-2zM14 24h2v2h-2zM16 26h2v2h-2zM14 28h2v2h-2zM16 30h2v2h-2zM30 16h2v2h-2zM2 16h2v2h-2zM4 14h2v2h-2zM0 14h2v2h-2zM8 14h2v2h-2zM10 16h2v2h-2zM12 14h2v2h-2zM18 16h2v2h-2zM20 14h2v2h-2zM22 16h2v2h-2zM24 14h2v2h-2zM26 16h2v2h-2zM28 14h2v2h-2zM30 20h2v2h-2zM18 20h2v2h-2zM20 18h2v2h-2zM22 20h2v2h-2zM26 20h2v2h-2zM28 18h2v2h-2zM30 24h2v2h-2zM18 24h2v2h-2zM20 22h2v2h-2zM24 22h2v2h-2zM26 24h2v2h-2zM28 22h2v2h-2zM30 28h2v2h-2zM20 26h2v2h-2zM22 28h2v2h-2zM24 26h2v2h-2zM26 28h2v2h-2zM20 30h2v2h-2zM24 30h2v2h-2zM28 30h2v2h-2z"></path>
        </svg>
      </div>
      
      <div class="social-bar">
        <div class="circle--one">
          <svg width="40" height="40" class="icon-mic" viewBox="-18 -17 55 55">
            <path d="M15 22c2.761 0 5-2.239 5-5v-12c0-2.761-2.239-5-5-5s-5 2.239-5 5v12c0 2.761 2.239 5 5 5zM22 14v3c0 3.866-3.134 7-7 7s-7-3.134-7-7v-3h-2v3c0 4.632 3.5 8.447 8 8.944v4.056h-4v2h10v-2h-4v-4.056c4.5-0.497 8-4.312 8-8.944v-3h-2z"></path>
          </svg>
        </div>
        <div class="circle--two">
          <svg width="40" height="40" class="icon-images" viewBox="-20 -22 62 62">
            <path d="M34 4h-2v-2c0-1.1-0.9-2-2-2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h2v2c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2zM4 6v20h-1.996c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993c0.001 0.001 0.003 0.002 0.004 0.004v1.996h-24c-1.1 0-2 0.9-2 2v0zM34 29.996c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993c0.001 0.001 0.003 0.002 0.004 0.004v23.993z"></path>
            <path d="M30 11c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
            <path d="M32 28h-24v-4l7-12 8 10h2l7-6z"></path>
          </svg>
        </div>
        <div width="40" height="40" class="circle--three">
          <svg class="icon-stats-dots" viewBox="-22 -22 62 62">
            <path d="M4 28h28v4h-32v-32h4zM9 26c-1.657 0-3-1.343-3-3s1.343-3 3-3c0.088 0 0.176 0.005 0.262 0.012l3.225-5.375c-0.307-0.471-0.487-1.033-0.487-1.638 0-1.657 1.343-3 3-3s3 1.343 3 3c0 0.604-0.179 1.167-0.487 1.638l3.225 5.375c0.086-0.007 0.174-0.012 0.262-0.012 0.067 0 0.133 0.003 0.198 0.007l5.324-9.316c-0.329-0.482-0.522-1.064-0.522-1.691 0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-0.067 0-0.133-0.003-0.198-0.007l-5.324 9.316c0.329 0.481 0.522 1.064 0.522 1.691 0 1.657-1.343 3-3 3s-3-1.343-3-3c0-0.604 0.179-1.167 0.487-1.638l-3.225-5.375c-0.086 0.007-0.174 0.012-0.262 0.012s-0.176-0.005-0.262-0.012l-3.225 5.375c0.307 0.471 0.487 1.033 0.487 1.637 0 1.657-1.343 3-3 3z"></path>
          </svg>
        </div>
      </div>
      
      <div class="header--two">
        <h1>Brand</h1>
        <h2>Company Name</h2>
        
        <h3>Your Headline</h3>
        
        <div class="para--wrap-two">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores laborum esse mollitia quisquam fugiat voluptate, quia voluptates. Doloremque, ah bota ale sur hollish officia, dignissimos. Dolor eveniet voluptatem ah bota ale sur hollish voluptat, iste illum ullam doloribus distinctio ah bota ale sur.</p>
        <p>Est eius, saepe deserunt dolore illum facilis vel. Et eos error reiciendis, quod, laborum esse mollitia quisquam fugiat repellat ipsa aperiam! Et, quasi a consequat ah bota ale sur hollish obcaecati, voluptat sapiente officiis ex, quo natus ea el.</p>
      </div>    
        
      </div>

    </div>
    
  </div>

CSS

              
                
:root {
	box-sizing: border-box;
	
	--gray-100: hsl(204, 45%, 98%);
  --gray-200: hsl(210, 38%, 95%);
  --gray-300: hsl(214, 32%, 91%);
  --gray-400: hsl(211, 25%, 84%);
  --gray-500: hsl(214, 20%, 69%);
  --gray-600: hsl(216, 15%, 52%);
  --gray-700: hsl(218, 17%, 35%);
  --gray-800: hsl(218, 23%, 23%);
  --gray-900: hsl(220, 26%, 14%);
  
  --green: hsl(176, 75%, 30%);
  --green-400: hsl(176, 58%, 29%);
}

*, ::before, ::after {
    box-sizing: inherit;
    text-decoration: none;
    margin: 0;
    padding: 0;
	outline: none;
}

body {
  font-size: 100%;
  font-family: 'Fira Sans', sans-serif;
  width: 1280px;
  height: 850px;
  margin: 2em auto;
  border: 1px solid var(--gray-700);
  color: var(--gray-700);
}

h1, h2, h3, h4 {
  font-family: 'Chakra Petch', sans-serif;
  text-transform: uppercase;
}

.inspiration {
  position: absolute;
  top: 1em;
  right: 4.3em;
  transition: all 300ms ease-in;
  font-size: .8em;
  color: var(--green-400);
}

.inspiration:hover {
  color: var(--gray-900);
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  overflow: hidden;
  
  height: 848px; /* why does  850px hide the bottom border on cell one?? */
}

.cell--one {
  padding: 4em 3.5em 0 3.5em;
  grid-column: 1 / 2;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2.5em;
  
  
  
  background-color: var(--gray-100);
}

.header {
  grid-column: 1 / 2;
  z-index: 2;
}

.header h1 {
  font-weight: 300;
  color: var(--green);
  line-height: 1;
  font-size: 2.1em;
  margin-bottom: .05em;
}

.header h2 {
  font-weight: 600;
  font-size: 2em;
  line-height: 1;
  position: relative;
}

.header h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 45%;
  bottom: -16px;
  height: 2px;
  background-color: var(--gray-600);
}

.para--wrap-one {
  font-size: .75em;
  grid-column: 1 / 2;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  z-index: 3;
}

.para--wrap-one p:first-of-type {
  margin-bottom: 1.2em;
}

.para--wrap-two {
  font-size: .75em;
  grid-column: 2 / 3;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.para--wrap-two p:first-of-type {
  margin-bottom: 1.2em;
}

.why {
  grid-column: 1 / 2;
  z-index: 3;
  transform: translateY(-1em)
}

.why h4 {
  text-transform: none;
  color: var(--green);
  font-size: .9em;
  margin-bottom: .25em;
}

.why ul {
  font-size: .75em;
  list-style-position: inside;
}

.why li {
  margin-bottom: .25em;
}

.circle {
  margin-top: 1em;
  font-weight: 200;
  font-size: 2em;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,.7);
}

.img-forrest {
  grid-column: 2 / 3;
  width: 250px;
  height: auto;
  transform: translateY(-1em);
}

.footer--one {
  color: #fff;
  text-transform: uppercase;
  z-index: 4;
}

.footer--one {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.footer--one h3:first-of-type {
  
}

.footer--one p:first-of-type {
  font-size: .75em;
  letter-spacing: 1px;
}

.footer--one h3:last-of-type {
  font-size: .9em;
  margin-top: 1.1em;
}

.footer--one p:last-of-type {
  font-size: .7em;
  margin-top: .2em;
}


.footer--two {
  text-transform: uppercase;
  text-align: right;
  letter-spacing: .03em;
}

.footer--two h3:first-of-type span:first-of-type {
  display: block;
  font-weight: 300;
  line-height: 1.1;
}

.footer--two h3:first-of-type span:last-of-type {
  display: block;
  font-weight: 600;
  line-height: 1.1;
}

.footer--two p:first-of-type {
  font-weight: 300;
  font-size: 1.1em;
}

.footer--two p:last-of-type {
  font-size: .65em;
  text-transform: none;
  margin-top: .4em;
}



.triangle--gray {
  position: absolute;
  top: 0;
  left: 0;
  width: 310px;
  height: 310px;
  background-color: var(--gray-300);
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  z-index: 0;
}

.triangle--green {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 420px;
  height: 420px;
  background-color: var(--green);
  background-image: linear-gradient(45deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.04) 15%, rgba(0,0,0,.2) 15%, rgba(0,0,0,.1) 22%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.2) 30%, rgba(0,0,0,.1) 35%, transparent 39%);
  
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
  z-index: 0;
}


/********** MAIN GRID - CELL 2 ******/
.cell--two {
  grid-column: 2 / 3;
  position: relative;
  overflow: hidden;
}

.header--two {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 72%;
  padding: 0 3.5em 2.7em 3.5em;
}

.header--two h1 {
  color: var(--green);
  font-weight: 300;
  line-height: 1;
}

.header--two h2 {
  font-size: 1em;
  font-weight: 600;
  margin-bottom: 2.2em;
  position: relative;
}

.header--two h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  background-color: var(--gray-600);
  width: 42%;
}

.header--two h3 {
  color: var(--green);
  font-size: .95em;
  margin-bottom: .3em;
}

.image--bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 550px;
  background: linear-gradient(130deg, transparent 0%, transparent 50%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.2) 100%), url(https://res.cloudinary.com/jduquain/f_auto,q_auto/forrest_zwbypr.jpg)  no-repeat center center/cover;
  clip-path: polygon(0% 0%, 100% 0%, 35% 92%, 0% 58%);
}

.social-bar {
  position: absolute;
  width: 110px;
  height: 420px;
  top: 14%;
  left: 6.5%;
  background-color: var(--green);
  opacity: .6;
  transform: rotate(-50deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.social-bar div {
  margin-top: 2em;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid white;
  transform: rotate(50deg)
}

.social-bar div:first-of-type {
  margin-top: 5em;
}

.social-bar svg {
  width: 40px;
  height: 40px;
  fill: #fff;
}

.bifold {
  box-sizing: content-box;
  position: absolute;
  width: 280px;
  height: 450px;
  background-color: hsl(233, 53%, 9%);
  transform: rotate(39.3deg);
  left: 72.3%;
  top: 0;
  border-bottom: 80px solid var(--gray-300);
  
}

.globe {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 180px;
  height: 180px;
  transform: rotate(-40deg);
}

.globe h2 {
  position: absolute;
  text-align: right;
  text-transform: none;
  right: 10px;
  top: 33%;
}

.globe h2 span:first-of-type {
  display: block;
  color: var(--green);
  font-size: 1.5em;
  font-weight: 300;
  line-height: 1;
}

.globe h2 span:last-of-type {
  display: block;
  color: #fff;
  font-size: .88em;
  line-height: 1;
}

.globe svg {
  fill: rgba(255,255,255,.2);
  opacity: .5;
}

.triangle-corner {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 500px;
  background-image: linear-gradient(129deg, var(--green) 0%, var(--green) 65%, var(--green-400) 65%, var(--green-400) 100%);
  clip-path: polygon(100% 18%, 34% 68%, 100% 105%);
}

.triangle-corner svg {
  width: 55px;
  height: 55px;
  position: absolute;
  bottom: 95px;
  right: 30px;
}

JS

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions