-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (119 loc) · 6.55 KB
/
index.html
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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Bootstrap Breakpoints</title>
<meta name="description" content="Always know breakpoint you're working in when using Bootstrap">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<!-- <link rel="stylesheet" href="css/output.css">-->
<link href="https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,200;0,600;1,900&display=swap"
rel="stylesheet">
<script async defer data-domain="bootstrapbreakpoints.com" src="https://plausible.io/js/plausible.js"></script>
<script>window.plausible = window.plausible || function () {
(window.plausible.q = window.plausible.q || []).push(arguments)
}</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
.bmc-button img {
height: 34px !important;
width: 35px !important;
margin-bottom: 1px !important;
box-shadow: none !important;
border: none !important;
vertical-align: middle !important;
}
.bmc-button {
padding: 7px 15px 7px 10px !important;
line-height: 35px !important;
height: 51px !important;
text-decoration: none !important;
display: inline-flex !important;
color: #ffffff !important;
background-color: #000000 !important;
border-radius: 5px !important;
border: 1px solid transparent !important;
padding: 7px 15px 7px 10px !important;
font-size: 28px !important;
letter-spacing: 0.6px !important;
box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
margin: 0 auto !important;
font-family: 'Cookie', cursive !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.bmc-button:hover, .bmc-button:active, .bmc-button:focus {
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
text-decoration: none !important;
box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
opacity: 0.85 !important;
color: #ffffff !important;
}
</style>
</head>
<body>
<script src="https://awesomecdn.netlify.app/bs.js"></script>
<div class="hero py-5 bg-gradient">
<div class="container py-4 text-center font-bold text-white">
<h1 class="display-4" style="font-weight: 900"><strong>Bootstrap Breakpoints</strong></h1>
<h5 class="">A tiny little thing that helps you keep track of your Bootstrap breakpoints.</h5>
<div class="mt-5">
<a href="https://github.com/GigaMick/bootstrap-tailwind-breakpoints" target="_blank"
class="border border-gray-200 shadow text-gray-200 bg-gray-400 bg-opacity-25 rounded p-3 text-white">View on
GitHub</a>
</div>
<div class="mt-4 pt-3">
<p class="text-center text-white mb-0"><a class="text-white" href="https://tailwindbreakpoints.com/?ref=bsbp">Prefer Tailwind?</a></p>
</div>
</div>
</div>
<div class="container mx-auto">
<h3 class="text-center mt-5"><strong>Always know your breaking point</strong></h3>
<h5 class="c-h6 mt-2 text-center">Supremely simple & really quite useful. Drag your browser in and out to see it
working.</h5>
<p class="text-center mt-4 text-xl">Just copy the markup below into the body of any pages you’re working on and
you’ll
always know what
break point you’re in.</p>
</div>
<div class="flex justify-center py-4" onclick="plausible('html_copy')">
<div class="container d-flex align-items-centre justify-content-center">
<pre class="max-w-full overflow-scroll text-muted px-5 py-4 inline-block mx-auto bg-light rounded border-solid border-gray-400 border small"><code><div class="position-fixed" style="z-index: 9999999">
<span class="badge badge-warning d-inline-block d-sm-none">XS</span>
<span class="badge badge-warning d-none d-sm-inline-block d-md-none">SM</span>
<span class="badge badge-warning d-none d-md-inline-block d-lg-none">MD</span>
<span class="badge badge-warning d-none d-lg-inline-block d-xl-none">LG</span>
<span class="badge badge-warning d-none d-xl-inline-block">XL</span>
</div></code></pre> </div>
</div>
<div class="d-flex justify-content-center" onclick="plausible('cdn_copy')">
<div class="container d-flex justify-content-center flex-column">
<p class="text-center mb-2">Or paste the CDN link into the <strong><body></strong> of your pages</p>
<pre class="max-w-full overflow-scroll text-muted px-5 py-4 inline-block mx-auto bg-light rounded border-solid border-gray-400 border text-xs"><code><script src="https://awesomecdn.netlify.app/bs.js"></script></code></pre></div>
</div>
<div class="d-flex flex-column justify-content-center align-items-center text-center py-0">
<p class="mb-2 mt-4 pt-0">If you found this helpful, I appreciate coffee 🤓</p>
<a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/ProductGuy"><img
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee"><span
style="margin-left:5px;font-size:20px !important;">Buy me a coffee</span></a>
</div>
<!-- Buttons start here. Copy this ul to your document. -->
<p class="text-center text-xs mb-0 mt-5">Please Share 🤘</p>
<ul class="text-center list-inline">
<li class="list-inline-item">
<!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://bootstrapbreakpoints.com" class="popup">
<span class="rrssb-text"> facebook</span></a>
</li>
<li class="list-inline-item">
<!-- Replace href with your Meta and URL information -->
<a href="https://twitter.com/intent/tweet?text=https://bootstrapbreakpoints.com/"
class="popup">
<span class="rrssb-text">twitter</span>
</a>
</li>
</ul>
<!-- Buttons end here -->
</body>
</html>