diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..f2e75548 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,19 +1,229 @@ - - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + font-size: 1rem; +} body { - 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' - */ + line-height:1; + margin:0; + font-family: 'Roboto', sans-serif; + -webkit-font-smoothing: antialiased; + +} + +.nav-bar ul { + text-align: center; + display:block; + font-size:1.04rem; + margin:0 ; + padding:0 ; + background-color:white; + position: fixed; + width:100%; + height: 4.375rem; + border-bottom: 1px solid #ddd; + } + + +.nav-bar li { + +display:inline-block; +margin-left:1.563rem; +margin-top:1.7rem; +list-style-type:none; + + +} +nav a { + color: #838994; + font-size: 1.04rem; + text-decoration: none; + } + + + + li .active { + color:#4c5058; + font-weight:500; +} + +li a:hover{ + cursor: pointer; + color:#333333; +} + +ul .logo { + width:20%; + height: 2.375rem; + margin-top: 0.7rem; + +} + + +.backimg{ + background-image: url('https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/master/week2/2-website/img/first-background.jpg'); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height:45.938rem; + overflow: auto; +} + + +h1 { + display :block; + color: white; + text-align: center; + font-weight:300 ; + margin-top: 17.5rem; + font-size: 3.125rem; +} + +.middle{ + text-align: center; +} + +.middle > h3{ + color:white; + font-weight:300; + margin-top: 1.25rem; + font-size: 1.563rem; + +} + +button { + + width: 9.688rem; + background-color: #f15a29; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + color: white; + font-size: 1.125rem; + +} +button:hover{ + background-color: #d9400e; + border-color: #cf3d0e; + cursor: pointer; +} + +.last { + text-align: center; +} + +.cases h2{ + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; + text-align:center; +} + +.cases { + display:block; + margin-top: 7.875rem; + background-color: #fff; + padding-bottom: 5rem; + } + +.cases ul { +display:flex; +flex-direction:row; +justify-content:center; +} + +.cases .one > li { + width: 20%; + list-style-type: none; + +} + +.cases div > h3{ + +font-weight: 400; +font-size: 1.563rem; +margin: 2.5rem 0px 1.875rem; +} + + +/*footer */ +footer { + background-color: #fff; + overflow: auto; + padding-bottom: 9.375rem; + text-align: center; +} + + +.footer hr { + border: 0; + border-top: 1px solid #eaebec; + margin-: 1.313rem 0; + width:50%; + +} + + + +h5{ + font-size: 1em; + font-weight:400; + +} + +.icons > li { + border-radius: 1.25rem; + width: 2.5rem; + height: rem; + display: inline-block; + margin: 1.25rem 5px; + border: 1px solid #eaebec; + padding: 0.625rem 0; + text-align: center; +} +ul li:hover { + cursor: pointer; +} + +.twitter{ + color: #55acee; +} + .facebook{ + color: #4c66a4; +} + .insta{ + color: #3f729b; +} +span { + font-size: 0.9rem; + font-weight: 300; + color: #838994; + +} + + + + +/* Responsive Design*/ + +@media (min-width: 600px) { + + + +} +@media (min-width: 62rem) { + + +} +@media (min-width: 75rem) { + +} + + + + + diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..14db73b8 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -12,10 +12,71 @@ + + +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+ +
+
+

Everyone needs a little Karma.

- - - +
    +
  • +
    +

    Internet for all devices

    • + +
  • +
    +

    Boost your productivity

    +
    • +
  • +
    +

    Pay as You Go

    +
    +
    • +
+
+
+ + + +