diff --git a/.sass-cache/0e547241a2593e6fecdee24d08b36561b1075a6c/styles.scssc b/.sass-cache/0e547241a2593e6fecdee24d08b36561b1075a6c/styles.scssc new file mode 100644 index 0000000..0368776 Binary files /dev/null and b/.sass-cache/0e547241a2593e6fecdee24d08b36561b1075a6c/styles.scssc differ diff --git a/README.md b/README.md index a38d4d6..34cb9bc 100644 --- a/README.md +++ b/README.md @@ -4,3 +4,18 @@ assignment_bootstrap_sprint Pick yourself up! [A Bootstrap, HTM5 and SASS project from the Viking Code School](http://www.vikingcodeschool.com) + +

Maddie Rajavasireddy

+ +

Deployed at:

https://maddiereddy.github.io/assignment_bootstrap_sprint/index.html + +

Notes:

+ +1. Used Bootstrap 4.0 beta + +2. I did not implement the toggle navbar which is displayed when the screen size gets smaller than 768px +It seemed like too much work for something that is quite easily done in bootstrap. +I will come back to implement this fully after I am done with the Javascript section. + +3. I did all implementation just as the example screen at https://getbootstrap.com/docs/4.0/examples/jumbotron/ +for screen size greater than 768px and most of it (except for the toggle navbar) for screens smaller diff --git a/index.html b/index.html new file mode 100644 index 0000000..c8046f2 --- /dev/null +++ b/index.html @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+ Navbar + Home + Link + Disabled + + +
+ +
+ Action + Another action + Something else here +
+
+ + +
+ + +
+
+ + +
+
+
+

Hello, world!

+
+

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

+ +
+
+ + +
+
+
+

Heading

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat

+ +
+
+
+

Heading

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat

+ +
+
+
+

Heading

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat

+ +
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..f93c3a6 --- /dev/null +++ b/reset.css @@ -0,0 +1,46 @@ +//CSS RESET SECTION +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +// END CSS RESET SECTION diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..f921ec5 --- /dev/null +++ b/styles.css @@ -0,0 +1,133 @@ +body { + margin: 0; } + +.top-menu { + background-color: #262626; + font-family: Arial; + width: 100%; + height: 60px; + top: 0; + position: fixed; } + .top-menu a { + float: left; + font-size: 16px; + color: white; + text-align: center; + text-decoration: none; } + .top-menu #navbar { + font-size: 22px; + padding: 18px 14px; } + .top-menu #home, .top-menu #disabled, .top-menu #link { + padding: 22px 14px; } + .top-menu #disabled { + color: dimgray; } + .top-menu #link { + color: darkgray; } + .top-menu #link:hover { + color: whitesmoke; } + .top-menu .drop-down { + float: left; + overflow: hidden; } + .top-menu .drop-down button { + font-size: 16px; + border: none; + outline: none; + color: darkgray; + padding: 22px 14px; + background-color: inherit; } + .top-menu .drop-down:hover button { + color: whitesmoke; } + .top-menu .dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; } + .top-menu .dropdown-content a { + float: none; + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; } + .top-menu .dropdown-content a:hover { + background-color: #f2f2f2; } + .top-menu .drop-down:hover .dropdown-content { + display: block; } + .top-menu .search { + float: right; + margin: 10px; } + .top-menu .search input { + height: 40px; + width: 200px; + padding: 5px 10px; + border-radius: 5px; } + .top-menu .search button { + height: 40px; + width: 70px; + border: 2px solid #009900; + background-color: #262626; + color: #009900; + border-radius: 5px; + margin: auto 10px; } + @media only screen and (max-width: 768px) { + .top-menu .search, .top-menu #home, .top-menu #disabled, .top-menu #link, .top-menu .drop-down { + display: none; } } + +.jumbo-tron { + width: 100%; + height: 360px; + background-color: #eef2f7; + display: block; + font-family: 'Droid Sans', sans-serif; } + .jumbo-tron article { + width: 80%; + height: 260px; + margin: 60px 68px; + padding: 60px 0; } + .jumbo-tron article h1 { + font-size: 80px; + color: black; } + .jumbo-tron article p { + line-height: 24px; } + .jumbo-tron article button { + background-color: #1a53ff; + color: white; + height: 50px; + width: 150px; + border-radius: 8px; + font-size: 18px; } + .jumbo-tron article button span { + margin: 0; + font-size: 20px; } + +.articles { + display: block; + margin: 0 50px; } + .articles #card1, .articles #card2, .articles #card3 { + width: 27%; + height: 280px; + margin: 30px 18px; + float: left; } + @media only screen and (max-width: 768px) { + .articles #card1, .articles #card2, .articles #card3 { + width: 80%; + height: 180px; } } + .articles #card1 p, .articles #card2 p, .articles #card3 p { + line-height: 22px; } + .articles #card1 button, .articles #card2 button, .articles #card3 button { + background-color: #8f99a3; + color: white; + height: 40px; + width: 140px; + border-radius: 5px; } + .articles #card1 button span, .articles #card2 button span, .articles #card3 button span { + margin: 0; + font-size: 18px; } + +footer { + clear: both; + margin: 0 68px; } + +/*# sourceMappingURL=styles.css.map */ diff --git a/styles.css.map b/styles.css.map new file mode 100644 index 0000000..16eb70f --- /dev/null +++ b/styles.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["styles.scss"], +"names": [], +"file": "styles.css" +} \ No newline at end of file diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..493efcc --- /dev/null +++ b/styles.scss @@ -0,0 +1,211 @@ +$max-screen-width: 768px; + +body { + margin:0; +} + +//fixed navbar to top of page +.top-menu { + //overflow: hidden; -- this needs to removed as this will cause the menu dropdown not to be hidden + + background-color: #262626; + font-family: Arial; + width: 100%; + height: 60px; + top:0; //fixes navbar to top of page + position: fixed; + + a { + float: left; + font-size: 16px; + color: white; + text-align: center; + text-decoration: none; + } + + //Navbar link is made slighter bigger font than the other links + #navbar { + font-size: 22px; + padding: 18px 14px; + } + + #home, #disabled, #link { + padding: 22px 14px; + } + + //disabled link is made dark gray and no hover to show that it is disabled + #disabled { + color: dimgray; + } + + //Link has a color change on cursor hover + #link { + color: darkgray; + + &:hover { + color: whitesmoke; + } + } + + //dropdown menu - using button + .drop-down { + float: left; + overflow: hidden; + + button { + font-size: 16px; + border: none; + outline: none; + color: darkgray; + padding: 22px 14px; + background-color: inherit; + } + + &:hover button { + color: whitesmoke; + } + + } + + //dropdown menu is displayed only on hover + .dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + + a { + float: none; + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; + + &:hover { + background-color: #f2f2f2; + } + } + } + + .drop-down:hover .dropdown-content { + display: block; + } + + //search bar + .search { + float: right; + margin: 10px; + + input { + height: 40px; + width: 200px; + padding: 5px 10px; + border-radius: 5px; + } + + button { + height: 40px; + width: 70px; + border: 2px solid #009900; + background-color: #262626; + color: #009900; + border-radius: 5px; + margin: auto 10px; + } + } + + //most of navbar links and search bar are hidden when screen width decreases below 768px + @media only screen and (max-width: $max-screen-width) { + .search, #home, #disabled, #link, .drop-down { + display: none; + } + } +} + + +//Jumbotron styling +.jumbo-tron { + width: 100%; + height: 360px; + background-color: #eef2f7; + display: block; + font-family: 'Droid Sans', sans-serif; //using a different font + + article { + width: 80%; + height: 260px; + margin: 60px 68px; + padding: 60px 0; + + h1 { + font-size: 80px; + color: black; + } + + p { + line-height: 24px; + } + + button { + background-color: #1a53ff; + color: white; + height: 50px; + width: 150px; + border-radius: 8px; + font-size: 18px; + + span { + margin: 0; + font-size:20px; + } + } + } +} + + +//Articles section with 3 cards +.articles { + display: block; + margin: 0 50px; + + //cards are displayed in a row when screen size width is greater than 768px + #card1, #card2, #card3 { + width: 27%; + height: 280px; + margin: 30px 18px; + float: left; + + //cards are displayed one below the other when screen size width decreases below 768px + @media only screen and (max-width: $max-screen-width) { + width: 80%; + height: 180px; + } + + p { + line-height: 22px; + } + + button { + background-color: #8f99a3; + color: white; + height: 40px; + width: 140px; + border-radius: 5px; + + span { + margin: 0; + font-size:18px; + } + } + } +} + + +//footer styling +footer { + clear: both; + margin: 0 68px; +} \ No newline at end of file