CodeYourFuture · OlenaReukova · Nov 2, 2022 · Nov 2, 2022 · Nov 2, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,77 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+body {
+  background: linear-gradient(#e66465, #9198e5);
+  font-family: "Times New Roman", Times, serif;
+}
+header {
+  font-size: 36px;
+  font-weight: bold;
+  text-align: center;
+  margin: 30px 30px;
+}
+.pageDiv {
+  display: block;
+  line-height: 32px;
+  width: 50%;
+  margin: 20px auto;
+  padding: 30px;
+}
+h1,
+h2,
+h3,
+h4 {
+  font-weight: bold;
+  text-align: center;
+  padding: 18px 0px;
+}
+h1 {
+  font-size: 34px;
+}
+h2 {
+  font-size: 30px;
+}
+h3 {
+  font-size: 26px;
+}
+h4 {
+  font-size: 24px;
+}
+p {
+  font-size: 20px;
+  line-height: 24px;
+}
+ul {
+  font-size: 20px;
+}
+img {
+  display: block;
+  margin: 0 auto;
+  border-radius: 8px;
+  max-width: 700px;
+  width: 100%;
+  height: 100%;
+}
+.buttonContuctUs {
+  display: block;
+  background: #e1676c;
+  color: white;
+  margin: 30px auto;
+  font-size: 28px;
+  padding: 14px 40px;
+  border: none;
+  border-radius: 25px;
+  box-shadow: 0 1px 20px rgb(0 0 0 / 50%);
+  transition: opacity 200ms ease;
+  cursor: pointer;
+}
+.buttonContuctUs:hover {
+  background-color: blue;
+  color: white;
+}
+.footer > p {
+  font-size: 18px;
+  text-align: center;
+  margin: auto;
+}
diff --git a/images/orchid-general.jpeg b/images/orchid-general.jpeg
diff --git a/images/orchid_five.jpeg b/images/orchid_five.jpeg
diff --git a/images/orchid_four.jpeg b/images/orchid_four.jpeg
diff --git a/images/orchid_three.jpeg b/images/orchid_three.jpeg
diff --git a/images/orchid_two.jpeg b/images/orchid_two.jpeg
diff --git a/index.html b/index.html
@@ -14,9 +14,89 @@
     />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+  <title>Orchids</title>
   </head>
   <body>
-    <!-- Add your HTML markup here -->
+ <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-  </body>
+
+    <header>
+      Everything You Need to Know About Orchid Care
+    </header>
+      <div class="pageDiv">
+    <h1>Orchids</h1>
+    <h2>Orchid Care: Watering, Lighting, Repotting, and More</h2>
+    <img
+      src="https://www.almanac.com/sites/default/files/styles/max_2600x2600/public/image_nodes/orchid-pot-shutterstock_491195248.jpg?itok=as1YyXTF"
+      alt="mainPicture"
+    />
+    <h3>About Orchids</h3>
+    <hr>
+    <p>
+      The <em><span style="color:blue;font-weight:bold">orchid family </span> </em>one of the largest in the realm of flowering plants:
+      More than 25,000 species grow naturally, on every continent except
+      Antarctica. <br>The greatest concentration of orchid varieties is found in the
+      tropical regions of the world, namely in Asia and Central and South
+      America.</br> In most of North America, orchids must be grown indoors
+      (exceptions include native species such as the lady’s slipper).
+    </p>
+<hr>
+    <h3>
+        Orchid Flowers
+    </h3>
+
+<section class="aboutFlawers">
+  <article class="bloom">
+    <h4>How often do orchids bloom?</h4>
+    <img src="../HTML-CSS-Coursework-Week1/images/orchid_two.jpeg" alt="image1"> 
+    <p>
+      It depends on the type of orchid. Phalaenopsis orchids will readily bloom every few months, while other types may be limited to once or twice a year. 
+
+    </p>
+    <a href="" target="_blank">More info</a>
+  </article>
+  <article class="last">
+    <h4>How long do orchid flowers last?</h4>
+    <img src="../HTML-CSS-Coursework-Week1/images/orchid_three.jpeg" alt="image2"> 
+    <p>
+      Depending on the species, orchid flowers can last anywhere from several days to several weeks. Generally speaking, they will last longer if the orchid is kept in a cool spot, is watered sufficiently, and isn’t stressed.
+
+    </p>
+    <a href="" target="_blank">More info</a>
+  </article>
+  </article>
+  <article class="spike">
+    <h4>When should I cut the flower spike? </h4>
+    <img src="../HTML-CSS-Coursework-Week1/images/orchid_four.jpeg" alt="image3"> 
+    <p>
+      Soon as the flowers wilt and begin to drop off the stem (called a “spike”), it can be cut. Prune the spike off at the base, being careful not to accidentally snip any leaves or roots as well. Phalaenopsis orchids are an exception: they will often produce more flowers from the same flower spike, so don’t be too quick to snip it once the flowers fade. In fact, leaving the flower spike on Phalaenopsis orchids can speed up the time between blooms. 
+
+    </p>
+    <a href="" target="_blank">More info</a>
+  </article>
+  <article class="notBloom">
+    <h4>Why won’t my orchid bloom? </h4>
+     <img src="../HTML-CSS-Coursework-Week1/images/orchid_five.jpeg" alt="image4">  
+    <p>
+      Your orchid is most likely not getting enough light. Read more about lighting below!
+
+    </p>
+    <a href="" target="_blank">More info</a>
+  </article>
+  <article class="moreInfo">
+   <p>
+        For more information we invite you to
+        <a href="https://www.almanac.com/plant/orchids" target="_blank">Almanac</a>
+    </p>
+    <button class="buttonContuctUs">Contact us
+</button> 
+  </article>
+</section>
+<footer>
+  <div class="footer">
+<p>Author: Olena Reukova</p>
+  <p><a href="https://www.linkedin.com/in/olena-reukova-20b7b433/">https://www.linkedin.com/</a></p>
+  </div>
+ </footer>
+</body>
 </html>