├── js
    └── custom.js
├── .gitignore
├── img
    ├── rchb.jpg
    ├── favicon.ico
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── rchb-banner-min.jpg
    └── site.webmanifest
├── README.md
├── LICENSE.md
├── index.html
└── css
    └── style.css


/js/custom.js:
--------------------------------------------------------------------------------
1 | // Custom JS


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules


--------------------------------------------------------------------------------
/img/rchb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshC7/HTML5-Boilerplate/HEAD/img/rchb.jpg


--------------------------------------------------------------------------------
/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshC7/HTML5-Boilerplate/HEAD/img/favicon.ico


--------------------------------------------------------------------------------
/img/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshC7/HTML5-Boilerplate/HEAD/img/favicon-16x16.png


--------------------------------------------------------------------------------
/img/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshC7/HTML5-Boilerplate/HEAD/img/favicon-32x32.png


--------------------------------------------------------------------------------
/img/rchb-banner-min.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RakeshC7/HTML5-Boilerplate/HEAD/img/rchb-banner-min.jpg


--------------------------------------------------------------------------------
/img/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 |     "name": "",
3 |     "short_name": "",
4 |     "icons": [],
5 |     "theme_color": "#ffffff",
6 |     "background_color": "#ffffff",
7 |     "display": "standalone"
8 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="https://raw.githubusercontent.com/RakeshC7/HTML5-Boilerplate/main/img/rchb-banner-min.jpg" alt="HTML5 Boilerplate banner" align="center" />
 2 | 
 3 | <br />
 4 | 
 5 | <div align="center"><strong>Start your next new project in seconds with HTML5 Boilerplate.</strong></div>
 6 | <div align="center"><strong>A fast, flexible and modern template for beginners and experts.</strong></div>
 7 | 
 8 | <br />
 9 | 
