diff --git a/responsive.css b/responsive.css
new file mode 100644
index 0000000..8e6b7ab
--- /dev/null
+++ b/responsive.css
@@ -0,0 +1,77 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  line-height: 1.6;
+}
+
+header {
+  background: #333;
+  color: #fff;
+  padding: 20px;
+  text-align: center;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+}
+
+nav ul li {
+  display: inline;
+  margin-right: 10px;
+}
+
+nav ul li a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.intro {
+  text-align: center;
+  padding: 40px;
+  background: #f4f4f4;
+}
+
+
+.features {
+  display: flex;
+  @media (max-width: 600px) {
+     flex-direction: column;
+  }
+  justify-content: space-around;
+  align-items: stretch;
+  padding: 20px;
+  gap: 20px;
+}
+
+.feature-item {
+  background: #fff;
+  flex: 1;
+  padding: 20px;
+  border: 1px solid #ddd;
+  width: 30%;
+  @media (max-width: 600px) {
+    width: 100%;
+  }
+}
+
+footer {
+  text-align: center;
+  padding: 20px;
+  background: #333;
+  color: #fff;
+}
+
+img {
+  width: 100%;
+}
+
+figcaption {
+  font-size: 0.75em;
+}
+
diff --git a/responsive.html b/responsive.html
index abd3f33..e9f0150 100644
--- a/responsive.html
+++ b/responsive.html
@@ -1,76 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
- 
-
-<style>
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: Arial, sans-serif;
-  line-height: 1.6;
-}
-
-header {
-  background: #333;
-  color: #fff;
-  padding: 20px;
-  text-align: center;
-}
-
-nav ul {
-  list-style: none;
-  padding: 0;
-}
-
-nav ul li {
-  display: inline;
-  margin-right: 10px;
-}
-
-nav ul li a {
-  color: #fff;
-  text-decoration: none;
-}
-
-.intro {
-  text-align: center;
-  padding: 40px;
-  background: #f4f4f4;
-}
-
-.features {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  padding: 20px;
-}
-
-.feature-item {
-  background: #fff;
-  padding: 20px;
-  border: 1px solid #ddd;
-  width: 30%;
-}
-
-footer {
-  text-align: center;
-  padding: 20px;
-  background: #333;
-  color: #fff;
-}
-
-img{
-  width: 100%;
-}
-
-</style>
-
+  <title>Our different kitchens</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="responsive.css" rel="stylesheet">
 </head>
 <body>
   <header>
@@ -95,30 +28,30 @@ img{
         <figure>
           <img
             src="images/kitchen1.jpg"
-            alt="Modern appliances" />
+            alt="Modern appliances">
           <figcaption>Modern appliances</figcaption>
         </figure>
-        <p>Description of feature 1.</p>
+        <p>Modern appliances something something description.</p>
       </div>
       <div class="feature-item">
         <h3>Feature 2</h3>
         <figure>
           <img
             src="images/kitchen2.jpg"
-            alt="industrial kitchen" />
+            alt="industrial kitchen">
           <figcaption>Suitable for private and commmercial settings</figcaption>
         </figure>
-        <p>Description of feature 2.</p>
+        <p>Restaurants kitchens something something.</p>
       </div>
       <div class="feature-item">
         <h3>Feature 3</h3>
         <figure>
           <img
             src="images/kitchen3.jpg"
-            alt="food preparatoin" />
+            alt="food preparatoin">
           <figcaption>Safe and efficient food preparation</figcaption>
         </figure>
-        <p>Description of feature 3.</p>
+        <p>Food preparation something something.</p>
       </div>
     </section>
   </main>
