Merge branch 'main' into frontendmentor
# Conflicts: # package-lock.json
This commit is contained in:
commit
ded1d85b97
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"extends": ["development"],
|
||||
"browserslist": ["defaults", "not IE 11"]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -18,5 +18,8 @@
|
|||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"open-props": "^1.3.9"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,447 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Project 4 - Build A Technical Document Page</title>
|
||||
<link href="prism.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav id="navbar">
|
||||
<header>JS Documentation</header>
|
||||
<ul>
|
||||
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
|
||||
<li>
|
||||
<a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
|
||||
</li>
|
||||
<li><a class="nav-link" href="#Hello_world">Hello world</a></li>
|
||||
<li><a class="nav-link" href="#Variables">Variables</a></li>
|
||||
<li>
|
||||
<a class="nav-link" href="#Declaring_variables">Declaring variables</a>
|
||||
</li>
|
||||
<li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>
|
||||
<li><a class="nav-link" href="#Global_variables">Global variables</a></li>
|
||||
<li><a class="nav-link" href="#Constants">Constants</a></li>
|
||||
<li><a class="nav-link" href="#Data_types">Data types</a></li>
|
||||
<li>
|
||||
<a class="nav-link" href="#if...else_statement">if...else statement</a>
|
||||
</li>
|
||||
<li><a class="nav-link" href="#while_statement">while statement</a></li>
|
||||
<li>
|
||||
<a class="nav-link" href="#Function_declarations">Function declarations</a>
|
||||
</li>
|
||||
<li><a class="nav-link" href="#Reference">Reference</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main id="main-doc">
|
||||
<section class="main-section" id="Introduction">
|
||||
<header>Introduction</header>
|
||||
<article>
|
||||
<p>
|
||||
JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight
|
||||
language. Inside a host environment (for example, a web browser), JavaScript can be connected to the
|
||||
objects of its environment to provide programmatic control over them.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of
|
||||
language elements such as operators, control structures, and statements. Core JavaScript can be
|
||||
extended for a variety of purposes by supplementing it with additional objects; for example:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Client-side JavaScript extends the core language by supplying objects to control a browser and
|
||||
its Document Object Model (DOM). For example, client-side extensions allow an application to
|
||||
place elements on an HTML form and respond to user events such as mouse clicks, form input, and
|
||||
page navigation.
|
||||
</li>
|
||||
<li>
|
||||
Server-side JavaScript extends the core language by supplying objects relevant to running
|
||||
JavaScript on a server. For example, server-side extensions allow an application to communicate
|
||||
with a database, provide continuity of information from one invocation to another of the
|
||||
application, or perform file manipulations on a server.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="What_you_should_already_know">
|
||||
<header>What you should already know</header>
|
||||
<article>
|
||||
<p>This guide assumes you have the following basic background:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
A general understanding of the Internet and the World Wide Web (WWW).
|
||||
</li>
|
||||
<li>
|
||||
Good working knowledge of HyperText Markup Language (HTML).
|
||||
</li>
|
||||
<li>
|
||||
Some programming experience. If you are new to programming, try one of the tutorials linked on
|
||||
the main page about JavaScript.
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="JavaScript_and_Java">
|
||||
<header>JavaScript and Java</header>
|
||||
<article>
|
||||
<p>
|
||||
JavaScript and Java are similar in some ways but fundamentally different in some others. The
|
||||
JavaScript language resembles Java but does not have Java's static typing and strong type checking.
|
||||
JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs
|
||||
which was the reason why it was renamed from LiveScript to JavaScript.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
In contrast to Java's compile-time system of classes built by
|
||||
declarations, JavaScript supports a runtime system based on a small
|
||||
number of data types representing numeric, Boolean, and string values.
|
||||
JavaScript has a prototype-based object model instead of the more common class-based object model.
|
||||
The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for
|
||||
individual objects.
|
||||
JavaScript also supports functions without any special declarative
|
||||
requirements. Functions can be properties of objects, executing as
|
||||
loosely typed methods.
|
||||
</p>
|
||||
<p>
|
||||
JavaScript is a very free-form language compared to Java. You do not
|
||||
have to declare all variables, classes, and methods. You do not have to be concerned with whether
|
||||
methods are public, private, or protected, and you do not have to implement interfaces. Variables,
|
||||
parameters, and function return types are not explicitly typed.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="Hello_world">
|
||||
<header>Hello world</header>
|
||||
<article>
|
||||
To get started with writing JavaScript, open the Scratchpad and write your first "Hello world"
|
||||
JavaScript code:
|
||||
|
||||
<pre>
|
||||
<code class="language-js">function greetMe(yourName)
|
||||
{
|
||||
alert("Hello " + yourName);
|
||||
}
|
||||
|
||||
greetMe("World");
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="Variables">
|
||||
<header>Variables</header>
|
||||
<p>
|
||||
You use variables as symbolic names for values in your application. The
|
||||
names of variables, called identifiers, conform to certain rules.
|
||||
</p>
|
||||
<p>
|
||||
A JavaScript identifier must start with a letter, underscore (_), or
|
||||
dollar sign ($); subsequent characters can also be digits (0-9). Because
|
||||
JavaScript is case sensitive, letters include the characters "A" through
|
||||
"Z" (uppercase) and the characters "a" through "z" (lowercase).
|
||||
</p>
|
||||
<p>
|
||||
You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers.
|
||||
You can also use the Unicode escape sequences as characters in
|
||||
identifiers. Some examples of legal names are Number_hits, temp99, and
|
||||
_name.
|
||||
</p>
|
||||
</section>
|
||||
<section class="main-section" id="Declaring_variables">
|
||||
<header>Declaring variables</header>
|
||||
<article>
|
||||
You can declare a variable in three ways:
|
||||
<p>
|
||||
With the keyword var. For example, <code class="language-js">var x = 42.</code> This syntax can be
|
||||
used to declare both local and global variables.
|
||||
</p>
|
||||
<p>
|
||||
By simply assigning it a value. For example, <code class="language-js">x = 42.</code> This always
|
||||
declares a global variable. It generates a strict JavaScript
|
||||
warning. You shouldn't use this variant.
|
||||
</p>
|
||||
<p>
|
||||
With the keyword let. For example, <code class="language-js"> let y = 13.</code> This syntax
|
||||
can be used to declare a block scope local variable. See Variable scope
|
||||
below.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="Variable_scope">
|
||||
<header>Variable scope</header>
|
||||
<article>
|
||||
<p>
|
||||
When you declare a variable outside of any function, it is called a
|
||||
global variable, because it is available to any other code in the
|
||||
current document. When you declare a variable within a function, it is called a local variable,
|
||||
because it is available only within that
|
||||
function.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared
|
||||
within a block is local to the function (or global scope) that the block resides within. For example
|
||||
the following code will log 5, because the scope of x is the function (or global context) within
|
||||
which x is declared, not the block, which in this case is an if statement.
|
||||
</p>
|
||||
<pre><code class="language-js">if (true) { var x = 5; } console.log(x); // 5</code></pre>
|
||||
<p>
|
||||
This behavior changes, when using the let declaration introduced in
|
||||
ECMAScript 2015.
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<code class="language-js">if (true) { let y = 5; }
|
||||
console.log(y);
|
||||
// ReferenceError: y is not defined
|
||||
</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="Global_variables">
|
||||
<header>Global variables</header>
|
||||
<article>
|
||||
<p>
|
||||
Global variables are in fact properties of the global object. In web
|
||||
pages the global object is window, so you can set and access global
|
||||
variables using the window.variable syntax.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Consequently, you can access global variables declared in one window or frame from another window or
|
||||
frame by specifying the window or frame name. For example, if a variable called phoneNumber is
|
||||
declared in a document, you can refer to this variable from an iframe as <code
|
||||
class="language-js">parent.phoneNumber</code>.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="Constants">
|
||||
<header>Constants</header>
|
||||
<article>
|
||||
<p>
|
||||
You can create a read-only, named constant with the const keyword. The syntax of a constant
|
||||
identifier is the same as for a variable identifier: it must start with a letter, underscore or
|
||||
dollar sign and can contain alphabetic, numeric, or underscore characters.
|
||||
</p>
|
||||
|
||||
<pre><code class="language-js">const PI = 3.14;</code></pre>
|
||||
<p>
|
||||
A constant cannot change value through assignment or be re-declared while the script is running. It
|
||||
has to be initialized to a value.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The scope rules for constants are the same as those for let block scope variables. If the const
|
||||
keyword is omitted, the identifier is assumed to represent a variable.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You cannot declare a constant with the same name as a function or variable in the same scope. For
|
||||
example:
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<code class="language-js">// THIS WILL CAUSE AN ERROR
|
||||
function f() {}; const f = 5;
|
||||
// THIS WILL CAUSE AN ERROR ALSO
|
||||
function f() { const g = 5; var g;//statements}
|
||||
</code></pre>
|
||||
|
||||
However, object attributes are not protected, so the following statement
|
||||
is executed without problems.
|
||||
|
||||
<pre><code class="language-js">const MY_OBJECT = {"key": "value"}; MY_OBJECT.key = "otherValue";</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="Data_types">
|
||||
<header>Data types</header>
|
||||
<article>
|
||||
<p>The latest ECMAScript standard defines seven data types:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Six data types that are primitives:</p>
|
||||
<ul>
|
||||
<li><b>Boolean</b>. true and false.</li>
|
||||
<li>
|
||||
<b>null</b>. A special keyword denoting a null value. Because JavaScript is
|
||||
case-sensitive, null is not the same as Null, NULL, or any other variant.
|
||||
</li>
|
||||
<li>
|
||||
<b>undefined</b>. A top-level property whose value is undefined.
|
||||
</li>
|
||||
<li><b>Number</b>. 42 or 3.14159.</li>
|
||||
<li><b>String</b>. "Howdy"</li>
|
||||
<li>
|
||||
<b>Symbol</b> (new in ECMAScript 2015). A data type whose instances are unique and
|
||||
immutable.
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>and <b>Object</b></li>
|
||||
</ul>
|
||||
Although these data types are a relatively small amount, they enable you
|
||||
to perform useful functions with your applications. Objects and functions
|
||||
are the other fundamental elements in the language. You can think of
|
||||
objects as named containers for values, and functions as procedures that
|
||||
your application can perform.
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="if...else_statement">
|
||||
<header>if...else statement</header>
|
||||
<article>
|
||||
Use the if statement to execute a statement if a logical condition is
|
||||
true. Use the optional else clause to execute a statement if the condition is false. An if statement
|
||||
looks as follows:
|
||||
|
||||
<pre><code class="language-js">if (condition) { statement_1; } else { statement_2; }</code></pre>
|
||||
|
||||
condition can be any expression that evaluates to true or false. See
|
||||
Boolean for an explanation of what evaluates to true and false. If
|
||||
condition evaluates to true, statement_1 is executed; otherwise,
|
||||
statement_2 is executed. statement_1 and statement_2 can be any statement, including further nested if
|
||||
statements.
|
||||
<p>
|
||||
You may also compound the statements using else if to have multiple
|
||||
conditions tested in sequence, as follows:
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
<code class="language-js">if (condition_1) { statement_1; }
|
||||
else if (condition_2) { statement_2; }
|
||||
else if (condition_n) { statement_n; }
|
||||
else { statement_last; }</code>
|
||||
</pre>
|
||||
|
||||
In the case of multiple conditions only the first logical condition which evaluates to true will be
|
||||
executed. To execute multiple statements, group them within a block statement ({ ... }) . In general,
|
||||
it's good practice to always use block statements, especially when nesting if statements:
|
||||
|
||||
<pre>
|
||||
<code class="language-js">if (condition) {
|
||||
statement_1_runs_if_condition_is_true;
|
||||
statement_2_runs_if_condition_is_true;
|
||||
} else {
|
||||
statement_3_runs_if_condition_is_false;
|
||||
statement_4_runs_if_condition_is_false;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
It is advisable to not use simple assignments in a conditional expression, because the assignment can be
|
||||
confused with equality when glancing over the code. For example, do not use the following code:
|
||||
|
||||
<pre><code class="language-js">if (x = y) { /* statements here */ }</code></pre>
|
||||
|
||||
If you need to use an assignment in a conditional expression, a common practice is to put additional
|
||||
parentheses around the assignment. For example:
|
||||
|
||||
<pre><code class="language-js">if ((x = y)) { /* statements here */ }</code></pre>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="while_statement">
|
||||
<header>while statement</header>
|
||||
<article>
|
||||
A while statement executes its statements as long as a specified condition evaluates to true. A while
|
||||
statement looks as follows:
|
||||
|
||||
<pre><code >while (condition) statement</code></pre>
|
||||
|
||||
<p>
|
||||
If the condition becomes false, statement within the loop stops executing and control passes to the
|
||||
statement following the loop.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The condition test occurs before statement in the loop is executed. If the condition returns true,
|
||||
statement is executed and the condition is tested again. If the condition returns false, execution
|
||||
stops and control is passed to the statement following while.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To execute multiple statements, use a block statement ({ ... }) to group those statements.
|
||||
</p>
|
||||
|
||||
Example:
|
||||
|
||||
<p>
|
||||
The following while loop iterates as long as n is less than three:
|
||||
</p>
|
||||
|
||||
<pre><code class="language-js">var n = 0; var x = 0; while (n < 3) { n++; x += n; }</code></pre>
|
||||
<p>
|
||||
With each iteration, the loop increments n and adds that value to x.
|
||||
Therefore, x and n take on the following values:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>After the first pass: n = 1 and x = 1</li>
|
||||
<li>After the second pass: n = 2 and x = 3</li>
|
||||
<li>After the third pass: n = 3 and x = 6</li>
|
||||
</ul>
|
||||
<p>
|
||||
After completing the third pass, the condition n < 3 is no longer
|
||||
true, so the loop terminates.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="Function_declarations">
|
||||
<header>Function declarations</header>
|
||||
<article>
|
||||
A function definition (also called a function declaration, or function
|
||||
statement) consists of the function keyword, followed by:
|
||||
|
||||
<ul>
|
||||
<li>The name of the function.</li>
|
||||
<li>
|
||||
A list of arguments to the function, enclosed in parentheses and
|
||||
separated by commas.
|
||||
</li>
|
||||
<li>
|
||||
The JavaScript statements that define the function, enclosed in curly brackets, { }.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
For example, the following code defines a simple function named square:
|
||||
</p>
|
||||
|
||||
<pre><code class="language-js">function square(number) { return number * number; }</code></pre>
|
||||
<p>
|
||||
The function square takes one argument, called number. The function
|
||||
consists of one statement that says to return the argument of the
|
||||
function (that is, number) multiplied by itself. The return statement specifies the value returned
|
||||
by the function.
|
||||
</p>
|
||||
<pre><code class="language-js">return number * number;</code></pre>
|
||||
<p>
|
||||
Primitive parameters (such as a number) are passed to functions by
|
||||
value; the value is passed to the function, but if the function changes the value of the parameter,
|
||||
this change is not reflected globally or in the calling function.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<section class="main-section" id="Reference">
|
||||
<header>Reference</header>
|
||||
<article>
|
||||
<ul>
|
||||
<li>
|
||||
All the documentation in this page is taken from
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
|
||||
<script src="prism.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
/* PrismJS 1.26.0
|
||||
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Open+Sans:wght@400;700&display=swap");
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #ccc;
|
||||
background: none;
|
||||
font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
|
||||
monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,97 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Open+Sans:wght@400;700&display=swap");
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--site-color: hsl(0, 0%, 94%);
|
||||
--font-color: rgb(28, 27, 27);
|
||||
--codeblock-background-color: hsl(300, 1%, 33%);
|
||||
--codeblock-font-color: rgb(255, 255, 255);
|
||||
|
||||
--left-column-width: 320px;
|
||||
--right-column-width: calc(100vw-320px);
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
#navbar {
|
||||
position: fixed;
|
||||
width: var(--left-column-width);
|
||||
}
|
||||
|
||||
#main-doc {
|
||||
width: var(--right-column-width);
|
||||
margin-left: var(--left-column-width);
|
||||
padding: 1rem;
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
|
||||
/* Styling */
|
||||
body {
|
||||
font-family: "Open Sans";
|
||||
background-color: var(--site-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: x-large;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
section li {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#navbar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#navbar a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#navbar header {
|
||||
text-align: center;
|
||||
}
|
||||
#navbar li:first-child {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
#navbar li {
|
||||
padding: 0.3125rem 0;
|
||||
border-bottom: 1px dashed;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
#navbar {
|
||||
position: unset;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
#main-doc {
|
||||
width: unset;
|
||||
margin-left: unset;
|
||||
padding: 0 1rem;
|
||||
border-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
:root {
|
||||
--left-column-width: 40%;
|
||||
--right-column-width: 60%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js" defer></script>
|
||||
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#frontendmentor">Single Page Project - Frontend Mentor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#freecodecamp">Tech Documentation - Freecodecamp</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="profile-link" href="https://github.com/tarasis" target="_blank">GitHub</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="welcome-section">
|
||||
<h1>BLAH</h1>
|
||||
</section>
|
||||
<section id="projects">
|
||||
<div class="project-tile" id="frontendmentor">
|
||||
<a href="/FrontendMentor/newbie/order-summary-component">
|
||||
<img src="/screenshots/fem-newbie-order-summary-component.png"
|
||||
alt="Image of the Order Summary Component Frontend Mentor Challenge">
|
||||
</a>
|
||||
</div>
|
||||
<div class="project-tile" id="freecodecamp">
|
||||
Blah2
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="#footer">
|
||||
<ul>
|
||||
<!-- linked in -->
|
||||
<li class="linkedin"><a href="https://www.linkedin.com/in/robertmcgovern/">LinkedIn</a>
|
||||
</li>
|
||||
<!-- freecodecamp -->
|
||||
<li class="github"><a href="https://github.com/tarasis">Github</a></li>
|
||||
<!-- github -->
|
||||
<li class="freecodecamp"><a href="https://www.freecodecamp.org/tarasis">freeCodeCamp</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
*,
|
||||
::before,
|
||||
::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#welcome-section {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!-- A big thank you to Prantham for the inspiration: https://twitter.com/Prathkum/status/1392434632935841793
|
||||
|
||||
This is from Kevin Powell. Its an interesting idea. I'd prefer
|
||||
the animation to end when you get to the end of the line.
|
||||
|
||||
Video is called Customizable typewriter animation with CSS [w1nhwUGsG6M]
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Hello, my name is Kevin.</h1>
|
||||
<p class="subtitle">Welcome to my website!</p>
|
||||
|
||||
<a href="https://www.youtube.com/watch?v=w1nhwUGsG6M" id="yt-link">See how Kevin created this over on YT</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
:root {
|
||||
--bg-color: hsl(49 37% 94%);
|
||||
--typewriterSpeed: 6s;
|
||||
/* this is a pure HTML/CSS approach. If you want it to
|
||||
be more dynamic then you would need JavaScript to grab
|
||||
the H1 calculate its size and then have it update this
|
||||
variable
|
||||
|
||||
You would need to use querySelector to grab the :root
|
||||
and put it in a variable, then use that variable (say r)
|
||||
and do r.style.setProperty('--typewriterCharacters', h1.length)
|
||||
assuming you've grabbed the h1
|
||||
*/
|
||||
--typewriterCharacters: 24;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
/* for increasing and decreasing the font size depending on
|
||||
device size */
|
||||
font-size: clamp(1rem, 3vw + 1rem, 4rem);
|
||||
position: relative;
|
||||
/* MUST BE A MONOSPACE FONT or the idea collapses per Kevin */
|
||||
font-family: "Source Code Pro", monospace;
|
||||
/* position: relative; */
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: hsl(0 0% 0% / 0.7);
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
/* Below makes the subtitle appear to fade onto the page */
|
||||
opacity: 0;
|
||||
transform: translateY(3rem);
|
||||
animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 0.5s) forwards;
|
||||
}
|
||||
|
||||
h1::before,
|
||||
h1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
h1::before {
|
||||
/* a mask font color, needs to be the same color as the page
|
||||
or container background color */
|
||||
background-color: var(--bg-color);
|
||||
/* the number of steps is equal to the number of characters
|
||||
that the h1 is. However in CSS you can see length of h1 so
|
||||
you need to do this manually. */
|
||||
animation: typewriting var(--typewriterSpeed)
|
||||
steps(var(--typewriterCharacters)) 1s forwards;
|
||||
}
|
||||
|
||||
h1::after {
|
||||
/* em so it can respond to font size change */
|
||||
width: 0.125em;
|
||||
background: black;
|
||||
/* the number of steps is equal to the number of characters
|
||||
that the h1 is. However in CSS you can see length of h1 so
|
||||
you need to do this manually. */
|
||||
animation: typewriting var(--typewriterSpeed)
|
||||
steps(var(--typewriterCharacters)) 1s forwards,
|
||||
blink 500ms steps(var(--typewriterCharacters)) infinite;
|
||||
}
|
||||
|
||||
@keyframes typewriting {
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
to {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
h1::before {
|
||||
background: var(--bg-color);
|
||||
-webkit-animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards;
|
||||
animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards;
|
||||
}
|
||||
|
||||
h1::after {
|
||||
width: 0.125em;
|
||||
background: black;
|
||||
-webkit-animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards, blink 750ms steps(var(--typewriterCharacters)) infinite;
|
||||
animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards, blink 750ms steps(var(--typewriterCharacters)) infinite;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
opacity: 0;
|
||||
transform: translateY(3rem);
|
||||
-webkit-animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 2s) forwards;
|
||||
animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 2s) forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes typewriter {
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
to {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
*/
|
||||
#yt-link {
|
||||
position: absolute;
|
||||
bottom: 2em;
|
||||
width: 100%;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
#yt-link:hover,
|
||||
#yt-link:focus {
|
||||
color: teal;
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Animated Gradient Border</title>
|
||||
|
||||
<style>
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
/* border: 1px solid red; */
|
||||
width: 20ch;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* this is the one where the magic happens */
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% + 8px);
|
||||
height: calc(100% + 8px);
|
||||
transform: translate(-4px, -4px);
|
||||
/* play with the degrees till you are happy with the animation effect */
|
||||
background: linear-gradient(60deg, #5ff281, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f), 0 50%;
|
||||
/* effectively zooming in on the colors, needs to be higher than 100% 100% */
|
||||
background-size: 300% 300%;
|
||||
/* can be whatever you want, but card must also have the same border radius */
|
||||
border-radius: 8px;
|
||||
/* to make it appear as just the border, need a color set for the background of the card */
|
||||
z-index: -1;
|
||||
|
||||
animation: animated-gradient 2.5s alternate infinite;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card .card__price-per-month {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.card .link {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid white;
|
||||
/* for pill shape */
|
||||
border-radius: 20%/50%;
|
||||
}
|
||||
|
||||
.card a:is(:focus, :hover) {
|
||||
background-color: rgb(67, 64, 64);
|
||||
|
||||
}
|
||||
|
||||
@keyframes animated-gradient {
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Animated Gradient Border</h1>
|
||||
<p>From a youtube short video, link to be added later.</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="card">
|
||||
<h2>Premium</h2>
|
||||
<div class="card__price-per-month">
|
||||
<span>$20</span>
|
||||
<span>/</span>
|
||||
<span>month</span>
|
||||
</div>
|
||||
|
||||
<div class="link"><a href="#">Get started</a></div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Animated Grid Boxes</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Animated Grid Boxes</h1>
|
||||
<p>Code from https://fireship.io/lessons/three-responsive-css-grid-layouts/ + change based on comment that
|
||||
simplifies the css down to one rule, but puts some of the info into the html to mark each div with variables
|
||||
for the animiation delay (--i) and the name of the box's grid space (--g)</p>
|
||||
</header>
|
||||
<main>
|
||||
<section class="animated-grid">
|
||||
<div style="--i: 1; --g: a;" class="card">a</div>
|
||||
<div style="--i: 2; --g: b;" class="card">b</div>
|
||||
<div style="--i: 3; --g: c;" class="card">c</div>
|
||||
<div style="--i: 4; --g: d;" class="card">d</div>
|
||||
<div style="--i: 5; --g: e;" class="card">e</div>
|
||||
<div style="--i: 6; --g: f;" class="card">f</div>
|
||||
<div style="--i: 7; --g: g;" class="card">g</div>
|
||||
<div style="--i: 8; --g: h;" class="card">h</div>
|
||||
<div style="--i: 9; --g: i;" class="card">i</div>
|
||||
<div style="--i: 10; --g: j;" class="card">j</div>
|
||||
<div style="--i: 11; --g: k;" class="card">k</div>
|
||||
<div style="--i: 12; --g: l;" class="card">l</div>
|
||||
<div style="--i: 13; --g: 🌟;" class="card">main</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
/* // BASE */
|
||||
body {
|
||||
background: rgb(18, 18, 18);
|
||||
color: hsl(0, 0%, 100%);
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: hsl(0, 0%, 21%);
|
||||
font-size: 3rem;
|
||||
color: hsl(0, 0%, 100%);
|
||||
box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem,
|
||||
rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
transition: all 500ms;
|
||||
overflow: hidden;
|
||||
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: rgba(2, 7, 19, 0.1) 0px 0.35em 1.175em,
|
||||
rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
|
||||
transform: translateY(-3px) scale(1.1);
|
||||
background-color: hsl(152, 90%, 75%);
|
||||
}
|
||||
|
||||
/* Specifics */
|
||||
.animated-grid {
|
||||
height: 85vh;
|
||||
margin-bottom: 200px;
|
||||
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
||||
/* Explicit grid */
|
||||
grid-template-areas:
|
||||
"a b c d"
|
||||
"l 🌟 🌟 e"
|
||||
"k 🌟 🌟 f"
|
||||
"j i h g";
|
||||
|
||||
grid-template-rows: repeat(4, 25%);
|
||||
grid-template-columns: 240px auto auto 240px;
|
||||
|
||||
--stagger-delay: 100ms;
|
||||
}
|
||||
|
||||
@keyframes cardEntrance {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: hsl(152, 90%, 55%);
|
||||
animation: cardEntrance 700ms ease-out;
|
||||
animation-fill-mode: backwards;
|
||||
grid-area: var(--g);
|
||||
animation-delay: calc(var(--i) * var(--stagger-delay));
|
||||
}
|
||||
|
||||
/* .card {
|
||||
background-color: rgb(36, 243, 147);
|
||||
animation: cardEntrance 700ms ease-out;
|
||||
animation-fill-mode: backwards;
|
||||
} */
|
||||
|
||||
/* .card:nth-child(1) {
|
||||
grid-area: a;
|
||||
animation-delay: calc(1 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(2) {
|
||||
grid-area: b;
|
||||
animation-delay: calc(2 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(3) {
|
||||
grid-area: c;
|
||||
animation-delay: calc(3 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(4) {
|
||||
grid-area: d;
|
||||
animation-delay: calc(4 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(5) {
|
||||
grid-area: e;
|
||||
animation-delay: calc(5 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(6) {
|
||||
grid-area: f;
|
||||
animation-delay: calc(6 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(7) {
|
||||
grid-area: g;
|
||||
animation-delay: calc(7 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(8) {
|
||||
grid-area: h;
|
||||
animation-delay: calc(8 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(9) {
|
||||
grid-area: i;
|
||||
animation-delay: calc(9 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(10) {
|
||||
grid-area: j;
|
||||
animation-delay: calc(10 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(11) {
|
||||
grid-area: k;
|
||||
animation-delay: calc(11 * var(--stagger-delay));
|
||||
}
|
||||
.card:nth-child(12) {
|
||||
grid-area: l;
|
||||
animation-delay: calc(12 * var(--stagger-delay));
|
||||
}
|
||||
.card:last-child {
|
||||
grid-area: 🌟;
|
||||
animation-delay: calc(13 * var(--stagger-delay));
|
||||
} */
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Typewriter Animation Effect with HTML, CSS, and JavaScript</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="script.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main>
|
||||
<div class="container">
|
||||
<p data-typewriter="Developer...,Designer...,Photographer... ">
|
||||
</p>
|
||||
|
||||
<p data-typewriter="Coffee Roaster...,Pizza Maker...,Basket Weaver..."></p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Just some quick notes. This project comes from the video [Typewriter Animation Effect with HTML, CSS, and JavaScript](https://www.youtube.com/watch?v=7uDdiMCVwJk). It appealed because it was showing the sort of typing effect without using any frameworks, sdks or anything else.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
class Typewriter {
|
||||
constructor(el, options) {
|
||||
this.el = el;
|
||||
this.words = [...this.el.dataset.typewriter.split(",")];
|
||||
|
||||
this.speed = options?.speed || 100;
|
||||
this.delay = options?.delay || 1000;
|
||||
this.repeat = options?.repeat || false;
|
||||
|
||||
this.initTyping();
|
||||
}
|
||||
|
||||
wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
toggleTyping = () => this.el.classList.toggle("typing");
|
||||
|
||||
async typewrite(word) {
|
||||
await this.wait(this.delay);
|
||||
this.toggleTyping();
|
||||
|
||||
for (const letter of word.split("")) {
|
||||
this.el.textContent += letter;
|
||||
await this.wait(this.speed);
|
||||
}
|
||||
|
||||
this.toggleTyping();
|
||||
await this.wait(this.delay);
|
||||
|
||||
this.toggleTyping();
|
||||
while (this.el.textContent.length !== 0) {
|
||||
this.el.textContent = this.el.textContent.slice(0, -1);
|
||||
await this.wait(this.speed);
|
||||
}
|
||||
|
||||
this.toggleTyping();
|
||||
}
|
||||
|
||||
async initTyping() {
|
||||
for (const word of this.words) {
|
||||
await this.typewrite(word);
|
||||
}
|
||||
|
||||
if (this.repeat) {
|
||||
await this.initTyping();
|
||||
} else {
|
||||
this.el.style.animation = "none";
|
||||
}
|
||||
|
||||
// can't use forEach with await
|
||||
// this.words.forEach((word) => {
|
||||
// await this.typewrite(word);
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
// const el1 = new Typewriter(document.querySelector("[data-typewriter]"), {
|
||||
// speed: 10,
|
||||
// delay: 10,
|
||||
// repeat: true,
|
||||
// });
|
||||
// console.log(el1);
|
||||
|
||||
document.querySelectorAll("[data-typewriter]").forEach((el) => {
|
||||
new Typewriter(el, {
|
||||
repeat: true,
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
padding: 4rem;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(#eff0f3, #efe0ef);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
[data-typewriter] {
|
||||
font-family: system-UI;
|
||||
font-weight: bold;
|
||||
font-size: 4.5rem;
|
||||
color: #d9376e;
|
||||
height: 6rem;
|
||||
border-right: 0.8rem solid transparent;
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
[data-typewriter]:not(.typing) {
|
||||
animation: blink-cursor 1.1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink-cursor {
|
||||
0%,
|
||||
100% {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: #ff8e3c;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
# Basic Responsive Navigation
|
||||
|
||||
Nearly every website needs a responsive navigation, but they can be confusing to layout. It’s not uncommon for developers to create two separate navigations: one for mobile and one for desktop. But there’s a better way! In this video, I'll show you how to create a fully responsive navigation menu with HTML, CSS, and Vanilla JavaScript. We’ll add aria attributes to achieve a basic accessible navigation.
|
||||
|
||||
|
||||
🔗 Key Links 🔗
|
||||
- YouTube Video: https://youtu.be/63sxOYm9GwY
|
||||
- Live Code: https://codinginpublic.dev/projects/responsive-navigation/
|
||||
|
||||
---------------------------------------
|
||||
|
||||
📹 Related Videos 📹
|
||||
- Intersection Observer playlist: https://www.youtube.com/playlist?list=PLoqZcxvpWzze3Hkult9jLfCvZlzCYLb8G
|
||||
- Understanding Clamp(): https://youtu.be/Moely7aPYGE
|
||||
|
||||
---------------------------------------
|
||||
|
||||
🧰 My Tools 🧰
|
||||
- VSCode Font/Theme: https://www.youtube.com/watch?v=5uETTXxVj8s
|
||||
- VSCode Extensions: https://www.youtube.com/watch?v=0ABuzt8X5SA
|
||||
|
||||
---------------------------------------
|
||||
|
||||
🌐 Connect With Me 🌐
|
||||
- Website: https://codinginpublic.dev
|
||||
- Blog: https://chrispennington.blog
|
||||
- Twitter: https://twitter.com/cpenned
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="theme-color" content="#050307">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Responsive Navigation</title>
|
||||
<script src="./nav.js" type="module"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,800;1,600;1,800&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<div class="container nav-container">
|
||||
<a href="/" class="logo-link" aria-label="Go to homepage">
|
||||
<svg viewBox="0 0 229 161" class="logo" width="120" xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
||||
<path
|
||||
d="M29.17 82.421c4.003-34.962 33.732-62.157 69.763-62.157 21.047 0 39.944 9.279 52.817 23.964l-.039.022c.343.361.641.685.94 1.027.443.525.877 1.056 1.303 1.592h.008c.265.337.561.717.902 1.16.408.53.788 1.043 1.142 1.536l-.014.001a69.403 69.403 0 0 1 1.953 2.864c.405.634.747 1.192 1.033 1.657l.004-.003a69.94 69.94 0 0 1 6.483 13.895c8.313-5.572 12.656-10.495 11.55-13.947-1.139-3.553-7.885-5.018-18.404-4.604a31.955 31.955 0 0 0-.858-1.576 9.527 9.527 0 0 0-.685-1.029c20.568-.077 34.892 4.541 37.857 13.791 3.148 9.824-7.166 22.842-25.986 35.427-2.834 36.162-33.117 64.668-70.006 64.668-11.228 0-21.844-2.641-31.258-7.334 5.145-13.664 21.098-10.431 67.983-34.016 20.459-10.292 28.647-17.452 31.541-22.172-15.283 9.925-35.78 19.51-59.054 26.968C54.519 141.34 6.329 140.773.597 122.889c-3.221-10.053 6.73-22.526 26.395-35.382a37.974 37.974 0 0 0-.119 1.939c-.03.821-.028 1.608.002 2.331-9.796 6.182-14.118 10.753-12.914 14.509 1.115 3.482 7.616 4.959 17.772 4.627a69.909 69.909 0 0 1-2.895-16.167h.002l-.017-.258a71.154 71.154 0 0 1-.112-3.765c.001-.696.012-1.424.04-2.168.056-1.549.149-2.994.249-4.228l.133-1.49.041-.416h-.004Zm0 0-.001.001-.036.415c-.044.45-.089.95-.133 1.49l-.146 1.647c.075-1.192.181-2.375.315-3.552l.001-.001Z"
|
||||
style="fill:currentColor" />
|
||||
<path
|
||||
d="M34.442 51.095a10.127 10.127 0 0 1-4.596-8.485c0-5.592 4.54-10.132 10.132-10.132 2.837 0 5.403 1.169 7.243 3.05a71.387 71.387 0 0 0-12.779 15.567Z"
|
||||
style="fill:currentColor" />
|
||||
<circle cx="173.267" cy="10.132" r="10.132" style="fill:currentColor" />
|
||||
<circle cx="218.027" cy="100.618" r="10.132" style="fill:currentColor" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="nav-wrapper">
|
||||
<button class="btn btn--menu" id="menu-btn" aria-expanded="false" aria-controls="menu"
|
||||
aria-label="Open mobile nav">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul role="menubar" class="nav-links" id="menu">
|
||||
<li role="none">
|
||||
<a role="menuitem" href="index.html" class="nav-link btn">Home</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="about.html" class="nav-link btn">About</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="donate.html" class="nav-link btn">Donate</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="contact.html" class="nav-link btn btn--accent">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<header>
|
||||
<img class="header__img"
|
||||
srcset="./assets/spaceLg.jpg 1999w, ./assets/spaceMd.jpg 1000w, ./assets/spaceSm.jpg 500w"
|
||||
src="./assets/space.jpg" alt="View of earth from space" />
|
||||
<div class="container header-container">
|
||||
<h1 class="h1 rise">The Next Frontier</h1>
|
||||
<p class="h3 rise subheading">Explore the universe of tomorrow.</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="stars container--sm fade-up" aria-labelledby="stars">
|
||||
<h2 class="h2" id="stars">Look to the Stars</h2>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor
|
||||
illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.</p>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam?
|
||||
Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci
|
||||
repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas
|
||||
expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?</p>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.</p>
|
||||
</section>
|
||||
<section class="container" aria-labelledby="cards">
|
||||
<h2 class="sr-only" id="cards">Reasons to Travel</h2>
|
||||
<div class="card-container">
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentColor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<path
|
||||
d="M138.7,175.5l-19.2,52.1a8,8,0,0,1-15,0L85.3,175.5a8.1,8.1,0,0,0-4.8-4.8L28.4,151.5a8,8,0,0,1,0-15l52.1-19.2a8.1,8.1,0,0,0,4.8-4.8l19.2-52.1a8,8,0,0,1,15,0l19.2,52.1a8.1,8.1,0,0,0,4.8,4.8l52.1,19.2a8,8,0,0,1,0,15l-52.1,19.2A8.1,8.1,0,0,0,138.7,175.5Z"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="16"></path>
|
||||
<line x1="176" y1="16" x2="176" y2="64" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="200" y1="40" x2="152" y2="40" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="224" y1="72" x2="224" y2="104" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="240" y1="88" x2="208" y2="88" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Stars in the Sky</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentColor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<path d="M88,148a68,68,0,1,1,68,68H76a44,44,0,0,1,0-88,42.5,42.5,0,0,1,14.3,2.4" fill="none"
|
||||
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16">
|
||||
</path>
|
||||
<path
|
||||
d="M47,138.9A64.1,64.1,0,0,1,9.6,94.4h0A68.3,68.3,0,0,0,24,96,64.1,64.1,0,0,0,88,32a68.3,68.3,0,0,0-1.6-14.4h0A64,64,0,0,1,136,80c0,1,0,2-.1,3"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="16"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Moon Up Above</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentcolor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<line x1="92.8" y1="59" x2="85.1" y2="40.5" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="43" y1="108.8" x2="24.5" y2="101.1" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="213" y1="108.8" x2="231.5" y2="101.1" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="163.2" y1="59" x2="170.9" y2="40.5" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="240" y1="160" x2="16" y2="160" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="208" y1="200" x2="48" y2="200" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<path d="M70.2,160a60,60,0,1,1,115.6,0" fill="none" stroke="currentcolor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Ain’t no Sun Allowed</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container--sm moons fade-up" aria-labelledby="moons">
|
||||
<h3 class="h2" id="moons">Space Travel for Everyone</h3>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor
|
||||
illum impedit
|
||||
nisi. Eaque sequi necessitatibus voluptatum porro.</p>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam?
|
||||
Obcaecati
|
||||
magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id
|
||||
culpa minima
|
||||
officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad
|
||||
voluptas
|
||||
praesentium animi velit quae dicta?</p>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<svg viewBox="0 0 229 161" class="logo" width="120" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
||||
<path
|
||||
d="M29.17 82.421c4.003-34.962 33.732-62.157 69.763-62.157 21.047 0 39.944 9.279 52.817 23.964l-.039.022c.343.361.641.685.94 1.027.443.525.877 1.056 1.303 1.592h.008c.265.337.561.717.902 1.16.408.53.788 1.043 1.142 1.536l-.014.001a69.403 69.403 0 0 1 1.953 2.864c.405.634.747 1.192 1.033 1.657l.004-.003a69.94 69.94 0 0 1 6.483 13.895c8.313-5.572 12.656-10.495 11.55-13.947-1.139-3.553-7.885-5.018-18.404-4.604a31.955 31.955 0 0 0-.858-1.576 9.527 9.527 0 0 0-.685-1.029c20.568-.077 34.892 4.541 37.857 13.791 3.148 9.824-7.166 22.842-25.986 35.427-2.834 36.162-33.117 64.668-70.006 64.668-11.228 0-21.844-2.641-31.258-7.334 5.145-13.664 21.098-10.431 67.983-34.016 20.459-10.292 28.647-17.452 31.541-22.172-15.283 9.925-35.78 19.51-59.054 26.968C54.519 141.34 6.329 140.773.597 122.889c-3.221-10.053 6.73-22.526 26.395-35.382a37.974 37.974 0 0 0-.119 1.939c-.03.821-.028 1.608.002 2.331-9.796 6.182-14.118 10.753-12.914 14.509 1.115 3.482 7.616 4.959 17.772 4.627a69.909 69.909 0 0 1-2.895-16.167h.002l-.017-.258a71.154 71.154 0 0 1-.112-3.765c.001-.696.012-1.424.04-2.168.056-1.549.149-2.994.249-4.228l.133-1.49.041-.416h-.004Zm0 0-.001.001-.036.415c-.044.45-.089.95-.133 1.49l-.146 1.647c.075-1.192.181-2.375.315-3.552l.001-.001Z"
|
||||
style="fill:currentColor" />
|
||||
<path
|
||||
d="M34.442 51.095a10.127 10.127 0 0 1-4.596-8.485c0-5.592 4.54-10.132 10.132-10.132 2.837 0 5.403 1.169 7.243 3.05a71.387 71.387 0 0 0-12.779 15.567Z"
|
||||
style="fill:currentColor" />
|
||||
<circle cx="173.267" cy="10.132" r="10.132" style="fill:currentColor" />
|
||||
<circle cx="218.027" cy="100.618" r="10.132" style="fill:currentColor" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,2 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 205 B |
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="theme-color" content="#050307">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Responsive Navigation</title>
|
||||
<script src="./nav.js" type="module"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,800;1,600;1,800&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<div class="container nav-container">
|
||||
<a href="/" class="logo-link" aria-label="Go to homepage">
|
||||
<svg viewBox="0 0 229 161" class="logo" width="120" xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
||||
<path
|
||||
d="M29.17 82.421c4.003-34.962 33.732-62.157 69.763-62.157 21.047 0 39.944 9.279 52.817 23.964l-.039.022c.343.361.641.685.94 1.027.443.525.877 1.056 1.303 1.592h.008c.265.337.561.717.902 1.16.408.53.788 1.043 1.142 1.536l-.014.001a69.403 69.403 0 0 1 1.953 2.864c.405.634.747 1.192 1.033 1.657l.004-.003a69.94 69.94 0 0 1 6.483 13.895c8.313-5.572 12.656-10.495 11.55-13.947-1.139-3.553-7.885-5.018-18.404-4.604a31.955 31.955 0 0 0-.858-1.576 9.527 9.527 0 0 0-.685-1.029c20.568-.077 34.892 4.541 37.857 13.791 3.148 9.824-7.166 22.842-25.986 35.427-2.834 36.162-33.117 64.668-70.006 64.668-11.228 0-21.844-2.641-31.258-7.334 5.145-13.664 21.098-10.431 67.983-34.016 20.459-10.292 28.647-17.452 31.541-22.172-15.283 9.925-35.78 19.51-59.054 26.968C54.519 141.34 6.329 140.773.597 122.889c-3.221-10.053 6.73-22.526 26.395-35.382a37.974 37.974 0 0 0-.119 1.939c-.03.821-.028 1.608.002 2.331-9.796 6.182-14.118 10.753-12.914 14.509 1.115 3.482 7.616 4.959 17.772 4.627a69.909 69.909 0 0 1-2.895-16.167h.002l-.017-.258a71.154 71.154 0 0 1-.112-3.765c.001-.696.012-1.424.04-2.168.056-1.549.149-2.994.249-4.228l.133-1.49.041-.416h-.004Zm0 0-.001.001-.036.415c-.044.45-.089.95-.133 1.49l-.146 1.647c.075-1.192.181-2.375.315-3.552l.001-.001Z"
|
||||
style="fill:currentColor" />
|
||||
<path
|
||||
d="M34.442 51.095a10.127 10.127 0 0 1-4.596-8.485c0-5.592 4.54-10.132 10.132-10.132 2.837 0 5.403 1.169 7.243 3.05a71.387 71.387 0 0 0-12.779 15.567Z"
|
||||
style="fill:currentColor" />
|
||||
<circle cx="173.267" cy="10.132" r="10.132" style="fill:currentColor" />
|
||||
<circle cx="218.027" cy="100.618" r="10.132" style="fill:currentColor" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="nav-wrapper">
|
||||
<button class="btn btn--menu" id="menu-btn" aria-expanded="false" aria-controls="menu"
|
||||
aria-label="Open mobile nav">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul role="menubar" class="nav-links" id="menu">
|
||||
<li role="none">
|
||||
<a role="menuitem" href="index.html" class="nav-link btn">Home</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="about.html" class="nav-link btn">About</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="donate.html" class="nav-link btn">Donate</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="contact.html" class="nav-link btn btn--accent">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<header>
|
||||
<img class="header__img"
|
||||
srcset="./assets/spaceLg.jpg 1999w, ./assets/spaceMd.jpg 1000w, ./assets/spaceSm.jpg 500w"
|
||||
src="./assets/space.jpg" alt="View of earth from space" />
|
||||
<div class="container header-container">
|
||||
<h1 class="h1 rise">The Next Frontier</h1>
|
||||
<p class="h3 rise subheading">Explore the universe of tomorrow.</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="stars container--sm fade-up" aria-labelledby="stars">
|
||||
<h2 class="h2" id="stars">Look to the Stars</h2>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor
|
||||
illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.</p>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam?
|
||||
Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci
|
||||
repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas
|
||||
expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?</p>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.</p>
|
||||
</section>
|
||||
<section class="container" aria-labelledby="cards">
|
||||
<h2 class="sr-only" id="cards">Reasons to Travel</h2>
|
||||
<div class="card-container">
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentColor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<path
|
||||
d="M138.7,175.5l-19.2,52.1a8,8,0,0,1-15,0L85.3,175.5a8.1,8.1,0,0,0-4.8-4.8L28.4,151.5a8,8,0,0,1,0-15l52.1-19.2a8.1,8.1,0,0,0,4.8-4.8l19.2-52.1a8,8,0,0,1,15,0l19.2,52.1a8.1,8.1,0,0,0,4.8,4.8l52.1,19.2a8,8,0,0,1,0,15l-52.1,19.2A8.1,8.1,0,0,0,138.7,175.5Z"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="16"></path>
|
||||
<line x1="176" y1="16" x2="176" y2="64" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="200" y1="40" x2="152" y2="40" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="224" y1="72" x2="224" y2="104" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="240" y1="88" x2="208" y2="88" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Stars in the Sky</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentColor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<path d="M88,148a68,68,0,1,1,68,68H76a44,44,0,0,1,0-88,42.5,42.5,0,0,1,14.3,2.4" fill="none"
|
||||
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16">
|
||||
</path>
|
||||
<path
|
||||
d="M47,138.9A64.1,64.1,0,0,1,9.6,94.4h0A68.3,68.3,0,0,0,24,96,64.1,64.1,0,0,0,88,32a68.3,68.3,0,0,0-1.6-14.4h0A64,64,0,0,1,136,80c0,1,0,2-.1,3"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="16"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Moon Up Above</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentcolor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<line x1="92.8" y1="59" x2="85.1" y2="40.5" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="43" y1="108.8" x2="24.5" y2="101.1" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="213" y1="108.8" x2="231.5" y2="101.1" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="163.2" y1="59" x2="170.9" y2="40.5" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="240" y1="160" x2="16" y2="160" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="208" y1="200" x2="48" y2="200" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<path d="M70.2,160a60,60,0,1,1,115.6,0" fill="none" stroke="currentcolor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Ain’t no Sun Allowed</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container--sm moons fade-up" aria-labelledby="moons">
|
||||
<h3 class="h2" id="moons">Space Travel for Everyone</h3>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor
|
||||
illum impedit
|
||||
nisi. Eaque sequi necessitatibus voluptatum porro.</p>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam?
|
||||
Obcaecati
|
||||
magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id
|
||||
culpa minima
|
||||
officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad
|
||||
voluptas
|
||||
praesentium animi velit quae dicta?</p>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="theme-color" content="#050307">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Responsive Navigation</title>
|
||||
<script src="./nav.js" type="module"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,800;1,600;1,800&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<div class="container nav-container">
|
||||
<a href="/" class="logo-link" aria-label="Go to homepage">
|
||||
<svg viewBox="0 0 229 161" class="logo" width="120" xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
||||
<path
|
||||
d="M29.17 82.421c4.003-34.962 33.732-62.157 69.763-62.157 21.047 0 39.944 9.279 52.817 23.964l-.039.022c.343.361.641.685.94 1.027.443.525.877 1.056 1.303 1.592h.008c.265.337.561.717.902 1.16.408.53.788 1.043 1.142 1.536l-.014.001a69.403 69.403 0 0 1 1.953 2.864c.405.634.747 1.192 1.033 1.657l.004-.003a69.94 69.94 0 0 1 6.483 13.895c8.313-5.572 12.656-10.495 11.55-13.947-1.139-3.553-7.885-5.018-18.404-4.604a31.955 31.955 0 0 0-.858-1.576 9.527 9.527 0 0 0-.685-1.029c20.568-.077 34.892 4.541 37.857 13.791 3.148 9.824-7.166 22.842-25.986 35.427-2.834 36.162-33.117 64.668-70.006 64.668-11.228 0-21.844-2.641-31.258-7.334 5.145-13.664 21.098-10.431 67.983-34.016 20.459-10.292 28.647-17.452 31.541-22.172-15.283 9.925-35.78 19.51-59.054 26.968C54.519 141.34 6.329 140.773.597 122.889c-3.221-10.053 6.73-22.526 26.395-35.382a37.974 37.974 0 0 0-.119 1.939c-.03.821-.028 1.608.002 2.331-9.796 6.182-14.118 10.753-12.914 14.509 1.115 3.482 7.616 4.959 17.772 4.627a69.909 69.909 0 0 1-2.895-16.167h.002l-.017-.258a71.154 71.154 0 0 1-.112-3.765c.001-.696.012-1.424.04-2.168.056-1.549.149-2.994.249-4.228l.133-1.49.041-.416h-.004Zm0 0-.001.001-.036.415c-.044.45-.089.95-.133 1.49l-.146 1.647c.075-1.192.181-2.375.315-3.552l.001-.001Z"
|
||||
style="fill:currentColor" />
|
||||
<path
|
||||
d="M34.442 51.095a10.127 10.127 0 0 1-4.596-8.485c0-5.592 4.54-10.132 10.132-10.132 2.837 0 5.403 1.169 7.243 3.05a71.387 71.387 0 0 0-12.779 15.567Z"
|
||||
style="fill:currentColor" />
|
||||
<circle cx="173.267" cy="10.132" r="10.132" style="fill:currentColor" />
|
||||
<circle cx="218.027" cy="100.618" r="10.132" style="fill:currentColor" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="nav-wrapper">
|
||||
<button class="btn btn--menu" id="menu-btn" aria-expanded="false" aria-controls="menu"
|
||||
aria-label="Open mobile nav">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul role="menubar" class="nav-links" id="menu">
|
||||
<li role="none">
|
||||
<a role="menuitem" href="index.html" class="nav-link btn">Home</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="about.html" class="nav-link btn">About</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="donate.html" class="nav-link btn">Donate</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="contact.html" class="nav-link btn btn--accent">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<header>
|
||||
<img class="header__img"
|
||||
srcset="./assets/spaceLg.jpg 1999w, ./assets/spaceMd.jpg 1000w, ./assets/spaceSm.jpg 500w"
|
||||
src="./assets/space.jpg" alt="View of earth from space" />
|
||||
<div class="container header-container">
|
||||
<h1 class="h1 rise">The Next Frontier</h1>
|
||||
<p class="h3 rise subheading">Explore the universe of tomorrow.</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="stars container--sm fade-up" aria-labelledby="stars">
|
||||
<h2 class="h2" id="stars">Look to the Stars</h2>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor
|
||||
illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.</p>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam?
|
||||
Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci
|
||||
repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas
|
||||
expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?</p>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.</p>
|
||||
</section>
|
||||
<section class="container" aria-labelledby="cards">
|
||||
<h2 class="sr-only" id="cards">Reasons to Travel</h2>
|
||||
<div class="card-container">
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentColor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<path
|
||||
d="M138.7,175.5l-19.2,52.1a8,8,0,0,1-15,0L85.3,175.5a8.1,8.1,0,0,0-4.8-4.8L28.4,151.5a8,8,0,0,1,0-15l52.1-19.2a8.1,8.1,0,0,0,4.8-4.8l19.2-52.1a8,8,0,0,1,15,0l19.2,52.1a8.1,8.1,0,0,0,4.8,4.8l52.1,19.2a8,8,0,0,1,0,15l-52.1,19.2A8.1,8.1,0,0,0,138.7,175.5Z"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="16"></path>
|
||||
<line x1="176" y1="16" x2="176" y2="64" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="200" y1="40" x2="152" y2="40" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="224" y1="72" x2="224" y2="104" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="240" y1="88" x2="208" y2="88" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Stars in the Sky</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentColor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<path d="M88,148a68,68,0,1,1,68,68H76a44,44,0,0,1,0-88,42.5,42.5,0,0,1,14.3,2.4" fill="none"
|
||||
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16">
|
||||
</path>
|
||||
<path
|
||||
d="M47,138.9A64.1,64.1,0,0,1,9.6,94.4h0A68.3,68.3,0,0,0,24,96,64.1,64.1,0,0,0,88,32a68.3,68.3,0,0,0-1.6-14.4h0A64,64,0,0,1,136,80c0,1,0,2-.1,3"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="16"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Moon Up Above</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentcolor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<line x1="92.8" y1="59" x2="85.1" y2="40.5" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="43" y1="108.8" x2="24.5" y2="101.1" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="213" y1="108.8" x2="231.5" y2="101.1" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="163.2" y1="59" x2="170.9" y2="40.5" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="240" y1="160" x2="16" y2="160" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="208" y1="200" x2="48" y2="200" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<path d="M70.2,160a60,60,0,1,1,115.6,0" fill="none" stroke="currentcolor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Ain’t no Sun Allowed</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container--sm moons fade-up" aria-labelledby="moons">
|
||||
<h3 class="h2" id="moons">Space Travel for Everyone</h3>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor
|
||||
illum impedit
|
||||
nisi. Eaque sequi necessitatibus voluptatum porro.</p>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam?
|
||||
Obcaecati
|
||||
magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id
|
||||
culpa minima
|
||||
officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad
|
||||
voluptas
|
||||
praesentium animi velit quae dicta?</p>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="theme-color" content="#050307">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Responsive Navigation</title>
|
||||
<script src="./nav.js" type="module"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,800;1,600;1,800&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<div class="container nav-container">
|
||||
<a href="/" class="logo-link" aria-label="Go to homepage">
|
||||
<svg viewBox="0 0 229 161" class="logo" width="120" xmlns="http://www.w3.org/2000/svg"
|
||||
xml:space="preserve"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
||||
<path
|
||||
d="M29.17 82.421c4.003-34.962 33.732-62.157 69.763-62.157 21.047 0 39.944 9.279 52.817 23.964l-.039.022c.343.361.641.685.94 1.027.443.525.877 1.056 1.303 1.592h.008c.265.337.561.717.902 1.16.408.53.788 1.043 1.142 1.536l-.014.001a69.403 69.403 0 0 1 1.953 2.864c.405.634.747 1.192 1.033 1.657l.004-.003a69.94 69.94 0 0 1 6.483 13.895c8.313-5.572 12.656-10.495 11.55-13.947-1.139-3.553-7.885-5.018-18.404-4.604a31.955 31.955 0 0 0-.858-1.576 9.527 9.527 0 0 0-.685-1.029c20.568-.077 34.892 4.541 37.857 13.791 3.148 9.824-7.166 22.842-25.986 35.427-2.834 36.162-33.117 64.668-70.006 64.668-11.228 0-21.844-2.641-31.258-7.334 5.145-13.664 21.098-10.431 67.983-34.016 20.459-10.292 28.647-17.452 31.541-22.172-15.283 9.925-35.78 19.51-59.054 26.968C54.519 141.34 6.329 140.773.597 122.889c-3.221-10.053 6.73-22.526 26.395-35.382a37.974 37.974 0 0 0-.119 1.939c-.03.821-.028 1.608.002 2.331-9.796 6.182-14.118 10.753-12.914 14.509 1.115 3.482 7.616 4.959 17.772 4.627a69.909 69.909 0 0 1-2.895-16.167h.002l-.017-.258a71.154 71.154 0 0 1-.112-3.765c.001-.696.012-1.424.04-2.168.056-1.549.149-2.994.249-4.228l.133-1.49.041-.416h-.004Zm0 0-.001.001-.036.415c-.044.45-.089.95-.133 1.49l-.146 1.647c.075-1.192.181-2.375.315-3.552l.001-.001Z"
|
||||
style="fill:currentColor" />
|
||||
<path
|
||||
d="M34.442 51.095a10.127 10.127 0 0 1-4.596-8.485c0-5.592 4.54-10.132 10.132-10.132 2.837 0 5.403 1.169 7.243 3.05a71.387 71.387 0 0 0-12.779 15.567Z"
|
||||
style="fill:currentColor" />
|
||||
<circle cx="173.267" cy="10.132" r="10.132" style="fill:currentColor" />
|
||||
<circle cx="218.027" cy="100.618" r="10.132" style="fill:currentColor" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="nav-wrapper">
|
||||
<button class="btn btn--menu" id="menu-btn" aria-expanded="false" aria-controls="menu"
|
||||
aria-label="Open mobile nav">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul role="menubar" class="nav-links" id="menu">
|
||||
<li role="none">
|
||||
<a role="menuitem" href="index.html" class="nav-link btn">Home</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="about.html" class="nav-link btn">About</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="donate.html" class="nav-link btn">Donate</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<a role="menuitem" href="contact.html" class="nav-link btn btn--accent">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<header>
|
||||
<img class="header__img"
|
||||
srcset="./assets/spaceLg.jpg 1999w, ./assets/spaceMd.jpg 1000w, ./assets/spaceSm.jpg 500w"
|
||||
src="./assets/space.jpg" alt="View of earth from space" />
|
||||
<div class="container header-container">
|
||||
<h1 class="h1 rise">The Next Frontier</h1>
|
||||
<p class="h3 rise subheading">Explore the universe of tomorrow.</p>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section class="stars container--sm fade-up" aria-labelledby="stars">
|
||||
<h2 class="h2" id="stars">Look to the Stars</h2>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor
|
||||
illum impedit nisi. Eaque sequi necessitatibus voluptatum porro.</p>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam?
|
||||
Obcaecati magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci
|
||||
repellendus, id culpa minima officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas
|
||||
expedita. Ullam unde optio ad voluptas praesentium animi velit quae dicta?</p>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.</p>
|
||||
</section>
|
||||
<section class="container" aria-labelledby="cards">
|
||||
<h2 class="sr-only" id="cards">Reasons to Travel</h2>
|
||||
<div class="card-container">
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentColor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<path
|
||||
d="M138.7,175.5l-19.2,52.1a8,8,0,0,1-15,0L85.3,175.5a8.1,8.1,0,0,0-4.8-4.8L28.4,151.5a8,8,0,0,1,0-15l52.1-19.2a8.1,8.1,0,0,0,4.8-4.8l19.2-52.1a8,8,0,0,1,15,0l19.2,52.1a8.1,8.1,0,0,0,4.8,4.8l52.1,19.2a8,8,0,0,1,0,15l-52.1,19.2A8.1,8.1,0,0,0,138.7,175.5Z"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="16"></path>
|
||||
<line x1="176" y1="16" x2="176" y2="64" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="200" y1="40" x2="152" y2="40" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="224" y1="72" x2="224" y2="104" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="240" y1="88" x2="208" y2="88" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></line>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Stars in the Sky</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentColor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<path d="M88,148a68,68,0,1,1,68,68H76a44,44,0,0,1,0-88,42.5,42.5,0,0,1,14.3,2.4" fill="none"
|
||||
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16">
|
||||
</path>
|
||||
<path
|
||||
d="M47,138.9A64.1,64.1,0,0,1,9.6,94.4h0A68.3,68.3,0,0,0,24,96,64.1,64.1,0,0,0,88,32a68.3,68.3,0,0,0-1.6-14.4h0A64,64,0,0,1,136,80c0,1,0,2-.1,3"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="16"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Moon Up Above</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fade-up">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="card__image fade-up" width="192" fill="currentcolor"
|
||||
viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="none"></rect>
|
||||
<line x1="92.8" y1="59" x2="85.1" y2="40.5" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="43" y1="108.8" x2="24.5" y2="101.1" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="213" y1="108.8" x2="231.5" y2="101.1" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="163.2" y1="59" x2="170.9" y2="40.5" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="240" y1="160" x2="16" y2="160" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<line x1="208" y1="200" x2="48" y2="200" fill="none" stroke="currentcolor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
|
||||
<path d="M70.2,160a60,60,0,1,1,115.6,0" fill="none" stroke="currentcolor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="16"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="h3">Ain’t no Sun Allowed</h3>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum obcaecati,
|
||||
deserunt optio possimus atque qui!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container--sm moons fade-up" aria-labelledby="moons">
|
||||
<h3 class="h2" id="moons">Space Travel for Everyone</h3>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae eligendi quibusdam dolor
|
||||
illum impedit
|
||||
nisi. Eaque sequi necessitatibus voluptatum porro.</p>
|
||||
<p class="body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt fugiat commodi numquam?
|
||||
Obcaecati
|
||||
magni perferendis eligendi laudantium cum perspiciatis minus animi ipsa placeat adipisci repellendus, id
|
||||
culpa minima
|
||||
officiis fugiat quidem nisi sint consectetur eius vero velit sunt quas expedita. Ullam unde optio ad
|
||||
voluptas
|
||||
praesentium animi velit quae dicta?</p>
|
||||
<p class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, temporibus.</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
const navBtn = document.querySelector("#menu-btn");
|
||||
const nav = document.querySelector("nav");
|
||||
const navLinks = document.querySelector(".nav-links");
|
||||
|
||||
navBtn.addEventListener("click", () => {
|
||||
navLinks.classList.add("activated");
|
||||
const isExpanded = JSON.parse(navBtn.getAttribute("aria-expanded"));
|
||||
navBtn.setAttribute("aria-expanded", !isExpanded);
|
||||
!isExpanded && nav.classList.add("active");
|
||||
});
|
||||
|
||||
//INTERSECTION OBSERVER
|
||||
|
||||
const navObs = new IntersectionObserver(
|
||||
(entries) => nav.classList.toggle("active", !entries[0].isIntersecting),
|
||||
{ threshold: 0.85 }
|
||||
);
|
||||
|
||||
navObs.observe(document.querySelector("header"));
|
||||
|
||||
const fadeUpObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("faded");
|
||||
fadeUpObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
rootMargin: "-15%",
|
||||
}
|
||||
);
|
||||
|
||||
document.querySelectorAll(".fade-up").forEach((el) => {
|
||||
fadeUpObserver.observe(el);
|
||||
});
|
||||
|
||||
document.querySelectorAll(".nav-link").forEach((link) => {
|
||||
if (link.href === window.location.href) {
|
||||
link.setAttribute("aria-current", "page");
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bkg: linear-gradient(to top, #0f0915, #050307);
|
||||
/* --dark: #050307; */
|
||||
--dark: #050307;
|
||||
--text: #f9f6fe;
|
||||
--accent: #4233e4;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Nunito Sans", sans-serif;
|
||||
font-size: clamp(1.1rem, 2vw + 1rem, 1.4rem);
|
||||
line-height: 1.55;
|
||||
background: var(--bkg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
padding-block: 1.2rem;
|
||||
background-color: transparent;
|
||||
transition: background-color 800ms cubic-bezier(0.64, 0.04, 0.26, 0.87);
|
||||
}
|
||||
|
||||
nav.active {
|
||||
background-color: var(--dark);
|
||||
}
|
||||
|
||||
.nav-link[aria-current="page"] {
|
||||
text-decoration: underline wavy #f8c348 0.15rem;
|
||||
text-underline-offset: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--accent);
|
||||
margin-inline: 0.5rem;
|
||||
width: clamp(3rem, 10vw, 7.5rem);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.logo-link:focus-visible,
|
||||
.nav-link:focus-visible {
|
||||
outline: 4px solid var(--accent);
|
||||
outline-offset: 0.2em;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
transform: translate3d(0, -200%, 0);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 3rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--dark);
|
||||
padding: 1.5rem;
|
||||
border-bottom: 4px solid var(--accent);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-links.activated {
|
||||
transition: transform 0.4s cubic-bezier(0.64, 0.04, 0.26, 0.87);
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
padding: 0.3rem 1.5rem;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.btn--accent {
|
||||
background-color: var(--accent);
|
||||
padding: 0.3rem 2rem;
|
||||
}
|
||||
|
||||
.btn--menu {
|
||||
color: var(--accent);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding-inline: 1rem;
|
||||
transition: transform 0.3s cubic-bezier(0.64, 0.04, 0.26, 0.87);
|
||||
}
|
||||
|
||||
li[role="none"],
|
||||
.nav-link {
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn--menu[aria-expanded="true"] {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.btn--menu[aria-expanded="true"] + .nav-links {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.btn--menu {
|
||||
display: none;
|
||||
}
|
||||
.nav-links {
|
||||
position: static;
|
||||
transform: translate3d(0, 0, 0);
|
||||
flex-direction: row;
|
||||
border: 0;
|
||||
z-index: 0;
|
||||
padding: 0;
|
||||
inset: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
li[role="none"],
|
||||
.nav-link {
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
gap: clamp(4rem, 1.45454537rem + 11.636364vw, 8rem);
|
||||
position: relative;
|
||||
top: -10vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 5vw + 1rem, 8rem);
|
||||
font-size: bolder;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: clamp(1.8rem, 4vw + 1rem, 3.5rem);
|
||||
font-size: bolder;
|
||||
line-height: 1.1;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: clamp(1.2rem, 3vw + 1rem, 2.2rem);
|
||||
line-height: 1.1;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.subheading {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header__img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-inline: max((100% - 90rem) / 2, 1rem);
|
||||
}
|
||||
|
||||
.container--sm {
|
||||
margin-inline: max((100% - 70rem) / 2, 2rem);
|
||||
}
|
||||
|
||||
.rise {
|
||||
opacity: 0;
|
||||
animation: rise 0.8s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.rise.subheading {
|
||||
animation: rise 1.2s ease-in-out forwards 0.5s;
|
||||
}
|
||||
|
||||
@keyframes rise {
|
||||
0% {
|
||||
transform: translateY(2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
position: relative;
|
||||
top: -5vh;
|
||||
}
|
||||
|
||||
.stars {
|
||||
padding: clamp(1.2rem, 3.5vw, 2.5rem) clamp(1.2rem, 5vw, 3rem) 0;
|
||||
background-color: var(--dark);
|
||||
display: grid;
|
||||
border-radius: 0.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.moons {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#stars {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2.5rem 3.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 1 1 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 2.5rem 1.5rem 1.5rem;
|
||||
border: 5px solid var(--accent);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.card {
|
||||
flex: 1 1 28%;
|
||||
}
|
||||
}
|
||||
|
||||
.card__image {
|
||||
width: clamp(4rem, 10vw, 8rem);
|
||||
}
|
||||
|
||||
/* default transform was 1 second, I prefer a lower figure */
|
||||
.fade-up {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 5rem, 0);
|
||||
transition: transform 0.4s cubic-bezier(0.64, 0.04, 0.26, 0.87),
|
||||
opacity 0.8s cubic-bezier(0.64, 0.04, 0.26, 0.87);
|
||||
}
|
||||
|
||||
.fade-up.faded {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!--
|
||||
|
||||
Comes from a video by Kevin Powell
|
||||
Create a neon button with a reflection using CSS [6xNcXwC6ikQ]
|
||||
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Neon Button</title>
|
||||
|
||||
<!-- Google fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#" class="neon-button">Neon</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
:root {
|
||||
--clr-neon: rgb(165, 224, 16);
|
||||
--clr-bg: hsl(323 21% 16%);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--clr-bg);
|
||||
font-family: "Balsamiq Sans", cursive;
|
||||
color: var(--clr-neon);
|
||||
padding-right: 10rem;
|
||||
}
|
||||
|
||||
.neon-button {
|
||||
color: var(--clr-neon);
|
||||
font-size: 4rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
/* Using em here to make border responsive to text size */
|
||||
border: var(--clr-neon) 0.125em solid;
|
||||
/* Using em here to make padding responsive to text size */
|
||||
padding: 0.25em 1em;
|
||||
/* Using em here to make border-radius responsive to text size */
|
||||
border-radius: 0.25em;
|
||||
|
||||
/* this starts to give it the glow, you could just go with
|
||||
a shadow that is the same color, but better to mix it a little
|
||||
|
||||
! NOTE: IF YOU MISS that second % in the hsl it breaks it!!!
|
||||
*/
|
||||
text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
|
||||
|
||||
/* following makes the text backlit, better something else
|
||||
note current color isn't needed, it is inherited */
|
||||
/* box-shadow: 0 0 0.5em 0 currentColor; */
|
||||
/* inset adds the shadow to the inside of the element */
|
||||
box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.neon-button::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
|
||||
background-color: var(--clr-neon);
|
||||
/* could use following or ...*/
|
||||
/* top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0; */
|
||||
/* use this ... */
|
||||
top: 120%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* this shifts the effective camera perspective as if
|
||||
its looking down along
|
||||
translateZ would move it up or down, but isn't needed here -/+
|
||||
scale reduces size */
|
||||
transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
|
||||
/* makes it look more like a light is cast
|
||||
play with the value till you find a look you like */
|
||||
filter: blur(1.5em);
|
||||
/* opacity to adjust intensity, boost opacity to make it glow
|
||||
more on a hover */
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.neon-button::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
box-shadow: 0 0 2em 0.5em var(--clr-neon);
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 100ms linear;
|
||||
}
|
||||
|
||||
.neon-button:focus::before,
|
||||
.neon-button:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.neon-button:hover::after,
|
||||
.neon-button:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.neon-button:is(:hover, :focus) {
|
||||
background-color: var(--clr-neon);
|
||||
color: var(--clr-bg);
|
||||
/* could also be unset */
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* below was from the original file, I commented it out and typed while watching the video*/
|
||||
|
||||
/* .neon-button {
|
||||
font-size: 4rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: var(--clr-neon);
|
||||
border: var(--clr-neon) 0.125em solid;
|
||||
padding: 0.25em 1em;
|
||||
border-radius: 0.25em;
|
||||
text-shadow: 0 0 0.125em rgba(255, 255, 255, 0.3), 0 0 0.45em currentColor;
|
||||
box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
|
||||
position: relative;
|
||||
} */
|
||||
|
||||
/* .neon-button::before {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--clr-neon);
|
||||
top: 120%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
|
||||
filter: blur(1em);
|
||||
opacity: 0.7;
|
||||
} */
|
||||
|
||||
/* .neon-button::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 0 2em 0.5em var(--clr-neon);
|
||||
opacity: 0;
|
||||
background-color: var(--clr-neon);
|
||||
z-index: -1;
|
||||
transition: opacity 100ms linear;
|
||||
} */
|
||||
|
||||
/* .neon-button:hover,
|
||||
.neon-button:focus {
|
||||
color: var(--clr-bg);
|
||||
text-shadow: none;
|
||||
} */
|
||||
|
||||
/* .neon-button:hover::before,
|
||||
.neon-button:focus::before {
|
||||
opacity: 1;
|
||||
} */
|
||||
/*
|
||||
.neon-button:hover::after,
|
||||
.neon-button:focus::after {
|
||||
opacity: 1;
|
||||
} */
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
.search-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.user-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 0.25rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid black;
|
||||
background-color: whitesmoke;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.card > .name {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.card > .email {
|
||||
font-size: 0.8rem;
|
||||
columns: #777;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
<title>Using Template with Search</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
|
||||
<!-- * Section for search -->
|
||||
<!-- note that really this is filtering, not searching -->
|
||||
<div class="search-wrapper">
|
||||
<label for="search">Search (filter) Users</label>
|
||||
<input type="search" id="search" data-search>
|
||||
</div>
|
||||
|
||||
<!-- * Section for users -->
|
||||
<div class="user-cards" data-user-cards-container>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<template data-user-template>
|
||||
<div class="card">
|
||||
<div class="name" data-name>My Name</div>
|
||||
<div class="email" data-email>My email address</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
// * https://jsonplaceholder.typicode.com/users
|
||||
|
||||
const userCardTemplate = document.querySelector("[data-user-template]");
|
||||
// console.log(userCardTemplate);
|
||||
|
||||
const userCardsContainer = document.querySelector(
|
||||
"[data-user-cards-container]"
|
||||
);
|
||||
// console.log(userCardsContainer);
|
||||
|
||||
// Original code from video used the attribute for the query rather
|
||||
// than the ID that he had setup. So I swapped it over.
|
||||
// const searchInput = document.querySelector("[data-search]");
|
||||
const searchInput = document.querySelector("#search");
|
||||
// console.log(searchInput);
|
||||
|
||||
let users = []; // filed from user data retrieved from server
|
||||
|
||||
searchInput.addEventListener("input", (event) => {
|
||||
const value = event.target.value.toLowerCase();
|
||||
// console.log(users);
|
||||
users.forEach((user) => {
|
||||
// this seems wasteful to run toLowerCase each time you type a letter
|
||||
// surely better to just store a lowercase version when saving original data
|
||||
// const isVisible =
|
||||
// user.name.toLowerCase().includes(value) ||
|
||||
// user.email.toLowerCase().includes(value);
|
||||
|
||||
const isVisible =
|
||||
user.lowercaseName.includes(value) ||
|
||||
user.lowercaseEmail.includes(value);
|
||||
|
||||
user.element.classList.toggle("hide", !isVisible);
|
||||
});
|
||||
});
|
||||
|
||||
fetch("https://jsonplaceholder.typicode.com/users")
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
users = data.map((user) => {
|
||||
const card = userCardTemplate.content.cloneNode(true).children[0];
|
||||
|
||||
const name = card.querySelector("[data-name]");
|
||||
const email = card.querySelector("[data-email]");
|
||||
|
||||
name.textContent = user.name;
|
||||
email.textContent = user.email;
|
||||
|
||||
// console.log(card);
|
||||
|
||||
userCardsContainer.append(card);
|
||||
|
||||
// Below is original return
|
||||
// return { name: user.name, email: user.email, element: card };
|
||||
return {
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
lowercaseName: user.name.toLowerCase(),
|
||||
lowercaseEmail: user.email.toLowerCase(),
|
||||
element: card,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -169,6 +169,28 @@
|
|||
],
|
||||
"screenshotURL": "/screenshots/fcc-web-Project3-ProductLandingPage.jpeg",
|
||||
"screenshotAltText": "Project 3 - Product Landing Page"
|
||||
},
|
||||
{
|
||||
"title": "Project 4 - Build A Technical Document",
|
||||
"url": "/freeCodeCamp/responsive-web-design-projects/Project4-BuildATechnicalDocumentPage",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fcc-web-Project4-BuildATechnicalDocument.png",
|
||||
"screenshotAltText": "Project 4 - Build A Technical Document"
|
||||
},
|
||||
{
|
||||
"title": "Project 5 - Personal Portfolio Page",
|
||||
"url": "/freeCodeCamp/responsive-web-design-projects/Project5-PersonalPortfolioPage",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3"
|
||||
],
|
||||
"screenshotURL": "/screenshots/fcc-web-Project5-PersonalPortfolioPage.png",
|
||||
"screenshotAltText": "Project 5 - Personal Portfolio Page"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 611 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
Loading…
Reference in New Issue