diff --git a/week2/2-website/README.md b/week2/2-website/README.md index 95bb4ad8..31e93e6a 100644 --- a/week2/2-website/README.md +++ b/week2/2-website/README.md @@ -1,7 +1,7 @@ # Karma-clone -The aim of this exercise is to create a page that looks just like this one: http://thinkful-ed.github.io/karma-clone/ - +The aim of this exercise is to create a page that looks just like this one: +http://thinkful-ed.github.io/karma-clone/ ## Tasks - Fork and clone this repo. diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..1f333f98 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,19 +1,242 @@ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ + /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ + *{ + padding: 0rem; + margin: 0rem; + } -body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; -} + body { + background-color: white; + font-family: 'Roboto', sans-serif; + -webkit-font-smoothing: antialiased; + } -/** - * 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. - * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ + + .nav-bar{ + background-color: #fff; + position: fixed; + width: 100%; + height: 4.375rem; + border-bottom: 1px solid #DDD; + z-index: 9999; + + } + + .img1 { + display: inline-block; + width: 1.5rem; + line-height: .5rem; + } + + li { + margin-left: 2rem; + display: inline-block; + align-items: center; + + } + .nav-link { + align-items: center; + padding: 1rem 0.938rem; + margin: 0 auto; + max-width: 35.5rem + + } + + .active a{ + color: black; + } + + a { + + text-decoration: none; + color: grey; + } + + a:hover { + color: black; + } + + /* Background image and intext messages */ + .top-image h1 { + margin-top: 17.5rem; + font-size: 3.125rem; + } + .top-image h1, h3 { + color: white; + text-align: center; + font-weight: 300; + } + .top-image { + background-image: url('../img/first-background.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center bottom; + height: 45.938rem; + overflow: hidden; + vertical-align: baseline; + box-sizing: border-box; + display: inline-block; + text-align: center; + align-items: flex-start; + } + .intext { + padding: 15rem .938rem; + margin: 0 auto; + min-width: 37.5rem; + } + + .feeder h2 { + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; + } + h1:first-child { + font-weight: lighter; + font-size: 3rem; + color: ivory; + margin-top: 2.5rem; + } + div>h2:first-child { + text-align: center; + padding-top: 1.875rem; + font-size: 2.81rem; + font-weight: lighter; + } + .intext >:nth-child(2) { + font-weight: lighter; + font-size: 1.6rem; + color: ivory; + + } + /* button */ + + #button { + height: 3.4375rem; + width: 3rem; + min-width: 9rem; + border: black; + background-color:#F15A29; + margin-top: 0.625rem; + padding: 0.625rem; + border-radius: 0.3125rem; + } + /* Refill Devices Coffee and Assigned Text */ + .items { + display: flex; + flex-direction: row; + justify-content: center; + padding-bottom: 0.9375rem; + + } + div.item { + vertical-align: top; + display: inline-block; + text-align: center; + width: 11rem; + padding-right: 1.5rem; + } + + .caption { + display: flex; + font-size: 1rem; + + } + .caption1 { + display: flex; + font-size: 1rem; + + padding-right: .5rem; + } + .caption2 { + display: flex; + + padding-right: 1rem; + font-size: 1rem; + } + span { + padding-top: 1.25rem; + padding-left: 0.625rem; + } + /* footer */ + + + .footer{ + margin-top: 1.875rem; + text-align: center; + } + hr { + margin-top: 1.25rem; + } + .footer-logo { + font-size: 1.5rem; + font-weight: lighter; + } + + .footer-social-icons { + padding-bottom: 0.625rem; + color: #4c66a4; + } + .fa-twitter { + margin-left: 0.625rem; + background-color:whitesmoke; + padding: 0.625rem; + border-radius: 50%; + } + + .fa-facebook { + margin-right: 0.125rem; + background-color:whitesmoke; + padding: 0.625rem; + border-radius: 50%; + } + + .fa-instagram { + margin-right: 0.625rem; + background-color:whitesmoke; + padding: 1rem; + border: grey; + border-radius: 50%; + } + + @media only screen and (max-width: 1200px) { + html{ + font-size: 0.625rem; + } + + .top-image { + width: 100%; + background-image: cover; + } + .items{ + width: 100%; + } + .intext h1{ + width:100%; + } + .nav-bar{ + width: 100%; + } + + } + + @media only screen and (min-width: 1200px) { + html{ + font-size: 1rem; + } + + .top-image { + width: 100%; + background-image: cover; + } + .items{ + width: 100%; + padding-left: 2rem; + } + .intext h1{ + width:100%; + } + + + } diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..e62d72e3 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,21 +1,83 @@ - - - - - - Karma - - - - - - - - + + + + + + Karma + + + + + + + + +
+ + + +
+
+
+ +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+
+ +
+
+
+ +
+
+

Everyone needs a little Karma.

+
+
+
+ + Internet for all devices +
+
+ + Boost your production +
+
+ + Pay as you go +
+
+ +
+
- - - + - - + +