10 | ## ✨ Contributing
11 | 
12 | Contributing is possible via GitHub. Alternatively, you can send in content, content-drafts or content-ideas
13 | via Mail: rcdesign28@gmail.com .
14 | 
15 | <br />
16 | 
17 | <div align="center">
18 |   <small>Created and maintained by <a href="https://twitter.com/_Rakeshc7">Rakesh Chotaliya</a> with ❤️.</small>
19 | </div>
20 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Rakesh Chotaliya
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 | 	<!-- Site Meta content -->
10 | 	<meta name="theme-color" content="#fff">
11 | 	<meta name="description" content="">
12 | 	<meta property="og:title" content="">
13 | 	<meta property="og:type" content="">
14 | 	<meta property="og:url" content="">
15 | 	<meta property="og:description" content="">
16 | 	<meta property="og:image" content="">
17 | 
18 | 	<title>RC's HTML5 Boilerplate</title>
19 | 	<!-- Favicon Included -->
20 | 	<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
21 | 	<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
22 | 	<link rel="manifest" href="img/site.webmanifest">
23 | 	<!-- Main Stylesheet Included -->
24 | 	<link rel="stylesheet" type="text/css" href="css/style.css">
25 | </head>
26 | 
27 | <body>
28 | 	<!-- Header Section -->
29 | 	<header></header>
30 | 	<!-- Body Section -->
31 | 	<main>
32 | 		<h1 class="text-center">HTML5 Boilerplate</h1>
33 | 	</main>
34 | 	<!-- Footer Section -->
35 | 	<footer></footer>
36 | 	<!-- Custom Js Included -->
37 | 	<script src="js/custom.js"></script>
38 | </body>
39 | 
40 | </html>


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | 
  3 | /*** Fonts Face CSS ***/
  4 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
  5 | 
  6 | 
  7 | /**** CSS Variables ****/
  8 | 
  9 | /** use variables in css property like, background-color: var(--primary-color); */
 10 | :root {
 11 |     /* --- color variables --- */
 12 |     --primary-color: #f9f9f9;
 13 |     --secondary-color: #fff;
 14 |     --border-color: #e8dede;
 15 |     --text-primary-color: #292323;
 16 |     --text-secondary-color: #ccc;
 17 |     --text-selection-color: #b3d4fc;
 18 | }
 19 | 
 20 | /* -=- Common Element CSS Start -=- */
 21 | *,
 22 | *:before,
 23 | *:after {
 24 |     -webkit-box-sizing: border-box;
 25 |     -moz-box-sizing: border-box;
 26 |     box-sizing: border-box;
 27 | }
 28 | 
 29 | ::-moz-selection {
 30 |     background: var(--text-selection-color);
 31 |     text-shadow: none;
 32 | }
 33 | 
 34 | ::selection {
 35 |     background: var(--text-selection-color);
 36 |     text-shadow: none;
 37 | }
 38 | 
 39 | /* Prevent font size inflation */
 40 | html {
 41 |   -moz-text-size-adjust: none;
 42 |   -webkit-text-size-adjust: none;
 43 |   text-size-adjust: none;
 44 | }
 45 | 
 46 | html,
 47 | body {
 48 |     margin: 0px;
 49 |     padding: 0px;
 50 |     font-size: 16px;
 51 |     line-height: 20px;
 52 |     -webkit-font-smoothing: antialiased;
 53 |     -moz-osx-font-smoothing: grayscale;
 54 |     background-color: var(--primary-color);
 55 | }
 56 | 
 57 | img {
 58 |     border: 0px !important;
 59 |     outline: none;
 60 |     width: 100%;
 61 |     max-width: 100%;
 62 |     display: block;
 63 | }
 64 | 
 65 | ul,
 66 | ol {
 67 |     margin: 0px;
 68 |     padding: 0px;
 69 |     list-style: none;
 70 | }
 71 | 
 72 | a {
 73 |     text-decoration: none;
 74 |     outline: none;
 75 | }
 76 | 
 77 | /* A elements that don't have a class get default styles */
 78 | a:not([class]) {
 79 |   text-decoration-skip-ink: auto;
 80 |   color: currentColor;
 81 | }
 82 | 
 83 | /* Remove default margin in favour of better control in authored CSS */
 84 | body, h1, h2, h3, h4, p,
 85 | figure, blockquote, dl, dd {
 86 |   margin: 0;
 87 | }
 88 | 
 89 | /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
 90 | ul[role='list'],
 91 | ol[role='list'] {
 92 |   list-style: none;
 93 | }
 94 | 
 95 | a:hover,
 96 | a:focus,
 97 | a:active,
 98 | a:visited {
 99 |     outline: none;
100 |     text-decoration: none;
101 | }
102 | 
103 | .btn:focus,
104 | .btn.focus,
105 | .form-control:hover,
106 | .form-control:focus,
107 | .form-control:focus:Active {
108 |     outline: none !important;
109 |     box-shadow: none !important;
110 |     -webkit-box-shadow: none !important;
111 | }
112 | 
113 | p {
114 |     margin: 0px;
115 |     font-size: 20px;
116 |     line-height: 32px;
117 |     color: var(--text-primary-color);
118 |     font-weight: normal;
119 | }
120 | 
121 | hr {
122 |     margin: 1em 0;
123 |     padding: 0;
124 |     display: block;
125 |     border: 0;
126 |     border-top: 1px solid var(--border-color);
127 | }
128 | 
129 | audio,
130 | canvas,
131 | iframe,
132 | img,
133 | svg,
134 | video {
135 |     vertical-align: middle;
136 | }
137 | 
138 | fieldset {
139 |     border: 0;
140 |     margin: 0;
141 |     padding: 0;
142 | }
143 | 
144 | input::placeholder {
145 |     /* Chrome, Firefox, Opera, Safari 10.1+ */
146 |     color: var(--text-secondary-color);
147 |     opacity: 1;
148 | }
149 | 
150 | input:-ms-input-placeholder {
151 |     /* Internet Explorer 10-11 */
152 |     color: var(--text-secondary-color);
153 | }
154 | 
155 | input::-ms-input-placeholder {
156 |     /* Microsoft Edge */
157 |     color: var(--text-secondary-color);
158 | }
159 | 
160 | /* Inherit fonts for inputs and buttons */
161 | input, button,
162 | textarea, select {
163 |   font: inherit;
164 | }
165 | 
166 | textarea {
167 |     resize: none;
168 | }
169 | 
170 | /* Make sure textareas without a rows attribute are not tiny */
171 | textarea:not([rows]) {
172 |   min-height: 10em;
173 | }
174 | 
175 | textarea::placeholder {
176 |     color: var(--text-secondary-color);
177 |     opacity: 1;
178 | }
179 | 
180 | textarea:-ms-input-placeholder {
181 |     color: var(--text-secondary-color);
182 | }
183 | 
184 | textarea::-ms-input-placeholder {
185 |     color: var(--text-secondary-color);
186 | }
187 | 
188 | h1,
189 | h2,
190 | h3,
191 | h4,
192 | h5,
193 | h6,
194 | .h1,
195 | .h2,
196 | .h3,
197 | .h4,
198 | .h5,
199 | .h6,
200 | p,
201 | a {
202 |     font-family: 'Roboto', sans-serif;
203 | }
204 | 
205 | /*** Heading CSS ***/
206 | h1,
207 | .h1 {}
208 | 
209 | h2,
210 | .h2 {}
211 | 
212 | h3,
213 | .h3 {}
214 | 
215 | h4,
216 | .h4 {}
217 | 
218 | h5,
219 | .h5 {}
220 | 
221 | h6,
222 | .h6 {}
223 | 
224 | /* Common Class CSS related to text alignment*/
225 | .text-center {
226 |     text-align: center;
227 | }
228 | 
229 | .text-left {
230 |     text-align: left;
231 | }
232 | 
233 | .text-right {
234 |     text-align: right;
235 | }
236 | 
237 | /* -=- Header CSS -=- */
238 | header {}
239 | 
240 | /* -=- Footer CSS -=- */
241 | footer {}
242 | 
243 | /* -=- Main Area CSS -=- */
244 | main {}
245 | 
246 | /* -=- Keyframe CSS -=- */
247 | 
248 | 
249 | /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */
250 | @media (prefers-reduced-motion) {
251 |     
252 | }
253 | 
254 | /****** Responsive CSS Start ******/
255 | 
256 | @media only screen and (min-width: 1200px) {
257 |     /* Add style according to viewports size */
258 | }
259 | 
260 | /****** Responsive CSS End ******/


--------------------------------------------------------------------------------