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 1 commit
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
234 changes: 234 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,230 @@ 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;
/* stop: 0px; */
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ddd;
/* soverflow: hidden; */
}

.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 {
/* float: right; */
Copy link

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

remove any unnecessary / commented code before submitting a PR.

color: #838994;
font-size: 1.664rem;
/*
margin-top: 1.7rem;
margin-top: 2.752rem;
*/
}

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;
}

.fa{
Copy link

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

better to create your own classname rather than setting styles directly on fontawsome class.
Consider that later you might want to have a bigger icon which will mean you'll have to overwrite this. and then reset it again for smaller icons. Maybe consider creating classes like
icon-sm icon-md and icon-lg.
Then you can do something like
<i class="fa fa-twitter icon-sm">

Also I'm not sure you need to set the font-family

font-family: FontAwesome;
font-size: 1.4rem;
}

#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;
sbackground-color: red;
Copy link

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

seems to be a typo here

Suggested change
sbackground-color: red;
background-color: red;

Copy link

@GTabala GTabala Jun 6, 2020

Choose a reason for hiding this comment

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

I think Leroy uses this instead of commenting.

}
}

@media (min-width: 99.2em) {
.content-container {
width: 96rem;
sbackground-color: blue;
Copy link

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

same

}
}

@media (min-width: 120rem) {
.content-container {
width: 60%;
sbackground-color: green;
Copy link

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

same

}
}
61 changes: 59 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,63 @@
<!-- 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>
Copy link

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

Suggested change
<main id=benefits>
<main id="benefits">

missing double quotations :)

<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>
<h4></h4>
Copy link

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

remove the empty h4

<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"></div>
<div class="social-media facebook fa fa-facebook"></div>
<div class="social-media instagram fa fa-instagram"></div>
</div>
<div class="copyright">&copy; Karma Mobility, Inc.</iv>
</div>
</section>
</footer>
</div>
</body>
</html>
</html>