BootstrapPractical/index.html at master · sodaney/BootstrapPractical · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Trade+Winds&display=swap" rel="stylesheet">
</head>
<body>
    <section id="nav-bar">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">EX Group</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <i class="fa fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a class="nav-link" href="#top">HOME</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#service">SERVICE</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#about-us">ABOUT US</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#testimonials">TESTIMONIALS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#footer">CONTACT</a>
                  </li>
              </ul>
            </div>
          </nav>
    </section>

<!-----------------Banner section------------------->
    <section id="banner">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-6">
            <p class="promo-title">Social Media Agency</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <a href="#"><img src="images/playbtn2.png" class="playbtn">Watch Demo</a>
          </div>
          <div class="col-md-12 col-lg-6 text-center">
            <img src="images/socialmedia.png" class="img-fluid">
          </div>
        </div>
      </div>
      <div><img src="images/wave1.png" class="wave1"></div>
    </section>

  <!--------------Service Section--------------------->
  <section id="service">
    <div class="containter text-center">
      <h1 class="title">WHAT WE DO ?</h1>
      <div class="row text-center" style="margin-left: 0px; margin-right: 0px;">
        <div class="col-md-4 services">
          <img src="images/marketing.png" class="service-img">
          <h4>Growth Marketing</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Platea dictumst quisque sagittis purus sit amet volutpat consequat. Amet tellus cras adipiscing enim eu turpis. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Non enim praesent elementum facilisis leo. Et magnis dis parturient montes nascetur ridiculus mus mauris. Erat nam at lectus urna. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Volutpat odio facilisis mauris sit amet massa. Lacus suspendisse faucibus interdum posuere lorem ipsum. Vel quam elementum pulvinar etiam non quam lacus. Sit amet facilisis magna etiam tempor. Eu augue ut lectus arcu bibendum at. Et malesuada fames ac turpis egestas maecenas pharetra. Sagittis id consectetur purus ut faucibus.</p>
        </div>
        <div class="col-md-4 services">
          <img src="images/onlinebranding.png" class="service-img">
          <h4>Online Branding</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Platea dictumst quisque sagittis purus sit amet volutpat consequat. Amet tellus cras adipiscing enim eu turpis. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Non enim praesent elementum facilisis leo. Et magnis dis parturient montes nascetur ridiculus mus mauris. Erat nam at lectus urna. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Volutpat odio facilisis mauris sit amet massa. Lacus suspendisse faucibus interdum posuere lorem ipsum. Vel quam elementum pulvinar etiam non quam lacus. Sit amet facilisis magna etiam tempor. Eu augue ut lectus arcu bibendum at. Et malesuada fames ac turpis egestas maecenas pharetra. Sagittis id consectetur purus ut faucibus.</p>
        </div>
        <div class="col-md-4 services">
          <img src="images/ads.png" class="service-img">
          <h4>Animated Ads</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Platea dictumst quisque sagittis purus sit amet volutpat consequat. Amet tellus cras adipiscing enim eu turpis. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Non enim praesent elementum facilisis leo. Et magnis dis parturient montes nascetur ridiculus mus mauris. Erat nam at lectus urna. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Volutpat odio facilisis mauris sit amet massa. Lacus suspendisse faucibus interdum posuere lorem ipsum. Vel quam elementum pulvinar etiam non quam lacus. Sit amet facilisis magna etiam tempor. Eu augue ut lectus arcu bibendum at. Et malesuada fames ac turpis egestas maecenas pharetra. Sagittis id consectetur purus ut faucibus.</p>
        </div>
      </div>
      <button type="button" class="btn btn-primary">All services</button>
    </div>
  </section>

<!----------------About Us------------------->
<section id="about-us">
  <div class="container">
    <h1 class="title text-center">WHY CHOOSE US ?</h1>
    <div class="row">
      <div class="col-md-6 about-us">
        <p class="about-title">Why we're different?</p>
        <ul>
          <li>This is why we are different</li>
          <li>This is why we are different</li>
          <li>This is why we are different</li>
          <li>This is why we are different</li>
          <li>This is why we are different</li>
          <li>This is why we are different</li>
          <li>This is why we are different</li>
        </ul>
      </div>
      <div class="col-md-6">
        <img src="images/network.png" class="img-fluid">
      </div>
    </div>
  </div>
</section>

<!---------------Testimonials-------------------->
<section id="testimonials">
  <div class="container">
    <h1 class="title text-center">WHAT CLIENT SAY ?</h1>
    <div class="row offset-1">
      <div class="col-md-5 testimonials">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Platea dictumst quisque sagittis purus sit amet volutpat consequat.</p>
        <img src="images/pf1.jpg">
        <p class="user-details"><b>John Doe</b> CEO of EX Group</p>
      </div>
      <div class="col-md-5 testimonials">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Platea dictumst quisque sagittis purus sit amet volutpat consequat.</p>
        <img src="images/pf1.jpg">
        <p class="user-details"><b>John Doe</b> CEO of EX Group</p>
      </div>
    </div>
  </div>
</section>

<!----------------Social Media--------------->
<section id="social-media">
  <div class="container text-center">
    <p>FIND US ON SOCIAL MEDIA</p>
    <div class="social-icons">
      <a href="#"><img src="images/facebook.png"></a>
      <a href="#"><img src="images/instagram.png"></a>
      <a href="#"><img src="images/snapchat.png"></a>
      <a href="#"><img src="images/twitter.png"></a>
      <a href="#"><img src="images/whatsapp.png"></a>
      <a href="#"><img src="images/linkdin.png"></a>
    </div>
  </div>
</section>

<!------------Footer-------------------------->
<section id="footer">
  <img src="images/wave2.png" class="footer-img">
  <div class="container">
    <div class="row">
      <div class="col-md-4 footer-box">
        <p class="navbar-brand">EX Group</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Platea dictumst quisque sagittis purus sit amet volutpat consequat.</p>
      </div>
      <div class="col-md-4 footer-box">
        <p><b>CONTACT US</b></p>
        <p><i class="fa fa-map-marker"></i>Headquarter Office</p>
        <p><i class="fa fa-phone"></i>+1 0123456789</p>
        <p><i class="fa fa-envelope-o"></i>xyz@example.com</p>
      </div>
      <div class="col-md-4 footer-box">
        <p><b>SUBCRIBE NEWSLETTER</b></p>
        <input type="email" class="form-control" placeholder="Enter your email">
        <button type="button" class="btn btn-primary">Subscribe</button>
      </div>
    </div>
    <hr>
    <p class="copyright">Website Crafted by EX Group</p>
  </div>
</section>

<!-------------Smooth Scroll--------------->
<script src="smooth-scroll.js"></script>
<script>
	var scroll = new SmoothScroll('a[href*="#"]');
</script>
</body>
</html>