Bootstarters/index.html at master · ComputeWorks/Bootstarters · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Material Design for Bootstrap</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
  <!-- MDB ESSENTIAL -->
  <link rel="stylesheet" href="css/mdb.min.css" />
  <!-- MDB PLUGINS -->
  <link rel="stylesheet" href="plugins/css/all.min.css" />
  <!-- Custom styles -->
  <style>
    .shadowed {
      -webkit-filter: drop-shadow(12px 12px 25px rgba(0, 0, 0, 0.3)) !important;
      filter: url(#drop-shadow);
      -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
      filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    }

    .logo-circle {
      background-color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }

    .bg-theme {
      background-color: #DA314F !important;
    }
  </style>
</head>

<body style="background-color:rgb(255, 240, 240);">
  <!-- Start your project here-->
  <div class="container">
    <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
      <div class="text-center">
        <img class="shadowed" src="https://mdbgo.io/filipkapusta/bootstarters/bootstarters.png"
          style="height: 200px;" />
        <div class="text-start my-5">
          <h5 class="my-3">Bootstarters - starter templates for Bootstrap 5</h5>
          <p class="mb-3">You will find all of the HTML templates directly in root folder.</p>
          <p class="mb-3">For more components & customization options see <a href="https://mdbootstrap.com/">MDB
              documentation</a>.</p>
        </div>
        <a class="btn btn-primary bg-theme btn-lg btn-block mb-3" href="https://mdbootstrap.com/docs/standard/getting-started/"
          target="_blank" role="button">Tutorials</a>
        <a class="btn btn-outline-danger btn-lg btn-block mb-3"
          href="https://mdbootstrap.com/docs/standard/getting-started/changelog/" target="_blank" role="button">UI KIT
          Changelog</a>
        <a class="btn btn-outline-danger btn-lg btn-block mb-3"
          href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">NPM,
          CDN & other installation options</a>
        <a class="btn btn-outline-danger btn-lg btn-block mb-3" href="https://mdbootstrap.com/docs/standard/cli/"
          target="_blank" role="button">Free hosting & deployment tool</a>

        <p  class="mt-5 fw-bold">Other UI KIT versions:</p>
        <div class="d-flex justify-content-around mt-3"><a href="https://mdbootstrap.com/docs/b5/react/"
            class="logo-circle d-flex align-items-center justify-content-center me-2 hover-shadow">
            <img
              src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/react.png"
              style="filter: saturate(200%) brightness(70%)">
          </a>
          <a href="https://mdbootstrap.com/docs/b5/vue/"
            class="logo-circle d-flex align-items-center justify-content-center me-2 hover-shadow">
            <img
              src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/vue.png"
              style="filter: saturate(200%) brightness(70%)">
          </a>
          <a href="https://mdbootstrap.com/docs/b5/angular/"
            class="logo-circle d-flex align-items-center justify-content-center me-2 hover-shadow">
            <img
              src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/_assets/img/icons/angular.png"
              style="filter: saturate(200%) brightness(70%)">
          </a></div>


      </div>
    </div>
  </div>
  <!-- End your project here-->
</body>

<!-- MDB ESSENTIAL -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- MDB PLUGINS -->
<script type="text/javascript" src="plugins/js/all.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>

</html>