Merge pull request #113 from coder-ralph/master

Master

anime/README.md

@@ -0,0 +1,29 @@
+# Anime - Free Portfolio Website Templates
+
+An Anime Portfolio Template for you!
+
+![Anime - Screenshot](./assets/anime.png "Anime - Screenshot")
+
+## ⚡ Features
+
+✅ Fast
+
+✅ FREE
+
+✅ Mobile Responsive
+
+✅ SEO Friendly
+
+✅ Compatible with any web server
+
+✅ 0 Dependencies
+
+## 📃 License
+
+[![](https://img.shields.io/static/v1?label=LICENSE&message=MIT&style=for-the-badge&color=blueviolet)](https://opensource.org/licenses/MIT)
+
+## 🤔 I am not a web developer, how do I setup my portfolio website?
+
+> Need help with setting up your portfolio website?
+
+> Contact us at https://ossph.org

anime/assets/styles.css

@@ -181,6 +181,58 @@ section {
   margin-right: 20px;
 }
 
+/* Services Section */
+.center {
+  text-align: center;
+}
+
+.center h3 {
+  color: var(--text-color);
+  font-size: 30px;
+  font-weight: 300;
+  letter-spacing: 6px;
+}
+
+.service-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, auto));
+  grid-gap: 2rem;
+  align-items: center;
+  margin-top: 4.4rem;
+}
+
+.row {
+  background: #0b0b13;
+  padding: 60px 35px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all .40s;
+}
+
+.row i{
+  color: var(--main-color);
+  font-size: 3rem;
+  margin-bottom: 20px;
+}
+
+.row h3 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: 20px;
+  color: var(--text-color);
+}
+
+.row p {
+  font-size: 18px;
+  color: var(--2nd-main-color);
+  line-height: 30px;
+}
+
+.row:hover {
+  transform: translateY(-15px);
+  box-shadow: 0px 15px 30px 0px rgb(0 0 0 / 70%);
+}
+
 /* CTA Section */
 .cta {
   background: #0b0b13;
@@ -429,5 +481,12 @@ form .send-btn:hover {
   .contact-form form {
     width: 100%;
   }
+  .service-content {
+    grid-template-columns: 1fr;
+  }
+
+  .row {
+    padding: 30px 20px;
+  }
 }
 

anime/index.html

@@ -40,6 +40,7 @@
     <ul class="navbar">
       <li><a href="#home">Home</a></li>
       <li><a href="#about">About</a></li>
+      <li><a href="#services">Services</a></li>
       <li><a href="#resume">Resume</a></li>
       <li><a href="#contact">Contact</a></li>
     </ul>
@@ -79,6 +80,44 @@ <h2>I'm a Software Developer.</h2>
   </section>
   <!-- End of About Section -->
 
+  <!-- Start of Services Section -->
+  <section class="services" id="services">
+    <div class="center">
+      <h3>WHAT I DO?</h3>
+    </div>
+
+    <div class="service-content">
+      <!-- service 01 -->
+      <div class="row">
+        <i class='bx bx-code-alt'></i>
+        <h3>Web Development</h3>
+        <p>Crafting innovative and user-friendly websites with cutting-edge technologies.</p>
+      </div>
+
+      <!-- service 02 -->
+      <div class="row">
+        <i class='bx bx-code-alt'></i>
+        <h3>Web Development</h3>
+        <p>Crafting innovative and user-friendly websites with cutting-edge technologies.</p>
+      </div>
+
+      <!-- section 03 -->
+      <div class="row">
+        <i class='bx bxl-sketch'></i>
+        <h3>Graphic Designer</h3>
+        <p>Bringing creativity to life through captivating and visually appealing designs.</p>
+      </div>
+
+      <!-- section 04 -->
+      <div class="row">
+        <i class='bx bxl-sketch'></i>
+        <h3>Graphic Designer</h3>
+        <p>Bringing creativity to life through captivating and visually appealing designs.</p>
+      </div>
+    </div>
+  </section>
+  <!-- End of Services Section -->
+
   <!-- CTA Section -->
   <section class="cta">
     <h4>Let's make something great together!</h4>