-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (142 loc) · 17.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Primo" />
<title>Blog</title><!-- HEAD_svelte-1pww12a_START --><link rel="shortcut icon" type="image/jpg" sizes="32x32" href="https://github.com/primocms/primo/blob/master/static/primologo.png?raw=true"><link rel="preconnect" href="https://fonts.bunny.net"><link href="https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900" rel="stylesheet"><link href="https://fonts.bunny.net/css?family=merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css"><script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace-autoloader.js"></script><link rel="shortcut icon" type="image/jpg" sizes="32x32" href="https://github.com/primocms/primo/blob/master/static/primologo.png?raw=true"><meta name="description" content=""><style>/* Reset & standardize default styles */
@import url("https://unpkg.com/@primo-app/[email protected]/reset.css") layer;
/* Design tokens (apply to components) */
:root {
/* Custom theme options */
--color-accent: black;
--color-accent2: #999999;
--color-shade: #2d3339;
--inner-max-width: 800px;
/* Base values */
--box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
--border-radius: 2px;
--border-color: #e0e1e1;
--body-font: "Merriweather", serif;
--heading-font: "Inter", sans-serif;
}
/* Root element (use instead of `body`) */
#page {
font-family: var(--heading-font);
color: #111;
line-height: 1.5;
font-size: 1.125rem;
background: white;
}
/* Elements */
.section-container {
max-width: 1150px;
margin: 0 auto;
padding: 5rem 2rem;
}
a.link {
line-height: 1.3;
border-bottom: 2px solid var(--color-accent);
transform: translateY(-2px); /* move link back into place */
transition: var(--transition, 0.1s border);
}
a.link:hover {
border-color: transparent;
}
.heading {
font-size: clamp(2rem, 10vw, 3rem);
line-height: 1.1;
font-weight: 600;
letter-spacing: -0.15rem;
}
.button {
color: white;
background: var(--color-accent, rebeccapurple);
border-radius: 0;
padding: 1px 24px;
transition: var(--transition, 0.1s box-shadow);
border: 0; /* reset */
border-radius: 0.25rem;
font-size: 1rem;
}
.button:hover {
box-shadow: 0 0 0 2px var(--color-accent, rebeccapurple);
}
.button.inverted {
background: transparent;
color: var(--color-accent, rebeccapurple);
}
</style><!-- HEAD_svelte-1pww12a_END -->
<style>.section-container.svelte-ngjace.svelte-ngjace{display:flex;justify-content:space-between;align-items:center;padding-block:2rem}.logo.svelte-ngjace.svelte-ngjace{font-size:1.5rem;font-weight:600;line-height:1.2}.desktop-nav.svelte-ngjace.svelte-ngjace{display:none;align-items:center;justify-content:space-between;width:100%}.desktop-nav.svelte-ngjace nav.svelte-ngjace{display:flex;gap:1.75rem}.desktop-nav.svelte-ngjace nav a.link.svelte-ngjace{border-color:transparent;transition:border-color 0.1s;font-size:0.95rem;font-weight:500}.desktop-nav.svelte-ngjace nav a.link.svelte-ngjace:hover,.desktop-nav.svelte-ngjace nav a.link .active.svelte-ngjace{border-color:initial}@media(min-width: 800px){.desktop-nav.svelte-ngjace.svelte-ngjace{display:flex
}}.mobile-nav.svelte-ngjace.svelte-ngjace{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:500}@media(min-width: 800px){.mobile-nav.svelte-ngjace.svelte-ngjace{display:none
}}#popup.svelte-ngjace.svelte-ngjace{font-size:1.25rem;display:grid;gap:1rem;position:absolute;text-align:center;background-color:var(--background-color, white);box-shadow:var(--box-shadow, 0px 4px 30px rgba(0, 0, 0, 0.1));border-radius:var(--border-radius);inset:0.5rem;bottom:initial;padding:2rem;z-index:1}#popup.svelte-ngjace button#close.svelte-ngjace{position:absolute;right:1rem;top:1rem}
.svelte-1ul81oz.svelte-1ul81oz{position:relative;z-index:1}.section-container.svelte-1ul81oz.svelte-1ul81oz{display:grid;gap:3.5rem;max-width:var(--inner-max-width);padding-block:5rem;position:relative}.headline.svelte-1ul81oz.svelte-1ul81oz{max-width:800px;margin:0 auto;font-size:clamp(2rem, 10vw, 5rem);line-height:1;letter-spacing:-0.04rem;font-weight:700;text-align:center;text-wrap:balance}.headline2.svelte-1ul81oz.svelte-1ul81oz{max-width:800px;margin:0 auto;font-size:clamp(2rem, 5vw, 1rem);line-height:1;letter-spacing:-0.04rem;font-weight:700;text-align:center;text-wrap:balance}form.svelte-1ul81oz.svelte-1ul81oz{display:flex;flex-wrap:wrap;gap:0.3rem;max-width:400px;justify-self:center}form.svelte-1ul81oz label.svelte-1ul81oz{flex:1}form.svelte-1ul81oz label input.svelte-1ul81oz{width:100%;padding:0.6rem 0.75rem;outline-color:transparent;transition:0.1s outline-color;border:1.5px solid var(--border-color, #eee);font-weight:300;border-radius:0.25rem}form.svelte-1ul81oz label input.svelte-1ul81oz:focus{outline-color:var(--color-accent, rebeccapurple)}.message.svelte-1ul81oz.svelte-1ul81oz{text-align:center;background:var(--background, white);padding:1rem;box-shadow:1px 1px 10px 5px rgba(0, 0, 0, 0.1);border-radius:0.25rem}.message.error.svelte-1ul81oz.svelte-1ul81oz{border:2px solid red}.graphic.svelte-1ul81oz.svelte-1ul81oz{position:absolute;z-index:0}.graphic.left.svelte-1ul81oz.svelte-1ul81oz{width:20%;bottom:20%;right:95%;-webkit-animation:svelte-1ul81oz-left-float 8s infinite alternate;animation:svelte-1ul81oz-left-float 8s infinite alternate}.graphic.right.svelte-1ul81oz.svelte-1ul81oz{width:20%;bottom:70%;left:90%;-webkit-animation:svelte-1ul81oz-right-float 8s infinite alternate;animation:svelte-1ul81oz-right-float 8s infinite alternate}@media(prefers-reduced-motion){.graphic.svelte-1ul81oz.svelte-1ul81oz{-webkit-animation:none;animation:none
}}@-webkit-keyframes svelte-1ul81oz-left-float{to{rotate:5deg;transform:translateX(20px)}}@keyframes svelte-1ul81oz-left-float{to{rotate:5deg;transform:translateX(20px)}}@-webkit-keyframes svelte-1ul81oz-right-float{to{rotate:-20deg;transform:translateX(-20px)}}@keyframes svelte-1ul81oz-right-float{to{rotate:-20deg;transform:translateX(-20px)}}
.section-container.svelte-10jylfj.svelte-10jylfj{max-width:var(--inner-max-width, 900px)}h2.svelte-10jylfj.svelte-10jylfj{font-size:1rem;line-height:1.1;font-weight:600;margin-bottom:4rem;letter-spacing:-0.02rem;padding:.5rem 0;border-bottom:1px solid #f0f0f0}ul.items.svelte-10jylfj.svelte-10jylfj{display:grid;gap:4rem}li.svelte-10jylfj.svelte-10jylfj{display:grid;gap:2rem}li.svelte-10jylfj .post-info .title.svelte-10jylfj{display:block;font-size:1.3rem;font-weight:600;margin-bottom:0.75rem;line-height:1.2;letter-spacing:-0.02rem;-webkit-text-decoration:underline transparent;text-decoration:underline transparent;transition:0.1s -webkit-text-decoration;transition:0.1s text-decoration;transition:0.1s text-decoration, 0.1s -webkit-text-decoration}li.svelte-10jylfj .post-info .title.svelte-10jylfj:hover{-webkit-text-decoration-color:initial;text-decoration-color:initial}li.svelte-10jylfj .post-info .description.svelte-10jylfj{font-size:1rem;margin-bottom:0.5rem;font-family:var(--body-font);line-height:1.4;font-weight:300;color:#2d3339}li.svelte-10jylfj .post-info .date.svelte-10jylfj{font-size:1rem;font-weight:400;color:var(--color-accent2);font-weight:400}li.svelte-10jylfj img.svelte-10jylfj{box-shadow:var(--box-shadow);border-radius:var(--border-radius)}@media(min-width: 600px){li.svelte-10jylfj.svelte-10jylfj{grid-template-columns:3fr 1fr;gap:3rem}}
.section-container.svelte-1excgdw.svelte-1excgdw{padding:2rem 2rem 1rem 2rem}hr.svelte-1excgdw.svelte-1excgdw{border-color:#F2F2F2}.footer.svelte-1excgdw.svelte-1excgdw{display:flex;justify-content:space-between;flex-direction:start column;gap:1rem;padding-top:1rem;padding-bottom:1rem}.copyright.svelte-1excgdw.svelte-1excgdw{font-size:0.75rem;color:var(--color-text-secondary, #2D3339)}.primo.svelte-1excgdw.svelte-1excgdw{font-weight:600;font-size:0.75rem}.primo.svelte-1excgdw a.svelte-1excgdw{text-decoration:underline}ul.svelte-1excgdw.svelte-1excgdw{display:flex;gap:1.5rem;font-size:1.5rem;list-style:none}ul.svelte-1excgdw a.svelte-1excgdw{transition:var(--transition)}ul.svelte-1excgdw a.svelte-1excgdw:hover{color:var(--color-accent)}@media(min-width: 600px){ul.svelte-1excgdw.svelte-1excgdw{font-size:1.25rem}}</style>
</head>
<body id="page">
<div class="section" id="section-a73d4e85"><header class="section-container svelte-ngjace"><div class="desktop-nav svelte-ngjace"><a href="/" class="logo svelte-ngjace">Name</a>
<nav class="svelte-ngjace"><a class="link svelte-ngjace" href="/">Home</a><a class="link svelte-ngjace" href="/blog">Blog</a><a class="link svelte-ngjace" href="/about">About</a></nav></div>
<div class="mobile-nav svelte-ngjace"><a href="/" class="logo svelte-ngjace">Name</a>
<button id="open" aria-label="Open mobile navigation"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" width="30" height="30" viewBox="0 0 24 24" class="iconify iconify--eva"><!-- HTML_TAG_START --><g id="iconifySvelte0"><g id="iconifySvelte1"><g id="iconifySvelte2" fill="currentColor"><rect width="18" height="2" x="3" y="11" rx=".95" ry=".95"/><rect width="18" height="2" x="3" y="16" rx=".95" ry=".95"/><rect width="18" height="2" x="3" y="6" rx=".95" ry=".95"/></g></g></g><!-- HTML_TAG_END --></svg></button>
</div></header></div>
<div class="section svelte-1ul81oz" id="section-4d4434d4"><section class="section-container svelte-1ul81oz"><h1 class="headline svelte-1ul81oz">Term Sheet</h1>
<h1 class="headline2 svelte-1ul81oz">Les Clauses Incontournable</h1>
<form class="svelte-1ul81oz"><label class="svelte-1ul81oz"><input required name="email" type="text" placeholder="Email address" class="svelte-1ul81oz"></label>
<button class="button svelte-1ul81oz" type="submit">Subscribe</button></form>
<img class="graphic left svelte-1ul81oz" src="https://assets.website-files.com/5d5e2ff58f10c53dcffd8683/5db1e0e7e74e34610bcb4951_sprinting.gif" alt="space man">
<img class="graphic right svelte-1ul81oz" src="https://assets.website-files.com/5d5e2ff58f10c53dcffd8683/5d5e30c18f10c55c00fd8f48_ice-cream.svg" alt="satellite"></section></div>
<div class="section" id="section-20e42126"><section class="section-container svelte-10jylfj"><h2 class="svelte-10jylfj">Articles</h2>
<ul class="items svelte-10jylfj"><li class="svelte-10jylfj"><div class="post-info"><a class="title svelte-10jylfj" href="/blog/article">Mastering the art of responsive design: a comprehensive guide</a>
<div class="description svelte-10jylfj"><!-- HTML_TAG_START --><p>This article dives into the nuts and bolts of coding web projects for clients. By the end of this article, you'll be ready to take on lots of projects.</p><!-- HTML_TAG_END --></div>
<span class="date svelte-10jylfj">June 3, 2023</span></div>
<img data-key="items[0].thumbnail" src="https://images.unsplash.com/photo-1682674396903-9d601f2bfe43?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="" class="svelte-10jylfj">
</li><li class="svelte-10jylfj"><div class="post-info"><a class="title svelte-10jylfj" href="/blog/article">10 essential tools every web developer should know</a>
<div class="description svelte-10jylfj"><!-- HTML_TAG_START --><p>Stay ahead of the game with our roundup of the top 10 tools every web developer should have in their toolkit, from version control systems to browser extensions that boost productivity.</p><!-- HTML_TAG_END --></div>
<span class="date svelte-10jylfj">August 12, 2023</span></div>
<img data-key="items[1].thumbnail" src="https://images.unsplash.com/photo-1683002506825-2205b4fe4f53?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2371&q=80" alt="" class="svelte-10jylfj">
</li><li class="svelte-10jylfj"><div class="post-info"><a class="title svelte-10jylfj" href="/blog">The future of web design: exploring innovative trends & technologies</a>
<div class="description svelte-10jylfj"><!-- HTML_TAG_START --><p>Get a glimpse of the future of web design as we discuss the latest trends, cutting-edge technologies, and groundbreaking ideas that are shaping the industry.</p><!-- HTML_TAG_END --></div>
<span class="date svelte-10jylfj">September 12, 2023</span></div>
<img data-key="items[2].thumbnail" src="https://images.unsplash.com/photo-1682968356839-e72de61bd076?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="" class="svelte-10jylfj">
</li><li class="svelte-10jylfj"><div class="post-info"><a class="title svelte-10jylfj" href="/blog">The Power of Minimalism in UI/UX Design</a>
<div class="description svelte-10jylfj"><!-- HTML_TAG_START --><p>Discover the impact of minimalism in UI/UX design, and learn how to create clean, user-friendly interfaces that prioritize functionality and aesthetics.</p><!-- HTML_TAG_END --></div>
<span class="date svelte-10jylfj">December 12, 2023</span></div>
<img data-key="items[3].thumbnail" src="https://images.unsplash.com/photo-1682795176020-1752b4446818?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2313&q=80" alt="" class="svelte-10jylfj">
</li></ul></section></div>
<div class="section" id="section-53bd98c2"><footer><div class="section-container svelte-1excgdw"><hr class="svelte-1excgdw">
<div class="footer svelte-1excgdw"><span class="copyright svelte-1excgdw">Copyright 2023</span>
<span class="primo svelte-1excgdw">Créé par <a href="https://franceangels.org" class="svelte-1excgdw">France Angels</a></span>
<ul class="svelte-1excgdw"><li><a href="https://twitter.com" aria-label="mdi:twitter" class="svelte-1excgdw"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--mdi"><!-- HTML_TAG_START --><path fill="currentColor" d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"/><!-- HTML_TAG_END --></svg></a>
</li><li><a href="https://github.com" aria-label="mdi:github" class="svelte-1excgdw"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--mdi"><!-- HTML_TAG_START --><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"/><!-- HTML_TAG_END --></svg></a>
</li></ul></div></div></footer></div>
<script type="module">
import('/_symbols/56997e00-eded-437a-8cd3-5fb04f614db7.js')
.then(({default:App}) => {
new App({
target: document.querySelector('#section-53bd98c2'),
hydrate: true,
props: {"heading":"","email":"","social_links":[{"icon":"mdi:twitter","link":{"url":"https://twitter.com","label":"Twitter","active":false}},{"icon":"mdi:github","link":{"url":"https://github.com","label":"Github","active":false}}]}
})
})
.catch(e => console.error(e))
import('/_symbols/0f2b1243-837c-43bc-9885-efd4f7b984d3.js')
.then(({default:App}) => {
new App({
target: document.querySelector('#section-a73d4e85'),
hydrate: true,
props: {"logo":{"image":{"alt":"","src":"","url":"","size":null},"title":"Name"},"site_nav":[{"link":{"url":"/","label":"Home"}},{"link":{"url":"/blog","label":"Blog"}},{"link":{"url":"/about","label":"About"}}]}
})
})
.catch(e => console.error(e))
import('/_symbols/4c573693-71e0-4460-aeee-1b34661a5598.js')
.then(({default:App}) => {
new App({
target: document.querySelector('#section-4d4434d4'),
hydrate: true,
props: {"heading":"Term Sheet","heading2":"Les Clauses Incontournable","form":{"endpoint":"https://formsubmit.co/[email protected]","placeholder":"Email address","button_label":"Subscribe","error_message":"Uh oh, something wen't wrong.","success_message":"Thanks for signing up! I promise not to spam you :)"},"graphics":{"left":{"alt":"space man","src":"https://assets.website-files.com/5d5e2ff58f10c53dcffd8683/5db1e0e7e74e34610bcb4951_sprinting.gif","url":"https://assets.website-files.com/5d5e2ff58f10c53dcffd8683/5db1e0e7e74e34610bcb4951_sprinting.gif","size":null},"right":{"alt":"satellite","src":"https://assets.website-files.com/5d5e2ff58f10c53dcffd8683/5d5e30c18f10c55c00fd8f48_ice-cream.svg","url":"https://assets.website-files.com/5d5e2ff58f10c53dcffd8683/5d5e30c18f10c55c00fd8f48_ice-cream.svg","size":null}}}
})
})
.catch(e => console.error(e))
</script>
</body>
</html>