first commit

mohamedcodingpro · May 7, 2024 · d05507c · d05507c
1 parent bd7c5c0
commit d05507c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -2,19 +2,26 @@
 
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
+
     <title>CatPhotoApp</title>
   </head>
+  <link href="styles.css" rel="stylesheet">
   <body>
     <main>
       <h1>CatPhotoApp</h1>
-      <section>
+
+     <section class="cats">
+      <section class="cat">
         <h2>Cat Photos</h2>
         <!-- TODO: Add link to cat photos -->
         <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
         <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
       </section>
-      <section>
+
+
+
+
+      <section class="cat">
         <h2>Cat Lists</h2>
         <h3>Things cats love:</h3>
         <ul>
@@ -26,6 +33,11 @@ <h3>Things cats love:</h3>
           <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
           <figcaption>Cats <em>love</em> lasagna.</figcaption>  
         </figure>
+      </section>
+
+
+
+      <section class="cat">
         <h3>Top 3 things cats hate:</h3>
         <ol>
           <li>flea treatment</li>
@@ -37,7 +49,8 @@ <h3>Top 3 things cats hate:</h3>
           <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
         </figure>
       </section>
-      <section>
+     </section>
+      <section class="cat">
         <h2>Cat Form</h2>
         <form action="https://freecatphotoapp.com/submit-cat-photo">
           <fieldset>

diff --git a/styles.css b/styles.css
@@ -0,0 +1,31 @@
+body{
+    background-color: #985D5D;
+    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+.cat{
+    background-color: #F9DB6D;
+    margin: 0.5em;
+    padding: 1em;
+    border-radius: 1em;
+    border: 1px solid #36827F;
+    flex: 1;
+}
+
+@media (min-width : 960px){
+    .cats{
+        display: flex;
+    }
+}
+
+fieldset{
+    margin: 1em;
+    border: 0;
+}
+ button{
+    padding: 1em;
+    border: 3px solid;
+    border-radius: 0.5em;
+ }
+ input{
+    padding: 1em;
+ }