diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..2c0babd9 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,8 +1,304 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Roboto:wght@100;300;400;700;900&display=swap'); + + +/*-----------------------------------------------------------------------------*\ + + HEADER SECTION + +\*-----------------------------------------------------------------------------*/ + +.menu { + width: 100%; + height: 80px; + background-color: #ee8572; + line-height: 80px; /* to center the text in the nav */ + /*position: fixed;*/ + justify-content: space-around; + position: absolute; +} + +.logo { + width: 100%; + height: 50px; + background-color: #d9455f; + line-height: 50px; +} + +.logo-title { + margin: 0 auto; + padding: 0; + color: #d4f3ef; + text-transform: uppercase; + text-align: center; + /* background-color: rgb(36, 32, 28); */ + font-family: 'Roboto', sans-serif; + font-weight: 900; + font-size: 35px; + letter-spacing: 1.5px; + height: 60px; + +} + +#logo-new-position { + display: none; + text-transform: uppercase; + text-align: left; + font-family: 'Roboto', sans-serif; + font-weight: 700; + font-size: 30px; + letter-spacing: 1.5; + +} + +.nav-link { + text-decoration: none; + color:#d4f3ef; + text-transform: uppercase; + font-weight: 700; + padding: 0; + margin: 0 15px; + transition: all 0.3s ease-in-out; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; +} + +.nav-link:hover { + border-top: 1px solid; + border-bottom: 1px solid; + color: #9a1f40; +} + +.nav-link .fa { + margin-right: 5px; +} + +.nav-btn { + float: right; + color: #d4f3ef; + height: 80px; + line-height: 80px; + margin: 0 15px; + cursor: pointer; /* mouse cursor to be displayed when pointing over an element. */ + display: none; +} + + + + +/*-----------------------------------------------------------------------------*\ + + MAIN SECTION + +\*-----------------------------------------------------------------------------*/ + + +html, body { + margin: 0; + padding: 0; + font-family: 'Lato', sans-serif; + box-sizing: border-box; + color: rgb(88, 83, 83); + background-color: #ffffff; +} +img { + border-radius: 5%; +} +.inner { + margin: auto; + width: 95%; +} + +section { + padding: 15px; +} + + +/* First section MOBILE */ +.mobile { + width: 95%; + height: 400px; + background-color: #ffffff; + margin: 0 auto; + margin-top: 60px; +} +.mobile > h2 { + text-align: left; + font-family: 'Roboto', sans-serif; + font-weight: 400; + font-size: 35px; + +} +#mobile-photo { + height: 400px; + width: auto; + float: right; + margin-top: -80px; +} + +/* Second section PERSONAL-BUSINESS */ +.personal-business { + width: 95%; + height: 400px; + margin: 0 auto; +} + +.p-b-left{ + float: left; + width: 40%; + height: 400px; +} + +.p-b-right { + float: right; + width: 40%; + height: 400px; +} +.p-b-left img { + height: 400px; + width: auto; +} + +.personal-business h2 { + font-family: 'Roboto', sans-serif; + color: #1d1d1f; + font-weight: 700; + font-size: 35px; + letter-spacing: 1.5px; +} + h2 > article { + font-weight: 600; + font-size: 30px; + letter-spacing: 1.3px; + color: #1d1d1f; +} + + +/* Third section PERSONAL */ +.personal { + width: 95%; + height: 350px; + margin: 0 auto; + /*display: flex;*/ +} +.p-account-right { + width: 45%; + float: right; + +} +.p-account-right img { + width: 90%; +} + +.p-account-left { + width: 45%; + text-align: justify; + /*margin-right: 20px; + padding-right: 20px;*/ + float: left; +} + + +/* Fourth section BUSINESS */ +.business { + width: 95%; + height: 350px; + margin: 0 auto; +} +.business-right { + width: 45%; + float: right; +} +.business-left img { + width: 45%; + float: left; +} + +/* Fifth section MANAGE-MONEY */ +.manage-money { + width: 95%; + height: 450px; + margin: 0 auto; + text-align: center; +} + + + +hr { + width: 40%; + color: #342ead; + border: 25px 0; +} + +.fa-arrow-circle-up { + float: right; + margin-right: 50px; + font-weight: 600; +} + + +/*-----------------------------------------------------------------------------*\ + + FOOTER SECTION + +\*-----------------------------------------------------------------------------*/ + +footer{ + width: 100%; + height: 220px; + background-color: #ee8572; + font-family: Lato, sans-serif; + font-weight: 400; + color: black; +} +.footer-link{ + display: inline-block; + margin: 15px; + color: honeydew; +} + + + + + +/*-----------------------------------------------------------------------------*\ + + MEDIA QUERY SECTION + +\*-----------------------------------------------------------------------------*/ + + +/* If the browser window is 952 px or smaller */ + + @media (max-width: 858px){ + .logo{ + display: none; + } + .logo-title{ + float: left; + + } + .nav-btn{ + display: block; + } + .inner{ + float: none; + position: fixed; + width: 100%; + height: 100vh; + background-color: #2c3e50; + top: 80px; + left: 0; + text-align: center; + } + .nav-link{ + display: block; + margin: 0 auto; + } + .facebook:first-child { + color: rgb(192, 192, 31); + } + /* + #logo-new-position { + display: -moz-inline-box; + }*/ + } diff --git a/week1/3-website/images/Screenshot (39).png b/week1/3-website/images/Screenshot (39).png new file mode 100644 index 00000000..37ff25b5 Binary files /dev/null and b/week1/3-website/images/Screenshot (39).png differ diff --git a/week1/3-website/images/bank-mobile.gif b/week1/3-website/images/bank-mobile.gif new file mode 100644 index 00000000..9691270a Binary files /dev/null and b/week1/3-website/images/bank-mobile.gif differ diff --git a/week1/3-website/images/bank-mobile2.html b/week1/3-website/images/bank-mobile2.html new file mode 100644 index 00000000..adc76c17 --- /dev/null +++ b/week1/3-website/images/bank-mobile2.html @@ -0,0 +1,581 @@ + + + + + + + +All your business finances in one place | Coconut Blog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
Adam Goodall
+ +Co-founder & Chief of Product
+Posted 5 months ago
+
+
+

