CodeYourFuture · Bahare09 · Feb 1, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,59 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+:root {
+  --black: #000;
+  --blue-light: #96b1cd;
+  --pink-dark: #bdb7bf;
+  --pink-light: #ebebee;
+  --white: #fff;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+header,
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  padding-top: 1rem;
+  padding: 1rem 1.5rem;
+  height: 150px;
+  background-color: var(--pink-dark);
+}
+
+h1 {
+  margin-bottom: 10px;
+}
+article {
+  margin-bottom: 1rem;
+  border: 1px solid var(--green-dark);
+  border-radius: 5px;
+  padding: 10px;
+}
+
+article:first-child {
+  background-color: var(--pink-light);
+}
+
+article:last-child {
+  background-color: var(--pink-light);
+}
+
+summary {
+  padding: 10px;
+  text-align: justify;
+}
+main {
+  display: flex;
+  justify-content: space-around;
+}
+img {
+  width: 100%;
+}
diff --git a/img/card1.jpeg b/img/card1.jpeg
diff --git a/img/card2.jpg b/img/card2.jpg
diff --git a/img/card3.jpg b/img/card3.jpg
diff --git a/index.html b/index.html
@@ -16,7 +16,41 @@
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <header>
+      <h1>SuperCare Services</h1>
+      <h3>Childcare you can trust</h3>
+    </header>
+    <main>
+      <article class="card">
+        <img src="img/card1.jpeg" alt="nanny"  />
+        <h2>Evening Sitters Nanny</h2>
+
+        <summary>
+          Reliable, local childcare ready to help you reclaim your social life.
+        </summary>
+      </article>
+
+      <article class="card">
+        <img src="img/card3.jpg" alt="nanny"  />
+        <h2>After-school-Nanny</h2>
+        <summary>
+          Fun, energetic and bubbly sitters to keep your kids entertained till
+          you get home.
+        </summary>
+      </article>
+      <article class="card">
+        <img src="img/card2.jpg" alt="nanny"  />
+        <h2>Daytime Help Nanny</h2>
+
+        <summary>
+          Helping you manage your career, or just for an extra pair of hands.
+        </summary>
+      </article>
+    </main>
+    <footer>
+      <h1>Contact us:</h1>
+      <p>Phon Number: +44 7809879865</p>
+      <a href="mailto:your@address.com"> Email: SuperCare-services@gmail.com</a>
+    </footer>
   </body>
 </html>