From 55e79f62d1e712558c17d60c489709fc79583e3b Mon Sep 17 00:00:00 2001 From: SarahSchoonmaker Date: Tue, 14 Nov 2017 20:07:56 -0500 Subject: [PATCH 1/9] initial --- README.md | 6 ++ index.html | 94 ++++++++++++++++++++ style.css | 245 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 345 insertions(+) create mode 100755 README.md create mode 100644 index.html create mode 100644 style.css diff --git a/README.md b/README.md new file mode 100755 index 0000000..a38d4d6 --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +assignment_bootstrap_sprint +=========================== + +Pick yourself up! + +[A Bootstrap, HTM5 and SASS project from the Viking Code School](http://www.vikingcodeschool.com) diff --git a/index.html b/index.html new file mode 100644 index 0000000..add98ec --- /dev/null +++ b/index.html @@ -0,0 +1,94 @@ + + + + + Facebook About Page + + + + +
+
+
+
+ Profile Pic +
+ Edit Profile +
    +
  • Timeline
    • +
  • About
    • +
  • Photos
    • +
  • Friends
    • +
+
+
+
+

About

+
+
+
+
+

Basic Information

+ + + + + + + + + + + + + + + + + +
Birthday:1/1/1111
College:Some College
Hometown:Home
Current Location:Current place
+

Contact Information

+ + + + + + + + + +
Email:myemail@email.com
Phone Number:000-000-0000
+
+

Words to Live By

+

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.

+

About Me

+

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.

+
+
+
+
+
+ + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..00fe8c6 --- /dev/null +++ b/style.css @@ -0,0 +1,245 @@ +html, body { + margin: 0; + padding: 0; + overflow-y: auto; + background: #f2f2f2; + font-family: 'Open Sans', sans-serif; +} + +/*Header */ + +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + border:2px solid #505559; + background: #036EEE; + height: 30px; + padding-bottom: 2em; + +} + +.header h1 { + margin-left: 10%; + bottom:20px; + float: left; + color: #FFFFFF; + font: 30px arial, sans-serif; +} + +.header img { + position: fixed; + height:50px; + width:50px; + widows: 4px;0px; + right:90%; + margin:5px 8px 0 5px; + +} + + +.header a { + position: fixed; + left:80%; + top: 5%; + text-decoration: none; + color: #FFFFFF; + +} +.wrapper { + position: fixed; + width: 100%; + height: 80px; + font-size: 0; + top: 10%; + left:32%; + -webkit-transform: translateY(-40%); + transform: translateY(-40%); +} + +.search { + width:30%; + font-size: 18px; + max-width: 400px; + height: 19px; + border: 1px solid #b3b3b3; + border-radius: 15px 0 0 15px; +} + +.submit { + top:.4em; + cursor: pointer; + border: none; + background: url("http://thesuiteworld.com/wp-admin/maint/search-icon-white-png-540.png") no-repeat center center, #1E1E20; + background-size: 22px 22px; + border-radius: 0 12px 12px 0; + padding: 8px 3px 16px 3px; + display: inline-block; + width: 80px; + height: 5px; +} + +/** + * Body + */ +.introduction { + background-position: center bottom; + background-repeat: no-repeat; + height: 595px; + overflow: auto; + width:100%; +} + +.about-top { + margin: 100px auto; + margin-top:8.3%; + width: 1050px; + height: 303px; + border: 2px solid #92939C; + box-sizing: border-box; + margin-left: 12%; + background-image: url("fields.jpg"); + +} + +.bottom-border img { + margin-top:11%; + background-color: #92939C; + margin-left: 1em; + padding:40px 50px 50px 40px; + +} + +.about-top img:hover { + cursor: pointer; +} + +.bottom-border { + height: 10%; + width:100%; +} +.outer{background:#E6E0D3; width:100%; height:56px;} +.wrap{margin-left:30%; } +.wrap li{ + padding:15px; + text-align: left; + width:26%; + display:table-cell; + border-right:solid #5E5C58 1.5px; + line-height: 1.7; +} +li:first-child { + border-left:solid #5E5C58 1.5px; +} + + +li:hover { + cursor: pointer; +} + + +.outer a { + float: right; + text-decoration: none; + margin-right:10%; + margin-top:1em; + + +} + +.bottom-border-lower { + width:100%; + height: 140%; + border: 2px solid #92939C; + border-top:none; + box-sizing: border-box; + margin-top: -1.6%; + margin-bottom:5%; +} + +.basic-info h1 { + margin-left:10%; +} + +.basic-info table { + margin-left: 10%; +} + +.top-menu { + margin-top:28%; + background-color: #A6A49E; +} + +.top-menu h1 { + padding-top:.6em; + text-align: center; + font-size: 18px; + color: #140E01; + +} + +.basic-info { + margin:1em; + padding:.5em; + +} + + +hr { + display: block; + height: 1px; + border: 0; + border-top: 2px solid #92939C; + margin: 1em 0; + padding: 0; +} + +/* Not sure how to +align two divs without negative +margin. */ + +.description-right { + float: right; + width: 50%; + margin-top:-26%; +} + + +/** + * Footer + */ +.footer { + background-color: #DBD7CF; + overflow: auto; + padding-bottom: 9.375rem; + text-align: center; + padding-bottom:0; + height: 50px; +} + +.content-footer{ + text-align: center; + margin-top:1em; +} + + +/** + * Responsive Design + */ +@media (min-width: 45rem) { + .content { + width: 65rem; + } +} +@media (min-width: 62rem) { + .content { + width: 60rem; + } +} +@media (min-width: 75rem) { + .content { + width: 60%; + } +} + From 398c289384d6a804aa91212b3a53564a78fd3d8f Mon Sep 17 00:00:00 2001 From: SarahSchoonmaker Date: Tue, 14 Nov 2017 22:03:47 -0500 Subject: [PATCH 2/9] initial --- index.html | 109 +++++++----------- style.css | 323 +++++++++++++++++++++++++++++------------------------ 2 files changed, 213 insertions(+), 219 deletions(-) diff --git a/index.html b/index.html index add98ec..22a5751 100644 --- a/index.html +++ b/index.html @@ -3,87 +3,56 @@ Facebook About Page - + - -
+
+
-
-
- Profile Pic -
- Edit Profile -
    -
  • Timeline
    • -
  • About
    • -
  • Photos
    • -
  • Friends
    • -
-
+
    +
  • +
    +

    Heading

    +

    Connect all your favorite devices to Karma.

    +
    +
    • +
  • +
    +

    Heading

    +

    Freedom of the internet, wherever you are.

    -
    -

    About

    -
    -
    -
    -
    -

    Basic Information

    - - - - - - - - - - - - - - - - - -
    Birthday:1/1/1111
    College:Some College
    Hometown:Home
    Current Location:Current place
    -

    Contact Information

    - - - - - - - - - -
    Email:myemail@email.com
    Phone Number:000-000-0000
    -
    -

    Words to Live By

    -

    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.

    -

    About Me

    -

    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.

    -
    -
    -
-
-
+ +
  • +
    +

    Pay as You Go

    +

    Take full control of your spend. Pay for what you need.

    +
    +
    • + + +
    - © Sarah Schoonmaker, Inc. + © Sarah, Inc.
    diff --git a/style.css b/style.css index 00fe8c6..2a72033 100644 --- a/style.css +++ b/style.css @@ -8,201 +8,226 @@ html, body { /*Header */ -.header { - position: fixed; - top: 0; - left: 0; - width: 100%; - border:2px solid #505559; - background: #036EEE; - height: 30px; - padding-bottom: 2em; - +#header { + border:2px solid #505559; + margin:0 auto; + width:100%; + background: #0E0C08; + height: 45px; + padding-bottom: 25px; } -.header h1 { + +#header h1 { margin-left: 10%; - bottom:20px; float: left; - color: #FFFFFF; + color: #F6EAD1; font: 30px arial, sans-serif; } -.header img { - position: fixed; - height:50px; - width:50px; - widows: 4px;0px; - right:90%; - margin:5px 8px 0 5px; - +#header form { + float: right; + margin-right: 5%; + height: 40px; + padding-top: 8px; + font: 12px arial, sans-serif; } +#header form label { + display: inline-block; + margin: 0 2px; +} -.header a { - position: fixed; - left:80%; - top: 5%; - text-decoration: none; - color: #FFFFFF; +#header form input {} +#header form #s-user, +#header form #s-pass { + display: block; + width: 250px; + border: 1px solid #eee; + padding: 4px 0 4px 0; + } -.wrapper { - position: fixed; - width: 100%; - height: 80px; - font-size: 0; - top: 10%; - left:32%; - -webkit-transform: translateY(-40%); - transform: translateY(-40%); -} - -.search { - width:30%; - font-size: 18px; - max-width: 400px; - height: 19px; - border: 1px solid #b3b3b3; - border-radius: 15px 0 0 15px; -} - -.submit { - top:.4em; - cursor: pointer; - border: none; - background: url("http://thesuiteworld.com/wp-admin/maint/search-icon-white-png-540.png") no-repeat center center, #1E1E20; - background-size: 22px 22px; - border-radius: 0 12px 12px 0; - padding: 8px 3px 16px 3px; - display: inline-block; - width: 80px; - height: 5px; + +#header form .submit { + height: 23px; + vertical-align: bottom; + background: #477421; + color: #010105; + border: 1px solid #ddd; + -moz-border-radius: 5px; + border-radius: 5px; + cursor:pointer; } + /** * Body */ -.introduction { - background-position: center bottom; - background-repeat: no-repeat; - height: 595px; - overflow: auto; - width:100%; +body { + font-family: 'Roboto', sans-serif; + -webkit-font-smoothing: antialiased; } -.about-top { - margin: 100px auto; - margin-top:8.3%; - width: 1050px; - height: 303px; - border: 2px solid #92939C; - box-sizing: border-box; - margin-left: 12%; - background-image: url("fields.jpg"); +.content { + padding: none; + float: left; } -.bottom-border img { - margin-top:11%; - background-color: #92939C; - margin-left: 1em; - padding:40px 50px 50px 40px; +/** + * Navigation Section + */ +.top-navigation { + background-color: white; + position: fixed; + width: 100%; + border-bottom: 1px solid #DDD; } - -.about-top img:hover { - cursor: pointer; +.top-navigation > .content { + height: 4.375rem; } - -.bottom-border { - height: 10%; - width:100%; +.top-navigation .logo { + height: 4.375rem; + margin-left: 14px; } -.outer{background:#E6E0D3; width:100%; height:56px;} -.wrap{margin-left:30%; } -.wrap li{ - padding:15px; - text-align: left; - width:26%; - display:table-cell; - border-right:solid #5E5C58 1.5px; - line-height: 1.7; +.top-navigation .links { + float: right; + font-family: 'Roboto', sans-serif; + color: #838994; + font-size: 1.04rem; + margin-top: 1.7rem; + -webkit-font-smoothing: antialiased; } -li:first-child { - border-left:solid #5E5C58 1.5px; +.top-navigation .links li { + display: inline-block; + margin-left: 1.563rem; } - - -li:hover { +.top-navigation .links li.active { + color: #4c5058; + font-weight: 500; +} +.top-navigation .links li:hover { cursor: pointer; + color: #333333; } - -.outer a { - float: right; - text-decoration: none; - margin-right:10%; - margin-top:1em; - +/** + * Introduction Section + */ +.introduction { + height: 500px; + overflow: auto; + width: 100%; + overflow-x: hidden; } +.introduction h1, +.introduction p { + width: 100%; + color: #0D110A; + font-weight: 300; + font-family: sans-serif; -.bottom-border-lower { - width:100%; - height: 140%; - border: 2px solid #92939C; - border-top:none; - box-sizing: border-box; - margin-top: -1.6%; - margin-bottom:5%; } - -.basic-info h1 { - margin-left:10%; +.introduction h1 { + margin-left:1em; + margin-top: 1em; + font-size: 3.125rem; } - -.basic-info table { - margin-left: 10%; +.introduction h3 { + margin-top: 1.25rem; + font-size: 25px; + float: left; } -.top-menu { - margin-top:28%; - background-color: #A6A49E; +.introduction p { + margin-left:2.5em; } -.top-menu h1 { - padding-top:.6em; - text-align: center; - font-size: 18px; - color: #140E01; - +/** + * The buttons + */ +.introduction .buttons { + color: white; + margin-top: 1.563rem; + margin-left:5em; } - -.basic-info { - margin:1em; - padding:.5em; - +// .introduction .half { +// width: 49%; +// padding: 0 0.938rem; +// display: inline-block; +// vertical-align: bottom; +// font-size: 1.125rem; +// line-height: 1.2; +// } + +.introduction .learn button { + width: 9.688rem; + background-color: #35538F; + border-color: #f15a29; + text-shadow: none; + border-style: none; + border-radius: 4px; + padding: 1rem 1.5rem; + color: white; + font-size: 1.125rem; +} +/*.focus { + outline: none; +}*/ +.introduction .learn button:hover { + background-color: #d9400e; + border-color: #cf3d0e; + cursor: pointer; +} +.introduction .watch img:hover { + cursor: pointer; +} +.introduction .watch img { + position: relative; + top: 0.625rem; } +/** + * The Three Case Images + */ +.cases { + background-color: #fff; + overflow: hidden; + height: 400px; -hr { - display: block; - height: 1px; - border: 0; - border-top: 2px solid #92939C; - margin: 1em 0; - padding: 0; } +.cases .content { + margin-top: 4em; + padding: none; + color: #1d1e21; + text-align: center; +} +.cases h2 { + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; +} +.cases .devices { + display: flex; + list-style-type: none; + width: 100%; + margin-left:10%; +} +.cases .devices > li { + width: 33.3333333%; +} +.cases .devices h3 { + font-weight: 400; + font-size: 1.563rem; + margin: 2.5rem 0px 1.875rem; -/* Not sure how to -align two divs without negative -margin. */ - -.description-right { - float: right; - width: 50%; - margin-top:-26%; +} +.cases .devices p { + font-weight: 300; + font-size: 1.313rem; } From f1d7e651b969bda0d6f34b0fdb3b24b498d1fe52 Mon Sep 17 00:00:00 2001 From: SarahSchoonmaker Date: Tue, 14 Nov 2017 22:07:18 -0500 Subject: [PATCH 3/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a38d4d6..76b79be 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ assignment_bootstrap_sprint =========================== -Pick yourself up! +Built a home page template. [A Bootstrap, HTM5 and SASS project from the Viking Code School](http://www.vikingcodeschool.com) From 68218923d8ec696e0c28836abfa48dee579842c0 Mon Sep 17 00:00:00 2001 From: SarahSchoonmaker Date: Tue, 14 Nov 2017 22:07:33 -0500 Subject: [PATCH 4/9] Update README.md --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 76b79be..9a3a0f6 100755 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -assignment_bootstrap_sprint -=========================== + Built a home page template. From 86d21b786c3460db955047babdc3acc19ca08339 Mon Sep 17 00:00:00 2001 From: SarahSchoonmaker Date: Tue, 14 Nov 2017 22:08:16 -0500 Subject: [PATCH 5/9] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9a3a0f6..1223846 100755 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ Built a home page template. +Preview: https://sarahschoonmaker.github.io/assignment_bootstrap_sprint/ [A Bootstrap, HTM5 and SASS project from the Viking Code School](http://www.vikingcodeschool.com) From 69215b2ab22a958259c4e221c6387a213d4fb035 Mon Sep 17 00:00:00 2001 From: SarahSchoonmaker Date: Wed, 15 Nov 2017 09:18:20 -0500 Subject: [PATCH 6/9] Update README.md --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index 6bfcb68..446808c 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,3 @@ -<<<<<<< HEAD - - Built a home page template. Preview: https://sarahschoonmaker.github.io/assignment_bootstrap_sprint/ ======= @@ -8,6 +5,5 @@ assignment_bootstrap_sprint =========================== Pick yourself up! ->>>>>>> 1ba42792cbd90d1e8efdc5f95b33b5e46aac94e1 [A Bootstrap, HTM5 and SASS project from the Viking Code School](http://www.vikingcodeschool.com) From bdfdaf395f4f5073e31731aa50de57229bf37d51 Mon Sep 17 00:00:00 2001 From: SarahSchoonmaker Date: Wed, 15 Nov 2017 16:27:09 -0500 Subject: [PATCH 7/9] initial --- index.html | 11 +++++------ style.css | 32 +++++++++++++++++++------------- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 22a5751..f750b45 100644 --- a/index.html +++ b/index.html @@ -29,22 +29,21 @@

    Hello World!

    • -

      Heading

      Connect all your favorite devices to Karma.

      -
      +
    • -
      +

      Heading

      Freedom of the internet, wherever you are.

      -
      +
    • -
      +

      Pay as You Go

      Take full control of your spend. Pay for what you need.

      -
      +
    diff --git a/style.css b/style.css index 2a72033..6ddc789 100644 --- a/style.css +++ b/style.css @@ -70,8 +70,9 @@ body { } .content { - padding: none; - float: left; + margin-left: auto; + margin-right:auto; + } @@ -125,7 +126,7 @@ body { } .introduction h1, .introduction p { - width: 100%; + width: 80%; color: #0D110A; font-weight: 300; font-family: sans-serif; @@ -194,16 +195,16 @@ body { * The Three Case Images */ .cases { - background-color: #fff; - overflow: hidden; - height: 400px; +background-color: #fff; + overflow: hidden; + height: 400px; + } .cases .content { margin-top: 4em; padding: none; color: #1d1e21; - text-align: center; } .cases h2 { font-size: 2.75rem; @@ -211,13 +212,18 @@ body { font-weight: 300; } .cases .devices { - display: flex; + // display: flex; list-style-type: none; - width: 100%; - margin-left:10%; + width: 80%; + margin-left:auto; + margin-right:auto; } .cases .devices > li { - width: 33.3333333%; + width: 33%; + display: inline-block; + box-sizing: border-box; + padding:1em; + } .cases .devices h3 { font-weight: 400; @@ -257,14 +263,14 @@ body { width: 65rem; } } -@media (min-width: 62rem) { +@media (min-width: 75rem) { .content { width: 60rem; } } @media (min-width: 75rem) { .content { - width: 60%; + width: 100%; } } From a2a04f5a23bede925365e7685f9582ce92e6a255 Mon Sep 17 00:00:00 2001 From: SarahSchoonmaker Date: Wed, 15 Nov 2017 16:28:43 -0500 Subject: [PATCH 8/9] Update README.md --- README.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/README.md b/README.md index 446808c..e21a785 100755 --- a/README.md +++ b/README.md @@ -1,8 +1,5 @@ Built a home page template. Preview: https://sarahschoonmaker.github.io/assignment_bootstrap_sprint/ -======= -assignment_bootstrap_sprint -=========================== Pick yourself up! From e1df0bab235e6b08d44871414382b6f2d5b28f5a Mon Sep 17 00:00:00 2001 From: SarahSchoonmaker Date: Wed, 15 Nov 2017 16:31:36 -0500 Subject: [PATCH 9/9] initial --- style.css | 27 ++------------------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/style.css b/style.css index 6ddc789..f8bcf3a 100644 --- a/style.css +++ b/style.css @@ -19,7 +19,7 @@ html, body { #header h1 { - margin-left: 10%; + margin-left: 4%; float: left; color: #F6EAD1; font: 30px arial, sans-serif; @@ -89,30 +89,7 @@ body { .top-navigation > .content { height: 4.375rem; } -.top-navigation .logo { - height: 4.375rem; - margin-left: 14px; -} -.top-navigation .links { - float: right; - font-family: 'Roboto', sans-serif; - color: #838994; - font-size: 1.04rem; - margin-top: 1.7rem; - -webkit-font-smoothing: antialiased; -} -.top-navigation .links li { - display: inline-block; - margin-left: 1.563rem; -} -.top-navigation .links li.active { - color: #4c5058; - font-weight: 500; -} -.top-navigation .links li:hover { - cursor: pointer; - color: #333333; -} + /** * Introduction Section