diff --git a/css/index.css b/css/index.css index 06b8de6..4155ac1 100644 --- a/css/index.css +++ b/css/index.css @@ -1,33 +1,136 @@ +.container { + padding: 3rem; +} + +* { + padding: 0; + margin: 0; + text-decoration: none; + list-style: none; + box-sizing: border-box; + font-family: "Montserrat", sans-serif; +} + .navbar { display: flex; justify-content: space-between; + align-items: center; +} + +.bookmark { + width: 12rem; } .nav { list-style-type: none; - margin: 0; - padding: 0; -} -.nav li { - display: inline; + display: flex; + align-items: center; } .nav li a { padding: 0 12px; text-decoration: none; - color: #000000; } .nav li a:hover { color: #ff0000; } -button { +#button { border-radius: 3px; - cursor: pointer; - padding: 5px 15px; + padding: 8px 16px; + background-color: #ff0000; + border: none; + margin-left: 2px; + color: #ffffff; } -button:hover { +#button:hover { + border: 2px solid #ff0000; + cursor: pointer; + background-color: transparent; color: #ff0000; border-color: #ff0000; } +.hamburger { + display: none; + z-index: 1; +} + +.icon { + display: none; + position: fixed; + bottom: 0; + margin-left: 20%; +} + +#fb { + margin-right: 30px; +} + +@media (max-width: 290px) { + .icon { + margin-left: 10%; + } + + .bookmark { + width: 10rem; + } +} +@media (max-width: 560px) { + .hamburger { + position: relative; + z-index: 1; + display: block; + cursor: pointer; + } + + .icon { + display: block; + margin-top: 10rem; + border: none; + } + + .fb { + margin-right: 2rem; + } + + .border-top { + border-top: 2px solid #464646; + } + + .nav { + position: fixed; + top: -110%; + left: 0; + width: 100%; + height: 100vh; + padding: 8rem 3rem; + text-align: center; + flex-direction: column; + align-items: stretch; + background-color: rgba(44, 62, 80, 0.6); + } + .nav li { + display: block; + border-width: 100%; + padding: 25px; + } + .nav li a { + font-size: 20px; + color: #ffffff; + } + + .show { + top: 0; + } + + #button { + padding: 2% 40%; + background-color: transparent; + border: 3px solid #ffffff; + color: #ffffff; + margin-left: -10px; + font-size: 20px; + } +} + /*# sourceMappingURL=index.css.map */ diff --git a/css/index.css.map b/css/index.css.map index ba5125a..a5652ed 100644 --- a/css/index.css.map +++ b/css/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/partials/_header.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA,OAjBE;;AAkBF;EACI,OAlBJ;;;AAwBZ;EACI;EACA,QAzBK;EA0BL;;AACA;EAEI,OA9BI;EA+BJ,cA/BI","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/partials/_header.scss"],"names":[],"mappings":"AAII;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;AAEI;EACI;EACA;;AAEA;EACI,OApCJ;;;AA0CZ;EACI;EACA;EACA,kBA7CQ;EA8CR;EACA;EACA,OA/CU;;AAgDV;EACI;EACA,QAjDC;EAkDD;EACA,OArDI;EAsDJ,cAtDI;;;AA0DZ;EACI;EAEA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;IACI;;;EAEJ;IACI;;;AAIR;EACI;IACI;IACA;IACA;IACA;;;EAEJ;IACI;IACA;IACA;;;EAEJ;IACI;;;EAEJ;IACI;;;EAEJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EACA;IACI;IACA;IACA;;EACA;IACI;IACA,OAtHF;;;EA0HV;IACI;;;EAEJ;IACI;IACA;IACA;IACA,OAjIM;IAkIN;IACA","file":"index.css"} \ No newline at end of file diff --git a/index.html b/index.html index 8c5eb62..2d54917 100644 --- a/index.html +++ b/index.html @@ -16,60 +16,78 @@ + +
-
- - -
+
- Features Pricing Contact Login A Simple Bookmark Manager A clean and simple interface to organize your favourite websites. Open a new browser tab and see your sites load instantly. Try it for free. Get it on Chrome Get it on Firefox Features Our aim is + - What is Bookmark? + - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt justo eget ultricies fringilla. Phasellus blandit ipsum quis quam ornare mattis. + - How can I request a new browser? + - Vivamus luctus eros aliquet convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdiet. Vivamus luctus eros aliquet convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdie tVivamus luctus eros aliquet - convallis ultricies. Mauris augue massa, ultricies non ligula. Suspendisse imperdiet. + - Is there a mobile app? + - Sed consectetur quam id neque fermentum accumsan. Praesent luctus vestibulum dolor, ut condimentum urna vulputate eget. Cras in ligula quis est pharetra mattis sit amet pharetra purus. Sed sollicitudin ex et ultricies bibendum. + - What about other Chromium browsers? + - Integer condimentum ipsum id imperdiet finibus. Vivamus in placerat mi, at euismod dui. Aliquam vitae neque eget nisl gravida pellentesque non ut velit. More Info 35,000+ already joined Stay up-to-date with what we’re doing Contact Us Features Pricing - Contact +
+ \ No newline at end of file diff --git a/scss/partials/_header.scss b/scss/partials/_header.scss index 3790371..96db59e 100644 --- a/scss/partials/_header.scss +++ b/scss/partials/_header.scss @@ -1,35 +1,143 @@ -$color-black: #000000; -$color-red: #ff0000; -$cursor: pointer; -.navbar { - display: flex; - justify-content: space-between; -} - -.nav { - list-style-type: none; - margin: 0; - padding: 0; - li { - display: inline; - a { - padding: 0 12px; - text-decoration: none; - color: $color-black; - &:hover { - color: $color-red; + $color-black: #000000; + $color-red: #ff0000; + $color-white: #ffffff; + $cursor: pointer; + .container { + padding: 3rem; + } + + * { + padding: 0; + margin: 0; + text-decoration: none; + list-style: none; + box-sizing: border-box; + font-family: 'Montserrat', sans-serif; + } + + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + .bookmark { + width: 12rem; + } + + .nav { + list-style-type: none; + display: flex; + align-items: center; + li { + a { + padding: 0 12px; + text-decoration: none; + // color: $color-black; + &:hover { + color: $color-red; + } } } } -} - -button { - border-radius: 3px; - cursor: $cursor; - padding: 5px 15px; - &:hover { - // border-radius: 3px; - color: $color-red; - border-color: $color-red; + + #button { + border-radius: 3px; + padding: 8px 16px; + background-color: $color-red; + border: none; + margin-left: 2px; + color: $color-white; + &:hover { + border: 2px solid $color-red; + cursor: $cursor; + background-color: transparent; + color: $color-red; + border-color: $color-red; + } + } + + .hamburger { + display: none; + // float: right; + z-index: 1; + } + + .icon { + display: none; + position: fixed; + bottom: 0; + margin-left: 20%; + } + + #fb { + margin-right: 30px; } -} \ No newline at end of file + + @media(max-width:290px) { + .icon { + margin-left: 10%; + } + .bookmark { + width: 10rem; + } + } + + @media(max-width:560px) { + .hamburger { + position: relative; + z-index: 1; + display: block; + cursor: pointer; + } + .icon { + display: block; + margin-top: 10rem; + border: none; + } + .fb { + margin-right: 2rem; + } + .border-top { + border-top: 2px solid #464646 + } + .nav { + position: fixed; + top: -110%; + left: 0; + width: 100%; + height: 100vh; + padding: 8rem 3rem; + text-align: center; + flex-direction: column; + align-items: stretch; + background-color: rgba(#2c3e50, 0.6); + li { + display: block; + border-width: 100%; + padding: 25px; + a { + font-size: 20px; + color: $color-white; + } + } + } + .show { + top: 0; + } + #button { + padding: 2% 40%; + background-color: transparent; + border: 3px solid $color-white; + color: $color-white; + margin-left: -10px; + font-size: 20px; + //&:hover { + // border: 2px solid red; + // cursor: $cursor; + // background-color: transparent; + // color: $color-red; + // border-color: $color-red; + // } + } + } \ No newline at end of file