Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

About us #303

Merged
merged 8 commits into from
Sep 14, 2017
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 183 additions & 0 deletions redesign/about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="dwyl is a worldwide community of people using technology to solve real problems.">
<meta name="author" content="@dwyl">
<meta name="keywords" content="do, what, you, love, dwyl, mvp, time, tracking, help, developers, code, frontend, backend, tooling, tools">
<meta name="robots" content="index, follow, noarchive">
<meta name="base" content="https://www.dwyl.com">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.7.0/css/tachyons.min.css"/>
<link rel="stylesheet" href="css/dwyl.css">
<link rel="shortcut icon" href="/img/favicon.ico">
<title>dwyl</title>
</head>
<body>
<nav class="w-100 dwyl-bg-dark-gray tc white relative fixed">
<input type="checkbox" id="burger" class="absolute top-2 right-1 dn">
<label for="burger" class="dn-ns pointer absolute top-1 right-1">
<i class="fa fa-bars white dib f2"></i>
</label>
<ul class="overflow-hidden menu db-ns w-100 list tc pl0 pt3 mv0 f3 fw3 f5-ns">
<li class="absolute top-1 static-ns ph4 mh2 fw3 di-ns pt1 pb3 pv3-ns">
<a href="/" class="white link">
<img src="./img/common/dwyl-heart-only-logo.png" alt="dwyl logo" class="w1-plus"/>
dwyl
</a>
</li>
<li class="ph5 pt5 pb2 tl dn-ns"><a href="/" class="white link">Home</a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/portfolio" class="white link">Portfolio</a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/values" class="white link">Values</a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/team" class="white link">Team</a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/app" class="white link">App
<span class="dwyl-bg-gold pa1 br2 f7">BETA</span></a></li>
<li class="ph5 di-ns pv2 tl pv0-ns"><a href="/blog" class="dwyl-mint link">Blog</a></li>
<li class="ph5 di-ns pt2 pb3 tl pv0-ns"><a href="/#contact" class="white link">Contact</a></li>
</ul>
</nav>

<section class="dwyl-dark-gray pt6 pb3 pb3-ns ph6-ns center shadow-4 tc">
<img src="./img/common/dwyl-heart-only-logo.png" alt="dwyl logo" class="w4 tc"/>
<h1 class="f1">Driven by Our Values</h1>
</section>

<section class="dwyl-dark-gray pt3 pb3 pb5-ns ph6-ns center tl w-60-l w-90">
<h2 class="dwyl-mint bb dwyl-b--gray pl3">dwyl</h2>
<p class="pl3 b mv1 f6">NOUN</p>
<div>
<p class="pl3 b dib mv1">Pronounciation:</p>
<p class="dib pl3 mv1 times-new-roman">/dwɪɫ/</p>
</div>
<div>
<p class="pl3 b dib mv1">Origin:</p>
<p class="dib pl3 i mv0 times-new-roman">Do What You Love</p>
</div>
<div>
<p class="pl3 b dib mv1 dib">1.</p>
<p class="dib pl2 i mv0 times-new-roman w-80 w-90-ns v-top pt1">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure this looks right on a new line with this alignment but also not a blocker.
screen shot 2017-09-10 at 17 08 30

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What view are you seeing it on a separate line? I did have an issue with this before but when I pushed up the view on mobile/ iPad and desktop was all on one line...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was a full desktop view on my macbook in Chrome. I can open an issue on it 👍

Community of people on a mission to change the world using technology.
</p>
</div>

</section>

<section class="dwyl-bg-dark-gray white pt5 pb4 pb5-ns ph6-ns ph4 center">
<h2 class="f2 mv0">More Than Just Software</h2>
<p class="istok-web">We solve real problems with technology. We are different by design.</p>
<button class="bn dib link mb3 ph3 pv2 dwyl-bg-yellow dwyl-dark-gray br2 f5 shadow-4 pointer istok-web">Join Our Community</button>
<button class="bn dib link ml2 mb3 ph3 pv2 dwyl-bg-mint white br2 f5 shadow-4 pointer istok-web">Meet the Team</button>

