-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (112 loc) · 5.47 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
<!DOCTYPE html>
<html lang="en" class="theme-dark">
<head>
<meta charset="UTF-8" />
<meta name="author" content="Tyler Nielsen" />
<meta name="title" content="Website's built the right way: Your way.">
<meta name="description" content="HTML, CSS, JavaScript Boilerplate. This is the basic setup for website via providing the architecture and content that you will want, during your project's infancy. This will get projects up and sprinting real quick-like." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Playground</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/devibeans.min.css" integrity="sha512-+tHv/KFkcjuA2bm+udAuNFE+QEV+WFBjiZaKXj0YqoGyC6wn+5PWU2SOfex9CUivuJIIuigTsJr1Re38gxSulw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles/reset.css" />
<link rel="stylesheet" href="styles/main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
<script src="scripts/index.js" defer></script>
</head>
<body>
<div class="wrapper"> <!-- Not super stoked about this - I'd call it optional. Check for `.wrapper` CSS in -->
<main role="main"> <!-- Semantically correct, keep. Especially if accessibility is something you're concerned about. -->
<div class="content">
<header>
<div class="container">
<h1>
Responsive Website Boilerplate
</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#coding-standards">Coding Standards</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="about">
<h2>About</h2>
<p>Well, This Serves as a Boilerplate AND a Playground. No Libraries. No Frameworks. Just the Basics With Some Common Layout Styles.</p>
<p>Yes, some of these colors may not be WCAG compliant. Fortunately, themes exist and can be used to provide higher contrast a similar experience for everyone.</p>
</section>
<section id="coding-standards">
<h2>CSS Standards & Best Practices</h2>
<p>Just a few of the newest updates to CSS. No Sass or any other pre/post-processor, just good ol' CSS!</p>
<div class="nin-logo" title="Band Logo for Nine Inch Nails"><span>NI</span><span class="reverse-char">N</span></div>
<p>With the latest, official CSS updates that have been released, modern browsers now support <pre><code class="css">variables, nesting</code></pre>, shorthand responsive options, excellent layout options with <pre><code class="css">flex and grid</code></pre>, <pre><code class="css">min(), max(), clamp()</code></pre>, and more!</p>
<pre><code class="css">p { color: red }</code></pre>
<p>HTML5 requires a simple document type declaration like below for code and pre html tags to work.</p>
<pre><code class="html"><!DOCTYPE html></code></pre>
<p>CSS3/Sass & beyond!</p>
<pre><code class="css">
/* Examples Of Some Of The Latest Additions To CSS */
:root {
--primary-color: slateblue;
--color1: #FAFAFA;
--color2: #0E0E0E;
--color3: hotpink;
--bg1: yellow;
--bg2: light magenta;
--border: --primary-color;
}
body {
color: var(--primary-color); /* CSS has variables by default?! Neato-Burrito! "Mmm, Burrito's" */
background-color: var(--color2);
margin: 0 auto;
}
.wrapper {
width: clamp(768px, calc(100vw - 2rem), 1200px) /* Math functions: clamp(min-width, preferred-width, max-width) */
section {
background-color: var(--bg2);
border-radius: 0.5rem;
border: 1px solid var(--border);
margin: 2rem 2rem 0;
padding: 1rem;
a {
display: inline-block;
color: var(--color3);
}
}
}
p {
font-size: 1rem;
color: var(--color2);
&:before {
content: 'foo';
display: block;
}
}
</code></pre>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<p>Just a few of the newest updates to CSS. No Sass or any other pre/post-processor, just good ol' CSS!</p>
<p class="nin-logo">NI<span class="reverse-char">N</span></p>
<p>With the latest, official CSS updates that have been released, modern browsers now support <pre><code class="css">variables, nesting</code></pre>, shorthand responsive options, excellent layout options with <pre><code class="css">flex and grid</code></pre>, <pre><code class="css">min(), max(), clamp()</code></pre>, and more!</p>
</section>
<section id="contact" class="contact-section">
<h2>Contact (eventually)</h2>
<ul>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li>Call: <a href="tel:18013615305">(801) 361-5305</a></li>
<li>Review My Resume: <a href="linkedin.com/in/tyler-nielsen">LinkedIn Profile</a></li>
</ul>
</section>
</div> <!--END div.content -->
</main>
<footer>
<p>© <span class="year"></span> Front-End Forge by <a href="mxtyler.com">MxTyler.com</a></p>
</footer>
</div>
</body>
</html>