Loading

Landing page — Frontenda landing page example

Posted On: Wednesday, June 4, 2014 at 6:50 AM
Last updated: Sunday, June 8, 2014 at 10:38 AM

Frontenda landing page example template

Bootstraptor

Joined on
Contributed 42 Snips

Get Social and Share

Tags

PREVIEW SNIPP

Meet FRONTENDA Pre-beta

Bootstrap 3 EVO Drag&Drop builder with lots of features


  • Build template
  • Change styles
  • Save & Share

EVObuilder provides 3 easy steps for create responsive templates in minutes. All Bootstrap 3.0. features included. Drag&Drop editor + HTML editor + Less + Css editor give you all power to build with bootstrap. Prebuild layouts & Templates. Colors preset themes build-in.

Easy drag-and-drop

Use all power and simplicity of drag-end-drop technolog, build the grid in seconds, any nesting levels, change the display column width for any devices

CSS, HTML, JS editors

We've built in one of the best code editors ACE - not only have standard code editor features, but also shows errors, autocompletion, zen-coding, Bootstrap code snippets, etc.

Visual LESS editor

LESS visual code editor by Pickock build in. Now you can change default styles in visual way , and even import & render LESS variables

Download, save & share

Download ready code template, save online, submit link to the template preview. Many additional features you will see in the near future

OK!
section
h2 title Jumbotron header

Meet FRONTENDA Pre-beta

Bootstrap 3 EVO Drag&Drop builder with lots of features


  • Build template
  • Change styles
  • Save & Share

EVObuilder provides 3 easy steps for create responsive templates in minutes. All Bootstrap 3.0. features included. Drag&Drop editor + HTML editor + Less + Css editor give you all power to build with bootstrap. Prebuild layouts & Templates. Colors preset themes build-in.

OK!
section
.container
.row
3
6
3
xs
sm
md
lg
xs
sm
md
h3 title Page header
lg
xs
sm
md
lg
OK!
section
.container
.row
3
3
3
3
xs
sm
Lead
h2 title Paragraph

Use all power and simplicity of drag-end-drop technolog, build the grid in seconds, any nesting levels, change the display column width for any devices

md
lg
xs
sm
md
lg
Lead
h2 title Paragraph

We've built in one of the best code editors ACE - not only have standard code editor features, but also shows errors, autocompletion, zen-coding, Bootstrap code snippets, etc.

.row
3
3
3
3
xs
sm
md
lg
Lead
h2 title Paragraph

LESS visual code editor by Pickock build in. Now you can change default styles in visual way , and even import & render LESS variables

xs
sm
md
lg
Lead
h2 title Paragraph

Download ready code template, save online, submit link to the template preview. Many additional features you will see in the near future

OK!
section
.container
.row
12
xs
sm
md
lg
HTML box
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,800); section{ font-family: 'Open Sans', sans-serif; } .top-section { background: rgba(0,0,0, .5) url(http://builder.bootstraptor.com/img/builderscreen.png) left top no-repeat fixed; background-size: 100% auto; max-width: 100%; overflow: hidden; display:block; width:100%; min-height:600px; } .top-section .jumbotron h1 .label { font-weight: 100; font-size: 14px; margin-top: -30px; } .top-section .jumbotron .btn { color: #fff; font-weight: 600; font-size: 18px; text-transform:uppercase; margin-top:10px; padding:20px 10px; } .top-section .jumbotron p.small { font-size: 16px !important; line-height:24px !important; } .top-section .jumbotron li { margin-left: 30px; font-size: 28px; font-weight: 100; line-height: 50px; } .top-section .jumbotron { background: rgba(52, 9, 73, 0.80) /*url(http://builder.bootstraptor.com/img/bg.png)*/ top left repeat; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; margin-bottom: 0px; color: #fff; width: 60%; margin-left: 40%; min-height: 700px; -webkit-box-shadow: -30px 2px 21px rgba(50, 50, 50, 0.56); -moz-box-shadow: -30px 2px 21px rgba(50, 50, 50, 0.56); box-shadow: -30px 2px 21px rgba(50, 50, 50, 0.56); border-left: 1px solid #7b54b7; padding-top: 140px; padding-left: 40px; cursor: move; opacity:0.9; } .top-section .jumbotron:hover{ opacity:1; } h1,h2,h3,h4,h5,h6{ font-weight:100 !important; } .section-custom-2{ padding:50px 0px 70px; } .mt30{ margin-top:30px; } .header-custom h2{ font-size:43px; line-height:52px; font-weight:100; color:#7A2A96; } .circle-fe{ margin-top:30px; border:2px solid #7A2A96; padding:20px; width:100px; height:100px; display:inline-block; border-radius:80%; float: right; } .circle-fe .fa.text-info{ color:#7A2A96; } .section-dark{ padding:100px 0px; color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.1); background-color: #6f5499; background-image: -webkit-linear-gradient(top,#563d7c 0,#6f5499 100%); background-image: linear-gradient(to bottom,#563d7c 0,#6f5499 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0); } .form-custom { margin-top:40px; } .form-custom .btn-danger{ background: #f36; }null

Snip Comments

says Saturday, December 17, 2016 at 4:47 AM