diff --git a/css/fonts/Cabin-Bold/cabin/Cabin-Regular.ttf b/css/fonts/Cabin-Bold/cabin/Cabin-Regular.ttf
new file mode 100644
index 0000000..a76c2e7
Binary files /dev/null and b/css/fonts/Cabin-Bold/cabin/Cabin-Regular.ttf differ
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..bfcf117
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,54 @@
+body > div > .title{margin: 15px 0;box-sizing: border-box;font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: 20px;width: 100%;}
+body > div > div{float: left;margin: 0 15px 15px 0;box-sizing: border-box;width: 100%;}
+body > div > div:nth-child(even){width: 430px;height: 390px;border: 1px solid;box-shadow: 5px 5px 5px 0px #808080b3;display: block;}
+
+body > div:nth-child(1) > div:nth-child(2) { font-family: Verdana, Geneva, Tahoma, sans-serif;padding: 10px;background-color: #eefeff;font-size: 14px;}
+body > div:nth-child(1) > div:nth-child(2) > h1:nth-child(1){margin: 0;}
+body > div:nth-child(1) > div:nth-child(2) > h2:nth-child(6),body > div:nth-child(1) > ul:nth-child(7){color: red;font-weight: bold;}
+body > div:nth-child(1) > div:nth-child(2) > ul:nth-child(7){color: red;font-weight: bold;}
+
+body > div:nth-child(2) > div:nth-child(2){font-family: Georgia, 'Times New Roman', Times, serif;font-stretch: semi-condensed;font-size: 14px;padding: 5px 5px 5px 5px;background-color: #fefef8;}
+body > div:nth-child(2) > div:nth-child(2) > h1:nth-child(1){margin: 0 0 20px 0;}
+body > div:nth-child(2) > div:nth-child(2) > p{line-height: 1.3;}
+body > div:nth-child(2) > div:nth-child(2) > p:nth-child(2){color: #600f00;font-weight: bold;font-size: 12.5px;}
+body > div:nth-child(2) > div:nth-child(2) > p:nth-child(5){font-style: italic;color: #66ad63;font-size: 11px;}
+
+@font-face {font-family: CabinBold;src: url(./fonts/Cabin-Bold/cabin/Cabin-Regular.ttf)}
+body > div:nth-child(3) > div:nth-child(2){font: normal normal 16px CabinBold;font-size: 15px;padding: 5px 5px 5px 5px;background-color: #e5ebdf;}
+body > div:nth-child(3) > div:nth-child(2) > h1:nth-child(1){margin: 0;background-color: #7c8b9b;color: #fff;}
+body > div:nth-child(3) > div:nth-child(2)>p{line-height: 1.4;font-stretch: semi-expanded;}
+body > div:nth-child(3) > div:nth-child(2) > ul:nth-child(4){line-height: 35px;list-style-type: none;}
+
+body > div:nth-child(4) > div:nth-child(2){font-family: Verdana, Geneva, Tahoma, sans-serif;padding: 10px 0 5px 5px;background-color: #fcfaea;height: 434px;width: 340px;}
+body > div:nth-child(4) > div:nth-child(2) > ul{list-style-type: none;line-height: 1.3;padding: 0px 10px 10px 40px;}
+body > div:nth-child(4) > div:nth-child(2) > ul:nth-child(3){border-bottom: 1px solid;}
+body > div:nth-child(4) > div:nth-child(2) > h1:nth-child(1){margin: 0;color: #442200;background-color: #c9bba0;}
+body > div:nth-child(4) > div:nth-child(2)>h2{font-style: italic;color: #660f00;}
+body > div:nth-child(4) > div:nth-child(2) > ul>li{margin: 7px 0px;}
+body > div:nth-child(4) > div:nth-child(2) > ul:nth-child(3) > li > span{font-weight: bold;}
+body > div:nth-child(4) > div:nth-child(2) > ul:nth-child(3) > li:nth-child(3) > span:nth-child(2){font-style: italic;}
+
+body > div:nth-child(5) > div:nth-child(2){font-family: Arial, Helvetica, sans-serif;font-size: 14px;padding: 5px 5px 5px 5px;background-color: #fffdf0;height: 670px;width: 495px;}
+body > div:nth-child(5) > div:nth-child(2) > h1:nth-child(1){margin: 0;background-color: #660f00;color: #fffdf0;}
+body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span:nth-child(10){font-size: 10.5px;padding: 10px 10px 0 0;text-align: right;display: block;line-height: 1;}
+body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2){line-height: 2.5;}
+body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span{font-weight: bold;}
+body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span:last-child{font-weight: normal;}
+body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span:nth-child(3),body > div:nth-child(5) > div:nth-child(2) > p:nth-child(2) > span:nth-child(6){color: red;}
+body > div:nth-child(5) h1,body > div:nth-child(5) h2{font-weight: bolder;}
+body > div:nth-child(5) h2{color: #660f00;}
+body > div:nth-child(5) > div:nth-child(2) > p:last-child{line-height: 2;}
+
+body > div:nth-child(6) > div:nth-child(2){font-family: Arial, Helvetica, sans-serif;padding: 5px;height: 226px;}
+body > div:nth-child(6) > div:nth-child(2) > h1:nth-child(1){margin: 0;}
+body > div:nth-child(6) > div:nth-child(2) > h2{font-weight: inherit;}
+
+body > div:nth-child(7) > div:nth-child(2){font-family: Georgia, 'Times New Roman', Times, serif;padding: 0 10px;height: 245px;width: 241px;}
+body > div:nth-child(7) > div:nth-child(2) > p:nth-child(2){text-shadow: 2px 2px 2px #0009;}
+body > div:nth-child(7) > div:nth-child(2) > p:nth-child(3){text-shadow: 5px 5px 2px #0009;}
+body > div:nth-child(7) > div:nth-child(2) > p:nth-child(4){text-shadow: 10px 9px 2px #0009;}
+body > div:nth-child(7) > div:nth-child(2) > p:last-child{text-shadow: 18px 18px 2px #0009;}
+
+body > div:nth-child(8) > div:nth-child(2){font-family: Arial, Helvetica, sans-serif;padding: 10px;height: 175px;width: 270px;}
+body > div:nth-child(8) > div:nth-child(2) > h1:nth-child(1){margin: 0;}
+body > div:nth-child(8) > div:nth-child(2) > p:nth-child(2){unicode-bidi: bidi-override;direction: rtl;text-align: end;line-height: 2;}
\ No newline at end of file
diff --git a/css1.html b/css1.html
new file mode 100644
index 0000000..1e02b98
--- /dev/null
+++ b/css1.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="./css/styles.css">
+    <title>CSS 1st</title>
+</head>
+
+<body>
+    <div>
+        <div class="title"><span>Product Description</span></div>
+
+        <div>
+            <h1>X-241 Dog Robot</h1>
+            <h2>Overview</h2>
+            <p>The X-241 is the perfect canine pal for the busy billonaire.</p>
+            <h2>Details</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelensque bibendum nibh, et
+                pellentesque elit placerat at. Proin vel enim orci, a fermentum Aenean posuere adiplscing mauris
+                volutpat volutpat.</p>
+            <h2>Warnings</h2>
+            <ul>
+                <li>Do not inmerse in water</li>
+                <li>Do no eat.</li>
+                <li>Does no exist.</li>
+            </ul>
+        </div>
+    </div>
+    <div>
+        <div class="title"><span>Cats and Dogs</span></div>
+        <div>
+            <h1>Cats and Dogs</h1>
+            <p>I have a cat, and am thinking of getting a dog. Will they fight?</p>
+            <p>The idea that dogs hate cats may have been born because dogs chase cats and grew because cartoons
+                depicted
+                ongoing battles between the two species. Or it may have been generated because some dog people strongly
+                dislike
+                cats and some cat people disdain dogs. However, dog and cats can live peaceably as long as owners
+                understand the
+                behaviors of each.</p>
+            <p>In some cases, a resident cat Will isolate itself when a puppy is added to the famüy_ In other cases,
+                cats and
+                dogs never get used to each other _ In still other cases, cat or kitten and dog or puppy play togethe
+                and build
+                a friendship that finds them curled up together in a crate or bed and drinking out of the same bowl. The
+                type of
+                relationship developed in each household depends on the personality of the and the understanding of the
+                owners.
+            </p>
+            <p>[From Dog Owner's Guide: Fighting furry furies? (www.canismajor.com/dog (furfury.html)]</p>
+        </div>
+    </div>
+    <div>
+        <div class="title"><span>Metaphor</span></div>
+        <div>
+            <h1>Metaphor</h1>
+            <p>A metaphor is a mapping from one domain to another. For example, moo is to cow as beep is to car. These
+                mappings get so buried in our language that we don't even notice their effects.</p>
+            <p>For example, take the language used to describe a debate:
+                <ul>
+                    <li>"He shot down her ideas."</li>
+                    <li>"She defended her position."</li>
+                    <li>"She overwhelmed his arguments."</li>
+                    <li>"He had to retreat from that position."</li>
+                </ul>
+            </p>
+            <p>These are all debate-as-war metaphors. It's a zero sum game. Someone wins and someone loses. The idea
+                that both people could learn from each other just doesn't come up.</p>
+        </div>
+    </div>
+    <div>
+        <div class="title">Bar Jokes</div>
+        <div>
+            <h1>Bar Jokes</h1>
+            <h2>The grasshopper</h2>
+            <ul>
+                <li>A grasshopper hopped into a bar.</li>
+                <li><span>Bartender:</span> Hey, we have a drink named after you. </li>
+                <li><span>Grasshopper:</span> You have a drink named <span>Bob?</span></li>
+            </ul>
+            <h2>Walking into a bar</h2>
+            <ul>
+                <li>Two guys are walking down the street one Saturday night.</li>
+                <li>One walks into a bar.</li>
+                <li>The other one ducks.</li>
+            </ul>
+        </div>
+    </div>
+    <div>
+        <div class="title">Studying advice</div>
+        <div>
+            <h1>Studying Advice</h1>
+            <p> Much of the advice people give about studying is wrong.</br>
+                Always study in the same place?</br>
+                <span>Wrong!</span></br>
+                Study one topic intensively before going on to the next?</br>
+                <span>Wrong!</span></br>
+                Here are some study tips that are based on <span>actual research.</span></br>
+                <span>From <i>Forget What You Know About Good Study Habits</i>, by Benedict Carey, published in the
+                    <i>New York Times</i> on September 6, 2010.</span>
+            </p>
+            <h2>Alternate study environments</h2>
+            Study in the library, in the coffee shop, in your room, ... Varying the place you study helps you remember
+            more.
+            <h2>Mix content</h2>
+            Study a bit of this, a bit of that, some this again, some of the other. Switching content helps you remember
+            more.
+            <h2>Space study sessions</h2>
+            Three one-hour sessions is more effective than one three-hour session.
+            <h2>Self-testing</h2>
+            <p>Test yourself, or have a buddy do it. It helps you know how wel you know.
+                CoreDogs is good at this. That's what the review system is for.</p>
+
+        </div>
+    </div>
+    <div>
+        <div class="title">Friendly Formulas</div>
+        <div>
+            <h1>Friendly Formulas</h1>
+            <h2>Your friend, the parabola</h2>
+            <div>y = ax<sup>2</sup> + bx + c</div>
+            <h2>A normally distributed variable</h2>
+            <div>x&#126;N(&#181;, &#963;)</div>
+        </div>
+    </div>
+    <div>
+        <div class="title">Text Shadows</div>
+        <div>
+            <h1>Text shadow</h1>
+            <p>The Shadow knows!</p>
+            <p>The Shadow knows!</p>
+            <p>The Shadow knows!</p>
+            <p>The Shadow knows!</p>
+        </div>
+    </div>
+    <div>
+        <div class="title">Backwards Text</div>
+        <div>
+            <h1>Backwards text</h1>
+            <p>
+                Hey!</br>This is reversed!</br>Flip it around, willya, buddy?
+            </p>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file