From 6c661517229347793f3892a32200f1978fa78914 Mon Sep 17 00:00:00 2001 From: Leonidas Esteban Date: Sat, 16 May 2020 21:20:18 -0500 Subject: [PATCH] header done --- challenge/images/logo-bookmark-white.svg | 1 + index.html | 61 +++++++++-- src/stylus/header.styl | 20 ++++ src/stylus/hero.styl | 2 + src/stylus/menu.styl | 55 ++++++++++ src/stylus/styles.styl | 22 ++++ static/css/styles.css | 102 ++++++++++++++++++ static/images/bg-dots.svg | 1 + static/images/favicon-32x32.png | Bin 0 -> 1063 bytes static/images/icon-arrow.svg | 1 + static/images/icon-close.svg | 1 + static/images/icon-error.svg | 1 + static/images/icon-facebook.svg | 1 + static/images/icon-hamburger.svg | 1 + static/images/icon-twitter.svg | 1 + static/images/illustration-features-tab-1.svg | 1 + static/images/illustration-features-tab-2.svg | 1 + static/images/illustration-features-tab-3.svg | 1 + static/images/illustration-hero.svg | 1 + static/images/logo-bookmark-white.svg | 1 + static/images/logo-bookmark.svg | 1 + static/images/logo-chrome.svg | 1 + static/images/logo-firefox.svg | 1 + static/images/logo-opera.svg | 1 + 24 files changed, 269 insertions(+), 10 deletions(-) create mode 100644 challenge/images/logo-bookmark-white.svg create mode 100644 src/stylus/header.styl create mode 100644 src/stylus/hero.styl create mode 100644 src/stylus/menu.styl create mode 100644 src/stylus/styles.styl create mode 100644 static/css/styles.css create mode 100644 static/images/bg-dots.svg create mode 100644 static/images/favicon-32x32.png create mode 100644 static/images/icon-arrow.svg create mode 100644 static/images/icon-close.svg create mode 100644 static/images/icon-error.svg create mode 100644 static/images/icon-facebook.svg create mode 100644 static/images/icon-hamburger.svg create mode 100644 static/images/icon-twitter.svg create mode 100644 static/images/illustration-features-tab-1.svg create mode 100644 static/images/illustration-features-tab-2.svg create mode 100644 static/images/illustration-features-tab-3.svg create mode 100644 static/images/illustration-hero.svg create mode 100644 static/images/logo-bookmark-white.svg create mode 100644 static/images/logo-bookmark.svg create mode 100644 static/images/logo-chrome.svg create mode 100644 static/images/logo-firefox.svg create mode 100644 static/images/logo-opera.svg diff --git a/challenge/images/logo-bookmark-white.svg b/challenge/images/logo-bookmark-white.svg new file mode 100644 index 0000000..199ead1 --- /dev/null +++ b/challenge/images/logo-bookmark-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 6e359e0..3a223cd 100644 --- a/index.html +++ b/index.html @@ -7,26 +7,67 @@ - + + Frontend Mentor | Bookmark landing page + +
+
+
+ + + + +
+
+
+
+

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.

