diff --git a/assets/nav-icons/github-icon.png b/assets/nav-icons/github-icon.png
new file mode 100644
index 0000000..d8597a3
Binary files /dev/null and b/assets/nav-icons/github-icon.png differ
diff --git a/assets/nav-icons/linkedin-icon.png b/assets/nav-icons/linkedin-icon.png
new file mode 100644
index 0000000..7d6cea1
Binary files /dev/null and b/assets/nav-icons/linkedin-icon.png differ
diff --git a/dist/main.css b/dist/main.css
index ca03696..6425150 100644
--- a/dist/main.css
+++ b/dist/main.css
@@ -1,4 +1,3 @@
-@import url(https://fonts.googleapis.com/css2?family=Allura&display=swap);
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
@@ -134,6 +133,6 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
-header{padding:20px}header h1{font-family:"Allura",cursive;font-size:4em;color:pink}#canvas{border:2px solid pink;background-color:#fff;cursor:crosshair}#menu{display:flex;align-items:center;justify-content:space-around;width:100%;position:fixed;bottom:0;left:50%;transform:translateX(-50%);padding:20px;cursor:pointer}input[type=color]{height:40px;width:40px;border-radius:50%;border:2px solid pink;margin:0 5px;padding:0;background-color:rgba(0,0,0,0)}input[type=color]::-webkit-color-swatch{border:2px solid pink;border-radius:50%;padding:0}input[type=color]::-webkit-color-swatch-wrapper{border:none}input[type=radio]{display:none}input[type=radio]+label img{height:40px;width:40px;margin-bottom:5px}button{background-color:pink;color:#fff;padding:10px;border:none;border-radius:5px;height:40px}button img{max-height:100%}button:hover{transition:.5s;background-color:#000}body{background-color:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:200;margin:0}
+header{padding:20px;position:relative;display:flex;justify-content:space-between;align-items:center}header h1{font-family:"Allura",cursive;font-size:4em;color:pink}.links a{margin-left:20px}.links img{height:45px}#canvas{border:2px solid pink;background-color:#fff;cursor:crosshair}#menu{display:flex;align-items:center;justify-content:space-around;width:100%;position:fixed;bottom:0;left:50%;transform:translateX(-50%);padding:20px;cursor:pointer}input[type=color]{height:40px;width:40px;border-radius:50%;border:2px solid pink;margin:0 5px;padding:0;background-color:rgba(0,0,0,0)}input[type=color]::-webkit-color-swatch{border:2px solid pink;border-radius:50%;padding:0}input[type=color]::-webkit-color-swatch-wrapper{border:none}input[type=radio]{display:none}input[type=radio]+label img{height:40px;width:40px;margin-bottom:5px}button{background-color:pink;color:#fff;padding:10px;border:none;border-radius:5px;height:40px}button img{max-height:100%}button:hover{transition:.5s;background-color:#000}body{background-color:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:200;margin:0}
/*# sourceMappingURL=main.css.map*/
\ No newline at end of file
diff --git a/dist/main.css.map b/dist/main.css.map
index 1a4e475..cdef967 100644
--- a/dist/main.css.map
+++ b/dist/main.css.map
@@ -1 +1 @@
-{"version":3,"file":"main.css","mappings":";AAAA;;;CAGC;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFE,SAAS;EACT,UAAU;EACV,SAAS;EACT,eAAe;EACf,aAAa;EACb,wBAAwB;AAC1B;;AAEA,gDAAgD;AAChD;;;;;;;;;;;EAWE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;;EAEE,YAAY;AACd;;AAEA;;;;EAIE,WAAW;EACX,aAAa;AACf;;AAEA;EACE,yBAAyB;EACzB,iBAAiB;AACnB,C;ACpIA,OACE,aAGF,UACE,6BACA,cACA,WCTF,QACE,sBACA,sBACA,iBCHF,MACE,aACA,mBACA,6BACA,WACA,eACA,SACA,SACA,2BACA,aACA,eAIF,kBACE,YACA,WACA,kBACA,sBACA,aACA,UACA,+BAGF,wCACE,sBACA,kBACA,UAGF,gDACE,YAGF,kBACE,aAGF,4BACE,YACA,WACA,kBAGF,OACE,sBACA,WACA,aACA,YACA,kBACA,YAGF,WACE,gBAGF,aACE,eACA,sBCtDF,KACE,sBACA,WACA,uCACA,gBACA,S","sources":["webpack://canvas-project/./src/styles/reset.css","webpack://canvas-project/./src/styles/header.scss","webpack://canvas-project/./src/styles/canvas.scss","webpack://canvas-project/./src/styles/menu.scss","webpack://canvas-project/./src/index.scss"],"sourcesContent":["/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n content: '';\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}","@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');\n\nheader {\n padding: 20px;\n}\n\nheader h1 {\n font-family: 'Allura', cursive;\n font-size: 4em;\n color: pink\n}","#canvas {\n border: 2px solid pink;\n background-color: white;\n cursor: crosshair;\n}\n\n","#menu {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n padding: 20px;\n cursor: pointer;\n}\n\n// colors\ninput[type=\"color\"] {\n height: 40px;\n width: 40px;\n border-radius: 50%;\n border: 2px solid pink;\n margin: 0 5px;\n padding: 0;\n background-color: transparent;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch {\n border: 2px solid pink;\n border-radius: 50%;\n padding: 0;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch-wrapper {\n border: none;\n}\n\ninput[type=\"radio\"] {\n display: none;\n}\n\ninput[type=\"radio\"]+label img {\n height: 40px;\n width: 40px;\n margin-bottom: 5px;\n}\n\nbutton {\n background-color: pink;\n color: white;\n padding: 10px;\n border: none;\n border-radius: 5px;\n height: 40px;\n}\n\nbutton img {\n max-height: 100%;\n}\n\nbutton:hover {\n transition: 0.5s;\n background-color: black;\n}\n\n","@import \"./styles/reset.css\";\n@import \"./styles/header.scss\";\n@import \"./styles/canvas.scss\";\n@import \"./styles/menu.scss\";\n\nbody {\n background-color: black;\n color: white;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: 200;\n margin: 0;\n}"],"names":[],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"main.css","mappings":"AAAA;;;CAGC;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFE,SAAS;EACT,UAAU;EACV,SAAS;EACT,eAAe;EACf,aAAa;EACb,wBAAwB;AAC1B;;AAEA,gDAAgD;AAChD;;;;;;;;;;;EAWE,cAAc;AAChB;;AAEA;EACE,cAAc;AAChB;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;;EAEE,YAAY;AACd;;AAEA;;;;EAIE,WAAW;EACX,aAAa;AACf;;AAEA;EACE,yBAAyB;EACzB,iBAAiB;AACnB,C;ACtIQ,OCCN,aACA,kBACA,aACA,8BACA,mBAGF,UACE,6BACA,cACA,WAGF,SACE,iBAGF,WACE,YCnBF,QACE,sBACA,sBACA,iBCHF,MACE,aACA,mBACA,6BACA,WACA,eACA,SACA,SACA,2BACA,aACA,eAIF,kBACE,YACA,WACA,kBACA,sBACA,aACA,UACA,+BAGF,wCACE,sBACA,kBACA,UAGF,gDACE,YAGF,kBACE,aAGF,4BACE,YACA,WACA,kBAGF,OACE,sBACA,WACA,aACA,YACA,kBACA,YAGF,WACE,gBAGF,aACE,eACA,sBHtDF,KACE,sBACA,WACA,uCACA,gBACA,S","sources":["webpack://canvas-project/./src/styles/reset.css","webpack://canvas-project/./src/index.scss","webpack://canvas-project/./src/styles/header.scss","webpack://canvas-project/./src/styles/canvas.scss","webpack://canvas-project/./src/styles/menu.scss"],"sourcesContent":["/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n content: '';\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}","@import \"./styles/reset.css\";\n@import \"./styles/header.scss\";\n@import \"./styles/canvas.scss\";\n@import \"./styles/menu.scss\";\n\nbody {\n background-color: black;\n color: white;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: 200;\n margin: 0;\n}","header {\n padding: 20px;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\nheader h1 {\n font-family: 'Allura', cursive;\n font-size: 4em;\n color: pink;\n}\n\n.links a {\n margin-left: 20px;\n}\n\n.links img {\n height: 45px;\n}\n\n","#canvas {\n border: 2px solid pink;\n background-color: white;\n cursor: crosshair;\n}\n\n","#menu {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n padding: 20px;\n cursor: pointer;\n}\n\n// colors\ninput[type=\"color\"] {\n height: 40px;\n width: 40px;\n border-radius: 50%;\n border: 2px solid pink;\n margin: 0 5px;\n padding: 0;\n background-color: transparent;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch {\n border: 2px solid pink;\n border-radius: 50%;\n padding: 0;\n}\n\ninput[type=\"color\"]::-webkit-color-swatch-wrapper {\n border: none;\n}\n\ninput[type=\"radio\"] {\n display: none;\n}\n\ninput[type=\"radio\"]+label img {\n height: 40px;\n width: 40px;\n margin-bottom: 5px;\n}\n\nbutton {\n background-color: pink;\n color: white;\n padding: 10px;\n border: none;\n border-radius: 5px;\n height: 40px;\n}\n\nbutton img {\n max-height: 100%;\n}\n\nbutton:hover {\n transition: 0.5s;\n background-color: black;\n}\n\n"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/index.html b/index.html
index b7b66af..0a453ad 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,19 @@
Canvas
+
+
+
+
+
+
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 9264e00..d74a1aa 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -1,11 +1,22 @@
-@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
-
header {
padding: 20px;
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
header h1 {
font-family: 'Allura', cursive;
font-size: 4em;
- color: pink
-}
\ No newline at end of file
+ color: pink;
+}
+
+.links a {
+ margin-left: 20px;
+}
+
+.links img {
+ height: 45px;
+}
+