project-sharing-website2/learn.html at main · Ash182004/project-sharing-website2 · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
    />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
    <title>Project Spotlight || Showcase your projects </title>
  </head>
  <body>
    <header class="header" >
      <div class="header__socials" style="position: fixed;">
        <a href="#"><i class="ri-mail-fill"></i></a>
        <a href="#"><i class="ri-github-fill"></i></a>
        <a href="#"><i class="ri-linkedin-fill"></i></a>
      </div>
      <nav>
        <div class="nav__bar">
          <div class="nav__header">
            <div class="nav__logo">
              <a href="#">Project Spotlight<span></span></a>
            </div>
            <div class="nav__menu__btn" id="menu-btn">
              <span><i class="ri-menu-3-line"></i></span>
            </div>
          </div>
          <ul class="nav__links" id="nav-links">
            <li class="link btn"><a href="learn.html">Learn</a></li>

            <li class="link"><a href="projects.html">Projects</a></li>

            <li class="link"><a href="mentor.html">Mentorship</a></li>
            <li class="link"><a href="events.html">Events</a></li>
            <li class="link"><a href="profile.html">Profile</a></li>
          </ul>
        </div>
      </nav>


      <div class="row mb-2" style="width: 80%; margin-left: 150px;">
        <div class="col-md-6">
          <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
            <div class="col p-4 d-flex flex-column position-static">
              <strong class="d-inline-block mb-2 text-primary-emphasis">development</strong>
              <h3 class="mb-0">Web development</h3>
              <div class="mb-1 text-body-secondary">Nov 12</div>
              <p class="card-text mb-auto">Web development is the backbone of the internet,
                 turning ideas into interactive websites and applications that drive businesses, communities, and innovation..</p><br>
              <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
                start course
                <svg class="bi"><use xlink:href="#chevron-right"></use></svg>
              </a>
            </div>
            <div class="col-auto d-none d-lg-block">
              <img src="Screenshot 2024-08-24 180118.png" class="bd-placeholder-img rounded-circle" style="margin-top: 60px; margin-right: 30px; margin-right: 20px;"     width="180" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect></img>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
            <div class="col p-4 d-flex flex-column position-static">
              <strong class="d-inline-block mb-2 text-success-emphasis">development</strong>
              <h3 class="mb-0">App development</h3>
              <div class="mb-1 text-body-secondary">Nov 11</div>
              <p class="mb-auto">In today’s mobile-first world, app development is key to reaching users
                where they spend most of their time—on their smartphones and tablets. </p><br>
              <a href="#" class="icon-link gap-1 icon-link-hover

> Ashmiti:
stretched-lin

> Ashmiti:
aw footage,
                images, and text into polished, professional-quality media. </p><br>
              <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
                start course
                <svg class="bi"><use xlink:href="#chevron-right"></use></svg>
              </a>
            </div>
            <div class="col-auto d-none d-lg-block">
              <img src="Screenshot 2024-08-25 131938.png" class="bd-placeholder-img rounded-circle" style="margin-top: 60px; margin-right: 30px"     width="180" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect></img> </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
            <div class="col p-4 d-flex flex-column position-static">
              <strong class="d-inline-block mb-2 text-success-emphasis">Constructions</strong>
              <h3 class="mb-0">SEO</h3>
              <div class="mb-1 text-body-secondary">Nov 11</div>
              <p class="mb-auto"> Construction is about more than just building structures;
                it’s about creating spaces that inspire, function, and stand the test of time.</p>
              <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
                start course
                <svg class="bi"><use xlink:href="#chevron-right"></use></svg>
              </a>
            </div>
            <div class="col-auto d-none d-lg-block">
              <img src="Screenshot 2024-08-25 131917.png" class="bd-placeholder-img rounded-circle" style="margin-top: 60px; margin-right: 30px"     width="180" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect></img>  </div>
          </div>
        </div>
      </div>


    <footer class="footer" id="contact">
      <div class="section__container footer__container">
        <div class="footer__col">
          <h5><a href="#">Project Spotlight</a></h5>
          <p>
            Upload your projects, share your journey, and inspire others by displaying your achievements in our curated gallery.
            We believe in the power of collaboration and community, so we've made it easy for you to connect with like-minded individuals,
            gain feedback, and take your projects to the next level.
          </p>
          <div class="footer__socials">
            <a href="#"><i class="ri-mail-fill"></i></a>
            <a href="#"><i class="ri-github-fill"></i></a>
            <a href="#"><i class="ri-linkedin-fill"></i></a>
            <a href="#"><i class="ri-twitter-fill"></i></a>
            <a href="#"><i class="ri-dribbble-line"></i></a>
          </div>
        </div>
        <div class="footer__col">
          <h4>Services</h4>
          <div class="footer__links">
            <a href="#">Project Management</a>
            <a href="#">Get Mentorship</a>
            <a href="#">Support</a>
            <a href="#">Get feedback</a>
            <a href="#">Upload project
            </a>
          </div>
        </div>
        <div class="footer__col">
          <h4>Support</h4>
          <div class="footer__links">
            <a href="#">Contact</a>
            <a href="#">users</a>
            <a href="#">Privacy Policy</a>
          </div>
        </div>
      </div>
      <div class="footer__bar">
        Copyright © 2024 Web Addicted . All rights reserved.
      </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script>
    <script src="https://unpkg.com/scrollreveal"></script>
    <script


src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>