Assignment_LookAndFeel/article.html at master · arpanjaiswal/Assignment_LookAndFeel · 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />


    <!-- website font  -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <title>Article</title>
</head>

<body>

    <!-- Navbar 2 Start -->
    <section id="Nav2">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="index.html"><img src="imgs/logo.png" width="140" height="auto" alt="Logo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="About-us.html">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link selected" href="article.html">Articles</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="dashboard.html">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="donor.html">Donors</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="Recipients.html">Recipients</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="bloodBag.html">Blood Bag Availability</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact-us.html">Contact Us</a>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
    <!-- Navbar 2 End -->

    <!-- Navigator Start -->
    <section id="navigator">
        <div class="container">
            <div class="path">
                <div class="path-main" style="color: darkred; display:inline-block;">Home</div>
                <div class="path-directio" style="color: grey; display:inline-block;"> / Articles</div>
            </div>

        </div>
    </section>
    <!-- Navigator End -->

    <!-- article Start -->
    <section id="article">
        <div class="container">
            <!-- Articles Start -->
            <section id="articles">
                <div class="container">
                    <h2 style="display: inline-block;">Articles</h2>
                    <div class="swiper-container">
                        <div class="button-area" style="display: inline-block; margin-left: 850px;">
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                            </button>
                        </div>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="card">
                                    <div class="card-img-top" style="position: relative;">
                                        <img src="imgs/p3.jpg" alt="Card image">
                                        <button class="like"><i class="fas fa-heart icon-large"></i></button>
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title">Blood Types</h4>
                                        <p class="card-text">This comprehensive article provides an in-depth examination of the intricate system of blood types. We delve into the nuances of blood classification, including the ABO system and the Rh factor, and discuss the significance of compatibility in blood transfusions. Understanding blood types is paramount in healthcare settings, as it determines the suitability of donor blood for recipients and minimizes the risk of adverse reactions. We explore the characteristics of each blood type, their distribution in the population, and the implications for medical treatment and transfusion therapy. By gaining insights into blood types, readers will develop a deeper appreciation for the complexity of blood biology and the importance of blood donation in maintaining public health.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="card">
                                    <div class="card-img-top" style="position: relative;">
                                        <img src="imgs/p4.jpg" alt="Card image">
                                        <button class="like"><i class="fas fa-heart icon-large"></i></button>
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title">Donations Benefits</h4>
                                        <p>In this article, we delve into the wide-ranging benefits of blood donation. Not only does donating blood provide a critical lifeline for individuals in need during emergencies and medical procedures, but it also offers numerous advantages for the donors themselves. Research suggests that regular blood donation can have positive effects on the donor's health, such as reducing the risk of cardiovascular diseases and certain types of cancer. Additionally, blood donation promotes the renewal of blood cells, which helps maintain overall vitality and well-being. By participating in blood donation programs, individuals not only contribute to the greater good of society but also reap significant health benefits for themselves.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="card ">
                                    <div class="card-img-top" style="position: relative;">
                                        <img src="imgs/p1.jpg" alt="Card image">
                                        <button class="like"><i class="fas fa-heart icon-large"></i></button>
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title">Disease Protection</h4>
                                        <p class="card-text">In this illuminating article, we shed light on the preventive aspects of blood donation beyond its immediate life-saving impact. While blood donation is often associated with emergencies and medical treatments, its benefits extend far beyond these scenarios. Research suggests that regular blood donation can confer protective effects against certain diseases, including cardiovascular conditions and iron overload disorders. Furthermore, blood donation plays a crucial role in supporting community healthcare initiatives by ensuring an adequate blood supply for patients in need. By exploring the intersection of blood donation and disease prevention, readers will gain a deeper understanding of the holistic benefits of this altruistic act and its contribution to public health.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="card">
                                    <div class="card-img-top" style="position: relative;">
                                        <img src="imgs/p5.jpg" alt="Card image">
                                        <button class="like"><i class="fas fa-heart icon-large"></i></button>
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title">How To Donate?</h4>
                                        <p class="card-text">This comprehensive guide offers invaluable insights into the blood donation journey, empowering readers to become active participants in this life-saving endeavor. We break down the donation process into manageable steps, beginning with the preliminary eligibility assessment to determine suitability for donation. We provide practical tips and recommendations for donors, including dietary considerations, hydration strategies, and relaxation techniques to optimize the donation experience. Additionally, we offer guidance on what to expect during the donation procedure and how to care for oneself afterward. By demystifying the blood donation process and addressing common concerns and misconceptions, this article aims to inspire and educate individuals to take proactive steps towards making a positive impact on society.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Articles End -->

        </div>
    </section>
    <!-- Article End -->

    <section id="sub-footer"></section>

  <!-- Footer Start -->
  <section id="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <div class="foot-info">
                    <img src="imgs/logo.png" alt="">
                </div>
            </div>
            <div class="col-md-6 col-lg-8 footer-menu">
                <div class="row">
                    <div class="col-sm-6 col-md-3">
                        <ul class="menu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="donor.html">Donors</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <ul class="menu">
                            <li><a href="About-us.html">About Us</a></li>
                            <li><a href="Recipients.html">Recipients</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <ul class="menu">
                            <li><a href="article.html">Articles</a></li>
                            <li><a href="bloodBag.html">Availability</a></li>

                        </ul>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <ul class="menu">
                            <li><a href="dashboard.html">Dashboard</a></li>
                            <li><a href="contact-us.html">Contact Us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/wow.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>