All your business finances in one place

+
+

We recently announced that we’re changing the game by giving our customers the ability to connect their other accounts to Coconut. This lets you take advantage of our bookkeeping and tax tools no matter who you choose to bank with.

+

We’ve been working really hard to get this out, and we’re very excited to announce that, as of today, you can connect current accounts and credit cards to Coconut from 20 different banks 🥳

+
+

We’ve put together some quick answers to some of the big questions around this.

+
+

What does this mean for me?

+

On top of all our existing features like expense management, invoicing and tax, we’re bringing more to the table:

+

All your business finances in one place
No more spreadsheets or flicking between apps. Get a complete view of your business across every account, whenever you need it.

Never miss a business expense
Connect your other business accounts, credit cards or even your personal accounts to make sure you capture all your business expenses.

Get started all year round
No need to wait until the start of the tax or financial year to get organised. Pull in your historical records from your other accounts and get going anytime.

No need to switch accounts
Hit the ground running with all our bookkeeping and tax tools no matter who you choose to bank with.

+

How do I connect my accounts?

+

You can connect as many accounts as you want, and it’s easy to get started: 

+
  • Head into the Coconut app
  • Tap on the ‘⚙’ (cog icon) in the Accounts tab
  • Follow the prompts to connect your accounts
+

What happens when I connect my accounts?

+

Once you’ve hooked up your accounts, you’ll be able to see all of your transactions in the app, add receipts and notes, as well as categorise them for tax. 

+

For business accounts, we’ll automatically categorise your expenses as you spend much like we do when you use your Coconut card. If it’s a personal account, we’ll mark all of your expenses as personal and you can select which expenses you want to claim.

+
+

Initially you’ll be able to pull in transactions from the last 30 days, which we know is a little short.

