craftskills/service.html at main · muhammadali832/craftskills · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="service.css">
    <title>Craft Skills - Services</title>
    <link rel="Icon" type="image/png" href="mmain.png">

</head>
<body>
    <div class="manu-bar">
        <a href="home.html">  <img src="mmain.png" alt="Logo" class="logo-img">
        </a>
        <div class="menu-toggle">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <ul class="nav-list">
            <li><a href="home.html" class="list">Home</a></li>
            <li><a href="about.html" class="list">About</a></li>
            <li><a href="service.html" class="list">Services</a></li>
            <li><a href="contact.html" class="list">Contact</a></li>
        </ul>
    </div>
 <!-- Features Section -->
 <section class="features">
    <h2>Our Features & Services</h2>
    <div class="services-container">
        <!-- Digital Marketing -->
        <div class="service-box">
            <img src="Untitled design (2).png" alt="Digital Marketing" style="position: relative; left: 20px;">
            <h3>Digital Marketing</h3>
            <p>Boost your brand's presence with our modern marketing solutions.</p>
            <a href="digitalmarketingservice.html"><button>Learn More</button></a>
        </div>
        <!-- Front-End Development -->
        <div class="service-box">
            <img src="front-end.png" alt="Front End Development" style="position: relative; left: 20px;">
            <h3>Front-End Development</h3>
            <p>We design interactive, fast, and responsive websites for you.</p>
            <a href="frontendser.html"><button>Learn More</button></a>
        </div>
        <!-- Shopify -->
        <div class="service-box">
            <img src="shopify.png" alt="Shopify" style="position: relative; left: 20px;">
            <h3>Shopify</h3>
            <p>Custom Shopify stores designed for smooth eCommerce experiences.</p>
            <a href="shopify.html"><button>Learn More</button></a>
        </div>
        <!-- Graphic Designing -->
        <div class="service-box">
            <img src="graphic design.png" alt="Graphic Designing" style="position: relative; left: 20px;">
            <h3>Graphic Designing</h3>
            <p>Creative designs to make your brand stand out and shine.</p>
            <a href="graphic.html"><button>Learn More</button></a>
        </div>
    </div>
</section>

 <!-- Our Priority Section -->
<section class="priority-section">
    <div class="section-heading">
      <h2>Our Priority</h2>
      <p>We value your success and work to deliver the best possible services.</p>
    </div>
    <div class="priority-container">
      <!-- Card 1 -->
      <div class="priority-card">
        <img src="gggggl.png" alt="Goal Icon" />
        <h3>Your Goals</h3>
        <p>We align our work with your goals to achieve business growth.</p>
      </div>
      <!-- Card 2 -->
      <div class="priority-card">
        <img src="bbb.png" alt="Quality Icon" />
        <h3>Quality Services</h3>
        <p>Providing high-quality and reliable services is our core focus.</p>
      </div>
      <!-- Card 3 -->
      <div class="priority-card">
        <img src="Commitmen.png" alt="Commitment Icon" />
        <h3>Commitment</h3>
        <p>We are committed to ensuring you receive timely and effective solutions.</p>
      </div>
    </div>
  </section>


  <div class="contact-section">
    <div class="contact-info">
        <h3>Contact Info</h3>
        <p>Contact us</p>
        <ul>
            <li><i class="icon skype"></i> Email: aliejaz1656@gmail.com</li>
            <li><i class="icon whatsapp"></i> WhatsApp: +923000439400</li>
        </ul>
    </div>
    <div class="contact-form">
        <h3>Contact Form</h3>
        <form>
            <input type="text" placeholder="Name" required>
            <input type="email" placeholder="Email *" required>
            <textarea placeholder="Message *" required></textarea>
            <button type="submit">SEND</button>
        </form>
    </div>
</div>
<footer>
    <p>&COPY; Craft Skills have all right reserved 2024</p>
    <script>
        // Automatically update the year
        const yearSpan = document.getElementById("current-year");
        const currentYear = new Date().getFullYear();
        yearSpan.textContent = currentYear;
    </script>
</footer>


<script src="service.js"></script>
</body>
</html>