We hate bad code too

That’s why we built Webflow to work with the web — not against it. Webflow gives you complete control over HTML, CSS, and JavaScript, which lets you work visually, without sacrificing control — or creating garbage code.

HTML
CSS

<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com--><!-- Last Published: Thu Mar 23 2017 23:58:04 GMT+0000 (UTC) -->
<html data-wf-domain="janet.webflow.io" data-wf-page="58cc2e0a9a7dd8aa76677472" data-wf-site="58cc2e0a9a7dd8aa76677473">
<head>
<meta charset="utf-8"><title>Janets Portfolio</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="https://assets-global.website-files.com/58cc2e0a9a7dd8aa76677473/css/janet.webflow.533557eac.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script type="text/javascript">WebFont.load({
  google: {
      families: ["Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic","Poppins:300,regular,500,600,700"]
    }
  });
</script>
<script src="https://assets-global.website-files.com/0globals/modernizr-2.7.1.js" type="text/javascript"></script>
<link href="https://assets-global.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="https://assets-global.website-files.com/img/webclip.png" rel="apple-touch-icon">
</head>
<body class="body">
  <div class="nav-wrap">
    <div class="nav-button" data-ix="nav">
      <div class="plus">
        <div class="_2 plus-bar"></div>
        <div class="plus-bar"></div>
      </div>
    </div>
    <div class="nav-links">
      <a class="nav-link" href="#hero">home</a>
      <a class="nav-link" href="#work">work</a>
      <a class="nav-link" href="#clients">clients</a>
      <a class="nav-link" href="#contact">contact</a>
    </div>
  </div>
  <div class="hero section" id="hero">
    <div class="_1 container">
      <div class="hero-left">
        <div class="bar"></div>
        <h1 class="heading" data-ix="load-down">Hi, my name is Janet, and I'm a freelance designer in New York City.</h1>
      </div>
      <div class="hero-img-wrap" data-ix="load-up">
        <ul class="hero-list-wrap w-list-unstyled">
          <li class="hero-list-text">ILLUSTRATION +</li>
          <li class="hero-list-text">BRANDING +</li>
          <li class="hero-list-text">PHOTOGRAPHY +</li>
        </ul>
        <div class="hero-image"></div>
        <div class="hero-color" data-ix="hero-color"></div>
      </div>
    </div>
  </div>
  <div class="section work" id="work">
    <div class="container">
      <h1 class="section-title">Work</h1>
    </div>
    <div class="cc-1 container">
      <div class="w-dyn-list"><div class="w-dyn-items work-wrap"><div class="thumbnail-wrap w-dyn-item">
            <div class="project-number-wrap">
              <div class="project-number">01</div>
              <h5 class="project-type-text">Photography</h5>
              <h5 class="cc-plus project-type-text">+</h5>
            </div>
            <div class="work-thumbnail-color">
              <div class="project-image" style="background-image: url('https://assets-global.website-files.com/58cc2e0a9a7dd8aa76677476/58cc2e0a9a7dd8aa766774d5_alice-moore-192526.jpg');"></div>
            </div>
            <div class="work-content">
              <div class="project-content-right" data-ix="load-up">
                <h3 class="work-title">Prism</h3>
                <p class="project-paragraph">Prism, a international company dedicated to people, launched a campaign dedicated to mental health and well being. We worked together to photograph some beautiful, peaceful, and relaxing objects to go along with their campaign&#39;s visual identity and copyrighting. My best friend is Ben Affleck.</p>
                <div class="view-project-cta" data-ix="move-arrow">
                  <a class="project-link-text" href="http://janet.webflow.io">View project</a>
                  <img class="arrow" src="http://uploads.webflow.com/58cc2e0a9a7dd8aa76677473/58cc2e0a9a7dd8aa76677481_arrow.png" width="9">
                </div>
              </div>
            </div>
          </div><div class="thumbnail-wrap w-dyn-item">
            <div class="project-number-wrap">
              <div class="project-number">02</div>
              <h5 class="project-type-text">Illustration</h5>
              <h5 class="cc-plus project-type-text">+</h5>
            </div>
            <div class="work-thumbnail-color">
              <div class="project-image" style="background-image: url('https://assets-global.website-files.com/58cc2e0a9a7dd8aa76677476/58cc2e0a9a7dd8aa766774d9_wolf.png');"></div>
            </div>
            <div class="work-content">
              <div class="project-content-right" data-ix="load-up">
                <h3 class="work-title">Wolfdew</h3>
                <p class="project-paragraph">Wolfdew, a popular and evasive t-shirt brand, (which excludes the likes of vampires for obvious reasons) needed an illustration for a new feature they were making a landing page for. We worked together to make an obvious and cliche graphic of a &#39;wolf&#39;, since their name has the word &#39;wolf&#39; in it.</p>
                <div class="view-project-cta" data-ix="move-arrow">
                  <a class="project-link-text" href="http://janet.webflow.io">View project</a>
                  <img class="arrow" src="http://uploads.webflow.com/58cc2e0a9a7dd8aa76677473/58cc2e0a9a7dd8aa76677481_arrow.png" width="9">
                </div>
              </div>
            </div>
          </div><div class="thumbnail-wrap w-dyn-item">
            <div class="project-number-wrap">
              <div class="project-number">03</div>
              <h5 class="project-type-text">Branding</h5>
              <h5 class="cc-plus project-type-text">+</h5>
            </div>
            <div class="work-thumbnail-color">
              <div class="project-image" style="background-image: url('https://assets-global.website-files.com/58cc2e0a9a7dd8aa76677476/58cc2e0a9a7dd8aa766774d7_qrl%20logo%202.png');"></div>
            </div>
            <div class="work-content">
              <div class="project-content-right" data-ix="load-up">
                <h3 class="work-title">QRL</h3>
                <p class="project-paragraph">After a few great years of growth, and a new focus on developing industrial engineering solutions, it was time for QRL to rebrand as well as get a few office cats for morale. We worked together for dozens of seconds to encapsulate the QRL brand into a visual form that will last for ages.</p>
                <div class="view-project-cta" data-ix="move-arrow">
                  <a class="project-link-text" href="http://janet.webflow.io">View project</a>
                  <img class="arrow" src="http://uploads.webflow.com/58cc2e0a9a7dd8aa76677473/58cc2e0a9a7dd8aa76677481_arrow.png" width="9">
                </div>
              </div>
            </div>
          </div></div></div>
    </div>
  </div>
  <div class="footer">
    <div class="container">This site is for demo purposes only.</div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script src="https://assets-global.website-files.com/58cc2e0a9a7dd8aa76677473/js/webflow.ea721fbda.js" type="text/javascript"></script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body></html>