<h2 class="f2 mt5 mb2">We believe in:</h2>
<div class="dib w-45-ns">
<h3 class="dwyl-yellow mt1">People 🤝</h3>
<p class="lh-copy">
Our people are our primary focus, not profit. We have a
<a href="#" class="dwyl-yellow">worldwide community of over 350 creative technologists.</a>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure where this should link to. We have 400+ people now on github, but 'only' 134 have publicised their membership of the org on GH, so if you're not a member of dwyl already, you only see 134 when you navigate to: https://github.com/orgs/dwyl/people

Copy link
Member Author

@Cleop Cleop Sep 11, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure either... was following the designs. @markwilliamfirth any thoughts? Otherwise I'm happy to just remove this link but keep the text. Also happy to update the text to say 400 if that's the latest figure.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't it link to the community page?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll make it go there, thanks 😊

We believe in inclusivity and accessibility and want to enrich the
lives of everyone in our community. That’s why we made
<a href="https://www.focushub.co.uk/" class"dwyl-yellow">a home for our London-based team at Focus Hub.</a>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This dwyl-yellow is being overriden in my browser: Chrome (standard, not Canary) v. 60.0.3112.113
screen shot 2017-09-10 at 17 09 54

Probably because it's the only link in this section that points to an http link and is recognised by the browser as such. Reset possibly required for links universally at the top of the stylesheet (haven't checked to see if you have one!)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have opened a separate issue on line height: #315

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was a missing "=" after class!

</p>
</div>
<div class="dib w-45-ns ml4-m ml5-ns v-top">
<h3 class="dwyl-yellow mt1">Transparency 🔎</h3>
<p class="lh-copy">
Open-Source and Open-Kimono: we’re building dwyl for all to see! The
vast majority of dwyl projects are written open-source. This allows
code modules to improve and adapt over time allowing for a more robust
and up-to-date application.
</p>
</div>
<div class="dib w-45-ns">
<h3 class="dwyl-yellow">Looking After the Planet 🌍</h3>
<p class="lh-copy">
We recycle and plan to be carbon neutral by 2018, but it’s not just
the planet’s environment we want to improve. We love projects that
have a positive effect on the world. Take a look at
<a href="/portfolio" class="dwyl-yellow">the kinds of project we love.</a>
</p>
</div>
<div class="dib w-45-ns ml4-m ml5-ns v-top">
<h3 class="dwyl-yellow">Organic Growth 🌱</h3>
<p class="lh-copy mb1">
We are growing organically, without investment, to be flexible enough
to move in the direction our community takes us! Want to be a part of our growth.
</p>
<a href="#" class="dwyl-yellow">Sound like somewhere you’d like to work?</a>
</div>

</section>
<section class="dwyl-bg-mint center pt4-ns pb5-ns">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be great to get a nice big comment here (and in most sections) so we don't have to go section hunting, e.g.

<!-- ------------------------------
              CONTACT FORM
-------------------------------- -->


