76fac4516f464b2beddb568190689f5297f93817
[vnfsdk/refrepo.git] /
1 <!doctype html>
2 <html lang="en">
3   <head>
4     <meta charset="utf-8">
5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6     <meta name="description" content="">
7     <meta name="author" content="">
8     <link rel="icon" href="../../../../favicon.ico">
9
10     <title>Product example for Bootstrap</title>
11
12     <!-- Bootstrap core CSS -->
13     <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
14
15     <!-- Custom styles for this template -->
16     <link href="product.css" rel="stylesheet">
17   </head>
18
19   <body>
20
21     <nav class="site-header sticky-top py-1">
22       <div class="container d-flex flex-column flex-md-row justify-content-between">
23         <a class="py-2" href="#">
24           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
25         </a>
26         <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
27         <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
28         <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
29         <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
30         <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
31         <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
32         <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
33       </div>
34     </nav>
35
36     <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
37       <div class="col-md-5 p-lg-5 mx-auto my-5">
38         <h1 class="display-4 font-weight-normal">Punny headline</h1>
39         <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.</p>
40         <a class="btn btn-outline-secondary" href="#">Coming soon</a>
41       </div>
42       <div class="product-device box-shadow d-none d-md-block"></div>
43       <div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
44     </div>
45
46     <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
47       <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
48         <div class="my-3 py-3">
49           <h2 class="display-5">Another headline</h2>
50           <p class="lead">And an even wittier subheading.</p>
51         </div>
52         <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
53       </div>
54       <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
55         <div class="my-3 p-3">
56           <h2 class="display-5">Another headline</h2>
57           <p class="lead">And an even wittier subheading.</p>
58         </div>
59         <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
60       </div>
61     </div>
62
63     <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
64       <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
65         <div class="my-3 p-3">
66           <h2 class="display-5">Another headline</h2>
67           <p class="lead">And an even wittier subheading.</p>
68         </div>
69         <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
70       </div>
71       <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
72         <div class="my-3 py-3">
73           <h2 class="display-5">Another headline</h2>
74           <p class="lead">And an even wittier subheading.</p>
75         </div>
76         <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
77       </div>
78     </div>
79
80     <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
81       <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
82         <div class="my-3 p-3">
83           <h2 class="display-5">Another headline</h2>
84           <p class="lead">And an even wittier subheading.</p>
85         </div>
86         <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
87       </div>
88       <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
89         <div class="my-3 py-3">
90           <h2 class="display-5">Another headline</h2>
91           <p class="lead">And an even wittier subheading.</p>
92         </div>
93         <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
94       </div>
95     </div>
96
97     <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
98       <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
99         <div class="my-3 p-3">
100           <h2 class="display-5">Another headline</h2>
101           <p class="lead">And an even wittier subheading.</p>
102         </div>
103         <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
104       </div>
105       <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
106         <div class="my-3 py-3">
107           <h2 class="display-5">Another headline</h2>
108           <p class="lead">And an even wittier subheading.</p>
109         </div>
110         <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
111       </div>
112     </div>
113
114     <footer class="container py-5">
115       <div class="row">
116         <div class="col-12 col-md">
117           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
118           <small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
119         </div>
120         <div class="col-6 col-md">
121           <h5>Features</h5>
122           <ul class="list-unstyled text-small">
123             <li><a class="text-muted" href="#">Cool stuff</a></li>
124             <li><a class="text-muted" href="#">Random feature</a></li>
125             <li><a class="text-muted" href="#">Team feature</a></li>
126             <li><a class="text-muted" href="#">Stuff for developers</a></li>
127             <li><a class="text-muted" href="#">Another one</a></li>
128             <li><a class="text-muted" href="#">Last time</a></li>
129           </ul>
130         </div>
131         <div class="col-6 col-md">
132           <h5>Resources</h5>
133           <ul class="list-unstyled text-small">
134             <li><a class="text-muted" href="#">Resource</a></li>
135             <li><a class="text-muted" href="#">Resource name</a></li>
136             <li><a class="text-muted" href="#">Another resource</a></li>
137             <li><a class="text-muted" href="#">Final resource</a></li>
138           </ul>
139         </div>
140         <div class="col-6 col-md">
141           <h5>Resources</h5>
142           <ul class="list-unstyled text-small">
143             <li><a class="text-muted" href="#">Business</a></li>
144             <li><a class="text-muted" href="#">Education</a></li>
145             <li><a class="text-muted" href="#">Government</a></li>
146             <li><a class="text-muted" href="#">Gaming</a></li>
147           </ul>
148         </div>
149         <div class="col-6 col-md">
150           <h5>About</h5>
151           <ul class="list-unstyled text-small">
152             <li><a class="text-muted" href="#">Team</a></li>
153             <li><a class="text-muted" href="#">Locations</a></li>
154             <li><a class="text-muted" href="#">Privacy</a></li>
155             <li><a class="text-muted" href="#">Terms</a></li>
156           </ul>
157         </div>
158       </div>
159     </footer>
160
161
162     <!-- Bootstrap core JavaScript
163     ================================================== -->
164     <!-- Placed at the end of the document so the pages load faster -->
165     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
166     <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
167     <script src="../../../../assets/js/vendor/popper.min.js"></script>
168     <script src="../../../../dist/js/bootstrap.min.js"></script>
169     <script src="../../../../assets/js/vendor/holder.min.js"></script>
170     <script>
171       Holder.addTheme('thumb', {
172         bg: '#55595c',
173         fg: '#eceeef',
174         text: 'Thumbnail'
175       });
176     </script>
177   </body>
178 </html>