projects section done

Author: alirezatayebinejad

design 3/images/project1.jpg

@@ -79,14 +79,14 @@ <h2>SPECIALIZED IN WEB DESIGN AND DEVELOPMENT</h2>
       <!-- services -->
 
       <section>
-        <h2 class="services-header">services</h2>
+        <h2 class="services-header">SERVICES</h2>
         <div class="services">
           <div>
             <i class="fa-solid fa-mobile-button"></i>
             <h3>Mobile App Development</h3>
             <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
-              modi, numquam cupiditate quidem veritatis repellat 
+              modi, numquam cupiditate quidem veritatis repellat
             </p>
             <a href="#"><button>Learn More ></button></a>
           </div>
@@ -95,17 +95,17 @@ <h3>Mobile App Development</h3>
             <h3>React Development</h3>
             <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
-              modi, numquam nesciunt ea
-              quibusdam reprehenderit nam?
+              modi, numquam nesciunt ea quibusdam reprehenderit nam?
             </p>
             <a href="#"><button>Learn More ></button></a>
           </div>
           <div>
             <i class="fa-brands fa-wordpress"></i>
             <h3>Wordpress Development</h3>
             <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. cupiditate quidem veritatis repellat nesciunt ea
-              quibusdam reprehenderit nam?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              cupiditate quidem veritatis repellat nesciunt ea quibusdam
+              reprehenderit nam?
             </p>
             <a href="#"><button>Learn More ></button></a>
           </div>
@@ -115,8 +115,7 @@ <h3>Wordpress Development</h3>
             <h3>Android Development</h3>
             <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
-              modi, numquam cupiditate ea
-              quibusdam reprehenderit nam?
+              modi, numquam cupiditate ea quibusdam reprehenderit nam?
             </p>
             <a href="#"><button>Learn More ></button></a>
           </div>
@@ -141,6 +140,43 @@ <h3>SEO Services</h3>
           </div>
         </div>
       </section>
+
+      <!-- projects -->
+
+      <section>
+        <h2 class="projects-text">PROJECTS</h2>
+        <div class="projects">
+          <div>
+            <img src="images/project1.jpg" alt="" />
+            <h3>Portfolio Websites</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Provident, minus. Quam officiis fuga ratione qui assumenda,
+              quibusdam distinctio Quas!
+            </p>
+          </div>
+          <div>
+            <img src="images/project2.jpg" alt="" />
+            <h3>company website</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Provident, minus. Quam officiis fuga ratione qui assumenda,
+              quibusdam distinctio Quas!
+            </p>
+          </div>
+          <div>
+            <img src="images/project3.jpg" alt="" />
+            <h3>Ticket booking</h3>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Provident, minus. Quam officiis fuga ratione qui assumenda,
+              quibusdam distinctio Quas!
+            </p>
+          </div>
+        </div>
+      </section>
+
+
     </main>
   </body>
 </html>

design 3/images/project2.jpg

@@ -183,3 +183,31 @@ section .services-header{
   cursor: pointer;
   transition: 0.2s;
 }
+
+/* projects */
+
+section .projects-text{
+  height: 100px;
+  line-height: 200px;
+  text-align: center;
+}
+section .projects{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 100px);
+  color: rgb(73, 73, 73);
+}
+section .projects div{
+  width: 300px;
+  height: 500px;
+  text-align: center;
+  margin-left: 50px;
+  padding: 50px 0;
+}
+section .projects img{
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  margin-bottom: 20px;
+}