mirror of https://github.com/artf/grapesjs.git
nocodeframeworkdrag-and-dropsite-buildersite-generatortemplate-builderui-builderweb-builderweb-builder-frameworkwebsite-builderno-codepage-builder
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
849 lines
26 KiB
849 lines
26 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>GrapesJS</title>
|
|
<link rel="stylesheet" href="styles/css/main.css">
|
|
<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
|
|
<link rel="stylesheet" href="node_modules/codemirror/theme/hopscotch.css">
|
|
</head>
|
|
<style>
|
|
body, html{ height: 100%; margin: 0;}
|
|
</style>
|
|
<body>
|
|
|
|
<div id="gjs" style="height:0px; overflow:hidden">
|
|
<header class="header-banner">
|
|
<section class="section-testimonials">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h1 class="h1-with-decor text-center">Testimonials</h1>
|
|
<div class="slider carousel" data-gjs-type="slider">
|
|
<div class="slider-mask" data-gjs-custom-name="Slider Mask" data-gjs-droppable="false" data-gjs-draggable="false">
|
|
<div class="slider-slideset" data-gjs-type="slider-set" data-gjs-custom-name="Slider Set">
|
|
<div class="slider-slide" data-gjs-type="slide">
|
|
<cite class="cite">
|
|
<img src="https://cdn.filestackcontent.com/o54S2SKtSF2n3QHyzLjF" alt="Image description" width="130" height="130" class="cite-img"><strong class="cite-name">Henry Palmer</strong>App Professional Editor
|
|
</cite>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
|
</div>
|
|
<div class="slider-slide" data-gjs-type="slide">
|
|
<cite class="cite"><img src="https://cdn.filestackcontent.com/o54S2SKtSF2n3QHyzLjF" alt="Image description" width="130" height="130" class="cite-img"><strong class="cite-name">Henry Palmer</strong>App Professional Editor</cite>
|
|
<p>#2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
|
</div>
|
|
<div class="slider-slide" data-gjs-type="slide">
|
|
<cite class="cite"><img src="https://cdn.filestackcontent.com/o54S2SKtSF2n3QHyzLjF" alt="Image description" width="130" height="130" class="cite-img"><strong class="cite-name">Henry Palmer</strong>App Professional Editor</cite>
|
|
<p>#3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="btn-slider-prev" data-gjs-type="slider-nav"></a>
|
|
<a href="#" class="btn-slider-next" data-gjs-type="slider-nav"></a>
|
|
<div class="slider-pagination text-center"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="container-width">
|
|
<!--
|
|
<table>
|
|
<thead>
|
|
<tr> <th>Header1</th> <th>Header2</th> <th>Header3</th> </tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr> <td>Row11</td> <td>Row12</td> <td>Row13</td> </tr>
|
|
<tr> <td>Row21</td> <td>Row22</td> <td>Row23</td> </tr>
|
|
<tr> <td>Row31</td> <td>Row32</td> <td>Row33</td> </tr>
|
|
</tbody>
|
|
</table>
|
|
<br/>
|
|
<br/>
|
|
<table>
|
|
<tr> <td>Row11</td> <td>Row12</td> <td>Row13</td> </tr>
|
|
<tr> <td>Row21</td> <td>Row22</td> <td>Row23</td> </tr>
|
|
<tr> <td>Row31</td> <td>Row32</td> <td><div>Div Content Row33</div></td> </tr>
|
|
</table>
|
|
<iframe class="iframe" src="http://player.vimeo.com/video/2?&controls=0&loop=1&color=ff0000"></iframe>
|
|
<iframe class="iframe" src="https://maps.google.com/maps?&q=London, UK&z=11&t=q&output=embed"></iframe>
|
|
-->
|
|
<div class="logo-container">
|
|
<div class="logo">GrapesJS</div>
|
|
</div>
|
|
<nav class="navbar">
|
|
<div class="menu-item">BUILDER</div>
|
|
<div class="menu-item">TEMPLATE</div>
|
|
<div class="menu-item">WEB</div>
|
|
</nav>
|
|
<div class="clearfix"></div>
|
|
<div class="lead-title">Build your templates without coding</div>
|
|
<div class="sub-lead-title">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel</div>
|
|
<div class="lead-btn">Hover me</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="flex-sect">
|
|
<div class="container-width">
|
|
<div class="flex-title">Flex is the new black</div>
|
|
<div class="flex-desc">With flexbox system you're able to build complex layouts easily and with free responsivity</div>
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-header"></div>
|
|
<div class="card-body">
|
|
<div class="card-title">Title one</div>
|
|
<div class="card-sub-title">Subtitle one</div>
|
|
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header ch2"></div>
|
|
<div class="card-body">
|
|
<div class="card-title">Title two</div>
|
|
<div class="card-sub-title">Subtitle two</div>
|
|
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header ch3"></div>
|
|
<div class="card-body">
|
|
<div class="card-title">Title three</div>
|
|
<div class="card-sub-title">Subtitle three</div>
|
|
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header ch4"></div>
|
|
<div class="card-body">
|
|
<div class="card-title">Title four</div>
|
|
<div class="card-sub-title">Subtitle four</div>
|
|
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header ch5"></div>
|
|
<div class="card-body">
|
|
<div class="card-title">Title five</div>
|
|
<div class="card-sub-title">Subtitle five</div>
|
|
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header ch6"></div>
|
|
<div class="card-body">
|
|
<div class="card-title">Title six</div>
|
|
<div class="card-sub-title">Subtitle six</div>
|
|
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="am-sect">
|
|
<div class="container-width">
|
|
<div class="am-container">
|
|
<img class="img-phone" onmousedown="return false" src="./img/phone-app.png"/>
|
|
<div class="am-content">
|
|
<div class="am-pre">ASSET MANAGER</div>
|
|
<div class="am-title">Manage your images with Asset Manager</div>
|
|
<div class="am-desc">You can create image blocks with the command from the left panel and edit them with double click</div>
|
|
<div class="am-post">Image uploading is not allowed in this demo</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="blk-sect">
|
|
<div class="container-width">
|
|
<div class="blk-title">Blocks</div>
|
|
<div class="blk-desc">Each element in HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style</div>
|
|
|
|
<div class="price-cards">
|
|
<div class="price-card-cont">
|
|
<div class="price-card">
|
|
<div class="pc-title">Starter</div>
|
|
<div class="pc-desc">Some random list</div>
|
|
<div class="pc-feature odd-feat">+ Starter feature 1</div>
|
|
<div class="pc-feature">+ Starter feature 2</div>
|
|
<div class="pc-feature odd-feat">+ Starter feature 3</div>
|
|
<div class="pc-feature">+ Starter feature 4</div>
|
|
<div class="pc-amount odd-feat">$ 9,90/mo</div>
|
|
</div>
|
|
</div>
|
|
<div class="price-card-cont">
|
|
<div class="price-card pc-regular">
|
|
<div class="pc-title">Regular</div>
|
|
<div class="pc-desc">Some random list</div>
|
|
<div class="pc-feature odd-feat">+ Regular feature 1</div>
|
|
<div class="pc-feature">+ Regular feature 2</div>
|
|
<div class="pc-feature odd-feat">+ Regular feature 3</div>
|
|
<div class="pc-feature">+ Regular feature 4</div>
|
|
<div class="pc-amount odd-feat">$ 19,90/mo</div>
|
|
</div>
|
|
</div>
|
|
<div class="price-card-cont">
|
|
<div class="price-card pc-enterprise">
|
|
<div class="pc-title">Enterprise</div>
|
|
<div class="pc-desc">Some random list</div>
|
|
<div class="pc-feature odd-feat">+ Enterprise feature 1</div>
|
|
<div class="pc-feature">+ Enterprise feature 2</div>
|
|
<div class="pc-feature odd-feat">+ Enterprise feature 3</div>
|
|
<div class="pc-feature">+ Enterprise feature 4</div>
|
|
<div class="pc-amount odd-feat">$ 29,90/mo</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bdg-sect">
|
|
<div class="container-width">
|
|
<h1 class="bdg-title">The team</h1>
|
|
<div class="badges">
|
|
<div class="badge">
|
|
<div class="badge-header"></div>
|
|
<img class="badge-avatar" src="img/team1.jpg">
|
|
<div class="badge-body">
|
|
<div class="badge-name">Adam Smith</div>
|
|
<div class="badge-role">CEO</div>
|
|
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
|
|
</div>
|
|
<div class="badge-foot">
|
|
<span class="badge-link">f</span>
|
|
<span class="badge-link">t</span>
|
|
<span class="badge-link">ln</span>
|
|
</div>
|
|
</div>
|
|
<div class="badge">
|
|
<div class="badge-header"></div>
|
|
<img class="badge-avatar" src="img/team2.jpg">
|
|
<div class="badge-body">
|
|
<div class="badge-name">John Black</div>
|
|
<div class="badge-role">Software Engineer</div>
|
|
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
|
|
</div>
|
|
<div class="badge-foot">
|
|
<span class="badge-link">f</span>
|
|
<span class="badge-link">t</span>
|
|
<span class="badge-link">ln</span>
|
|
</div>
|
|
</div>
|
|
<div class="badge">
|
|
<div class="badge-header"></div>
|
|
<img class="badge-avatar" src="img/team3.jpg">
|
|
<div class="badge-body">
|
|
<div class="badge-name">Jessica White</div>
|
|
<div class="badge-role">Web Designer</div>
|
|
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
|
|
</div>
|
|
<div class="badge-foot">
|
|
<span class="badge-link">f</span>
|
|
<span class="badge-link">t</span>
|
|
<span class="badge-link">ln</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer-under">
|
|
<div class="container-width">
|
|
<div class="footer-container">
|
|
<div class="foot-lists">
|
|
<div class="foot-list">
|
|
<div class="foot-list-title">About us</div>
|
|
<div class="foot-list-item">Contact</div>
|
|
<div class="foot-list-item">Events</div>
|
|
<div class="foot-list-item">Company</div>
|
|
<div class="foot-list-item">Jobs</div>
|
|
<div class="foot-list-item">Blog</div>
|
|
</div>
|
|
<div class="foot-list">
|
|
<div class="foot-list-title">Services</div>
|
|
<div class="foot-list-item">Education</div>
|
|
<div class="foot-list-item">Partner</div>
|
|
<div class="foot-list-item">Community</div>
|
|
<div class="foot-list-item">Forum</div>
|
|
<div class="foot-list-item">Download</div>
|
|
<div class="foot-list-item">Upgrade</div>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="form-sub">
|
|
<div class="foot-form-cont">
|
|
<div class="foot-form-title">Subscribe</div>
|
|
<div class="foot-form-desc">Subscribe to our newsletter to receive exclusive offers and the latest news</div>
|
|
<input name="name" class="sub-input" placeholder="Name" />
|
|
<input name="email" class="sub-input" placeholder="Email"/>
|
|
<button class="sub-btn" type="button">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="copyright">
|
|
<div class="container-width">
|
|
<div class="made-with">
|
|
made with GrapesJS
|
|
</div>
|
|
<div class="foot-social-btns">facebook twitter linkedin mail</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<style>
|
|
.clearfix{ clear:both}
|
|
.header-banner{
|
|
padding-top: 35px;
|
|
padding-bottom: 100px;
|
|
color: #ffffff;
|
|
font-family: Helvetica, serif;
|
|
font-weight: 100;
|
|
background-image:url("http://grapesjs.com/img/bg-gr-v.png"), url("http://grapesjs.com/img/work-desk.jpg");
|
|
background-attachment:scroll, scroll;
|
|
background-position:left top, center center;
|
|
background-repeat:repeat-y, no-repeat;
|
|
background-size: contain, cover;
|
|
}
|
|
.container-width{
|
|
width: 90%;
|
|
max-width: 1150px;
|
|
margin: 0 auto;
|
|
}
|
|
.logo-container{
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
.logo{
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
width: 130px;
|
|
padding: 10px;
|
|
min-height: 30px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
color: #4d114f;
|
|
font-size: 23px;
|
|
}
|
|
.navbar{
|
|
float: right;
|
|
width: 50%;
|
|
}
|
|
.menu-item{
|
|
float:right;
|
|
font-size: 15px;
|
|
color:#eee;
|
|
width: 130px;
|
|
padding: 10px;
|
|
min-height: 50px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
font-weight: 400;
|
|
}
|
|
.lead-title{
|
|
padding: 25px;
|
|
margin: 150px 50px 30px 30px;
|
|
font-size: 40px;
|
|
}
|
|
.sub-lead-title{
|
|
max-width: 650px;
|
|
line-height:30px;
|
|
margin-bottom:30px;
|
|
color: #c6c6c6;
|
|
}
|
|
.lead-btn{
|
|
margin-top: 15px;
|
|
padding:10px;
|
|
width:190px;
|
|
min-height:30px;
|
|
font-size:20px;
|
|
text-align:center;
|
|
letter-spacing:3px;
|
|
line-height:30px;
|
|
background-color:#d983a6;
|
|
border-radius:5px;
|
|
transition: all 0.5s ease;
|
|
cursor: pointer;
|
|
}
|
|
.lead-btn:hover{
|
|
background-color:#ffffff;
|
|
color:#4c114e;
|
|
}
|
|
.lead-btn:active{
|
|
background-color:#4d114f;
|
|
color:#fff;
|
|
}
|
|
.flex-sect{
|
|
background-color: #fafafa;
|
|
padding: 100px 0;
|
|
font-family: Helvetica, serif;
|
|
}
|
|
.flex-title{
|
|
margin-bottom: 15px;
|
|
font-size: 2em;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
color:#555;
|
|
padding: 5px;
|
|
}
|
|
.flex-desc{
|
|
margin-bottom: 55px;
|
|
font-size: 1em;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
text-align: center;
|
|
padding: 5px;
|
|
}
|
|
.cards{
|
|
padding: 20px 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-flow: wrap;
|
|
}
|
|
.card{
|
|
background-color: white;
|
|
height: 300px;
|
|
width:300px;
|
|
margin-bottom:30px;
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
|
border-radius: 2px;
|
|
transition: all 0.5s ease;
|
|
font-weight: 100;
|
|
overflow: hidden;
|
|
}
|
|
.card:hover{
|
|
margin-top: -5px;
|
|
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
.card-header{
|
|
height: 155px;
|
|
background-image:url("http://placehold.it/350x250/78c5d6/fff/image1.jpg");
|
|
background-size:cover;
|
|
background-position:center center;
|
|
}
|
|
.card-header.ch2{
|
|
background-image:url("http://placehold.it/350x250/459ba8/fff/image2.jpg");
|
|
}
|
|
.card-header.ch3{
|
|
background-image:url("http://placehold.it/350x250/79c267/fff/image3.jpg");
|
|
}
|
|
.card-header.ch4{
|
|
background-image:url("http://placehold.it/350x250/c5d647/fff/image4.jpg");
|
|
}
|
|
.card-header.ch5{
|
|
background-image:url("http://placehold.it/350x250/f28c33/fff/image5.jpg");
|
|
}
|
|
.card-header.ch6{
|
|
background-image:url("http://placehold.it/350x250/e868a2/fff/image6.jpg");
|
|
}
|
|
.card-body{
|
|
padding: 15px 15px 5px 15px;
|
|
color: #555;
|
|
}
|
|
.card-title{
|
|
font-size: 1.4em;
|
|
margin-bottom: 5px;
|
|
}
|
|
.card-sub-title{
|
|
color: #b3b3b3;
|
|
font-size: 1em;
|
|
margin-bottom: 15px;
|
|
}
|
|
.card-desc{
|
|
font-size: 0.85rem;
|
|
line-height: 17px;
|
|
}
|
|
.am-sect{
|
|
padding-top: 100px;
|
|
padding-bottom: 100px;
|
|
font-family: Helvetica, serif;
|
|
}
|
|
.img-phone{
|
|
float: left;
|
|
}
|
|
.am-container{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
/*
|
|
.am-container{
|
|
perspective: 1000px;
|
|
}*/
|
|
.am-content{
|
|
float:left;
|
|
padding:7px;
|
|
width: 490px;
|
|
color: #444;
|
|
font-weight: 100;
|
|
margin-top: 50px;
|
|
/*transform: rotateX(0deg) rotateY(-20deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);*/
|
|
}
|
|
.am-pre{
|
|
padding:7px;
|
|
color:#b1b1b1;
|
|
font-size:15px;
|
|
}
|
|
.am-title{
|
|
padding:7px;
|
|
font-size:25px;
|
|
font-weight: 400;
|
|
}
|
|
.am-desc{
|
|
padding:7px;
|
|
font-size:17px;
|
|
line-height:25px;
|
|
}
|
|
.am-post{
|
|
padding:7px;
|
|
line-height:25px;
|
|
font-size:13px;
|
|
}
|
|
.blk-sect{
|
|
padding-top: 100px;
|
|
padding-bottom: 100px;
|
|
background-color: #222222;
|
|
font-family: Helvetica, serif;
|
|
}
|
|
.blk-title{
|
|
color:#fff;
|
|
font-size:25px;
|
|
text-align:center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.blk-desc{
|
|
color:#b1b1b1;
|
|
font-size:15px;
|
|
text-align:center;
|
|
max-width:700px;
|
|
margin:0 auto;
|
|
font-weight:100;
|
|
}
|
|
.price-cards{
|
|
margin-top: 70px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
.price-card-cont{
|
|
width: 300px;
|
|
padding: 7px;
|
|
float:left;
|
|
}
|
|
.price-card{
|
|
margin:0 auto;
|
|
min-height:350px;
|
|
background-color:#d983a6;
|
|
border-radius:5px;
|
|
font-weight: 100;
|
|
color: #fff;
|
|
width: 90%;
|
|
}
|
|
.pc-title{
|
|
font-weight:100;
|
|
letter-spacing:3px;
|
|
text-align:center;
|
|
font-size:25px;
|
|
background-color:rgba(0, 0, 0, 0.1);
|
|
padding:20px;
|
|
}
|
|
.pc-desc{
|
|
padding: 75px 0;
|
|
text-align: center;
|
|
}
|
|
.pc-feature{
|
|
color:rgba(255,255,255,0.5);
|
|
background-color:rgba(0, 0, 0, 0.1);
|
|
letter-spacing:2px;
|
|
font-size:15px;
|
|
padding:10px 20px;
|
|
}
|
|
.pc-feature:nth-of-type(2n){
|
|
background-color:transparent;
|
|
}
|
|
.pc-amount{
|
|
background-color:rgba(0, 0, 0, 0.1);
|
|
font-size: 35px;
|
|
text-align: center;
|
|
padding: 35px 0;
|
|
}
|
|
.pc-regular{
|
|
background-color: #da78a0;
|
|
}
|
|
.pc-enterprise{
|
|
background-color: #d66a96;
|
|
}
|
|
.footer-under{
|
|
background-color: #312833;
|
|
padding-bottom: 100px;
|
|
padding-top: 100px;
|
|
min-height: 500px;
|
|
color:#eee;
|
|
position: relative;
|
|
font-weight: 100;
|
|
font-family: Helvetica,serif;
|
|
}
|
|
.led{
|
|
border-radius: 100%;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
float: left;
|
|
margin: 2px;
|
|
transition: all 5s ease;
|
|
}
|
|
.led:hover{
|
|
background-color: #c29fca;/* #eac229 */
|
|
box-shadow: 0 0 5px #9d7aa5, 0 0 10px #e6c3ee;/* 0 0 10px 0 #efc111 */
|
|
transition: all 0s ease;
|
|
}
|
|
.copyright {
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
color: rgba(238, 238, 238, 0.5);
|
|
bottom: 0;
|
|
padding: 1em 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
font-size: 0.75em;
|
|
}
|
|
.made-with{
|
|
float: left;
|
|
width: 50%;
|
|
padding: 5px 0;
|
|
}
|
|
.foot-social-btns{
|
|
display: none;
|
|
float: right;
|
|
width: 50%;
|
|
text-align: right;
|
|
padding: 5px 0;
|
|
}
|
|
.footer-container{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
justify-content: space-around;
|
|
}
|
|
.foot-list {
|
|
float: left;
|
|
width: 200px;
|
|
}
|
|
.foot-list-title {
|
|
font-weight: 400;
|
|
margin-bottom: 10px;
|
|
padding: 0.5em 0;
|
|
}
|
|
.foot-list-item {
|
|
color: rgba(238, 238, 238, 0.8);
|
|
font-size: 0.8em;
|
|
padding: 0.5em 0;
|
|
}
|
|
.foot-list-item:hover {
|
|
color: rgba(238, 238, 238, 1);
|
|
}
|
|
.foot-form-cont{
|
|
width: 300px;
|
|
float: right;
|
|
}
|
|
.foot-form-title{
|
|
color: rgba(255,255,255,0.75);
|
|
font-weight: 400;
|
|
margin-bottom: 10px;
|
|
padding: 0.5em 0;
|
|
text-align: right;
|
|
font-size: 2em;
|
|
}
|
|
.foot-form-desc{
|
|
font-size: 0.8em;
|
|
color: rgba(255,255,255,0.55);
|
|
line-height: 20px;
|
|
text-align: right;
|
|
margin-bottom: 15px;
|
|
}
|
|
.sub-input{
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
padding: 7px 10px;
|
|
border-radius: 2px;
|
|
color:#fff;
|
|
background-color: #554c57;
|
|
border: none;
|
|
}
|
|
.sub-btn{
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
background-color: #785580;
|
|
border: none;
|
|
color:#fff;
|
|
border-radius: 2px;
|
|
padding: 7px 10px;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
}
|
|
.sub-btn:hover{
|
|
background-color: #91699a;
|
|
}
|
|
.sub-btn:active{
|
|
background-color: #573f5c;
|
|
}
|
|
.blk-row::after{
|
|
content: "";
|
|
clear: both;
|
|
display: block;
|
|
}
|
|
.blk-row{
|
|
padding: 10px;
|
|
}
|
|
.blk1{
|
|
width: 100%;
|
|
padding: 10px;
|
|
min-height: 75px;
|
|
}
|
|
.blk2{
|
|
float: left;
|
|
width: 50%;
|
|
padding: 10px;
|
|
min-height: 75px;
|
|
}
|
|
.blk3{
|
|
float: left;
|
|
width: 33.3333%;
|
|
padding: 10px;
|
|
min-height: 75px;
|
|
}
|
|
.blk37l{
|
|
float: left;
|
|
width: 30%;
|
|
padding: 10px;
|
|
min-height: 75px;
|
|
}
|
|
.blk37r{
|
|
float: left;
|
|
width: 70%;
|
|
padding: 10px;
|
|
min-height: 75px;
|
|
}
|
|
.heading{padding: 10px;}
|
|
.paragraph{padding: 10px;}
|
|
|
|
.bdg-sect{
|
|
padding-top:100px;
|
|
padding-bottom:100px;
|
|
font-family: Helvetica, serif;
|
|
background-color: #fafafa;
|
|
}
|
|
.bdg-title{
|
|
text-align: center;
|
|
font-size: 2em;
|
|
margin-bottom: 55px;
|
|
color: #555555;
|
|
}
|
|
.badges{
|
|
padding:20px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.badge{
|
|
width: 290px;
|
|
font-family: Helvetica, serif;
|
|
background-color: white;
|
|
margin-bottom:30px;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
font-weight: 100;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
.badge-header{
|
|
height: 115px;
|
|
background-image:url("http://grapesjs.com/img/bg-gr-v.png"), url("http://grapesjs.com/img/work-desk.jpg");
|
|
background-position:left top, center center;
|
|
background-attachment:scroll, fixed;
|
|
overflow: hidden;
|
|
}
|
|
.blurer{
|
|
filter: blur(5px);
|
|
}
|
|
.badge-name{
|
|
font-size: 1.4em;
|
|
margin-bottom: 5px;
|
|
}
|
|
.badge-role{
|
|
color: #777;
|
|
font-size: 1em;
|
|
margin-bottom: 25px;
|
|
}
|
|
.badge-desc{
|
|
font-size: 0.85rem;
|
|
line-height: 20px;
|
|
}
|
|
.badge-avatar{
|
|
width:100px;
|
|
height:100px;
|
|
border-radius: 100%;
|
|
border: 5px solid #fff;
|
|
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
|
|
margin-top: -75px;
|
|
position: relative;
|
|
}
|
|
.badge-body{
|
|
margin: 35px 10px;
|
|
}
|
|
.badge-foot{
|
|
color:#fff;
|
|
background-color:#a290a5;
|
|
padding-top:13px;
|
|
padding-bottom:13px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.badge-link{
|
|
height: 35px;
|
|
width: 35px;
|
|
line-height: 35px;
|
|
font-weight: 700;
|
|
background-color: #fff;
|
|
color: #a290a5;
|
|
display: block;
|
|
border-radius: 100%;
|
|
margin: 0 10px;
|
|
}
|
|
.quote{
|
|
color:#777;
|
|
font-weight: 300;
|
|
padding: 10px;
|
|
box-shadow: -5px 0 0 0 #ccc;
|
|
font-style: italic;
|
|
margin: 20px 30px;
|
|
}
|
|
|
|
.iframe {
|
|
height: 300px;
|
|
width: 500px;
|
|
}
|
|
|
|
@media (max-width: 768px){
|
|
.foot-form-cont{
|
|
width:400px;
|
|
}
|
|
.foot-form-title{
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px){
|
|
.foot-lists{
|
|
display:none;
|
|
}
|
|
}
|
|
</style>
|
|
</div>
|
|
|
|
<script data-main="src/demo" src="node_modules/requirejs/require.js"></script>
|
|
</body>
|
|
</html>
|
|
|