+ + + +
+ + + + + - 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 diff --git a/src/stylus/header.styl b/src/stylus/header.styl new file mode 100644 index 0000000..bcd25cd --- /dev/null +++ b/src/stylus/header.styl @@ -0,0 +1,20 @@ +@import "./menu.styl" + +.header + background: white + position sticky + top 0 + left 0 + right 0 + padding 1.5em 0 + transition .3s background + &-logo + display inline-flex + width 150px + height 40px + background url('../images/logo-bookmark.svg') no-repeat center + background-size contain + &-content + display flex + justify-content: space-between + align-items: center \ No newline at end of file diff --git a/src/stylus/hero.styl b/src/stylus/hero.styl new file mode 100644 index 0000000..84a310a --- /dev/null +++ b/src/stylus/hero.styl @@ -0,0 +1,2 @@ +.hero + border: 1px solid red; \ No newline at end of file diff --git a/src/stylus/menu.styl b/src/stylus/menu.styl new file mode 100644 index 0000000..5f83732 --- /dev/null +++ b/src/stylus/menu.styl @@ -0,0 +1,55 @@ +.menu + // display: none + visibility hidden + position: absolute + opacity 0 + left 0 + right 0 + top: 100% + background rgba(47, 53, 79, .9) + height 100vh + transform translateY(-50px) + transition .3s transform, .3s opacity + will-change transform + ul + padding 0 + list-style: none + li + border-top 1px solid var(--grayishBlue) + &:last-child + a + border: 2px solid white; + border-radius: 5px + margin-top 1em + padding .7em + a + color white + text-decoration: none + text-transform: uppercase + // border: 1px solid red; + display: block + text-align: center + padding 1em + letter-spacing: 2px + &-open + user-select: none + width 40px + height 40px + display inline-flex + cursor pointer + background url('../images/icon-hamburger.svg') no-repeat center + &-checkbox + display none + &:checked + & ~ .header + background: rgba(47, 53, 79, .9) + .menu-open + background-image url('../images/icon-close.svg') + & .header-logo + background-image: url('../images/logo-bookmark-white.svg') + & .menu + transform translateY(0) + visibility visible + opacity 1 + + diff --git a/src/stylus/styles.styl b/src/stylus/styles.styl new file mode 100644 index 0000000..6995c30 --- /dev/null +++ b/src/stylus/styles.styl @@ -0,0 +1,22 @@ +@import './header.styl' +@import './hero.styl' + +:root + --softBlue: hsl(231, 69%, 60%) + --softRed: hsl(0, 94%, 66%) + --grayishBlue: hsl(229, 8%, 60%) + --veryDarkBlue: hsl(229, 31%, 21%) + + +body + background: lightgray + font-family: 'Rubik', sans-serif + color var(--veryDarkBlue) + margin: 0 + font-size 18px + +.u-wrapper + max-width 1280px + margin auto + padding 0 1em + diff --git a/static/css/styles.css b/static/css/styles.css new file mode 100644 index 0000000..7d530b6 --- /dev/null +++ b/static/css/styles.css @@ -0,0 +1,102 @@ +.menu { + visibility: hidden; + position: absolute; + opacity: 0; + left: 0; + right: 0; + top: 100%; + background: rgba(47,53,79,0.9); + height: 100vh; + transform: translateY(-50px); + transition: 0.3s transform, 0.3s opacity; + will-change: transform; +} +.menu ul { + padding: 0; + list-style: none; +} +.menu li { + border-top: 1px solid var(--grayishBlue); +} +.menu li:last-child a { + border: 2px solid #fff; + border-radius: 5px; + margin-top: 1em; + padding: 0.7em; +} +.menu a { + color: #fff; + text-decoration: none; + text-transform: uppercase; + display: block; + text-align: center; + padding: 1em; + letter-spacing: 2px; +} +.menu-open { + user-select: none; + width: 40px; + height: 40px; + display: inline-flex; + cursor: pointer; + background: url("../images/icon-hamburger.svg") no-repeat center; +} +.menu-checkbox { + display: none; +} +.menu-checkbox:checked ~ .header { + background: rgba(47,53,79,0.9); +} +.menu-checkbox:checked ~ .header .menu-open { + background-image: url("../images/icon-close.svg"); +} +.menu-checkbox:checked ~ .header .header-logo { + background-image: url("../images/logo-bookmark-white.svg"); +} +.menu-checkbox:checked ~ .header .menu { + transform: translateY(0); + visibility: visible; + opacity: 1; +} +.header { + background: #fff; + position: sticky; + top: 0; + left: 0; + right: 0; + padding: 1.5em 0; + transition: 0.3s background; +} +.header-logo { + display: inline-flex; + width: 150px; + height: 40px; + background: url("../images/logo-bookmark.svg") no-repeat center; + background-size: contain; +} +.header-content { + display: flex; + justify-content: space-between; + align-items: center; +} +.hero { + border: 1px solid #f00; +} +:root { + --softBlue: #5368df; + --softRed: #fa5757; + --grayishBlue: #9194a1; + --veryDarkBlue: #252b46; +} +body { + background: #d3d3d3; + font-family: 'Rubik', sans-serif; + color: var(--veryDarkBlue); + margin: 0; + font-size: 18px; +} +.u-wrapper { + max-width: 1280px; + margin: auto; + padding: 0 1em; +} diff --git a/static/images/bg-dots.svg b/static/images/bg-dots.svg new file mode 100644 index 0000000..3fb0424 --- /dev/null +++ b/static/images/bg-dots.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/favicon-32x32.png b/static/images/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..1e2df7f089f46dd930239e418bf13e8e4c1cca0f GIT binary patch literal 1063 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+081EY0-Plzi}!G9Wnr(eF` z|M+F+!xzhMK3;zF(cgdn_B?v|`rD7+fB)V2@MY=EN9|{BEWPpQ{f}RtfBl|!^+Ea3 z%d2iZe)i@2x9`6{eg66V&!4ULpSPU4KJ)Uu^RM22`~BzO$wz&&PyPA(@7<4I`yRjQ zJAZr1#XB#){D-o5+r^Vjdc3)fsquh@R{^yA;Z|8C!Zw`1zDvzMNK{QUFr z^G~yvU&yK5nOnE3q5ts2d8Z#d`S9=G|MwriU%2{m%ii0owp@Sy>dXGuA$NemCsPvS z7YvLEt(>(tKmBDkpML+hROc(RL;oBPGFiO5x8~1ErS?rgb&N^g?k~Ih+L^ zk;M!Q+`=Ht$S`Y;1W=H@#M9T6{SlWiKeL>x)y)*39#2mf#}JFtt&`J}n+ycniko-@ z3;26vOWyCzeS7I$?C$UX{_kIKV}WAF+24(KRQ;Wbm=(hXgpO=b(eBb|byZ~P5M3dt zyDB-nDx`Zw9LoWN-GrY`kHxRfy}Q3KfBxRdclJCv_%N_mL-x0j+x*I+s%JIY&vgg3Y zTes?8j%DMbh5PocynFBNZJq}$w`Q+tKfe6=^y}tkkv_Zb+uQBmSHB|O-+X(*4%OrO zQF%8%OSj*z`t$7X`oHyz%ReTa40^8r7Z}c}C9V-ADTyViR>?)FK#IZ0z|cb1&_LJF zGQ`l-%D~vl*g)IB$jZQAv*1E06b-rgDVb@NxHTN|kz5AU01WSllAy$Lg@U5|w9K4T zg_6pGRE5lfl4J&kiaC!z@o*G|X=t4CKYhmYX%GXmGPhnbx3IFX_hb=fVFi~4lfx;@ u%9}$JPT#n4;>ejJGDp}?H+U@Y(qnifE?Dx($#g2v3I \ No newline at end of file diff --git a/static/images/icon-close.svg b/static/images/icon-close.svg new file mode 100644 index 0000000..0777feb --- /dev/null +++ b/static/images/icon-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icon-error.svg b/static/images/icon-error.svg new file mode 100644 index 0000000..0d608ac --- /dev/null +++ b/static/images/icon-error.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icon-facebook.svg b/static/images/icon-facebook.svg new file mode 100644 index 0000000..ff120c2 --- /dev/null +++ b/static/images/icon-facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icon-hamburger.svg b/static/images/icon-hamburger.svg new file mode 100644 index 0000000..248cb5c --- /dev/null +++ b/static/images/icon-hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/icon-twitter.svg b/static/images/icon-twitter.svg new file mode 100644 index 0000000..5d36a4e --- /dev/null +++ b/static/images/icon-twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/illustration-features-tab-1.svg b/static/images/illustration-features-tab-1.svg new file mode 100644 index 0000000..32f541a --- /dev/null +++ b/static/images/illustration-features-tab-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/illustration-features-tab-2.svg b/static/images/illustration-features-tab-2.svg new file mode 100644 index 0000000..3a642a6 --- /dev/null +++ b/static/images/illustration-features-tab-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/illustration-features-tab-3.svg b/static/images/illustration-features-tab-3.svg new file mode 100644 index 0000000..0beaea8 --- /dev/null +++ b/static/images/illustration-features-tab-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/illustration-hero.svg b/static/images/illustration-hero.svg new file mode 100644 index 0000000..86bdfff --- /dev/null +++ b/static/images/illustration-hero.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/logo-bookmark-white.svg b/static/images/logo-bookmark-white.svg new file mode 100644 index 0000000..ea4a16d --- /dev/null +++ b/static/images/logo-bookmark-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/logo-bookmark.svg b/static/images/logo-bookmark.svg new file mode 100644 index 0000000..1ada36c --- /dev/null +++ b/static/images/logo-bookmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/logo-chrome.svg b/static/images/logo-chrome.svg new file mode 100644 index 0000000..79c250a --- /dev/null +++ b/static/images/logo-chrome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/logo-firefox.svg b/static/images/logo-firefox.svg new file mode 100644 index 0000000..f4ea201 --- /dev/null +++ b/static/images/logo-firefox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/logo-opera.svg b/static/images/logo-opera.svg new file mode 100644 index 0000000..4ae1639 --- /dev/null +++ b/static/images/logo-opera.svg @@ -0,0 +1 @@ + \ No newline at end of file