Skip to content
This repository was archived by the owner on Oct 26, 2020. It is now read-only.

JiT update.... #64

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

JiT update.... #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b6fefe4
JiT update....
leroy-douglas May 23, 2020
1a106b7
Tidied up html & css
leroy-douglas Jun 5, 2020
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
220 changes: 220 additions & 0 deletions week2/2-website/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
* {
margin: 0;
padding: 0;
}

html{
font-size: 62.5%;
}
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */

body {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 1rem;
}

/**
Expand All @@ -16,4 +24,216 @@ body {
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/

/***************************************** H E A D E R S E C T I O N ******************************************
* The header inclueds the log and navigation bar that is laid out using the flexbox layout
*
****************************************************************************************************************/

/*
* Let's pin our header to the top of the page
*/

header{
position: fixed;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ddd;
}

.content-container{
padding: 0 1.5008rem;
margin: 0 auto;
min-width: 60rem;
}

/*
* The layout container for the logo and navigation
*/

.header-layout{
display: flex;
justify-content: space-between;
align-items: center;
height: 7rem;
}

/*
* The header Content
*/

img.logo {
height: 7rem;
width: 2.6rem;;
}

nav.menu {
color: #838994;
font-size: 1.664rem;
}

nav.menu li {
display: inline-block;
margin-left: 2.5008rem;
}

nav.menu .selected{
color: #4c5058;
font-weight: 500;
}


/*
* Container for background photo, title and tagline
*/

.tag-container{
background-image: url('../img/first-background.jpg');
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
height: 73.5008rem;
}

/*
* Lets layout out content using ye ole trust flexbox.....
*/
.tag-content{
padding:0;
display: flex;
flex-direction: column;
align-items: center;
}



.tag-content h1{
margin: 0;
margin-top: 28rem;
font-size: 5rem;
}

.tag-content h3{
font-size: 2.5008rem;
margin-top: 2rem;
}

.tag-content h1, .tag-content h3 {
color: #fff;
font-weight: 300;
}

.tag-content button{
margin-top: 2.5008rem;
width: 15.5008rem;
background-color: #f15a29;
border-color: #f15a29;
text-shadow: none;
border-style: none;
border-radius: 0.4rem;
padding: 1.6rem 0.9rem;
color: white;
font-size: 1.8rem;
box-sizing: border-box;
}

.benefits-container{
display: flex;
justify-content: space-around;
text-align: center;
padding-bottom: 8rem;
}

.benefit img{
width: 12.7rem;
height: 12.7rem;
}

#benefits{
margin-top: 12.6rem;

}
#benefits h2{
margin-top: 12.6rem;
font-size: 4.4rem;
font-weight: 300;
margin: 2.6rem 0 5rem;
text-align: center;
}
.benefit h3{
font-size: 2.5008rem;
font-weight: 400;
margin: 4rem 0 3rem;
}
section.benefit{
width: 33.3333333%;
}

footer{
padding-bottom: 15rem;
}

footer hr{
margin: 2.1008rem;
border-top: 1px solid #eaebec;
}

#social-media-container h5{
margin: 2.1008;
}
#social-media-container h5{
font-size: 1.6rem;
font-weight: 400;
text-align: center;
}
.social-media-layout{
display: flex;
justify-content: center;
}

.social-media{
border-radius: 2rem;
width: 4rem;
height: 4rem;
margin: 2rem 5px;
border: 1px solid #eaebec;
padding: 1rem 0;
text-align: center;
box-sizing: border-box;
}

#social-media-container .twitter {
color: #55acee;
}
#social-media-container .facebook {
color: #4c66a4;
}
#social-media-container .instagram {
color: #3f729b;
}


#social-media-container .content-container .copyright{
text-align: center;
font-size: 1.44rem;
font-weight: 300;
}



@media (min-width: 76.8em) {
.content-container {
width: 73.6em;
}
}

@media (min-width: 99.2em) {
.content-container {
width: 96rem;
}
}

@media (min-width: 120rem) {
.content-container {
width: 60%;
}
}
60 changes: 58 additions & 2 deletions week2/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,62 @@
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<!-- All the images you need are in the 'img' folder -->

<header>
<div class="content-container">
<div class="header-layout">
<img class="logo" src="img/karma-logo.svg" alt="Karma logo">
<nav class="menu">
<ul>
<li class="selected">Meet Karma</li>
<li>How it Works</li>
<li>Store</li>
<li>Blog</li>
<li>Help</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="container">
<div class="tag-container">
<div class="content-container tag-content">
<h1 id="title">Introducing Karma</h1>
<h3 id="tagline">Bring WiFi with you, everywhere you go.</h3>
<button>Learrn More</button>
</div>
</div>
<main id="benefits">
<h2>Everyone needs a little Karma</h2>
<div class="benefits-container content-container">
<section class="benefit">
<img src="img/icon-devices.svg" alt="Karma supports Internet for all devices">
<h3>Internet for all devices</h3>
</section>
<section class="benefit">
<img src="img/icon-coffee.svg" alt="Karma Boosts your productivity">
<h3>Boost your productivity</h3>
</section>
<section class="benefit">
<img src="img/icon-refill.svg" alt="Karma supports Pay as You Go">
<h3>Pay as You Go</h3>
</section>
</div>
</main>
<footer>
<section id="social-media-container">
<div class="content-container">
<hr>
<h5>Join us on</h5>
<div class="social-media-layout">
<div class="social-media twitter fa fa-twitter fa-2x"></div>
<div class="social-media facebook fa fa-facebook fa-2x"></div>
<div class="social-media instagram fa fa-instagram fa-2x"></div>
</div>
<div class="copyright">&copy; Karma Mobility, Inc.</iv>
</div>
</section>
</footer>
</div>
</body>
</html>
</html>