generated from typography-and-interaction-too/template
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
92 lines (81 loc) · 11.6 KB
/
index.html
File metadata and controls
92 lines (81 loc) · 11.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/the-new-css-reset@1.4.7/css/reset.min.css" rel="stylesheet">
<!-- Note I have split my CSS and organized it in a folder. -->
<link href="css/shared.css" rel="stylesheet">
<link href="css/links-hover.css" rel="stylesheet">
<link href="css/details-summary.css" rel="stylesheet">
<link href="css/background-overflow.css" rel="stylesheet">
<link href="images/favicon.png" rel="icon">
</head>
<body>
<h1>Some practical examples!</h1>
<section>
<p>This page uses a font (<a href="https://www.ibm.com/plex/"><em>Plex</em></a>) from <a href="https://fonts.google.com">Google Fonts</a>.</p>
<p class="faded">Choose a family and styles there that you want to use. Then include the <code><link></code> element they provide you in your <code><head></code>—or as I’ve done here, the <code>@import</code> line in your CSS. Add the corresponding <code>font-family</code> rule and you should see the font!</p>
</section>
<section>
<p>This is <a href="second.html">an inline link to another page</a> in the same project.</p>
<!-- Note the double class! -->
<a class="linked-area rounded-container" href="second.html">
<!-- Images in a separate folder. -->
<img src="images/yosemite.jpg" >
<p>Links can also be set to <code>display: block;</code> or <code>display: flex;</code> and be used around whole sections of DOM.</p>
<!-- Links can have lots of children! -->
</a>
<p>This will <a href="#in-page">link in this page</a> to the element with the <code>id</code>, below.</p>
</section>
<section>
<!-- These are just here to give us some length/scroll. -->
<p class="faded">Neo-Modernism cinematic cognizance Foucault cultural memory left history post-structuralist body politic ephemeral. Dystopian outlook fractured identity intermedia Walter Benjamin doppelganger conceptual structures causality constraint reclaimed identity. Liminal space psychical condition systemic artifice Sontag mnemonic communities of practice paradigmatic reimagining. Historical-ontological visual text dualism intrinsic value semiotic square haunted space phenomenological experience. </p>
<p class="faded">Synesthetic non-verbal space atmospheric Deleuze White Cube historical-ontological Symbolist. Asymmetric multiplicity Derrida cultural symbolism hegemonic phenomenology aesthetic judgement hetero-normative paradigm transcend. Ascetic socio-aesthetic Schopenhauer sublime emerging technologies politics of space hierarchical. Dematerialized Kant Clement Greenberg Remodernism conversely conceptual framework synthetic disseminate. </p>
<p class="faded">Visual culture subjectivism visual narrative art historical trajectories mimetic contextualizing intermedia. Physical site post-Internet spectral Symbolist indeterminate space experimental geography synthetic. Barthes Kierkegaard teleological sensory aesthetics resonate ideology informance socio-aesthetic. Ethnographies hierarchical masculine parody neuroaesthetics Remodernism subjectivity of experience synesthetic thesis luminary. </p>
<p class="faded">Relational aesthetics hegemonic Heidegger doppelganger reciprocity mythologizing architectural. Morphology Clement Greenberg constraint cognizance liminality ecology assimilation. Intermediation multiplicity left history paradoxical asymmetric temporal/spatial dynamics aesthetic object imagined spaces. Existential crisis oeuvre textual liminal space luminary aesthetic judgement alternate realities pastoral ethnographies. Synesthetic Neo-Modernism site-specific communities of practice transcend morphology Horkheimer phenomenology causality. </p>
<p id="in-page"><strong>This paragraph has the <code>id</code>!</strong> <span class="faded">Emerging technologies dichotomy subjectivism mundane domestic objects reciprocity transitory aesthetic object Barthes post-feminist. Emergent hetero-normative paradigm reductive DNA mnemonic cultural memory disparity modernity. Critical discourse prosaic banal hyperreal dialogical relationship profound intuition body politic. Systemic paradoxical temporal/spatial dynamics contextualizing tension individualism synecdoche.</span></p>
</section>
<section id="hover-block" class="rounded-container">
<p><strong>You can also use <code>:hover</code> on non-link elements.</strong></p>
<div class="rounded-container">
<img src="images/redwood.jpg" >
<p>This is a child of the gray block with <code>position: absolute;</code>!</p>
<!-- You could have a whole “page” in here. -->
</div>
</section>
<section>
<details class="rounded-container">
<summary>You can use <code>details</code> / <code>summary</code> elements for JavaScript-free open/close behaviors.</summary>
<p class="faded">Imagined spaces wearable technology profound intuition critical theory uncanny alternate realities simulacrum Realism tension. Visual narrative paradoxical imbue alternative history thesis Stuckism hybridity transitory. Subject-object dichotomy fragmentation of self neuroaesthetics mnemonic fractal disseminate emergent cultural memory Jean-François Lyotard. Spectral oscillate Kant interpretative systems of representation subjectivism performativity. Fluidity ritualized behaviour informance Other cultural symbolism body politic communities of reception in-itself.</p>
<p class="faded">Oscillate fractal hierarchical performativity metaphysics sublime hetero-normative paradigm sensorial prosaic. Cinematic instantaneous temporality metanarrative transcend ascetic lived experience Walter Benjamin informance constraint. Remodernism visceral dualism ideology dichotomy Self multiplicity imagined spaces. Walter Benjamin socio-aesthetic interface semiotic square alternative history propagated gesamkunstwerk neuroaesthetics inverse relationship. Sensory aesthetics hegemonic wearable technology critical discourse Baudrillard visceral appropriating cultural discourse permissive. </p>
<p class="faded">Neo-Modernism cinematic cognizance Foucault cultural memory left history post-structuralist body politic ephemeral. Dystopian outlook fractured identity intermedia Walter Benjamin doppelganger conceptual structures causality constraint reclaimed identity. Liminal space psychical condition systemic artifice Sontag mnemonic communities of practice paradigmatic reimagining. Historical-ontological visual text dualism intrinsic value semiotic square haunted space phenomenological experience. </p>
</details>
</section>
<section id="background-image" class="rounded-container">
<p><strong>This container uses an image as a background. Be mindful of legibility using this!</strong></p>
<p class="faded">Cognizance Foucault cultural memory left history post-structuralist body politic ephemeral. Dystopian outlook fractured identity intermedia Walter Benjamin doppelganger conceptual structures causality constraint reclaimed identity. Liminal space psychical condition systemic artifice Sontag mnemonic communities of practice paradigmatic reimagining. Historical-ontological visual text dualism intrinsic value semiotic square haunted space phenomenological experience. </p>
</section>
<section id="scroll-vertical" class="rounded-container">
<header class="rounded-container">This container scrolls internally with <code>overflow-y: scroll;</code></header>
<p class="faded">Synesthetic non-verbal space atmospheric Deleuze White Cube historical-ontological Symbolist. Asymmetric multiplicity Derrida cultural symbolism hegemonic phenomenology aesthetic judgement hetero-normative paradigm transcend. Ascetic socio-aesthetic Schopenhauer sublime emerging technologies politics of space hierarchical. Dematerialized Kant Clement Greenberg Remodernism conversely conceptual framework synthetic disseminate. </p>
<p class="faded">Visual culture subjectivism visual narrative art historical trajectories mimetic contextualizing intermedia. Physical site post-Internet spectral Symbolist indeterminate space experimental geography synthetic. Barthes Kierkegaard teleological sensory aesthetics resonate ideology informance socio-aesthetic. Ethnographies hierarchical masculine parody neuroaesthetics Remodernism subjectivity of experience synesthetic thesis luminary. </p>
<p class="faded">Relational aesthetics hegemonic Heidegger doppelganger reciprocity mythologizing architectural. Morphology Clement Greenberg constraint cognizance liminality ecology assimilation. Intermediation multiplicity left history paradoxical asymmetric temporal/spatial dynamics aesthetic object imagined spaces. Existential crisis oeuvre textual liminal space luminary aesthetic judgement alternate realities pastoral ethnographies. Synesthetic Neo-Modernism site-specific communities of practice transcend morphology Horkheimer phenomenology causality. </p>
</section>
<section id="scroll-horizontal" class="rounded-container">
<header class="rounded-container">This one uses <code>overflow-x: scroll;</code> <br><br>The headers are <code>position: sticky;</code></header>
<p class="faded">Imagined spaces wearable technology profound intuition critical theory uncanny alternate realities simulacrum Realism tension. Visual narrative paradoxical imbue alternative history thesis Stuckism hybridity transitory. Subject-object dichotomy fragmentation of self neuroaesthetics mnemonic fractal disseminate emergent cultural memory Jean-François Lyotard. Spectral oscillate Kant interpretative systems of representation subjectivism performativity. Fluidity ritualized behaviour informance Other cultural symbolism body politic communities of reception in-itself.</p>
<p class="faded">Oscillate fractal hierarchical performativity metaphysics sublime hetero-normative paradigm sensorial prosaic. Cinematic instantaneous temporality metanarrative transcend ascetic lived experience Walter Benjamin informance constraint. Remodernism visceral dualism ideology dichotomy Self multiplicity imagined spaces. Walter Benjamin socio-aesthetic interface semiotic square alternative history propagated gesamkunstwerk neuroaesthetics inverse relationship. Sensory aesthetics hegemonic wearable technology critical discourse Baudrillard visceral appropriating cultural discourse permissive. </p>
<p class="faded">Neo-Modernism cinematic cognizance Foucault cultural memory left history post-structuralist body politic ephemeral. Dystopian outlook fractured identity intermedia Walter Benjamin doppelganger conceptual structures causality constraint reclaimed identity. Liminal space psychical condition systemic artifice Sontag mnemonic communities of practice paradigmatic reimagining. Historical-ontological visual text dualism intrinsic value semiotic square haunted space phenomenological experience. </p>
</section>
<section id="transforms">
<p>Look into CSS <code>transform</code> if you want to rotate or scale elements.</p>
<p class="faded">Synesthetic non-verbal space atmospheric Deleuze White Cube historical-ontological Symbolist. Asymmetric multiplicity Derrida cultural symbolism hegemonic phenomenology aesthetic judgement hetero-normative paradigm transcend. Ascetic socio-aesthetic Schopenhauer sublime emerging technologies politics of space hierarchical. Dematerialized Kant Clement Greenberg Remodernism conversely conceptual framework synthetic disseminate. </p>
</section>
<section>
<p><em>I am excited to see your projects!</em></p>
</section>
<!-- I hope you are seeing this source code! -->
<a id="source-link" class="rounded-container" href="https://github.com/typography-and-interaction-too/practical-examples">See the source code</a>
</body>
</html>