/* ==========================================================================
   Start of custom Webflow CSS
   ========================================================================== */
h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 500;
}

h3 {
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
}

p {
  margin-bottom: 10px;
  font-family: Roboto, sans-serif;
  line-height: 22px;
}

.body {
  font-family: Poppins, sans-serif;
  color: #000;
  font-weight: 400;
}

.section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.section.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  height: 800px;
}

.section.work {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section.clients {
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #ebebeb;
  background-image: -webkit-linear-gradient(135deg, #f8c7c7, #fff5f5);
  background-image: linear-gradient(315deg, #f8c7c7, #fff5f5);
  color: #fff;
}

.section.contact {
  padding-top: 120px;
  padding-bottom: 120px;
}

.section.project-detail {
  padding-top: 80px;
  padding-bottom: 80px;
}

.section.pp-page-content {
  padding-bottom: 40px;
}

.container {
  width: 90%;
  max-width: 1000px;
}

.container._1 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.container._2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.container._3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(270deg, #ccc8e9, #fff);
  background-image: linear-gradient(180deg, #ccc8e9, #fff);
}

.container.pp-hero {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 50px;
}

.hero-headline {
  position: relative;
  z-index: 1;
  color: #000;
  font-size: 40px;
  line-height: 55px;
  font-weight: 600;
}

.thumbnail-wrap {
  position: relative;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}

.work-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.nav-wrap {
  position: fixed;
  left: 20px;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: block;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.nav-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 60px;
  padding-top: 2px;
  padding-right: 60px;
  padding-left: 60px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  color: #000;
  font-size: 12px;
  line-height: 60px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-link:hover {
  color: #ff6363;
}

.nav-links {
  position: absolute;
  left: 55px;
  top: 55px;
  display: none;
  padding-top: 20px;
  padding-bottom: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 30px 100px 0 rgba(0, 0, 0, .1);
  opacity: 0;
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

.nav-wrap {
  position: fixed;
  left: 25px;
  top: 25px;
  right: auto;
  bottom: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 60px;
  height: 60px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.nav-button {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 40px;
  height: 40px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #000;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  text-decoration: none;
  cursor: pointer;
}

.nav-button:hover {
  border-radius: 8px;
}

.nav-button:active {
  border-radius: 12px;
}

.work-content {
  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.project-content-right {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  margin-top: -172px;
  padding: 60px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 30px 100px 0 rgba(0, 0, 0, .1);
}

.bar {
  width: 80px;
  height: 2px;
  margin-top: 150px;
  margin-bottom: 150px;
  background-color: #000;
}

.work-title {
  margin-bottom: 25px;
  padding-top: 2px;
  padding-left: 30px;
  border-left: 2px solid #000;
  line-height: 20px;
  font-weight: 400;
}

.project-number-wrap {
  position: absolute;
  right: 60px;
  z-index: 5;
  margin-top: -64px;
  font-family: Roboto, sans-serif;
  font-weight: 100;
  text-align: right;
}

.work-thumbnail-color {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px;
  border-radius: 5px;
}

.hero-img-wrap {
  position: absolute;
  left: 214px;
  z-index: 0;
  overflow: hidden;
  width: 800px;
  height: 600px;
  border-radius: 5px;
  background-color: #d4bdf6;
}

.project-paragraph {
  margin-bottom: 10px;
  font-family: Roboto, sans-serif;
  color: #85838a;
}

.project-link-text {
  display: inline-block;
  color: #000;
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}

.about-text {
  max-width: 800px;
  margin-bottom: 0px;
  font-family: Poppins, sans-serif;
  font-size: 32px;
  line-height: 42px;
  font-weight: 500;
  text-align: center;
}

.input {
  height: 50px;
  margin-bottom: 0px;
  padding-right: 15px;
  padding-left: 15px;
  border: 0px solid #000;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 30px 70px 0 rgba(0, 0, 0, .1);
  font-size: 13px;
}

.input:focus {
  border-color: #000;
}

.input.email {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.input.long {
  height: auto;
  min-height: 180px;
  margin-top: 5px;
  padding-top: 15px;
}

.form-wrap {
  width: 550px;
  margin-bottom: 0px;
  padding-top: 80px;
  padding-bottom: 80px;
  padding-left: 80px;
  background-image: none;
}

.form-button {
  width: 100%;
  height: 50px;
  margin-top: 5px;
  padding: 0px 20px;
  border-radius: 5px;
  background-color: transparent;
  background-image: -webkit-linear-gradient(79deg, #f8c7c7, #ffe6e6);
  background-image: linear-gradient(11deg, #f8c7c7, #ffe6e6);
  box-shadow: 0 30px 70px 0 rgba(0, 0, 0, .1);
  color: #000;
  line-height: 14px;
  font-weight: 500;
}

.form-button:hover {
  background-color: #f8c7c7;
  background-image: -webkit-linear-gradient(353deg, #f5b5b5, #fcd0d0);
  background-image: linear-gradient(97deg, #f5b5b5, #fcd0d0);
}
That’s an unedited snippet of code Webflow wrote. If you'd like to see more, check out all the source code of the live site.
Visit the live site
Preview in Designer
Arrow point up to the right