CodeYourFuture · elahemortazavi · Oct 27, 2022 · Oct 28, 2022 · matthiastan13 · Nov 2, 2022
diff --git a/css/style.css b/css/style.css
@@ -1,8 +1,248 @@
-/**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- */
+*{
+    /* background-color: rgb(250, 231, 234); */
+    text-decoration: none;
+    list-style: none;
+    box-sizing: border-box;
+}
+body {
+    background-color: rgb(250, 217, 222);
+}
+
+/* header */
+
+
+
+
+.nav {
+    display: flex;
+    margin-top: 30px;
+}
+.navbar {
+    padding: 30px;
+}
+.nav li {
+    margin-right: 15px;
+}
+
+.eli {
+    font-weight:bolder;
+    font-size: 30px;
+    color: rgb(126, 82, 90);
+}
+.elirose {
+    color: pink;
+}
+.head {
+    background-image: url("/images/pexels-mo-eid-10035858.jpg");
+    background-size: cover;
+    width: 100%;
+    height: 500px;
+    border-radius: 5px;
+    }
+.title {
+    padding-top: 130px;
+    margin-left: 50px;
+    font-size: 32px;
+
+}
+
+/* body */
+.part1 {
+    width: 90%;
+    height: auto;
+    border:1px solid rgb(186, 185, 185);
+    margin-top: 20px;
+    background-color: rgb(250, 231, 234);
+    border-radius: 5px;
+}
+   .acu {
+    padding: 20px;
+   } 
+   .acu-img {
+    width: 100%;
+   }
+   .part2 {
+    width: 90%;
+    height: auto;
+    border:1px solid rgb(186, 185, 185);
+    margin-top: 20px;
+    background-color: rgb(250, 231, 234);
+    border-radius: 5px;
+
+   }
+   .acu2 {
+    padding: 20px;
+
+   }
+
+   .acu-img2 {
+    width: 100%;
+   }
+
+   .main{
+    width: 75%;
+   }
+   .part1:first-child:hover {
+    background-color: rgb(243, 234, 184);
+   }
+
+
+
+/* aside */
+
+ .article1{
+    border: 1px solid gray;
+    border-radius: 5px;
+    width: 100px;
+    height:;
+    background-color: rgb(250, 231, 234) ;
+    margin-bottom: 20px;
+    margin-right: 30px;
+
+} 
+
+   .flex {
+    display: flex;
+
+   }
+  .sidebar{
+    width: 25%;
+    /* height: 600px; */
+
+  }
+
+  .introduction {
+    border: 1px solid rgb(206, 204, 204);
+    width: 100%;
+    height: auto;
+    margin-left: 30px;
+    border-radius: 5px;
+    background-color: rgb(250, 231, 234);
+  }
+  .pop {
+    border: 1px solid rgb(206, 204, 204);
+    width: 100%;
+    height: auto;
+    margin-left: 30px;
+    border-radius: 5px;
+    background-color: rgb(250, 231, 234);
+    margin-top: 10px;
+  }
+    .intro {
+        margin-left: 7px;
+    }
+
+  .me {
+    width: 100%;
+    height: 200px;
+
+  }
+  .list {
+    display: grid;
+    margin-left: 0px;
+    margin-bottom: 80px;
+
+  }
+
+
+
+  span {
+    justify-content: center;
+    text-align: center;
+    margin-bottom: 30px;
+
+
+  }
+  .ul-li {
+    margin-left: 0px;
+    background-color: rgb(250, 231, 234);
+  }
+aside, h2, p, h4 {
+    color:rgb(83, 2, 16)
+}
+a {
+    color: rgb(78, 22, 31);
+    font-weight:500;
+
+}
+.pop-posts {
+    padding: 10px;
+    margin-left: 0px;
+}
+
+
+.btn:hover {
+    background-color: rgb(189, 124, 135);
+    }
+
+.btn {
+    border-radius: 10px;
+    border: 1px solid gray;
+    margin-top: 20px;
+    margin-left: 15px;
+    margin-bottom: 10px;
+}
+.foot {
+    font-weight: bold;
+    font-size: 20px;
+    background-color: rgb(203, 160, 167);
+    border-radius: 5px;
+    margin-top: 5px;
+    justify-content: center;
+    text-align: center;
+
+
+
+
+
+}
+.footer {
+    justify-content: center;
+    text-align: center;
+    padding-bottom: 10px;
+}
+.si {
+    width: 25%;
+    margin-top: 20px;
+    margin-right: 40px;
+
+}
+
+
+
+
+
+
+  .social-media {
+    justify-content: center;
+    align-items: center;
+    width: 330px;
+    padding: 0 30px;
+    display: flex;
+    /* margin-bottom: 100px; */
+  }
+
+
+
+  .social-media a {
+    background-color: rgb(174, 103, 115);
+    width: 45px;
+    height: 45px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    margin-left: 15px;
+    margin-top: 20px;
+  }
+
+
+
+/* responsive */
+@media screen and (max-width: 1200px) {
+    body {
+        background-color: rgb(251, 251, 228);
+    }
+
+
+    }
diff --git a/images/acu.aside.jpg b/images/acu.aside.jpg
diff --git a/images/acu.header.jpg b/images/acu.header.jpg
diff --git a/images/acu.molage.jpg b/images/acu.molage.jpg
diff --git a/images/acu.oil.jpg b/images/acu.oil.jpg
diff --git a/images/acu.stone.jpg b/images/acu.stone.jpg
diff --git a/images/flower.header.jpg b/images/flower.header.jpg
diff --git a/images/instagram.svg b/images/instagram.svg
diff --git a/images/lilium.acu.jpg b/images/lilium.acu.jpg
diff --git a/images/linkedin.svg b/images/linkedin.svg
diff --git a/images/lotus.aside.jpg b/images/lotus.aside.jpg
diff --git a/images/lotus.aside2.jpg b/images/lotus.aside2.jpg
diff --git a/images/lotus.header2.jpg b/images/lotus.header2.jpg
diff --git a/images/needling.aside.jpg b/images/needling.aside.jpg
diff --git a/images/pexels-antoni-shkraba-6076146.jpg b/images/pexels-antoni-shkraba-6076146.jpg
diff --git a/images/pexels-chinese-medicine-podcast-podcast-8139405.jpg b/images/pexels-chinese-medicine-podcast-podcast-8139405.jpg
diff --git a/images/pexels-karolina-grabowska-4622994.jpg b/images/pexels-karolina-grabowska-4622994.jpg
diff --git a/images/pexels-mo-eid-10035858.jpg b/images/pexels-mo-eid-10035858.jpg
diff --git a/images/pexels-mo-eid-9454915.jpg b/images/pexels-mo-eid-9454915.jpg
diff --git a/images/pexels-nataliya-vaitkevich-7615460.jpg b/images/pexels-nataliya-vaitkevich-7615460.jpg
diff --git a/images/pexels-pixabay-39361.jpg b/images/pexels-pixabay-39361.jpg
diff --git a/images/pexels-thirdman-6193364 (1).jpg b/images/pexels-thirdman-6193364 (1).jpg
diff --git a/images/twitter.svg b/images/twitter.svg