-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsticky-pos-columns.html
49 lines (48 loc) · 3.68 KB
/
sticky-pos-columns.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
<!DOCTYPE html>
<html>
<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>Sticky Position on heading of columns</title>
<link rel="stylesheet" href="css/sticky-pos-columns.css">
</head>
<body>
<div class="flex-container">
<div class="flex-col">
<div class="img-container"><img src="http://placekitten.com/900/200" alt=""></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>manorialize retransit septuagenarianism kirking unrequickened corroborative tulare prefigurative linearization Sanskrit trillionaire unleavenable arsenillo coeternal ultracentralizer tennis antacid sawder Jonahism nick occipitoaxoid merchantship nonpress impenetrably</p>
<p>Cereus bulkily unmenacing drafter scrunge unodoriferous corruption incendiary hymenopterologist octonal ahey wraith shoppishness uniparient Platyhelminthes zoons paedogenetic Rosmarinus unhinderably coppersmith riggald shadowing Marcite boldhearted</p>
</div>
<div class="flex-col">
<div class="img-container"><img src="http://placekitten.com/900/200" alt=""></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>primeverose tasteableness beguilingly wharp rhopaloceral aliquot ungainsayably pharyngalgia unrhythmically unfelicitous dispetal venoatrial unhoned nonresistive buffle hypalgesia prayful halogen locksman cosmosophy palaeoherpetology unroved Antrostomus helotomy</p>
<p>undergirding tummel chancellorism brightness circler featherpate nociassociation stillage velvety ostracine crucial atmiatry knobble metalined suspenseful stiddy discircumspection tabloid gyropigeon naphthalene anteluminary dynamitish dibhole Ferdiad</p>
</div>
<div class="flex-col">
<div class="img-container"><img src="http://placekitten.com/900/200" alt=""></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>moorish tetrasubstituted recover supercalender anabolize peaselike claro skatoxyl lick prosaicism Clunisian loath Plumularia triphony omniactive cerargyrite Anglish elevatory angelicize adhaka hardberry speciology skulkingly gypsoplast</p>
<p>beslobber rivered ungroomed uninterrogable monorail labialismus acromiosternal unsparingly breed unbalancement affrightful dissimulation deoxidization birdweed Polystomata corrugator lightsome unlaugh shaps Harveian unodoriferous homestall soot Methodisty</p>
</div>
</div>
<div>You reached the end of the page!</div>
</body>
</html>