added scss

98f65fac · WiljamiT · 88a935d1 · 98f65fac · 98f65fac · 98f65fac
Commit 98f65fac authored 2 years ago by WiljamiT
--- a/img/README.md
+++ b/img/README.md
+HERO
+Luonut: QuoteInspector.com | Tekijänoikeus: QuoteInspector.com
+Tekijänoikeus: © 2018 QuoteInspector.com
--- a/img/bitcoin-crypto-investment.jpeg
+++ b/img/bitcoin-crypto-investment.jpeg
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
 </head>
 <body>
    <header>
+        <!-- Header pic: QuoteInspector.com | Tekijänoikeus: QuoteInspector.com Tekijänoikeus: © 2018 QuoteInspector.com -->
        <nav class="navBar">
            <p>text</p>
            <p>text</p>

--- a/styles/_header.scss
+++ b/styles/_header.scss
+@mixin headerImg {
+    max-width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+@mixin bgImg {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+header {
+@include bgImg();
+    background-image: url("../img/bitcoin-crypto-investment.jpeg");
+    height: 300px;
+    width: 100%;
+}
\ No newline at end of file
--- a/styles/_navbar.scss
+++ b/styles/_navbar.scss
@@ -26,7 +26,8 @@ body {

 nav {
    @include flexRowNavLinks();
-    background: $navColor;
+    background-color: $navColor;
+    color: $navText;
    button {
        @include buttonMain();
        background: $navButton;

--- a/styles/_variables.scss
+++ b/styles/_variables.scss
-$navColor: lightblue;
-$navButton: lightgreen;
\ No newline at end of file
+$navColor: rgb(0, 0, 0, 0.2);
+$navText: white;
+$navButton: lightgreen;
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -8,7 +8,8 @@ nav {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
-  background: lightblue;
+  background-color: rgba(0, 0, 0, 0.2);
+  color: white;
  padding: 0 5px 0 5px;
 }
 nav button {
@@ -21,4 +22,13 @@ nav button {
 }
 nav button:hover {
  background: red;
+}
+
+header {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("../img/bitcoin-crypto-investment.jpeg");
+  height: 300px;
+  width: 100%;
 }/*# sourceMappingURL=styles.css.map */
\ No newline at end of file
--- a/styles/styles.css.map
+++ b/styles/styles.css.map
-{"version":3,"sources":["_navbar.scss","styles.css","_variables.scss"],"names":[],"mappings":"AAqBA;EACI,SAAA;EACA,UAAA;ACpBJ;;ADuBA;EAlBI,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EAiBA,qBE5BO;EFqCP,oBAAA;ACzBJ;ADiBI;EAdA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EAaI,sBE9BI;EF+BJ,eAAA;ACZR;ADaQ;EACI,eAAA;ACXZ","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sources":["_navbar.scss","styles.css","_variables.scss","_header.scss"],"names":[],"mappings":"AAqBA;EACI,SAAA;EACA,UAAA;ACpBJ;;ADuBA;EAlBI,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EAiBA,oCE5BO;EF6BP,YE5BM;EFqCN,oBAAA;ACzBJ;ADiBI;EAfA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EAcI,sBE9BI;EF+BJ,eAAA;ACZR;ADaQ;EACI,eAAA;ACXZ;;AEZA;EALI,2BAAA;EACA,4BAAA;EACA,sBAAA;EAKA,8DAAA;EACA,aAAA;EACA,WAAA;AFiBJ","file":"styles.css"}
\ No newline at end of file
--- a/styles/styles.scss
+++ b/styles/styles.scss
 @import './variables';
-@import './navbar';
\ No newline at end of file
+@import './navbar';
+@import './header';
\ No newline at end of file