diff options
Diffstat (limited to '')
| -rw-r--r-- | app.js | 1 | ||||
| -rw-r--r-- | public/css/need.less | 1 | ||||
| -rw-r--r-- | public/css/use.less | 189 | ||||
| -rw-r--r-- | public/img/appstore@2x.png | bin | 0 -> 5568 bytes | |||
| -rw-r--r-- | public/img/dashboard.png | bin | 0 -> 127906 bytes | |||
| -rw-r--r-- | public/img/dashboard@2x.png | bin | 0 -> 339575 bytes | |||
| -rw-r--r-- | public/img/dividlogo.png | bin | 3881 -> 3891 bytes | |||
| -rw-r--r-- | public/img/dividlogo@2x.png | bin | 4200 -> 4203 bytes | |||
| -rw-r--r-- | public/img/googleplay@2x.png | bin | 0 -> 7478 bytes | |||
| -rw-r--r-- | public/img/iph@2x.png (renamed from public/img/iphone@2x.png) | bin | 5904 -> 5904 bytes | |||
| -rw-r--r-- | public/img/pdashboard.png | bin | 0 -> 25875 bytes | |||
| -rw-r--r-- | public/img/pdashboard@2x.png | bin | 0 -> 35473 bytes | |||
| -rw-r--r-- | views/header.ejs | 1 | ||||
| -rw-r--r-- | views/home.ejs | 157 | ||||
| -rw-r--r-- | views/navbar.ejs | 2 |
15 files changed, 262 insertions, 89 deletions
@@ -18,7 +18,6 @@ var port = process.env.PORT || 3000 , config = require('./config/config')[env]; - /** * Express */ diff --git a/public/css/need.less b/public/css/need.less new file mode 100644 index 0000000..6f1c3d4 --- /dev/null +++ b/public/css/need.less @@ -0,0 +1 @@ +/*Temporary/* diff --git a/public/css/use.less b/public/css/use.less index cb208b2..fe1745b 100644 --- a/public/css/use.less +++ b/public/css/use.less @@ -1,3 +1,7 @@ +/*#wrapper { + width:100%; + background-position: center 40%; +}*/ #vertical(@startColor: #555, @endColor: #333) { background-color: mix(@startColor, @endColor, 60%); @@ -10,42 +14,177 @@ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down } +.content { +/* margin-left:0px;*/ +} + +.pitch { + position:relative; + margin-left: 10px; +} + +.join { + float:left; + position:absolute; + margin-top:220px; + margin-left: 10px; +} + +.dash { +margin:10px; +} + +.pdash { +margin:10px; +} + +.sectionleft { + float:left; + margin-left: 10px; + margin-right: 0px; +} +.sectionright { + float:right; + margin-right: 10px; + margin-left: 0px; +} + +.tutorial { + padding:5px; +} + .infobox { text-align:center; - /*color:white;*/ - background-color: @grayLighter; - margin:15px; - padding:35px; - height: 220px; + /*background-color: @grayLighter;*/ + padding:46px; + margin-bottom:20px; + border: 1px solid white; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } -.registrer { -margin-left: 20px; -background-color: #FF9A00; +.register { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-image: -moz-linear-gradient(top, #fbb440, #ff9a00); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb440), to(#ff9a00)); + background-image: -webkit-linear-gradient(top, #fbb440, #ff9a00); + background-image: -o-linear-gradient(top, #fbb440, #ff9a00); + background-image: linear-gradient(to bottom, #fbb440, #ff9a00); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbb440', endColorstr='#ff9a00', GradientType=0); + border-color: #ff9a00 #ff9a00 #ad6704; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + /* + margin-left: 20px; + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-image: linear-gradient(to bottom, #FF9A00, #FFB440); + background-repeat: repeat-x; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);*/ + } + + .showcase { + height:460px; + margin-top: 40px; + margin-bottom:20px; + background-color: @grayLighter; + /*background-image: url('/img/people.png'); + background-repeat:no-repeat; + background-attachment:fixed; + background-position:center;*/ + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.logo { + float: left; } -.infobtn { +.devices { + float:right; + margin: 0px; } -.showcase { - width:1200px; - height:400px; - margin-top: 20px; - margin-bottom:20px; - padding:10px; +.divideLine { +background-color:#66A3D2; +height:5px; +width:35%; +margin-top:40px; +margin-bottom:40px; +} +/* +.last { + background-color:@grayLighter; +}*/ + +#hvem { + margin-top:25px; + /*border-top: 2px solid #9fd5df;*/ + color: #4186D3; background-color: @grayLighter; - /*background-image: url('/img/people.png'); - background-repeat:no-repeat; - background-attachment:fixed; - background-position:center;*/ - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + margin: 0 auto; + font-size: 18px; + line-height: 26px; + display: block; } -.logo { -float: left; -}
\ No newline at end of file +#hvor { + margin-top:25px; + /*border-top: 2px solid #9fd5df;*/ + color: #0D56A6; + background-color: #4186D3; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + margin: 0 auto; + font-size: 18px; + line-height: 26px; + display: block; +} + +#hvordan { + margin-top:25px; + /*border-top: 2px solid #9fd5df;*/ + color: #4186D3; + background-color: #0D56A6; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + margin: 0 auto; + font-size: 18px; + line-height: 26px; + display: block; +} + +#register { + margin-top:25px; + /*border-top: 2px solid #9fd5df;*/ + color: #FFFFFF; + background-color: #000000; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); + margin: 0 auto; + font-size: 18px; + line-height: 26px; + display: block; + } + +/*#footer { + background-color: #0D56A6; + width:1170px; + height:100px; +}*/ diff --git a/public/img/appstore@2x.png b/public/img/appstore@2x.png Binary files differnew file mode 100644 index 0000000..ca292a0 --- /dev/null +++ b/public/img/appstore@2x.png diff --git a/public/img/dashboard.png b/public/img/dashboard.png Binary files differnew file mode 100644 index 0000000..1b82ffc --- /dev/null +++ b/public/img/dashboard.png diff --git a/public/img/dashboard@2x.png b/public/img/dashboard@2x.png Binary files differnew file mode 100644 index 0000000..4f582b8 --- /dev/null +++ b/public/img/dashboard@2x.png diff --git a/public/img/dividlogo.png b/public/img/dividlogo.png Binary files differindex 5a6c429..eb3d4d6 100644 --- a/public/img/dividlogo.png +++ b/public/img/dividlogo.png diff --git a/public/img/dividlogo@2x.png b/public/img/dividlogo@2x.png Binary files differindex 7576da0..1507b93 100644 --- a/public/img/dividlogo@2x.png +++ b/public/img/dividlogo@2x.png diff --git a/public/img/googleplay@2x.png b/public/img/googleplay@2x.png Binary files differnew file mode 100644 index 0000000..c5ce0f2 --- /dev/null +++ b/public/img/googleplay@2x.png diff --git a/public/img/iphone@2x.png b/public/img/iph@2x.png Binary files differindex 30d3ba4..30d3ba4 100644 --- a/public/img/iphone@2x.png +++ b/public/img/iph@2x.png diff --git a/public/img/pdashboard.png b/public/img/pdashboard.png Binary files differnew file mode 100644 index 0000000..d6d96ef --- /dev/null +++ b/public/img/pdashboard.png diff --git a/public/img/pdashboard@2x.png b/public/img/pdashboard@2x.png Binary files differnew file mode 100644 index 0000000..7edcaea --- /dev/null +++ b/public/img/pdashboard@2x.png diff --git a/views/header.ejs b/views/header.ejs index 84a2e15..815be5c 100644 --- a/views/header.ejs +++ b/views/header.ejs @@ -11,5 +11,6 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="/css/bootstrap.css" /> <link rel="stylesheet" href="/css/bootstrap-responsive.css"> + <link rel="stylesheet" href="/css/shame.css" /> diff --git a/views/home.ejs b/views/home.ejs index deb7e4d..a764d54 100644 --- a/views/home.ejs +++ b/views/home.ejs @@ -7,29 +7,36 @@ <!-- Wrapper ================================================== --> - <div class="container" id="wrapper"> +<div class="container" id="wrapper"> <div class="row"> <!-- content ================================================== --> <div class="span12 content"> - <div class="container"> + <div class="container row"> <!-- Main hero unit for a primary marketing message or call to action --> - <div class="showcase"> - <div class="span3"> - <h1>Prøv Divid</h1> - <ul> - </li><h3>Opprett prosjekt</h3></li> - </li><h3>Inviter deltakere</h3></li> - </li><h3>Del utgifter</h3></li> - </ul> - <a href="#" class="btn btn-warning btn-large registrer row">Registrer »</a> - <h4>Appen er tilgjengelig her:</h4> - <img src="/img/appstore.png" class="marketbtn"> - <img src="/img/googleplay.png" class="marketbtn"> - </div> - <div class="animation span9"> - <div class="screen"></div> + <div class="span12 showcase row"> + <div class="span5 pitch"> + <div class="span12 row"> + <h1>Samarbeid om utgifter</h1> + <ul> + </li><h4><i class="icon-play"></i> Opprett prosjekt og inviter deltakere</h4></li> + </li><h4><i class="icon-user"></i> Inviter deltakere</h4></li> + </li><h4><i class="icon-barcode"></i> Før inn utgiftene</h4></li> + + </ul> + <hr class="divideLine"/> + </div> + <div class="span12 row"> + <a href="#" class="btn btn-large register">Registrer »</a> + <p>Det er helt gratis!</p> + <h4>Prøv også Divid appen:</h4> + <img href="#" src="/img/appstore.png" class="marketbtn"> + <img href="#" src="/img/googleplay.png" class="marketbtn"> + </div> + </div> + <div class="span7 dash"> + <img src="/img/dashboard.png"> </div> </div> </div> @@ -38,68 +45,94 @@ <div class="container"> <!-- Example row of columns --> <div class="row"> - <div class="span3 infobox"> + <div class="span3 infobox" id="first"> <img class="infoimg" src="/img/laptop.png"> <h4>Bruk mobil eller nett</h4> - <p>Uansett hva du benytte Divid tilgjengelig. Divid er tilgjengelig på alle plattformer og gjør derfor deling av utgifter enklere mellom deg og andre.</p> + <p>Uansett hva du benytter er Divid tilgjengelig. Divid er tilgjengelig på alle plattformer og gjør derfor deling av utgifter enklere mellom deg og andre.</p> </div> - <div class="span3 infobox"> + <div class="span3 infobox" id="second"> <img class="infoimg" src="/img/addpeople.png"> <h4>Inviter de du vil</h4> <p>Divid gjør deling av utgifter enklere. Alt du trenger for å delta i et prosjekt i er en epost-adresse!</p> </div> - <div class="span3 infobox"> + <div class="span3 infobox" id="third"> <img class="infoimg" src="/img/overwatch.png"> <h4>Ta kontroll</h4> <p>I et prosjekt kan du ha mange deltagere som skal dele på den samme regningen. Send påminnelser til sene betalere og få varsel når deltakere betaler.</p> </div> </div> - <hr> - </div> - <div class="span12 content"> - <div class="container"> - <h1>Passer for alle</h1> - <p>Divid er for alle. Å dele er sosialt og derfor holder Divid det sosialt.</p> - <ul> - <li>Studenter i kollektiv</li> - <li>Singel ute på farten i sosialt lag</li> - <li>Par i etableringsfasen og felles økonomi</li> - <li>Distribuert familie - hans og hennes barn. Hvem betaler for hva?</li> - <li>Skilt par med felles barn - hvem og hvor mye betaler for barnet egentlig?</li> - <li>Person som vil ha kontroll over hvor tingene hans er</li> - </ul> - </div> - </div> - <div class="span12 content"> - <div class="container"> - <h1>Situasjon</h1> - <p>Hvilke bruksområder kan jeg bruke Divid?</p> - <ul> - <li>Bruk appen fra din Iphone, Android eller windows mobile. Du kan legge til utgifter og utlegg underveis.</li> - </ul> - <img src="/img/iph.png" class="infoimg"> - <img src="/img/android.png" class="infoimg"> - <img src="/img/win.png" class="infoimg"> - </div> - </div> - <div class="span12 content"> - <div class="container"> + <div id="hvem" class="span12 content"> + <div class="container last"> + <div class="span6 sectionright"> + <h1>Hvem er denne tjenesten for?</h1> + <h5>Divid er for alle. Å dele er sosialt og derfor holder Divid det sosialt.</h5> + <ul> + <li>Studenter - i kollektiv</li> + <li>Singel - ute på farten i sosialt lag</li> + <li>Par - i etableringsfasen og felles økonomi</li> + <li>Distribuert familie - hennes barn og hans barn - Hvem betaler for hva?</li> + <li>Skilt par med felles barn - hvem og hvor mye betaler for barnet?</li> + <li>Person som vil ha kontroll </li> <!--"over hvor tingene hans er"--!> + </ul> + </div> + <div class="span6 sectionleft"> + + </div> + </div> + </div> + <div id="hvor" class="span12 content"> + <div class="container last"> + <div class="span7 sectionleft"> + <h1>Når bruke Divid?</h1> + <p>Hvilke bruksområder kan jeg bruke Divid?</p> + <ul> + <li>Bruk appen fra din Iphone, Android eller windows mobile</li> + <li>Du kan legge til utgifter og utlegg underveis</li> + <li></li> + </ul> + </div> + <div class="span5 sectionright"> + <img src="/img/iph.png" class="infoimg"> + <img src="/img/android.png" class="infoimg"> + <img src="/img/win.png" class="infoimg"> + </div> + </div> + </div> + <div id="hvordan" class="span12 content"> + <div class="container last"> + <div class="span6 sectionright"> <h1>Hvordan bruke divid</h1> <!-- Vi viser deg hvor enkelt det er å bruke Divid.--!> - <ul> - <li>Vi tar bryet og løser delingen rettferdig. Ikke la uvissheten om at du glemmer eller manglende tillit til folk hindre deg i dele eller låne.</li> - <li>Divid hjelper deg med å holde oversikt over dine utlegg og lån.</li> - <li>Hold venner og bekjente oppdatert med hva de skylder deg og vice versa.</li> - <li>Du slipper kvitteringer - ta bilde av de og kast de i søpla. Bildene lastes opp til Divids servere så har du de senere hvis det er bruk for de.</li> - <li>Eller ta bilde av personen med gjenstanden vedkommende har lånt av deg.</li> - </ul> - <p>Lei av reklame? Velg premium applikasjonen</p> - <div class="tutorial"> + <ul> + <h4><i class="icon-chevron-right icon-white"></i> Vi tar bryet og løser delingen rettferdig</h4> + </br> + <h4><i class="icon-chevron-right icon-white"></i> Divid hjelper deg med å holde oversikt over dine utgifter, utlegg og lån</h4> <!--Ikke la uvissheten om at du glemmer eller manglende tillit til folk hindre deg i dele eller låne.--!> + </br> + <h4><i class="icon-chevron-right icon-white"></i> Hold venner og bekjente oppdatert eller purr de med hva de skylder deg og vice versa</h4> + </br> + <h4><i class="icon-chevron-right icon-white"></i> Ta bilde av kvitteringene eller en utlånt gjenstand med Divid bildebank for senere gjennomsyn</h4><!--Du slipper kvitteringer - ta bilde av de og kast de i søpla. Bildene lastes opp til Divids servere så har du de senere hvis det er bruk for de.--!> + </ul> + </div> + <div class="span5 sectionleft tutorial"> <iframe src="http://player.vimeo.com/video/41974181" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> + </div> </div> </div> + <div id="register" class="span12 content"> + <div class="container last"> + <div class="span6 sectionright"> + <h1>Registrering?</h1> <!--Stian mente du ville ha denne nederst? Jeg trodde den skulle være frittflytende over alt.--!> + </div> + </div> + </div> + <hr> + </div> </div><!-- /div.row --> - </div><!-- /div#wrapper --> - + </div><!-- /div#wrapper --> + <!--<div id="footer"> + <div class="container"> + <p>!!!!!!!!!!!!!!!!!!!!</p> + </div> + </div>--> <% include footer %> </body> </html> diff --git a/views/navbar.ejs b/views/navbar.ejs index e0ea1ab..aac3c2e 100644 --- a/views/navbar.ejs +++ b/views/navbar.ejs @@ -53,7 +53,7 @@ </div> <div class="nav-collapse collapse"> <ul class="nav menu"> - <li><a href="#signup">Registrer</a></li> + <li><a href="#faq">FAQ</a></li> <li><a href="#kontakt">Kontakt</a></li> <li><a href="#dashboard">Dashboard</a></li> </ul> |
