diff --git a/WV9/colors.css b/WV9/colors.css
new file mode 100644
index 0000000000000000000000000000000000000000..b30151af6cf863fe4c918fbf5db36c2ef061b18d
--- /dev/null
+++ b/WV9/colors.css
@@ -0,0 +1 @@
+/*# sourceMappingURL=colors.css.map */
\ No newline at end of file
diff --git a/WV9/colors.css.map b/WV9/colors.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..049e8953fe7858daa5c3ffe19d711953f8dea418
--- /dev/null
+++ b/WV9/colors.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"colors.css"}
\ No newline at end of file
diff --git a/WV9/colors.scss b/WV9/colors.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3e0e9ad953c5033083195dd688d149e1f45030fb
--- /dev/null
+++ b/WV9/colors.scss
@@ -0,0 +1,5 @@
+$primary_1: #a2b9bc;
+$primary_2: #b2ad7f;
+$primary_3: #878f99;
+
+$link_1: #FFFF;
\ No newline at end of file
diff --git a/WV9/index.html b/WV9/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..95fa520b175476b0392612105676d62bdf1d95ce
--- /dev/null
+++ b/WV9/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>SASS exercise</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Roboto:wght@400;900&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="main.css">
+</head>
+
+<body>
+
+<header>
+ <!-- add some styling -->
+ <h1>This is a Heading</h1>
+ <nav>
+ <ul>
+ <li><a href="#">Link1</a></li>
+ <li><a href="#">Link2</a></li>
+ <li><a href="#">Link3</a></li>
+ </ul>
+ </nav>
+</header>
+
+ <main>
+
+ <article>
+ <h2>Article</h2>
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+ </article>
+
+ <article>
+ <h2>Article</h2>
+ <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
+ </article>
+
+ <article>
+ <img src="https://freesvg.org/img/icecream-2221064.png" alt="Ice_cream">
+ </article>
+
+ <article>
+ <h2>Article</h2>
+ <p>Tt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
+ </article>
+
+ </main>
+
+ <footer>
+ <p>Contact us!</p>
+ <ul>
+ <li><a href="#">Footer1</a></li>
+ <li><a href="#">Footer2</a></li>
+ <li><a href="#">Footer3</a></li>
+ </ul>
+
+ </footer>
+
+</body>
+</html>
diff --git a/WV9/main.css b/WV9/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..f09345345dff1c2bf3f05aeed75683bd906eddcd
--- /dev/null
+++ b/WV9/main.css
@@ -0,0 +1,77 @@
+.footer, footer {
+ display: grid;
+ justify-content: center;
+ text-decoration: none;
+ background-color: #a2b9bc;
+ padding: 20px 0px;
+}
+.footer p, footer p {
+ text-align: center;
+}
+.footer ul, footer ul {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ text-align: center;
+ list-style: none;
+ padding: 0;
+ -moz-column-gap: 20px;
+ column-gap: 20px;
+}
+.footer li, footer li {
+ color: white;
+ text-decoration: none;
+}
+.footer a, footer a {
+ text-decoration: none;
+ color: white;
+}
+
+body {
+ font-family: "Open Sans", "Roboto", sans-serif;
+ background-color: #b2ad7f;
+ margin: 0;
+ padding: 0;
+}
+
+header h1 {
+ text-align: center;
+ font-size: 50px;
+}
+header ul {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ text-align: center;
+ list-style: none;
+ padding: 0;
+}
+header li {
+ color: #878f99;
+}
+header a {
+ text-decoration: none;
+ color: white;
+ font-size: 40px;
+}
+
+main {
+ display: grid;
+ justify-content: center;
+ margin: 40px 0px;
+}
+main article {
+ font-size: 30px;
+ padding: 20px;
+ max-width: 900px;
+ text-align: center;
+ margin: 20px 0px;
+}
+main article h2 {
+ font-size: 40px;
+}
+main article p {
+ font-size: 20px;
+}
+main img {
+ scale: 90%;
+ margin: 0;
+}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/WV9/main.css.map b/WV9/main.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..035243f2ee8fd95e62e36ad6a24da15b5cb0655f
--- /dev/null
+++ b/WV9/main.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["typography.scss","colors.scss","main.css","main.scss"],"names":[],"mappings":"AAwBA;EACI,aAAA;EACA,uBAAA;EACA,qBAAA;EACA,yBC5BQ;ED6BR,iBAAA;AEvBJ;AFwBI;EACI,kBAAA;AEtBR;AFwBI;EACI,aAAA;EACA,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,UAAA;EACA,qBAAA;OAAA,gBAAA;AEtBR;AFwBI;EACI,YCtCC;EDuCD,qBAAA;AEtBR;AFwBI;EACI,qBAAA;EACA,YC3CC;ACqBT;;ACtBA;EACI,8CHFK;EGGL,yBFJQ;EEKR,SAAA;EACA,UAAA;ADyBJ;;ACrBI;EACI,kBAAA;EACA,eHVG;AEkCX;ACtBI;EACI,aAAA;EACA,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,UAAA;ADwBR;ACtBI;EACI,cFrBI;AC6CZ;ACtBI;EACI,qBAAA;EACA,YFvBC;EEwBD,eHxBI;AEgDZ;;ACpBA;EACI,aAAA;EACA,uBAAA;EACA,gBAAA;ADuBJ;ACtBI;EHzBA,eANO;EAOP,aAAA;EACA,gBAAA;EACA,kBAAA;EACA,gBAAA;AEkDJ;AFjDI;EACI,eAbI;AEgEZ;AFjDI;EACI,eAdA;AEiER;AChCI;EACI,UAAA;EACA,SAAA;ADkCR","file":"main.css"}
\ No newline at end of file
diff --git a/WV9/main.scss b/WV9/main.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6de7e539a922db5c4041850fdc4a55c5ff0012dd
--- /dev/null
+++ b/WV9/main.scss
@@ -0,0 +1,48 @@
+@import "colors.scss";
+@import "typography.scss";
+
+body{
+ font-family: $myFont;
+ background-color: $primary_2;
+ margin: 0;
+ padding: 0;
+}
+
+header{
+ h1{
+ text-align: center;
+ font-size: $fontSize;
+ }
+ ul{
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ text-align: center;
+ list-style: none;
+ padding: 0;
+ }
+ li{
+ color: $primary_3;
+ }
+ a{
+ text-decoration: none;
+ color: $link_1;
+ font-size: $hFontSize;
+ }
+}
+
+main{
+ display: grid;
+ justify-content: center;
+ margin: 40px 0px;
+ article{
+ @include articleContent;
+ }
+ img{
+ scale: 90%;
+ margin: 0
+ }
+}
+
+footer{
+ @extend .footer;
+}
\ No newline at end of file
diff --git a/WV9/typography.css b/WV9/typography.css
new file mode 100644
index 0000000000000000000000000000000000000000..8da4b55459c4946e214340f3a3db0182048f06ea
--- /dev/null
+++ b/WV9/typography.css
@@ -0,0 +1,27 @@
+.footer {
+ display: grid;
+ justify-content: center;
+ text-decoration: none;
+ background-color: #a2b9bc;
+ padding: 20px 0px;
+}
+.footer p {
+ text-align: center;
+}
+.footer ul {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ text-align: center;
+ list-style: none;
+ padding: 0;
+ -moz-column-gap: 20px;
+ column-gap: 20px;
+}
+.footer li {
+ color: white;
+ text-decoration: none;
+}
+.footer a {
+ text-decoration: none;
+ color: white;
+}/*# sourceMappingURL=typography.css.map */
\ No newline at end of file
diff --git a/WV9/typography.css.map b/WV9/typography.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..32b38f4efa60b00dae1aab1087f69b9ea88930f7
--- /dev/null
+++ b/WV9/typography.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["typography.scss","colors.scss","typography.css"],"names":[],"mappings":"AAwBA;EACI,aAAA;EACA,uBAAA;EACA,qBAAA;EACA,yBC5BQ;ED6BR,iBAAA;AEvBJ;AFwBI;EACI,kBAAA;AEtBR;AFwBI;EACI,aAAA;EACA,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,UAAA;EACA,qBAAA;OAAA,gBAAA;AEtBR;AFwBI;EACI,YCtCC;EDuCD,qBAAA;AEtBR;AFwBI;EACI,qBAAA;EACA,YC3CC;ACqBT","file":"typography.css"}
\ No newline at end of file
diff --git a/WV9/typography.scss b/WV9/typography.scss
new file mode 100644
index 0000000000000000000000000000000000000000..efdb5e0ebb28ba2e69ed597302bafd9a63a8901a
--- /dev/null
+++ b/WV9/typography.scss
@@ -0,0 +1,50 @@
+@import "colors.scss";
+
+$myFont: 'Open Sans', 'Roboto',sans-serif;
+$fontSize: 50px;
+$hFontSize: 40px;
+$articleH: 30px;
+$pSize: 20px;
+
+
+// article properties
+@mixin articleContent {
+ font-size: $articleH;
+ padding: 20px;
+ max-width: 900px;
+ text-align: center;
+ margin: 20px 0px;
+ h2{
+ font-size: $hFontSize;
+ }
+ p{
+ font-size: $pSize;
+ }
+}
+
+.footer{
+ display: grid;
+ justify-content: center;
+ text-decoration: none;
+ background-color: $primary_1;
+ padding: 20px 0px;
+ p{
+ text-align: center;
+ }
+ ul{
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ text-align: center;
+ list-style: none;
+ padding: 0;
+ column-gap: 20px;
+ }
+ li{
+ color: $link_1;
+ text-decoration: none;
+ }
+ a{
+ text-decoration: none;
+ color: $link_1;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1a52de829068c45ce9e4be4e2754977addc769ca..a794fd76a587b012c3e4ff3aeca264f4da88dfd0 100644
--- a/index.html
+++ b/index.html
@@ -37,6 +37,11 @@
<section style="margin-top: 2rem;">
<a style="text-decoration: none;" href="WV8/index.html">WV8</a>
</section>
+
+ <section style="margin-top: 2rem;">
+ <a style="text-decoration: none;" href="WV9/index.html">WV9</a>
+ </section>
+
</article>
</body>
</html>
\ No newline at end of file