Skip to content

Commit 3e12936

Browse files
whsiehwhsieh
committed
Organize site-with-headers
1 parent 3578d4b commit 3e12936

File tree

1 file changed

+70
-33
lines changed

1 file changed

+70
-33
lines changed

‎examples/sites-with-headers.html

Lines changed: 70 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
4+
<meta charset="utf-8">
35
<meta name="viewport" content="width=device-width, initial-scale=1">
46
<style>
57
body, html {
@@ -17,42 +19,77 @@
1719
div + div {
1820
margin-top: 0.5em 0;
1921
}
22+
23+
hr {
24+
width: 100%;
25+
height: 0.5px;
26+
background-color: #aaa;
27+
border: none;
28+
}
2029
</style>
2130
</head>
2231
<body>
2332
<title>Fixed and sticky headers</title>
24-
<div><a href="https://www.amazon.com">amazon.com</a></div>
25-
<div><a href="https://www.amossweets.com">amossweets.com</a></div>
26-
<div><a href="https://www.androidauthority.com">androidauthority.com</a></div>
27-
<div><a href="https://arstechnica.com">arstechnica.com</a></div>
28-
<div><a href="https://www.hotplate.com/bakesum">hotplate.com/bakesum</a></div>
29-
<div><a href="https://coffeebar.com">coffeebar.com</a></div>
30-
<div><a href="http://showcase.commercialtype.com">showcase.commercialtype.com</a></div>
31-
<div><a href="https://www.coursera.org">coursera.org</a></div>
32-
<div><a href="https://www.dunekitchen.com/menu/food/">dunekitchen.com</a></div>
33-
<div><a href="https://www.economist.com">economist.com</a></div>
34-
<div><a href="https://www.espn.com">espn.com</a></div>
35-
<div><a href="https://www.goodreads.com">goodreads.com</a></div>
36-
<div><a href="https://ground.news">ground.news</a></div>
37-
<div><a href="https://imgur.com">imgur.com</a></div>
38-
<div><a href="https://www.instructure.com">instructure.com</a></div>
39-
<div><a href="https://www.margaritaville.com">margaritaville.com</a></div>
40-
<div><a href="https://www.mocanashville.org">mocanashville.org</a></div>
41-
<div><a href="https://www.momoshop.com.tw/main/Main.jsp">momoshop.com.tw</a></div>
42-
<div><a href="https://www.nytimes.com/athletic/">nytimes.com/athletic/</a></div>
43-
<div><a href="https://play.date">play.date</a></div>
44-
<div><a href="https://www.premierleague.com">premierleague.com</a></div>
45-
<div><a href="https://www2.purpleair.com">www2.purpleair.com</a></div>
46-
<div><a href="https://www.quantamagazine.org">quantamagazine.org</a></div>
47-
<div><a href="https://www.science.org">science.org</a></div>
48-
<div><a href="https://www.solidcore.com">solidcore.com</a></div>
49-
<div><a href="https://www.southlakebeer.com">southlakebeer.com</a></div>
50-
<div><a href="https://www.sweetgreen.com">sweetgreen.com</a></div>
51-
<div><a href="https://www.bmj.com/content/389/bmj.r862">bmj.com</a></div>
52-
<div><a href="https://www.theverge.com/video/663196/oh-no-i-turned-everything-into-an-ai-podcast">theverge.com</a></div>
53-
<div><a href="https://news.uchicago.edu">news.uchicago.edu</a></div>
54-
<div><a href="https://vimeo.com">vimeo.com</a></div>
55-
<div><a href="https://wallflowersanfrancisco.com">wallflowersanfrancisco.com</a></div>
56-
<div><a href="https://webbtelescope.org/home">webbtelescope.org</a></div>
33+
<section>
34+
<h3>Solid color</h3>
35+
<div><a href="https://www.coffeebar.com">coffeebar.com</a></div>
36+
<div><a href="https://www.goodreads.com">goodreads.com</a></div>
37+
<div><a href="https://www.hotplate.com/bakesum">hotplate.com/bakesum</a></div>
38+
<div><a href="https://www.ground.news">ground.news</a></div>
39+
<div><a href="https://www.imgur.com">imgur.com</a></div>
40+
<div><a href="https://www.instructure.com">instructure.com</a></div>
41+
<div><a href="https://www.margaritaville.com">margaritaville.com</a></div>
42+
<div><a href="https://www.momoshop.com.tw/main/Main.jsp">momoshop.com.tw</a></div>
43+
<div><a href="https://www.science.org">science.org</a></div>
44+
<div><a href="https://www.southlakebeer.com">southlakebeer.com</a></div>
45+
<div><a href="https://www.sweetgreen.com">sweetgreen.com</a></div>
46+
<div><a href="https://news.uchicago.edu">news.uchicago.edu</a></div>
47+
<div><a href="https://www.webbtelescope.org/home">webbtelescope.org</a></div>
48+
</section>
49+
<section>
50+
<hr>
51+
<h3>Sticky headers</h3>
52+
<div><a href="https://www.espn.com">espn.com</a></div>
53+
<div><a href="https://www.premierleague.com">premierleague.com</a></div>
54+
<div><a href="https://www.bmj.com/content/389/bmj.r862">bmj.com</a></div>
55+
</section>
56+
<section>
57+
<hr>
58+
<h3>Viewport clipping</h3>
59+
<div><a href="https://www.androidauthority.com">androidauthority.com</a></div>
60+
<div><a href="https://www.amossweets.com">amossweets.com</a></div>
61+
<div><a href="https://www.arstechnica.com">arstechnica.com</a></div>
62+
<div><a href="https://www.economist.com">economist.com</a></div>
63+
</section>
64+
<section>
65+
<hr>
66+
<h3>Appears after scrolling</h3>
67+
<div><a href="https://www.amazon.com">amazon.com</a></div>
68+
<div><a href="https://www.dunekitchen.com/menu/food/">dunekitchen.com</a></div>
69+
<div><a href="https://www.mocanashville.org">mocanashville.org</a></div>
70+
<div><a href="https://www.nytimes.com/athletic/">nytimes.com/athletic/</a></div>
71+
<div><a href="https://www2.purpleair.com">www2.purpleair.com</a></div>
72+
<div><a href="https://www.theverge.com/video/663196/oh-no-i-turned-everything-into-an-ai-podcast">theverge.com</a></div>
73+
<div><a href="https://www.wallflowersanfrancisco.com">wallflowersanfrancisco.com</a></div>
74+
</section>
75+
<section>
76+
<hr>
77+
<h3>Blur filters</h3>
78+
<div><a href="https://www.apple.com">apple.com</a></div>
79+
<div><a href="https://www.vimeo.com">vimeo.com</a></div>
80+
</section>
81+
<section>
82+
<hr>
83+
<h3>Dynamic colors</h3>
84+
<div><a href="https://www.coursera.org">coursera.org</a></div>
85+
<div><a href="https://play.date">play.date</a></div>
86+
<div><a href="https://www.quantamagazine.org">quantamagazine.org</a></div>
87+
<div><a href="https://www.solidcore.com">solidcore.com</a></div>
88+
</section>
89+
<section>
90+
<hr>
91+
<h3>¯\_(ツ)_/¯</h3>
92+
<div><a href="http://showcase.commercialtype.com">showcase.commercialtype.com</a></div>
93+
</section>
5794
</body>
5895
</html>

0 commit comments

Comments
 (0)