Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aphatheology
Aphatheology authored May 21, 2020
1 parent c0004a2 commit 38f54bf
Show file tree
Hide file tree
Showing 2 changed files with 220 additions and 22 deletions.
73 changes: 56 additions & 17 deletions Day18/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<body>

<header>
<div class="mobile-header">
<img src="images/logo.svg" alt="Easybank">

<span id="hamburger"><img id="hamburger-icon" style="float: right;" src="images/icon-hamburger.svg" alt="Menu">
Expand All @@ -26,30 +27,66 @@

<div id="menu">
<div>
<!-- <ul>
<li><a href="#"></a></li>
</ul> -->
<a href="index">Home</a>
<a href="index">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Blog</a>
<a href="#">Careers</a>
</div>
</div>
</span>
</div>

</header>

<div class="desktop-header">
<div><img src="images/logo.svg" alt="Easybank"></div>

<div class="links">

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Blog</a>
<a href="#">Careers</a>
</div></div>
</span>

</header>
</div>

<div>
<a href="#" id="invite" class="invite">Request Invite</a></div>

</div>

<section class="hero-section">
<div><img src="images/image-mockups.png" alt=""></div>
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account will be a one-stop-shop
for spending, saving, budgeting, investing, and much more.</p>
<a href="#" class="invite">Request Invite</a>

<div>
<img src="images/image-mockups.png" alt="">
</div>

<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account will be a one-stop-shop
for spending, saving, budgeting, investing, and much more.</p>
<a href="#" class="invite">Request Invite</a>

</section>

<section class="hero">
<div class="herocontainer">
<div class="image">
<img src="images/image-mockups.png" alt="">
</div>

<div class="text">
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account will be a one-stop-shop
for spending, saving, budgeting, investing, and much more.</p>
<a href="#" class="invite">Request Invite</a>
</div>
</div>
</section>

<section class="why-choose">
<h2>Why choose <br> Easybank?</h2>
<p>We leverage Open Banking to turn your bank account into your financial hub. Control
<h2>Why choose Easybank?</h2>
<p class="choose">We leverage Open Banking to turn your bank account into your financial hub. Control
your finances like never before.</p>

<div class="choose-container">
Expand Down Expand Up @@ -124,8 +161,9 @@ <h3>Our invite-only Beta accounts are now live!</h3>
</section>

<footer>
<div class="footer-container">
<div>
<a href="#"><img src="images/logo.svg" alt="Easybank"></a>
<a class="footerlogo" href="#"><img src="images/logo.svg" alt="Easybank"></a>
<br>
<a href="#"><img src="images/icon-facebook.svg" alt="Facebook"></a>
<a href="#"><img src="images/icon-youtube.svg" alt="Youtube"></a>
Expand All @@ -147,10 +185,11 @@ <h3>Our invite-only Beta accounts are now live!</h3>
<a href="#">Privacy Policy</a>
</div>

<div>
<div class="right">
<a href="#" class="invite">Request Invite</a>
<p class="footer"> © Easybank. All Rights Reserved</p>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
Expand Down
169 changes: 164 additions & 5 deletions Day18/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ header {
margin-bottom: 25px;
}

.desktop-header {
display: none;
}

#menu {
width: 100vw;
height: 100vh;
Expand Down Expand Up @@ -90,18 +94,25 @@ header {
.hero-section p {
font-size: 1.5rem;
line-height: 125%;
width: 75vw;
margin: auto;
}

.hero {
display: none;
}

.invite {
display: inline-block;
padding: 20px 40px;
padding: 15px 30px;
border-radius: 50px;
margin: 30px 0px 50px;
background: linear-gradient(to right, hsl(136, 65%, 51%) , hsl(233, 26%, 24%));
color: white;
font-weight: bold;
font-size: 1.5rem;
font-size: 1rem;
text-decoration: none;
text-align: center;
}

.invite:hover {
Expand Down Expand Up @@ -211,6 +222,7 @@ footer div a {

footer div a:hover {
color: hsl(136, 65%, 51%);
fill: hsl(136, 65%, 51%);
}

footer div:first-of-type a {
Expand All @@ -225,15 +237,162 @@ footer div:first-of-type a {


@media screen and (min-width: 700px) {

body {
overflow-x: hidden;
padding: 0px;
margin: 0px;
}

header {
display: none;
}

.mobile-header {
display: none;
}

.desktop-header {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px 75px;
width: 90vw;
margin: 10px auto 0px;
}

.desktop-header .links {
margin: 0px 15px;
min-width: 50%;
}

.desktop-header .invite {
display: inline-block;
padding: 15px 30px;
border-radius: 50px;
background: linear-gradient(to right, hsl(136, 65%, 51%) , hsl(233, 26%, 24%));
color: white;
font-weight: bold;
font-size: 1rem;
text-decoration: none;
text-align: center;
}

.desktop-header a {
display: inline-block;
margin: 0px 15px ;
padding-bottom: 35px;
color: black;
text-decoration: none;
}

.desktop-header a:hover {
cursor: pointer;
border-bottom: 3px solid hsl(136, 65%, 51%);
}

.hero-section {
display: none;
}

.hero {
width: 100vw;
margin: 0px auto;
background-color: hsl(220, 16%, 98%);
display: block;
}

.hero .herocontainer {
width: 95vw;
margin: 0px auto;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}

.hero .herocontainer .image {
max-width: 100%;
height: 100%;
background-image: url('images/bg-intro-desktop.svg');
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}

.hero .herocontainer .image img {
text-align: center;
width: 100%;
max-height: 100%;
position: relative;
margin-top: -20%;
right: -25%;
}

.hero .herocontainer .text {
padding: 25px 75px;
width: 40%;
}

.hero .herocontainer .text h1 {
margin: 25px 0px;
font-size: 3rem;
}

.hero .herocontainer .text p {
font-size: 1.5rem;
line-height: 125%;
}

.why-choose p.choose {
width: 45%;
line-height: 125%;
}

.articles-container , .choose-container {
display: flex;
flex-direction: row;
justify-content: center;
align-self: start;
width: 99%;
margin: auto;
}

.articles-container div {
/* width: 400px; */
.articles-container div , .choose-container div {
width: 25%;
margin: 50px 25px;
margin: 50px 15px;
}

.choose-container div:first-child {
margin-left: 0;
}

.why-choose {
text-align: left;
padding: 100px;
}

.why-choose p {
padding: 0;
}

footer .footer-container {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 25px;
}

footer .footer-container .footerlogo {
margin-bottom: 30px;
display: block;
}

footer .footer-container div {
text-align: left;
}

footer .footer-container .right {
text-align: right;
min-width: 40%;
}
}

0 comments on commit 38f54bf

Please sign in to comment.