diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 75e9841e..0680049a 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,198 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +* { + font-family: "Courier New", Courier, monospace; + background-color: #000; + color: #fff; + scroll-behavior: smooth; + scroll-padding-top: 9.5rem; +} + +body { + margin: 0; + padding: 0; +} + +/* Header styles */ + +.logo { + width: 4rem; + height: 4rem; + margin-right: 0.625rem; + margin-top: 0.3125rem; +} + +.header-section { + display: flex; + justify-content: space-between; + background-color: #000; + position: fixed; + width: 100%; + height: 7.95rem; +} + +.site-info-container { + display: flex; + margin-left: 1.25rem; +} + +.site-info-container p { + color: #baa309; + font-weight: bold; + font-size: 1.1rem; +} + +.title-container > p { + font-style: italic; +} + +.main-headng { + margin-top: 1.25rem; + margin-left: 0.625rem; +} + +/* Nav styles */ + +.page-navigation { + margin-top: 0.1875rem; + height: 7.75rem; +} + +.page-navigation > ul { + display: flex; + justify-content: space-around; + list-style: none; + height: 2.3rem; +} + +.page-navigation > ul > li { + text-decoration: none; + font-weight: bold; + color: #000; + margin: 0.5rem; + width: 100%; + height: 1.2rem; +} + +.page-navigation > ul > li > a { + text-decoration: none; + font-weight: bold; + display: flex; + width: 10rem; + justify-content: center; + border: 2px solid #fff; + border-radius: 10px; +} + +.page-navigation > ul > li:nth-last-child(1) > a { + background-color: #fff; + color: #000; +} + +/* Nav hover styles */ + +/* I had so much fun figuring the next few rules out and there was + definitely a eureka moment or two in there :) */ +.page-navigation > ul > li:first-child > a:focus, +.page-navigation > ul > li:first-child > a:hover { + padding-bottom: 5.3rem; + border: 2px ridge #e6d408; + border-radius: 8px 8px 0 0; + border-bottom: 0; + transition: padding-bottom 1.2s ease-in; + color: #e6d408; +} + +.page-navigation > ul > li:nth-child(2) > a:focus, +.page-navigation > ul > li:nth-child(2) > a:hover { + padding-bottom: 5.4rem; + border: 2px ridge #cf7208; + border-radius: 8px 8px 0 0; + border-bottom: 0; + transition: padding-bottom 1.2s ease-in; + color: #cf7208; +} + +.page-navigation > ul > li:nth-child(3) > a:focus, +.page-navigation > ul > li:nth-child(3) > a:hover { + padding-bottom: 5.4rem; + border: 2px ridge #29af22; + border-radius: 8px 8px 0 0; + border-bottom: 0; + transition: padding-bottom 1.2s ease-in; + color: #29af22; +} + +.page-navigation > ul > li:nth-last-child(1) > a:focus, +.page-navigation > ul > li:nth-last-child(1) > a:hover { + background-color: #6aa2e4; + border: 2px solid #6aa2e4; + color: #fff; + transition: padding-bottom 1s ease-in; +} + +/* Article styles */ + +/* Just a bit of fun to show the site information paragraph content is an actual selector + and to play with the nth-last-type(), last-of-type and first-child Pseudo selectors + which allow each article to be manipulated independently :) */ +.your-selector-to-the-latest-software-development article:nth-last-of-type(2) { + background-color: #000; + border: 2px ridge #cf7208; + border-radius: 4px; + margin: 0 0.625rem 0.625rem 0.625rem; +} + +.your-selector-to-the-latest-software-development article:last-of-type { + background-color: #000; + border: 2px ridge #29af22; + border-radius: 4px; + margin: 0 0.625rem 0.625rem 0.625rem; +} + +.your-selector-to-the-latest-software-development article:first-child { + border: 2px groove #e6d408; + margin: 0.625rem; + border-radius: 15px; +} + +.article-section { + padding-top: 7.5rem; +} + +article > p { + margin-left: 3.125rem; + margin-right: 3.125rem; + color: #d67f3c; +} + +article > h2 { + margin-left: 0.625rem; + color: #6aa2e4; + font-size: 1.5rem; +} + +.source-link { + font-size: 1rem; + color: #6bb590; + margin-left: 3.125rem; + text-decoration: none; +} + +.article-semicolon { + font-size: 1.5rem; + font-weight: bold; + color: #fff; +} + +/* Cosmetically closes the selector rule started at the top of the website */ + +.main-curly-bracket { + color: #baa309; + font-weight: bold; +} + +/* Footer styles */ + +.footer-details { + text-align: center; + font-size: 0.8rem; +} diff --git a/images/CodeFavicon.ico b/images/CodeFavicon.ico new file mode 100644 index 00000000..6af6186a Binary files /dev/null and b/images/CodeFavicon.ico differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 00000000..62eed0fd Binary files /dev/null and b/images/logo.png differ diff --git a/index.html b/index.html index 67dfc7f5..0c1cf980 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,351 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - My Blog - + + THE BINARY BYTE BLOG - + - - +
+
+ +
+

THE BINARY BYTE

+

.your-selector-to-software-development >

+
+
+ +
+
+
+
+

html-css:

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + efficitur molestie erat, nec accumsan velit tempor interdum. + Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed + eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu + accumsan bibendum. Donec pretium justo tempus, finibus purus non, + euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus + finibus consectetur a vel dui. Sed volutpat lectus felis, non + gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id + fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt + ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius + pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel, + tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus + condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean + iaculis semper diam, a condimentum leo pulvinar a. Ut turpis arcu, + interdum eget lorem eget, congue sollicitudin sem. Cras imperdiet + gravida tellus, at congue sem imperdiet eu. Curabitur a scelerisque + arcu. +

+

+ Aliquam eu ipsum fermentum massa suscipit dapibus sit amet sed + dolor. Donec imperdiet massa quis tellus tempor, vel accumsan sapien + suscipit. Quisque dui leo, congue eget nibh vel, aliquam ultricies + urna. Aenean at libero sed nibh feugiat finibus. Praesent pretium + sodales nibh. Donec faucibus magna a maximus porttitor. Vestibulum + laoreet arcu ex, sed vulputate sapien aliquet ac. Integer at enim + eget tortor efficitur commodo. Nunc venenatis nunc erat, nec + eleifend odio ultricies a. Phasellus blandit tellus in diam + efficitur, sit amet iaculis sapien scelerisque. Sed tempor arcu + arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim, + auctor id malesuada ut, aliquet faucibus purus. Cras congue sagittis + elit vel dictum. Vestibulum pulvinar magna nec ligula ultrices, a + imperdiet urna mollis. Suspendisse lacinia, dolor tempor fringilla + euismod, nisl risus lacinia felis, vel porttitor tortor lectus sit + amet dui. Ut tempor, purus vel finibus viverra, lorem nibh tempus + tellus, nec porta ipsum ligula tincidunt tortor. Pellentesque mattis + scelerisque lacus nec vestibulum. +

+

+ Pellentesque felis enim, accumsan in accumsan vitae, dapibus + suscipit est. In sollicitudin eget sem mattis euismod. Vestibulum + eleifend blandit massa vitae semper. Quisque hendrerit eros non + ultrices cursus. Mauris lobortis ligula eget ex faucibus, sed + sollicitudin nunc porttitor. Vestibulum rhoncus varius eros. Donec + dictum massa lacus, at elementum velit posuere non. Morbi maximus + augue ut mi faucibus ornare. Etiam vitae mauris vel dolor tincidunt + vulputate. Morbi sollicitudin diam nec neque maximus pulvinar. + Nullam at elementum quam, pharetra porttitor odio. Sed et sapien sit + amet lorem consequat luctus. Maecenas et dictum ex. +

+ /*Reference Source*/ +

;

+
+
+

+ responsiveWebDesign-mediaQueries-flexbox: +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + efficitur molestie erat, nec accumsan velit tempor interdum. + Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed + eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu + accumsan bibendum. Donec pretium justo tempus, finibus purus non, + euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus + finibus consectetur a vel dui. Sed volutpat lectus felis, non + gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id + fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt + ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius + pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel, + tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus + condimentum non. Duis eget lacus in felis feugiat rhoncus. +

+

+ Aenean iaculis semper diam, a condimentum leo pulvinar a. Ut turpis + arcu, interdum eget lorem eget, congue sollicitudin sem. Cras + imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur a + scelerisque arcu. Aliquam eu ipsum fermentum massa suscipit dapibus + sit amet sed dolor. Donec imperdiet massa quis tellus tempor, vel + accumsan sapien suscipit. Quisque dui leo, congue eget nibh vel, + aliquam ultricies urna. Aenean at libero sed nibh feugiat finibus. + Praesent pretium sodales nibh. Donec faucibus magna a maximus + porttitor. Vestibulum laoreet arcu ex, sed vulputate sapien aliquet + ac. Integer at enim eget tortor efficitur commodo. Nunc venenatis + nunc erat, nec eleifend odio ultricies a. Phasellus blandit tellus + in diam efficitur, sit amet iaculis sapien scelerisque. Sed tempor + arcu arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim, + auctor id malesuada ut, aliquet faucibus purus. +

+

+ Cras congue sagittis elit vel dictum. Vestibulum pulvinar magna nec + ligula ultrices, a imperdiet urna mollis. Suspendisse lacinia, dolor + tempor fringilla euismod, nisl risus lacinia felis, vel porttitor + tortor lectus sit amet dui. Ut tempor, purus vel finibus viverra, + lorem nibh tempus tellus, nec porta ipsum ligula tincidunt tortor. + Pellentesque mattis scelerisque lacus nec vestibulum. Pellentesque + felis enim, accumsan in accumsan vitae, dapibus suscipit est. In + sollicitudin eget sem mattis euismod. Vestibulum eleifend blandit + massa vitae semper. Quisque hendrerit eros non ultrices cursus. + Mauris lobortis ligula eget ex faucibus, sed sollicitudin nunc + porttitor. Vestibulum rhoncus varius eros. +

+

+ Donec dictum massa lacus, at elementum velit posuere non. Morbi + maximus augue ut mi faucibus ornare. Etiam vitae mauris vel dolor + tincidunt vulputate. Morbi sollicitudin diam nec neque maximus + pulvinar. Nullam at elementum quam, pharetra porttitor odio. Sed et + sapien sit amet lorem consequat luctus. Maecenas et dictum ex. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + efficitur molestie erat, nec accumsan velit tempor interdum. + Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed + eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu + accumsan bibendum. Donec pretium justo tempus, finibus purus non, + euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus + finibus consectetur a vel dui. Sed volutpat lectus felis, non + gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id + fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt + ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius + pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel, + tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus + condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean + iaculis semper diam, a condimentum leo pulvinar a. +

+

+ Mauris lobortis ligul eget ex faucibus, sed sollicitudin nunc + porttitor. Vestibulum rhoncus varius eros. Donec dictum massa lacus, + at elementum velit posuere non. Morbi maximus augue ut mi faucibus + ornare. Etiam vitae mauris vel dolor tincidunt vulputate. Morbi + sollicitudin diam nec neque maximus pulvinar. Nullam at elementum + quam, pharetra porttitor odio. Sed et sapien sit amet lorem + consequat luctus. Maecenas et dictum ex. +

+ /*Reference Source*/ +

;

+
+
+

forms-frameworks:

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + efficitur molestie erat, nec accumsan velit tempor interdum. + Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed + eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu + accumsan bibendum. Donec pretium justo tempus, finibus purus non, + euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus + finibus consectetur a vel dui. Sed volutpat lectus felis, non + gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id + fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt + ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius + pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel, + tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus + condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean + iaculis semper diam, a condimentum leo pulvinar a. +

+

+ Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem. + Cras imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur + a scelerisque arcu. Aliquam eu ipsum fermentum massa suscipit + dapibus sit amet sed dolor. Donec imperdiet massa quis tellus + tempor, vel accumsan sapien suscipit. Quisque dui leo, congue eget + nibh vel, aliquam ultricies urna. Aenean at libero sed nibh feugiat + finibus. Praesent pretium sodales nibh. Donec faucibus magna a + maximus porttitor. Vestibulum laoreet arcu ex, sed vulputate sapien + aliquet ac. Integer at enim eget tortor efficitur commodo. Nunc + venenatis nunc erat, nec eleifend odio ultricies a. Phasellus + blandit tellus in diam efficitur, sit amet iaculis sapien + scelerisque. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + efficitur molestie erat, nec accumsan velit tempor interdum. + Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed + eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu + accumsan bibendum. Donec pretium justo tempus, finibus purus non, + euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus + finibus consectetur a vel dui. Sed volutpat lectus felis, non + gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id + fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt + ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius + pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel, + tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus + condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean + iaculis semper diam, a condimentum leo pulvinar a. +

+

+ Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem. + Cras imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur + a scelerisque arcu. Aliquam eu ipsum fermentum massa suscipit + dapibus sit amet sed dolor. Donec imperdiet massa quis tellus + tempor, vel accumsan sapien suscipit. Quisque dui leo, congue eget + nibh vel, aliquam ultricies urna. Aenean at libero sed nibh feugiat + finibus. Praesent pretium sodales nibh. Donec faucibus magna a + maximus porttitor. Vestibulum laoreet arcu ex, sed vulputate sapien + aliquet ac. Integer at enim eget tortor efficitur commodo. Nunc + venenatis nunc erat, nec eleifend odio ultricies a. Phasellus + blandit tellus in diam efficitur, sit amet iaculis sapien + scelerisque. +

+

+ Sed tempor arcu arcu, commodo ultricies nulla semper sit amet. Nunc + lacus enim, auctor id malesuada ut, aliquet faucibus purus. Cras + congue sagittis elit vel dictum. Vestibulum pulvinar magna nec + ligula ultrices, a imperdiet urna mollis. Suspendisse lacinia, dolor + tempor fringilla euismod, nisl risus lacinia felis, vel porttitor + tortor lectus sit amet dui. Ut tempor, purus vel finibus viverra, + lorem nibh tempus tellus, nec porta ipsum ligula tincidunt tortor. + Pellentesque mattis scelerisque lacus nec vestibulum. Pellentesque + felis enim, accumsan in accumsan vitae, dapibus suscipit est. In + sollicitudin eget sem mattis euismod. Vestibulum eleifend blandit + massa vitae semper. Quisque hendrerit eros non ultrices cursus. +

+

+ Mauris lobortis ligul eget ex faucibus, sed sollicitudin nunc + porttitor. Vestibulum rhoncus varius eros. Donec dictum massa lacus, + at elementum velit posuere non. Morbi maximus augue ut mi faucibus + ornare. Etiam vitae mauris vel dolor tincidunt vulputate. Morbi + sollicitudin diam nec neque maximus pulvinar. Nullam at elementum + quam, pharetra porttitor odio. Sed et sapien sit amet lorem + consequat luctus. Maecenas et dictum ex. +

+

+ Sed tempor arcu arcu, commodo ultricies nulla semper sit amet. Nunc + lacus enim, auctor id malesuada ut, aliquet faucibus purus. Cras + congue sagittis elit vel dictum. Vestibulum pulvinar magna nec + ligula ultrices, a imperdiet urna mollis. Suspendisse lacinia, dolor + tempor fringilla euismod, nisl risus lacinia felis, vel porttitor + tortor lectus sit amet dui. Ut tempor, purus vel finibus viverra, + lorem nibh tempus tellus, nec porta ipsum ligula tincidunt tortor. + Pellentesque mattis scelerisque lacus nec vestibulum. Pellentesque + felis enim, accumsan in accumsan vitae, dapibus suscipit est. In + sollicitudin eget sem mattis euismod. Vestibulum eleifend blandit + massa vitae semper. Quisque hendrerit eros non ultrices cursus. +

+

+ Mauris lobortis ligul eget ex faucibus, sed sollicitudin nunc + porttitor. Vestibulum rhoncus varius eros. Donec dictum massa lacus, + at elementum velit posuere non. Morbi maximus augue ut mi faucibus + ornare. Etiam vitae mauris vel dolor tincidunt vulputate. Morbi + sollicitudin diam nec neque maximus pulvinar. Nullam at elementum + quam, pharetra porttitor odio. Sed et sapien sit amet lorem + consequat luctus. Maecenas et dictum ex. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + efficitur molestie erat, nec accumsan velit tempor interdum. + Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed + eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu + accumsan bibendum. Donec pretium justo tempus, finibus purus non, + euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus + finibus consectetur a vel dui. Sed volutpat lectus felis, non + gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id + fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt + ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius + pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel, + tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus + condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean + iaculis semper diam, a condimentum leo pulvinar a. +

+

+ Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem. + Cras imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur + a scelerisque arcu. Aliquam eu ipsum fermentum massa suscipit + dapibus sit amet sed dolor. Donec imperdiet massa quis tellus + tempor, vel accumsan sapien suscipit. Quisque dui leo, congue eget + nibh vel, aliquam ultricies urna. Aenean at libero sed nibh feugiat + finibus. Praesent pretium sodales nibh. Donec faucibus magna a + maximus porttitor. Vestibulum laoreet arcu ex, sed vulputate sapien + aliquet ac. Integer at enim eget tortor efficitur commodo. Nunc + venenatis nunc erat, nec eleifend odio ultricies a. Phasellus + blandit tellus in diam efficitur, sit amet iaculis sapien + scelerisque. +

+ /*Reference Source*/ +

;

+
+

};

+
+
+