A sample Webflow page
| <!DOCTYPE html> | |
| <!-- This site was created in Webflow. http://www.webflow.com --> | |
| <!-- Last Published: Mon Aug 27 2018 00:33:27 GMT+0000 (UTC) --> | |
| <html data-wf-page="5b6195b59fe96a1ba86ba604" data-wf-site="5b6195b59fe96ad6326ba603"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Campaign Kit</title> | |
| <meta content="width=device-width, initial-scale=1" name="viewport"> | |
| <meta content="Webflow" name="generator"> | |
| <link href="css/normalize.css" rel="stylesheet" type="text/css"> | |
| <link href="css/webflow.css" rel="stylesheet" type="text/css"> | |
| <link href="css/campaignkit.webflow.css" rel="stylesheet" type="text/css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script> | |
| <script type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic"] }});</script> | |
| <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] --> | |
| <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script> | |
| <link href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico" rel="shortcut icon" type="image/x-icon"> | |
| <link href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png" rel="apple-touch-icon"> | |
| </head> | |
| <body class="body"> | |
| <div data-animation="default" class="navbar-2 w-nav" data-easing2="ease-in-out-quad" data-easing="ease-in-out-quad" data-collapse="medium" data-no-scroll="1" data-duration="750" data-doc-height="1"> | |
| <div class="container-2 w-container"><a href="#" class="w-inline-block"><img src="images/logo.svg" class="image-2"></a> | |
| <nav role="navigation" class="nav-menu-3 w-nav-menu"><a href="#" class="nav-link-5 w-nav-link">Home</a><a href="#" class="nav-link-5 w-nav-link">Design Types</a><a href="#" class="nav-link-5 w-nav-link">Icons</a><a href="#" class="nav-link-5 w-nav-link">Photos</a><a href="#" class="nav-link-5 w-nav-link">Templates</a><a href="#" class="nav-link-5 w-nav-link">Create a Design</a><a href="#" class="nav-link-5 w-nav-link">Login</a><a href="#" class="nav-link-5 w-nav-link">Join Free</a></nav> | |
| <div class="menu-button w-nav-button"> | |
| <div class="icon-5 w-icon-nav-menu"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-collapse="medium" data-animation="default" data-duration="400" class="desktop-navbar w-nav"> | |
| <div> | |
| <div class="w-row"> | |
| <div class="column-4 w-col w-col-3"><a href="#" class="w-inline-block"><img src="images/logo.svg" class="image"></a></div> | |
| <div class="column-2 w-col w-col-5"><a href="#" class="navigation-link w-nav-link">Design Types</a><a href="#" class="navigation-link w-nav-link">Icons</a><a href="#" class="navigation-link w-nav-link">Photos</a> | |
| <div data-hover="1" data-delay="0" class="dropdown-2 w-dropdown"> | |
| <div class="dropdown-toggle-3 w-dropdown-toggle"> | |
| <div class="icon-3 w-icon-dropdown-toggle"></div> | |
| <div class="dropdown-menu">Templates</div> | |
| </div> | |
| <nav class="dropdown-list-2 w-dropdown-list"> | |
| <div class="div-block-35"> | |
| <div class="div-block-33"></div> | |
| <div> | |
| <div class="row-5 w-row"> | |
| <div class="w-col w-col-3"><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Presentations</a><a href="#" class="dropdown-link w-dropdown-link">Facebook Ads</a><a href="#" class="dropdown-link w-dropdown-link">Flyers</a><a href="#" class="dropdown-link w-dropdown-link">Posters</a><a href="#" class="dropdown-link w-dropdown-link">Business Cards</a></div> | |
| <div class="w-col w-col-3"><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a></div> | |
| <div class="w-col w-col-3"><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a></div> | |
| <div class="w-col w-col-3"><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Logos</a></div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| </div> | |
| <div data-hover="1" data-delay="0" class="dropdown-2 w-dropdown"> | |
| <div class="dropdown-toggle-3 fallback w-dropdown-toggle"> | |
| <div class="icon-3 w-icon-dropdown-toggle"></div> | |
| <div class="dropdown-menu">Templates</div> | |
| </div> | |
| <nav class="dropdown-list-2 w-dropdown-list"> | |
| <div class="div-block-33"></div><a href="#" class="dropdown-link w-dropdown-link">Logos</a><a href="#" class="dropdown-link w-dropdown-link">Presentations</a><a href="#" class="dropdown-link w-dropdown-link">Facebook Ads</a><a href="#" class="dropdown-link w-dropdown-link">Flyers</a><a href="#" class="dropdown-link w-dropdown-link">Posters</a><a href="#" class="dropdown-link w-dropdown-link">Business Cards</a></nav> | |
| </div> | |
| </div> | |
| <div class="column-3 w-col w-col-4"><a href="#" class="navigation-link right-links create-design w-nav-link">Create a Design</a><a href="#" class="navigation-link right-links login-link w-nav-link">Login</a><a href="#" class="navigation-link right-links join-button w-nav-link">Join Free</a></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="home-section-1"> | |
| <div class="home-section-1-inner"> | |
| <h1 class="homeheader">100,212 Banners, Logos & Presentations<br></h1> | |
| <div class="row-4 w-row"> | |
| <div class="column w-col w-col-6 w-col-stack"></div> | |
| <div class="advanced-search w-col w-col-6 w-col-stack"></div> | |
| </div> | |
| <div class="div-block"> | |
| <form action="/search" class="search w-clearfix w-form"> | |
| <div class="search-bar-1"><img src="images/search.svg"></div> | |
| <div class="search-bar-2"><input type="search" class="search-input w-input" maxlength="256" name="query" placeholder="Search Kits (example: business card)" id="search" required=""></div> | |
| <div class="search-bar-3"><input type="submit" value="SEARCH" class="search-button w-button"></div> | |
| </form> | |
| <div class="html-embed w-embed"> | |
| <style> | |
| .pop-item-outer { | |
| color:#fff; | |
| } | |
| .pop-item-header { | |
| padding-right: 18px; | |
| font-weight:600; | |
| } | |
| .pop-item a { | |
| color: #ffffff; | |
| text-decoration: none; | |
| } | |
| .pop-item a:hover { | |
| text-decoration: underline; | |
| } | |
| </style> | |
| <div class="pop-item-outer"> | |
| <span class="pop-item-header">Popular:</span> | |
| <span class="pop-item"><a href="#">Facebook Ads</a></span> | | |
| <span class="pop-item"><a href="#">Banner Ads</a></span> | | |
| <span class="pop-item"><a href="#">Postcard</a></span> | | |
| <span class="pop-item"><a href="#">Poster</a></span> | | |
| <span class="pop-item"><a href="#">Letterhead</a></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="home-section-2"> | |
| <div class="div-block-2"> | |
| <div class="row-2 w-row"> | |
| <div class="column-6 w-col w-col-6 w-col-stack w-col-small-6"> | |
| <div class="html-embed-3 w-embed"> | |
| <style> | |
| .template-filter { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| padding-left: 0; | |
| } | |
| .template-filter li { | |
| display: inline-block; | |
| position: relative; | |
| margin-right: 43px; | |
| font-size: 14px; | |
| } | |
| .template-filter li a { | |
| color: #1f2e3d; | |
| text-decoration: none; | |
| } | |
| .current-menu-item a { | |
| color: #4089f0 !important; | |
| } | |
| .template-filter { | |
| margin-top: 13px; | |
| } | |
| .template-filter li.current-menu-item:after { | |
| content: ''; | |
| border: 3.5px solid #4089f0; | |
| border-radius: 100%; | |
| position: absolute; | |
| left: calc(50% - 3px); | |
| bottom: calc(50% - 21px); | |
| } | |
| </style> | |
| <ul class="template-filter"> | |
| <li class=" "><a href="#">Featured</a></li> | |
| <li class="current-menu-item"><a href="#">New</a></li> | |
| <li class=" "><a href="#">Trending</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="column-5 w-col w-col-6 w-col-stack w-col-small-6"> | |
| <div class="w-row"> | |
| <div class="w-col w-col-6"> | |
| <div class="w-embed"> | |
| <style> | |
| .container-choose { | |
| width: 250px; | |
| margin: auto; | |
| } | |
| .select-choose { | |
| position:relative; | |
| display:block; | |
| margin:4px 0 8px; | |
| margin-bottom:20px; | |
| border-radius:3px; | |
| background: rgba(182, 194, 211, 0.27); | |
| border:1px solid #ddd | |
| } | |
| .select-choose select{ | |
| height:35px; | |
| margin-bottom:0; | |
| line-height:20px; | |
| padding:6px; | |
| font-size:14px; | |
| padding-left: 15px; | |
| border:0; | |
| background:transparent; | |
| -webkit-appearance:none; | |
| border-radius:2px; | |
| color:#666; | |
| width:100%; | |
| } | |
| .select-choose select:focus{ | |
| -webkit-box-shadow:0 0 3px 1px #2c7fcd,inset 0 0 3px #2c7fcd; | |
| -moz-box-shadow:0 0 3px 1px #2c7fcd,inset 0 0 3px #2c7fcd; | |
| box-shadow:0 0 3px 1px #2c7fcd,inset 0 0 3px #2c7fcd; | |
| } | |
| .select-choose select option{ | |
| background:#fff; | |
| color:black; | |
| } | |
| .select-choose select.invalid{ | |
| -webkit-box-shadow:0 0 3px 1px #e21824,inset 0 0 3px #e21824; | |
| -moz-box-shadow:0 0 3px 1px #e21824,inset 0 0 3px #e21824; | |
| box-shadow:0 0 3px 1px #e21824,inset 0 0 3px #e21824; | |
| } | |
| .select-choose select:focus{ | |
| outline: none; | |
| box-shadow: none; | |
| } | |
| .select-choose:before{ | |
| content:"\02C5"; | |
| font-family: FontAwesome; | |
| font-weight: normal; | |
| font-style: normal; | |
| display: inline-block; | |
| -webkit-font-smoothing: antialiased; | |
| font-size:14px; | |
| color:#666; | |
| position:absolute; | |
| right:11px; | |
| top:8px; | |
| text-shadow:0 1px 0 #fff; | |
| pointer-events:none; | |
| } | |
| .select-choose:after,x:-moz-any-link{ | |
| display:none | |
| } | |
| .select-choose select,x:-moz-any-link{ | |
| padding:8px 7px 7px 6px | |
| } | |
| .select-choose select::-ms-expand { | |
| display: none; | |
| }</style> | |
| <div class="container-choose"> | |
| <span class="select-choose"> | |
| <select name="search-slct" id="search-slct" style="width:100%"> | |
| <option value="0">All Industries</option> | |
| <option value="1">Business and Marketing</option> | |
| <option value="2">Art</option> | |
| <option value="3">eCommerce</option> | |
| </select> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-col w-col-6"> | |
| <div class="w-embed"> | |
| <div class="container-choose"> | |
| <span class="select-choose"> | |
| <select name="search-slct" id="search-slct" style="width:100%"> | |
| <option value="0">All Templates</option> | |
| <option value="1">Logos</option> | |
| <option value="2">Presentations</option> | |
| <option value="3">Facebook Ads</option> | |
| <option value="3">Flyers</option> | |
| <option value="3">Posters</option> | |
| <option value="3">Business Cards</option> | |
| </select> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-row w-row"> | |
| <div class="column-14 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb item-1 w-clearfix"> | |
| <div class="thumb-large thumb-large-1"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-1-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-1-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Ads</h3> | |
| <div class="item-subheader">162 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| -webkit-transition: background-color 100ms cubic-bezier(.645, .045, .355, 1); | |
| transition: background-color 100ms cubic-bezier(.645, .045, .355, 1); | |
| } | |
| .template-tag:hover { | |
| background-color: rgba(64, 137, 240, 0.2); | |
| -webkit-transition: background-color 200ms cubic-bezier(.645, .045, .355, 1); | |
| transition: background-color 200ms cubic-bezier(.645, .045, .355, 1); | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Facebook</a> | |
| <a href="#" class="template-tag">Skyscraper</a> | |
| <a href="#" class="template-tag">Banner</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="column-13 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb item-2 w-clearfix"> | |
| <div class="thumb-large thumb-large-2"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-2-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-2-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Social Banners & Headers</h3> | |
| <div class="item-subheader">98 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Web</a> | |
| <a href="#" class="template-tag">Blog</a> | |
| <a href="#" class="template-tag">Letterhead</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="column-12 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-3"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-3-2"></div> | |
| <div class="thumb-small-inner-2 thumb-small-3-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Social Media Posts</h3> | |
| <div class="item-subheader">127 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Facebook</a> | |
| <a href="#" class="template-tag">Twitter</a> | |
| <a href="#" class="template-tag">LinkedIn</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-row w-row"> | |
| <div class="column-17 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-4"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-4-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-4-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Business Cards</h3> | |
| <div class="item-subheader">162 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Finance</a> | |
| <a href="#" class="template-tag">Agency</a> | |
| <a href="#" class="template-tag">Marketing</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="column-16 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-5"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-5-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-5-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Landing Pages</h3> | |
| <div class="item-subheader">98 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Real Estate</a> | |
| <a href="#" class="template-tag">App</a> | |
| <a href="#" class="template-tag">Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="column-15 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-6"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-6-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-6-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Posters</h3> | |
| <div class="item-subheader">127 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Music</a> | |
| <a href="#" class="template-tag">Movie</a> | |
| <a href="#" class="template-tag">Event</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-row w-row"> | |
| <div class="column-20 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-7"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small--7-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-7-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Advertising</h3> | |
| <div class="item-subheader">162 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Web</a> | |
| <a href="#" class="template-tag">Skyscraper</a> | |
| <a href="#" class="template-tag">Banner</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="column-19 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-5"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-5-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-5-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Landing Pages</h3> | |
| <div class="item-subheader">98 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Web</a> | |
| <a href="#" class="template-tag">Blog</a> | |
| <a href="#" class="template-tag">Letterhead</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="column-18 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-6"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-6-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-6-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Posters</h3> | |
| <div class="item-subheader">127 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Facebook</a> | |
| <a href="#" class="template-tag">Twitter</a> | |
| <a href="#" class="template-tag">LinkedIn</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-row w-row"> | |
| <div class="column-23 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-4"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-4-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-4-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Business Cards</h3> | |
| <div class="item-subheader">162 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Facebook</a> | |
| <a href="#" class="template-tag">Skyscraper</a> | |
| <a href="#" class="template-tag">Banner</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="column-22 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-5"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-5-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-5-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Landing Pages</h3> | |
| <div class="item-subheader">98 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Web</a> | |
| <a href="#" class="template-tag">Blog</a> | |
| <a href="#" class="template-tag">Letterhead</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="column-21 w-col w-col-4 w-col-medium-4"> | |
| <a href="#" class="link-block w-inline-block"> | |
| <div class="item-thumb w-clearfix"> | |
| <div class="thumb-large thumb-large-6"></div> | |
| <div class="thumb-small-outer"> | |
| <div class="thumb-small-inner-1 thumb-small-6-1"></div> | |
| <div class="thumb-small-inner-2 thumb-small-6-2"></div> | |
| </div> | |
| </div> | |
| </a> | |
| <div class="design-item"> | |
| <div class="item-text"> | |
| <h3 class="item-header">Posters</h3> | |
| <div class="item-subheader">127 templates</div> | |
| </div> | |
| <div class="w-embed"> | |
| <style> | |
| .template-tag { | |
| padding: 5px 14px; | |
| border-radius: 2px; | |
| background-color: rgba(182, 194, 211, 0.27); | |
| margin: 0 5px 0 0; | |
| } | |
| a.template-tag { | |
| letter-spacing: 0.3px; | |
| color: rgba(31, 46, 61, 0.7); | |
| font-size: 12px; | |
| line-height:40px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <div class="template-tag-outer"> | |
| <a href="#" class="template-tag">Facebook</a> | |
| <a href="#" class="template-tag">Twitter</a> | |
| <a href="#" class="template-tag">LinkedIn</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="div-block-3"> | |
| <div class="div-block-5"><img src="images/logo-white.svg" width="220"></div> | |
| <div class="footer-column-outer w-row"> | |
| <div class="column-7 w-col w-col-3 w-col-tiny-tiny-stack"> | |
| <h6 class="footer-header">Company</h6> | |
| <ul class="unordered-list w-list-unstyled"> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">About Us</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Feature Tour</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Pricing</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Templates</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Blog</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Jobs</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Events</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Support</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Become an Affiliate</a></li> | |
| </ul> | |
| </div> | |
| <div class="column-8 w-col w-col-3 w-col-tiny-tiny-stack"> | |
| <h6 class="footer-header">Product</h6> | |
| <ul class="unordered-list w-list-unstyled"> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Graphic Design</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Photo Editor</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Collage Maker</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Logo Designer</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Website Templates</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Stock Images</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Wireframes & Prototypes</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Google Fonts</a></li> | |
| </ul> | |
| </div> | |
| <div class="column-9 w-col w-col-3 w-col-tiny-tiny-stack"> | |
| <h6 class="footer-header">Education</h6> | |
| <ul class="unordered-list w-list-unstyled"> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Design Courses</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Marketing Courses</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Sales Courses</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Support Courses</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Design eBooks</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Forum</a></li> | |
| </ul> | |
| </div> | |
| <div class="column-10 w-col w-col-3 w-col-tiny-tiny-stack"> | |
| <h6 class="footer-header">Support</h6> | |
| <ul class="unordered-list w-list-unstyled"> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Support Desk</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Submit a Ticket</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Request a Feature</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">Book a Demo</a></li> | |
| <li class="list-item footer-item-outer"><a href="#" class="footer-item">System Status</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> | |
| <script src="js/webflow.js" type="text/javascript"></script> | |
| <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment