diff --git a/basic.css b/basic.css
new file mode 100644
index 0000000..c1aa053
--- /dev/null
+++ b/basic.css
@@ -0,0 +1,224 @@
+body{
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size:100%;
+    width:40%;
+    height:auto;
+    position: relative;
+    left:30%;    
+
+}
+
+body h1{
+    text-transform: capitalize;
+}
+body div{
+    box-shadow: 10px 5px 15px grey;
+    border: 1px solid black;
+    border-right:none;
+    border-bottom:none;
+}
+body div:last-of-type {
+    border:1px solid black;
+    box-shadow: none;
+}
+.product{
+    background-color:mintcream;
+    padding: 0 5% 0 5%;
+    box-shadow: 10px 5px 15px grey;
+}
+.product h1{
+    color:black;
+}
+.product h2{
+    text-transform: capitalize;
+}
+.product footer{
+    color: red;
+    padding-bottom:5px;
+    margin-bottom:15px;
+    
+}
+/*Seleccionamos todos los elementos dentro de un selector con el ascerisco.!important: TODOS los elementos sin distinción*/
+.product footer *{
+    font-weight:bold;
+    
+}
+/*cats and dogs css*/
+.catsAndDogs{
+    font-family: 'Times New Roman', Times, serif;
+    background-color: rgba(236, 235, 217, 0.7);
+    padding: 20px 5% 20px 5%;
+    
+
+}
+.catsAndDogs p:first-child {
+    color: brown;
+    font-style: italic;
+    color: green;
+    text-transform: capitalize;
+}
+.catsAndDogs p:first-child a{
+    text-decoration: none;
+    color:green;
+}
+#cat{
+    color: brown;
+     unicode-bidi:bidi-override;
+     direction:rtl;
+}
+/*Fin cats and dogs*/
+
+/*Metaphor css*/
+.metaphor{
+    padding: 5px 5px 20px 5px;
+    font-family: :verdana, sans-serif;
+    font-size:75%;
+    color:tomato;
+    background-color: rgba(47, 115, 69, 0.1);
+    margin:10px 0 10px 0;
+   
+}
+.metaphor header{
+    background-color: rgba(76, 76, 76, 0.44);
+    position:relative;
+    bottom:15px;
+    
+}
+.metaphor h1{
+    color:white;
+    text-transform:capitalize;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-weight:bold;
+    font-size:25px;
+    text-shadow: 1px 10px 1px #000;
+    
+}
+.metaphor li{
+    list-style :none;
+    display:block;
+    color:black;
+    padding-bottom:15px;
+    /*sombras en el texto*/
+    text-shadow: 1px 12px 5px #111;
+    /*reversed sentences*/
+    unicode-bidi:bidi-override;
+    direction:rtl;
+}
+/*interesante etiqueta para tener en la mente. Trabajar más la forma de añadir las comillas*/
+q { quotes: ‘"’ ‘"’ ;}
+/*Fin Metaphor*/
+
+/*Inicio Bar Jokes*/
+.barJokes{
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size:100%;
+    background-color:rgba(193, 147, 10, 0.3);
+    padding-bottom:10px;
+    
+    
+}
+.barJokes header{
+    background-color: rgba(128, 106, 39, 0.5);
+    position: relative;
+    margin:0px 5px 0 5px;
+    top:5px;
+    
+}
+.barJokes h1{
+    text-transform: capitalize;
+    color:rgba(128, 79, 39, 1);
+}
+.barJokes h2{
+    text-transform: capitalize;
+    font-style: italic;
+    color:rgba(128, 39, 44, 1);
+     margin:0px 5px 0 5px;
+}
+.barJokes li{
+    margin: 20px 0 10px 0;
+    text-decoration: none;
+    display:block;
+    /*text-decoration no funciona si no colocas una forma de display*/
+}
+.negritas li:first-letter{
+    /*pseudo-elemento ::first-word parece no actuar. Preguntar Raul*/
+    text-transform:capitalize;
+    
+}
+/*Fin Bar Jokes*/
+/*inicio studying*/
+#elUnico{
+    border:none;
+    }
+.studyingAdvice{
+    padding: 0;
+    margin: 10px 0 30px 0;
+    background-color:rgba(193, 147, 10, 0.3); 
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size:100%;
+}
+
+.studyingAdvice header{
+     background-color: rgba(128, 106, 39, 0.5);
+    position: relative;
+    margin:-15px 5px 0 5px;   
+}
+.titulitis{
+    color: rgba(128, 39, 44, 1);
+    position:relative;
+    
+}
+.titulitis:first-letter{
+    text-transform: capitalize;
+}
+.studyingAdvice header h1{
+    color:white;
+    font-size:30px;
+    
+}
+
+#elUnico li{
+    position:relative;
+    display: block;
+    text-decoration: none;
+    padding-top:20px;
+    
+}
+#elUnico ul li:first-letter{
+    text-transform: capitalize;
+}
+#elUnico ul li:first-child+li+li{
+    color: red;
+    text-transform: capitalize;
+}
+/* no consigo encontrar la palabra con last
+#elUnico ul li:last-child::nth-last-word(2){
+    color: red;
+}*/
+#elUnico ul li:first-child+li+li+li+li{
+    color: red;
+    text-transform: capitalize;
+}
+#peque{
+     position:relative;
+    word-wrap: break-word;
+    
+}
+small{
+    font-size: 65%;
+   padding-right: 20%;
+    unicode-bidi:bidi-override;
+     word-wrap: break-word;
+   
+}
+.studying{
+    padding: 20px;
+}
+
+
+/*Fin Stuying*/
+
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..960ad12
--- /dev/null
+++ b/index.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="basic.css">
+
+    <title>CSS</title>
+</head>
+
+<body>
+    <div class="product">
+        <header>
+            <h1>x-241 dog robot</h1>
+        </header>
+        <main>
+            <article>
+                <section class="section1">
+                    <h2>overview</h2>
+                    <p>The x-241 is the perfect canine pal for teh busy billionaire.</p>
+                </section>
+                <section class="section2">
+                    <h2>details</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae mollis leo, in luctus metus.
+                        Vestibulum sed tellus eget velit congue imperdiet. Cras porttitor malesuada purus sed congue. In
+                        vitae commodo dui. Nulla nunc quam, lacinia ut interdum ac, malesuada sed nisl. Nunc tincidunt,
+                        purus et suscipit volutpat, ipsum nulla sollicitudin eros, sit amet tincidunt nunc nisi nec
+                        nisl.
+                        Phasellus at venenatis felis, laoreet iaculis dui. Etiam et urna ac elit commodo viverra.
+                        Vestibulum
+                        et risus tincidunt nibh interdum mattis. Duis id diam lobortis, accumsan enim et, egestas nibh.
+                        Suspendisse eget felis ac nisl porta sagittis. Curabitur vehicula dolor ipsum, id vehicula urna
+                        sodales eu. Suspendisse cursus felis quis urna sagittis sagittis vitae quis dolor. Aliquam ut
+                        lacus
+                        quis lacus lacinia congue. Donec ac dolor gravida, consectetur ipsum eget, ullamcorper quam.
+                    </p>
+                </section>
+            </article>
+
+        </main>
+        <footer>
+
+            <h2>warnings</h2>
+            <ul>
+                <li>Do not immerse in water.</li>
+                <li>Do not eat.</li>
+                <li>Does not exist.</li>
+            </ul>
+        </footer>
+    </div>
+
+    <!--Cats and Dogs-->
+
+    <div class="catsAndDogs">
+
+        <body>
+            <header>
+                <h1>Cats and Dogs</h1>
+            </header>
+            <p id="cat">I have a cat, and am thinking of getting a dog. Will they fight?</p>
+            </br>
+            <main>
+                <article>
+                    <section>
+                        Maecenas vestibulum at velit ac ullamcorper. Vestibulum semper sollicitudin dolor ac sagittis.
+                        In a velit vel turpis accumsan varius sed a arcu. Sed interdum enim nibh, sed tincidunt enim
+                        blandit a. Aliquam posuere ligula ac eros finibus posuere. Mauris nec massa eget nisi congue
+                        sagittis. Morbi molestie efficitur ante, sed tincidunt diam sodales ut. Suspendisse potenti.
+                    </section>
+                    </br>
+                    <section>
+                        Maecenas vestibulum at velit ac ullamcorper. Vestibulum semper sollicitudin dolor ac sagittis.
+                        In a velit vel turpis accumsan varius sed a arcu. Sed interdum enim nibh, sed tincidunt enim
+                        blandit a. Aliquam posuere ligula ac eros finibus posuere. Mauris nec massa eget nisi congue
+                        sagittis. Morbi molestie efficitur ante, sed tincidunt diam sodales ut. Suspendisse potenti.
+                    </section>
+                </article>
+            </main>
+            <footer>
+                <p>[from dog owner's guide: fighting fury furies?<a href="#">(www.canismajor.com/dog/furfury.html)</a>]
+                </p>
+            </footer>
+        </body>
+    </div>
+    <!--Fon Cats and dogs-->
+
+    <!--Metaphor-->
+    <div class="metaphor">
+
+        <body>
+            <header>
+                <h1>metaphor</h1>
+            </header>
+            <main>
+                <article>
+                    <section>
+                        Maecenas vestibulum at velit ac ullamcorper. Vestibulum semper sollicitudin dolor ac sagittis.
+                        In a velit vel turpis accumsan varius sed a arcu. Sed interdum enim nibh, sed tincidunt enim
+                        blandit a.
+                    </section>
+                </article>
+
+                <p>For exampple, take the language used to describe a debate:</p>
+                <ul>
+
+                    <li><q> consectetur tincidunt.</q></li>
+                    <li><q> consectetur tincidunt.</q></li>
+                    <li><q> consectetur tincidunt.</q></li>
+                    <li><q> consectetur tincidunt.</q></li>
+                </ul>
+            </main>
+            <footer>
+                <p>Maecenas vestibulum at velit ac ullamcorper. Vestibulum semper sollicitudin dolor ac sagittis. In a
+                    velit vel turpis accumsan varius sed a arcu. Sed interdum enim nibh, sed tincidunt enim blandit a.
+                    Aliquam posuere ligula ac eros finibus posuere. Mauris nec massa eget nisi congue sagittis. Morbi
+                    molestie efficitur ante, sed tincidunt diam sodales ut. Suspendisse potenti. </p>
+            </footer>
+        </body>
+    </div>
+    <!--Fin Metaphor-->
+    <!--Inicio Bar Jokes-->
+    <div class="barJokes">
+
+        <body>
+            <header>
+                <h1>bar jokes</h1>
+            </header>
+            <main>
+                <article>
+                    <section>
+                        <h2>the grasshopper</h2>
+                        <ul class="negritas">
+                            <p>A grasshopper hopped into a bar</p>
+
+                            <li><strong> bartender</strong>: Hey, we have a drink named after you.</li>
+                            <li><strong> grasshopper</strong>: You have a drink named bob?</li>
+                        </ul>
+                    </section>
+                    <section>
+                        <h2> walking into a bar</h2>
+                        <ul>
+                            <li>duis nec sem sit amet ante pharetra semper.</li>
+                            <li>placerat dictum ligula</li>
+                            <li>placerat dictum ligula</li>
+                        </ul>
+                    </section>
+                </article>
+            </main>
+        </body>
+    </div>
+    <!--Fin Bar Jokes-->
+    <!-- Inicio Studying-->
+    <div class="studyingAdvice">
+
+        <body>
+            <header>
+                <h1>studying advice</h1>
+            </header>
+            <main class="studying">
+                <article>
+                    <div id="elUnico">
+
+                        <ul>
+                            <li>much of the advice people give studying is wrong.</li>
+                            <li>always study in the same place?</li>
+                            <li>wrong!</li>
+                            <li>Study one topic intensively before going on to the next?</li>
+                            <li>wrong!</li>
+                            <li>here are some tips on <span id="negras">actual reseach.</span></li>
+                        </ul>
+                        <p id="peque">
+                            <small>From <i>forget what you knowabout good study habbits,</i>by Benedict Carey,published
+                                in the <i>New York Times</i> on September 6,2010</small>
+                        </p>
+                    </div>
+                    <section>
+                        <h2 class="titulitis">sem sit amet ante</h2>
+                        <p>Praesent maximus interdum magna vel pretium. Praesent condimentum iaculis neque vel commodo.
+                            Curabitur neque magna, hendrerit in condimentum nec, ullamcorper eu neque</p>
+                    </section>
+                    <section>
+                        <h2 class="titulitis">sem sit amet ante</h2>
+                        <p>Praesent maximus interdum magna vel pretium. Praesent condimentum iaculis neque vel commodo.
+                            Curabitur neque magna, hendrerit in condimentum nec, ullamcorper eu neque</p>
+                    </section>
+                    <section>
+                        <h2 class="titulitis">sem sit amet ante</h2>
+                        <p>Praesent maximus interdum magna vel pretium. Praesent condimentum iaculis neque vel commodo.
+                            Curabitur neque magna, hendrerit in condimentum nec, ullamcorper eu neque</p>
+                    </section>
+                    <section>
+                        <h2 class="titulitis">sem sit amet ante</h2>
+                        <p>Praesent maximus interdum magna vel pretium. Praesent condimentum iaculis neque vel commodo.
+                            Curabitur neque magna, hendrerit in condimentum nec, ullamcorper eu neque</p>
+                    </section>
+                </article>
+            </main>
+        </body>
+    </div>
+    <!-- Fin Studying-->
+
+
+</body>
+
+</html>