From 152f836870deefd287eb7f7b03178f1b896bf779 Mon Sep 17 00:00:00 2001 From: tonye-d Date: Fri, 27 Oct 2017 14:40:05 +0100 Subject: [PATCH 1/3] done with nav --- images/logo_statcounter_2017.svg | 31 +++++++++++++ styles.css | 75 ++++++++++++++++++++++++++++-- styles.css.map | 2 +- styles.sass | 78 ++++++++++++++++++++++++++++++-- summary.html | 72 ++++++++++++++++++++++++++++- 5 files changed, 245 insertions(+), 13 deletions(-) create mode 100644 images/logo_statcounter_2017.svg diff --git a/images/logo_statcounter_2017.svg b/images/logo_statcounter_2017.svg new file mode 100644 index 0000000..c426b03 --- /dev/null +++ b/images/logo_statcounter_2017.svg @@ -0,0 +1,31 @@ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css index 22c7763..82a202a 100644 --- a/styles.css +++ b/styles.css @@ -3,16 +3,81 @@ section { } section .nav { - width: 15%; - background-color: pink; + width: 16%; + background-color: #064685; height: 100vh; position: fixed; - color: yellow; + padding: 3px 7px; + overflow-y: scroll; +} + +section .nav h3 { + font-size: 2.2rem; + color: #235ea1; + font-weight: 100; +} + +section .nav #form { + padding-bottom: 15px; + display: none; +} + +section .nav #form input[type=text], section .nav #form input[type=password] { + padding: 2px; + border-radius: 5px; + margin: 3px 0px; + width: 130px; +} + +section .nav #form .remember { + font-size: 1.0em; + color: white; +} + +section .nav #form button { + background-color: transparent; + border: none; + margin: 10px 0px 0px 0px; + color: white; + border-radius: 5px; + transition: 0.5s; +} + +section .nav #form button:hover { + background-color: #99a1c0; + transition: 0.5s; +} + +section .nav #form a { + text-decoration: none; + transition: 0.5s; + color: #e7eff5; +} + +section .nav #form a:hover { + color: white; + transition: 0.5s; +} + +section .nav .links { + padding: 5px 0px; +} + +section .nav .links a { + text-decoration: none; + font-size: 0.8em; + transition: 0.5s; + color: #e7eff5; +} + +section .nav .links a:hover { + color: white; + transition: 0.5s; } section .main { - width: 85%; - margin-left: 15%; + width: 84%; + margin-left: 16%; background-color: lightblue; height: 150vh; } diff --git a/styles.css.map b/styles.css.map index a08907a..8f34191 100644 --- a/styles.css.map +++ b/styles.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "AAAA,AAAA,OAAO,CAAC;EACN,OAAO,EAAE,IAAI;CAcQ;;AAfvB,AAIE,OAJK,CAIL,IAAI,CAAC;EACH,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,IAAI;EACtB,MAAM,EAAE,KAAK;EACb,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,MAAM;CAAI;;AATrB,AAWE,OAXK,CAWL,KAAK,CAAC;EACJ,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,GAAG;EAChB,gBAAgB,EAAE,SAAS;EAC3B,MAAM,EAAE,KAAK;CAAI", + "mappings": "AAAA,AAAA,OAAO,CAAC;EACN,OAAO,EAAE,IAAI;CAkFQ;;AAnFvB,AAIE,OAJK,CAIL,IAAI,CAAC;EACH,KAAK,EAAE,GAAG;EACV,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,KAAK;EACb,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,OAAO;EAChB,UAAU,EAAE,MAAM;CAsDU;;AAhEhC,AAaI,OAbG,CAIL,IAAI,CASF,EAAE,CAAC;EACD,SAAS,EAAE,MAAM;EACjB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;CAAI;;AAhB1B,AAmBI,OAnBG,CAIL,IAAI,CAeF,KAAK,CAAC;EACJ,cAAc,EAAE,IAAI;EACpB,OAAO,EAAE,IAAI;CA8BW;;AAnD9B,AAsBM,OAtBC,CAIL,IAAI,CAeF,KAAK,CAGH,KAAK,CAAA,AAAA,IAAC,CAAD,IAAC,AAAA,GAtBZ,AAsBwB,OAtBjB,CAIL,IAAI,CAeF,KAAK,CAGe,KAAK,CAAA,AAAA,IAAC,CAAD,QAAC,AAAA,EAAe;EACrC,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,KAAK;CAAI;;AA1BxB,AA4BM,OA5BC,CAIL,IAAI,CAeF,KAAK,CASH,SAAS,CAAC;EACR,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,KAAK;CAAI;;AA9BxB,AAgCM,OAhCC,CAIL,IAAI,CAeF,KAAK,CAaH,MAAM,CAAC;EACL,gBAAgB,EAAE,WAAW;EAC7B,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,gBAAgB;EACxB,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,GAAG;EAClB,UAAU,EAAE,IAAI;CAAI;;AAtC5B,AAwCM,OAxCC,CAIL,IAAI,CAeF,KAAK,CAqBH,MAAM,AAAA,MAAM,CAAC;EACX,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,IAAI;CAAI;;AA1C5B,AA4CM,OA5CC,CAIL,IAAI,CAeF,KAAK,CAyBH,CAAC,CAAC;EACA,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,OAAO;CAAI;;AA/C1B,AAiDM,OAjDC,CAIL,IAAI,CAeF,KAAK,CA8BH,CAAC,AAAA,MAAM,CAAC;EACN,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,IAAI;CAAI;;AAnD5B,AAqDI,OArDG,CAIL,IAAI,CAiDF,MAAM,CAAC;EACL,OAAO,EAAE,OAAO;CAUQ;;AAhE9B,AAwDM,OAxDC,CAIL,IAAI,CAiDF,MAAM,CAGJ,CAAC,CAAC;EACA,eAAe,EAAE,IAAI;EACrB,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,OAAO;CAAI;;AA5D1B,AA8DM,OA9DC,CAIL,IAAI,CAiDF,MAAM,CASJ,CAAC,AAAA,MAAM,CAAC;EACN,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,IAAI;CAAI;;AAhE5B,AA+EE,OA/EK,CA+EL,KAAK,CAAC;EACJ,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,GAAG;EAChB,gBAAgB,EAAE,SAAS;EAC3B,MAAM,EAAE,KAAK;CAAI", "sources": [ "styles.sass" ], diff --git a/styles.sass b/styles.sass index c317b57..7e136a5 100644 --- a/styles.sass +++ b/styles.sass @@ -3,14 +3,82 @@ section .nav - width: 15% - background-color: pink + width: 16% + background-color: #064685 height: 100vh position: fixed - color: yellow + padding: 3px 7px + overflow-y: scroll + + + h3 + font-size: 2.2rem + color: #235ea1 + font-weight: 100 + + + #form + padding-bottom: 15px + display: none + input[type=text], input[type=password] + padding: 2px + border-radius: 5px + margin: 3px 0px + width: 130px + + .remember + font-size: 1.0em + color: white + + button + background-color: transparent + border: none + margin: 10px 0px 0px 0px + color: white + border-radius: 5px + transition: 0.5s + + button:hover + background-color: #99a1c0 + transition: 0.5s + + a + text-decoration: none + transition: 0.5s + color: #e7eff5 + + a:hover + color: white + transition: 0.5s + + .links + padding: 5px 0px + + a + text-decoration: none + font-size: 0.8em + transition: 0.5s + color: #e7eff5 + + a:hover + color: white + transition: 0.5s + + + + + + + + + + + + + .main - width: 85% - margin-left: 15% + width: 84% + margin-left: 16% background-color: lightblue height: 150vh \ No newline at end of file diff --git a/summary.html b/summary.html index 5ce4494..d2dc357 100644 --- a/summary.html +++ b/summary.html @@ -16,10 +16,78 @@
+