contact section completed

Author: arifur-rahaman

index.html

@@ -120,10 +120,10 @@ <h2 class="section-heading "> Archieves</h2>
 <!-- blog post section starts here -->
 <section id="blog-post" class="center">
   <h2 class="section-heading">Blog Posts</h2>
-<div class="blog-posts">
+<div class="blog-posts center">
 
   <!-- blog 1 -->
-  <div class="blog-post">
+  <div class="blog-post ">
     <aside class="blog-post__aside">
       <img src="./assets/img-2.jpg" alt="image2">
     </aside>
@@ -165,6 +165,31 @@ <h3 class="blog-post__sub-heading"> Sub Heading</h3>
 
 <!-- blog post section ends here -->
 
+<!-- contact section ends here -->
+ <section id="contact-section" class="center">
+  <h2 class="section-heading text-white">
+    Contact Me
+  </h2>
+  <form>
+    <div class="form-control">
+      <label for="name">Name</label>
+      <input type="text" id="name" autocomplete="name" required>
+    </div>
+    <div class="form-control">
+      <label for="email">Email</label>
+      <input type="email" id="email" autocomplete="email" required>
+    </div>
+    <div class="form-control">
+      <label for="message">Message</label>
+      <textarea name="message" id="message" ></textarea>
+    </div>
+    <div class="form-control form-btn-field">
+     <button class="btn contact__btn">Submit</button>
+    </div>
+  </form>
+ </section>
+<!-- contact section ends here -->
+
 
 
 </main>

style.css

@@ -79,6 +79,7 @@ img{
   font-size: 6rem;
   text-align: center;
   font-family:"Italiano", cursive ;
+  margin: 3rem 0;
 }
 
 /* reset code and common ends here */
@@ -179,8 +180,9 @@ margin: 1rem;
 /* about me section starts here */
 #blog-about{
   background-color: #4c4c4c;
-  height: 60vh;
+  height: 90vh;
   justify-content: space-evenly;
+  
 }
 
 .cards{
@@ -215,9 +217,7 @@ margin: 1rem;
   margin-bottom: 1rem;
   text-align: center;
 }
-/* .card__btn{
 
-} */
 
 /* about me section ends here */
 
@@ -231,6 +231,7 @@ margin: 1rem;
   border-top: 0.1rem solid;
   border-bottom: 0.1rem solid;
   width: 90%;
+  
 }
 
 .archieves__img{
@@ -250,18 +251,21 @@ display: flex;
 gap: 1rem;
 }
 
-/* .archieves__list{
 
-} */
 
 
 /* archieves section ends here */
 
 
 /* blog-post section starts here */
 
+.blog-posts{
+  gap:2rem
+}
+
 .blog-post__heading{
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
 }
 
 .blog-post{
@@ -279,19 +283,85 @@ gap: 1rem;
 }
 
 .blog-post__aside{
+    /* here, flex 1 means it will take 1/3 of the div space 
+    if another sibling div in the side */
   flex: 1;
 }
 
 .blog-post__content{
+  /* flex 2 means it will take 2/3 of the div space */
   flex: 2;
   display: flex;
   justify-content: space-evenly;
   flex-direction: column;
+  padding: 1rem;
+  gap: 1rem;
 }
 
+.blog-post__sub-heading{
+  font-size: 2rem;
+}
+
+
+.blog-post__description{
+  font-size: 1.6rem;
+  text-align: justify;
+}
+
+
+.blog-post__btn{
+  width: 30%;
+}
 
 /* blog-post section ends here */
 
+/* contact section starts here */
+form{
+  box-shadow: var(--shadow);
+  padding: 2rem;
+  color: #fff;
+  margin: 1rem;
+
+}
+
+#contact-section{
+  background-color: #4c4c4c;
+  min-height: 95vh;
+}
+
+.form-control{
+  margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form-control label{
+  font-size: 1.6rem;
+  flex: 0.3;
+}
+
+.form-control > input,textarea{
+  flex: 0.7;
+  width: 40rem;
+  padding: 2rem 1rem;
+  border:none;
+  border-radius: 0.6rem;
+}
+
+.form-control > textarea{
+  resize: none;
+  height: 12vh;
+}
+
+
+.form-btn-field{
+  display: flex;
+  justify-content: end;
+}
+
+/* contact section ends here */
+
 
 /* responsive starts here */
 @media screen and (max-width: 992px) {
@@ -321,11 +391,24 @@ gap: 1rem;
     flex-direction: column;
   }
   #blog-about{
-    min-height: auto;
+    min-height: auto; 
+    
   }
 
   #archieves{
     min-height: auto;
+    
+  }
+
+  .blog-post{
+    width: 80%;
+    flex-direction: column;
+    
+  }
+
+
+  #contact-section{
+    min-height: auto;
   }
 
 }
@@ -375,6 +458,24 @@ flex-direction: column;
     flex-direction: column;
     width: 90%;
   }
+
+  .blog-post{
+    width: 90%;  
+  }
+
+  form{
+    width: 90%;
+  }
+
+  .form-control{
+    flex-direction: column;
+  }
+
+
+  .form-control > input,textarea{
+    margin-top: 1rem ;
+  }
+  
 }
 /* responsive ende here */
 }