<div class="dib-ns w-50-ns dtc v-top">
<div class="w-80 w-60-ns white center tr">
<h1 class="mt0-ns mb3 pl4-ns f-xl fw9">Let's</h1>
<h1 class="pl4-ns mt3 f-xl fw9">Talk</h1>
</div>
<div class="w-80-ns w-90 ml3">
<a href="tel:+447708796446" class="link"><h2 class="tr white"><span class="dwyl-dark-gray fw9">Tel: </span>+44 (0) 7708 796446</h2></a>
<a href="mailto:hello@dwyl.io" class="link"><h2 class="tr white"><span class="dwyl-dark-gray fw9">Email:</span> hello@dwyl.io</h2><a/>
<h2 class="tr white"><span class="dwyl-dark-gray lh-copy fw9">Address:</span> 16 Palmers Road,<br>London, E2 0SY, UK</h2>
<p class="tr dwyl-dark-gray">(We'll get back to you within 24 hours)</p>
</div>
</div>

<div class="dib-ns bg-white pt4 pa2 shadow-4 ml5-ns w-40-ns">

<form id="gform" method="POST" class="tc tl-ns" action="https://script.google.com/macros/s/AKfycby5ZdD8HfCaz1tMVLw26qYQKEXkP8qdfwLek3TH_RYH3l1o1-Li/exec">
<!-- change the form action to your script url -->

<fieldset class="bn">
<label for="name" class="db mb2 tl pl3 pl0-ns">Your Name</label>
<input id="name" name="name" class="br2 ba dwyl-b--dark-gray pa2 w-90 border-box" placeholder="Tim Berners-Lee" />
</fieldset>

<fieldset class="bn">
<label for="email" class="db mb2 tl pl3 pl0-ns">Email Address</label>
<input id="email" name="email" class="br2 ba dwyl-b--dark-gray pa2 w-90 border-box" type="email" value="" required placeholder="tim@cern.com" />
</fieldset>

<fieldset class="bn">
<label for="message" class="db mb2 tl pl3 pl0-ns">Message</label>
<textarea id="message" name="message" class="br2 ba w-90 dwyl-b--dark-gray pa2" rows="10" placeholder="What problem can we solve for you?"></textarea>
</fieldset>

<button class="bn dib link mt2 mb3 ph3 pv3 dwyl-bg-orange white br2 f4 shadow-4 pointer montserrat">
<i class="fa fa-paper-plane"></i>&nbsp; Say Hello</button>
</form>

<div style="display:none;" id="thankyou_message">
<h2>
<em>Thanks</em> for contacting us! We will get back to you soon!</h2>
</div>

<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript" src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- END -->
</div>
</section>
<footer class="dwyl-bg-dark-gray white pt1 pt3-ns pb4 tc center">
<div class="bb b--white w-90-ns w-80 center">
<ul class="list tc pl0 pt3 pb3-ns mv0 f3 f5-ns ">
<li class="ph4 mh2 fw3 f6 di-ns pv2 pv0-ns"><a href="/" class="white link">Home</a></li>
<li class="ph4 mh2 fw3 f6 di-ns pv2 pv0-ns"><a href="/portfolio" class="white link">Portfolio</a></li>
<li class="ph4 mh2 fw3 f6 di-ns pv2 pv0-ns"><a href="/careers" class="white link">Careers</a></li>
<li class="ph4 mh2 fw3 f6 di-ns pv2 pv0-ns"><a href="/community" class="white link">Community</a></li>
<li class="ph4 mh2 fw3 f6 di-ns pv2 pv0-ns"><a href="/blog" class="dwyl-mint link">Blog</a></li>
</ul>
<a href="https://twitter.com/dwyl" class="link">
<i class="fa fa-twitter ph2 ph4-ns pb4 dwyl-light-gray f2" aria-hidden="true"></i>
</a>
<a href="https://github.com/dwyl" class="link">
<i class="fa fa-github ph2 ph4-ns pb4 dwyl-light-gray f2" aria-hidden="true"></i>
</a>
</div>
<p class="w-80 w-90-ns center f7 pt2-ns">
Copyright 2017 &copy; dwyl ltd, company number 09525434 registered in England &amp; Wales at 104 Mary Datchelor Close, London SE5 7DY, United Kingdom. All rights reserved.
</p>
<img src="./img/common/dwyl-grey-heart.png" alt="dwyl logo" class="pv4">
</footer>
</body>
</html>
11 changes: 11 additions & 0 deletions redesign/css/dwyl.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ body {
font-family: 'Istok Web', sans-serif;
}

.times-new-roman {
font-family: 'Times New Roman';
}

p {
font-family: 'Istok Web', sans-serif;
}
Expand Down Expand Up @@ -62,6 +66,10 @@ p {
background-color: #FED35E;
}

.dwyl-yellow {
color: #FED35E;
}

.dwyl-light-gray {
color: #717E84;
}
Expand All @@ -88,6 +96,9 @@ p {
.w1-plus {
width: 1.2rem;
}
.w-45-ns {
width: 45%;
}
}

.f3-plus {
Expand Down