Skip to content

Commit

Permalink
new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@nabilfreeman
nabilfreeman committed Dec 16, 2015
1 parent 826d821 commit aa5a395
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 62 deletions.
41 changes: 20 additions & 21 deletions assets/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,58 +30,57 @@
<h1 class="logo">
better
</h1>

<ul class="links">
<a data-scroll href="#about"><li>about</li></a>
<a data-scroll href="#contact"><li>contact</li></a>
</ul>
</nav>

<p class="grid_12">
Small challenges to help you overcome social anxiety.
</p>

<p class="grid_12">
Overcome your social anxiety with our progressive challenges.<br>Sign up with your mobile number to test our first email-based version.
<a href="http://telegram.me/BetterAppBot"><button>Use our Telegram app</button></a>
</p>

<div class="grid_5">
<div class="grid_12">
<form>
<p>Keep up with Team Better's progress and get notified about our apps by signing up for our mailing list!</p>

<input required type="email" placeholder="[email protected]"></input>

<button type="submit"></button>
</form>
</div>

<div class="grid_7">
<div class="grid_12">
<img src="img/[email protected]">
</div>
</div>
</section>

<section id="about" class="description">
<div class="container_12">
<h2 class="grid_6 prefix_3 suffix_3">
<h2 class="grid_12">
how does it work?
</h2>
<p class="grid_6 prefix_3 suffix_3">
<p class="grid_12">
Better takes its lead from exposure therapy, a technique which exposes users to their fears in order to overcome social anxiety disorders and make the world a happier place!
</p>
<p class="grid_8 prefix_2 suffix_2">
<img src="img/clouds-friends@2x.png">
</p>
<div class="grid_12">
<img src="img/iphone-bubbles.png">
</div>
</div>
</section>

<section id="contact" class="contact">
<div class="container_12">
<div class="grid_6">
<img src="img/sun@2x.png">
<div class="grid_12">
<img src="img/clouds-friends@2x.png">
</div>
<div class="grid_6">
<div class="grid_12">
<h2>
get in touch
who are we?
</h2>
<p>
We are a team spread out over London and Berlin, a product loving bunch who want to help people overcome their anxieties.
</p>
<p>
We need all the help we can get, so please get in touch if you're a therapist or psychiatrist with experience within exposure therapy or cognitive-behavioural psychotherapy.
We are a team spread out over London and Berlin, a product loving bunch who want to help people overcome their anxieties. We need all the help we can get, so please get in touch if you're a coach, therapist or psychiatrist with experience within exposure therapy or cognitive-behavioural psychotherapy.
</p>
</div>
</div>
Expand Down
Binary file modified assets/img/clouds-friends.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/img/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/img/clouds.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/img/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/iphone-bubbles.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
118 changes: 77 additions & 41 deletions less/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@
}

@orange: #f3a536;
@green: #40A387;
@blue: #6c9ecc;
@white: #fdfdfd;
@grey: #cdcdcd;
@black: #383838;

@font: ~"'Avenir Next', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Expand All @@ -21,7 +23,7 @@ body{
padding:0px;

font-family:@font;
color:#FFF;
color:@green;

*{
outline:none;
Expand All @@ -32,39 +34,23 @@ body{
padding:40px 0px;

&.flagship{
background:@orange;
background:@white;

text-align:center;

nav{
height:80px;
line-height:80px;
margin-bottom:20px;

a{
text-decoration:none;
color:#FFF;
}
margin-bottom:0px;
text-align:center;

.logo{
font-size:60px;
display:inline-block;
float:left;
margin:0px;
font-weight:normal;
}

.links{
list-style-type:none;
padding:0px;
margin:0px;
float:right;

li{
display:inline-block;
font-size:24px;
margin-left:20px;
}
}

&:before,
&:after {
content: " "; /* 1 */
Expand All @@ -77,18 +63,42 @@ body{
}

p{
font-size:24px;
margin-bottom:120px;
line-height:34px;
font-size:21px;
margin-bottom:20px;
line-height:32px;

color:@black;

& span{
color:@green;
}

> a button{
background:@green;
border-radius:4px;
color:#FFF;
font-size:21px;
padding:20px;
border:none;
font-family:@font;
font-weight:500;
cursor:pointer;
}
}

form{
padding-top:20px;
margin-bottom:40px;

*{
vertical-align:middle;
}

p{
margin:20px auto;
font-size:16px;
}

&.thanks{
input, button{
display:none;
Expand All @@ -107,83 +117,100 @@ body{

input{
background:transparent;
color:#FFF;
border:3px solid #FFF;
color:@green;
border:2px solid @green;
border-radius:50px;

line-height:40px;
line-height:30px;
font-family:@font;
font-size:24px;
font-size:18px;

padding:5px 15px;
padding:4px 15px;

&:focus{
background:fade(#FFF, 20%);
background:fade(@green, 10%);
}

&::-webkit-input-placeholder {
color: fade(#FFF, 70%);
color:@grey;
}
&::-moz-placeholder { /* Firefox 19+ */
color: fade(#FFF, 70%);
color:@grey;
}
&:-ms-input-placeholder {
color: fade(#FFF, 70%);
color:@grey;
}
&:-moz-placeholder { /* Firefox 18- */
color: fade(#FFF, 70%);
color:@grey;
}
}

button{
background-color:transparent;
background-color:@green;
background-image:url(../img/[email protected]);
background-size:24px 24px;
background-position:center center;
background-repeat:no-repeat;

color:#FFF;
border:3px solid #FFF;
border:3px solid @green;
border-radius:50px;

width:56px;
height:56px;
width:44px;
height:44px;

font-family:@font;
font-size:24px;
color:#FFF;

&:active{
background-color:fade(#FFF, 20%);
background-color:darken(@green, 10%);
border:3px solid darken(@green, 10%);
}
}
}

img{
width:100%;
max-width:380px;
vertical-align:bottom;
margin-bottom:40px;
margin-top:40px;
}
}

&.description{
text-align:center;
background:@blue;
background:@green;
color:@white;

text-align:center;

padding-bottom:0px;

*{
text-align:center;
}

h2{
font-weight:normal;
font-size:30px;
text-align:left;
}

p{
font-size:20px;
line-height:30px;
text-align:left;

}

img{
margin-top:20px;
width:100%;
max-width:380px;
vertical-align:bottom;
margin-right:-16%;
}
}

Expand All @@ -193,15 +220,23 @@ body{

padding:80px 0px;

text-align:center;

h2{
font-weight:normal;
font-size:30px;
margin-top:0px;

text-align:left;

color:@green;
}

p{
font-size:20px;
line-height:30px;

text-align:left;
}

.grid_6:first-child{
Expand All @@ -213,6 +248,7 @@ body{
margin:0px 0px;
vertical-align:middle;
margin-top:20px;
max-width:380px;
}
}
}
Expand Down

0 comments on commit aa5a395

Please sign in to comment.