+

As we’re going to be pulling in a much larger volume of data we’re starting with a shorter transaction history to make sure we don’t affect the app’s performance.

+

We’re actively working on extending this with the aim of being able to go back two full years.

+

Which banks and credit card providers can I connect to Coconut?

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+Bank of Scotland + +HSBC Business + +Natwest & RBS +
+Barclaycard + +Lloyds Bank + +Revolut +
+Barclays + +Marks & Spencer + +Santander +
+Danske + +MBNA + +Starling +
+First Direct + +Monzo + +TSB +
+Halifax + +Nationwide + +Ulster Bank +
+

How do we connect your accounts to Coconut?

+

We use TrueLayer to securely connect your bank accounts and credit cards to Coconut.

TrueLayer are regulated by the Financial Conduct Authority and all your details are encrypted and protected by bank level security. You can read more about how this works over on our help centre.

+

What does this mean for my Coconut current account?

+

You’ll still have your Coconut current account, that’s not changing. This just gives you the option to bring other accounts in side by side.

+

Get in touch

+

Hopefully we’ve answered any questions you might have, but if you have more – just let us know! You can message the team via the in-app chat, or email us on [email protected]

+
+
+
+
+
+
+
+

Share this article

+ +
+
+
+
+
+
+
+
+

Free yourself from business admin

+

Download Coconut on iOS or Android. Open an account in minutes with a passport or driving licence. Once you’re approved, you’re ready to do business.

+
+
+
+App Store +
+
+Google Play +
+
+
+
+
+ +Coconut - Tax +
+
+
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + diff --git a/week1/3-website/images/mobilebank.png b/week1/3-website/images/mobilebank.png new file mode 100644 index 00000000..7f80e62f Binary files /dev/null and b/week1/3-website/images/mobilebank.png differ diff --git a/week1/3-website/images/p-business.png b/week1/3-website/images/p-business.png new file mode 100644 index 00000000..0fbc3750 Binary files /dev/null and b/week1/3-website/images/p-business.png differ diff --git a/week1/3-website/images/p-business2.jpg b/week1/3-website/images/p-business2.jpg new file mode 100644 index 00000000..4c0c0d5e Binary files /dev/null and b/week1/3-website/images/p-business2.jpg differ diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..d8a4674e 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -1,22 +1,152 @@ - - - - My Blog - - + + + + + Bamba Bank + + - - - - - - + + + +
+ + + + + + +
+
+
+

JV mobile banking

+
+ mobile banking +

Join the 1,079,123 people with a JV bank account

+
+
+ +
+ +
+
+

Personal and business banking

+
+ This is a bank account – but not as you know it. It’s personal, joint, euro and business banking that’s mobile + and built for the way we live now.With JV’s banking app, you'll get instant notifications when you spend or get + paid, insights that reveal your spending habits, the ability to deposit cheques directly from your mobile, 24/7 + support and an application that only takes minutes.Your money is covered up to £85,000 by the Financial Services + Compensation Scheme. +
+
+
+ bank-mobile +
+ +
+ +
+ +
+ + + +
+ + +
+ +
+
+

The business account

+
+ We think business accounts should be straightforward, free and fast – so that’s exactly what we built. Voted Best + Business Banking Provider 2020. No fuss, no monthly fees, no three week waits; a smarter-than-average business + account you can apply for in minutes and use from your mobile or desktop. +
+
+
+ business account +
+ +
+ +
+ +
+

A new way to manage your money

+
+

Connected card +

+ Give a Connected card to someone you trust so they can buy the things you need on your behalf. +

+ + +
+

Understand how you spend

+

+ Spending Insights gives you a breakdown of your spending habits so you can budget better and + understand exactly where your money goes. +

+
+
+

Save for the good stuff

+

+ Weekly groceries, monthly bills, a future holiday; whatever you’re saving for, Goals is a + digital change jar that lets you ring-fence cash and visualise your goals as you work towards them. +

+

+ +
+ +
+ + \ No newline at end of file