diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..5c5dc2d3 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -1,8 +1,305 @@ -/** - * 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; + }*/ + } + \ No newline at end of file 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/blog-sketch-week-1.png b/week1/3-website/images/blog-sketch-week-1.png new file mode 100644 index 00000000..d1e19999 Binary files /dev/null and b/week1/3-website/images/blog-sketch-week-1.png differ 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..559689da 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