aboutsummaryrefslogtreecommitdiff
path: root/examples/framework-lit/src
diff options
context:
space:
mode:
Diffstat (limited to 'examples/framework-lit/src')
-rw-r--r--examples/framework-lit/src/components/Lorem.astro160
-rw-r--r--examples/framework-lit/src/pages/index.astro10
2 files changed, 109 insertions, 61 deletions
diff --git a/examples/framework-lit/src/components/Lorem.astro b/examples/framework-lit/src/components/Lorem.astro
index b4040980e..d742ef6a5 100644
--- a/examples/framework-lit/src/components/Lorem.astro
+++ b/examples/framework-lit/src/components/Lorem.astro
@@ -1,58 +1,106 @@
<p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at, volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula
- rutrum id. Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis et felis fringilla lacinia in id nibh. Proin vitae dapibus odio.
- Mauris ornare eget urna id volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et tempor lacus sagittis in. Sed congue mauris quis nibh
- posuere, nec semper lacus auctor. Morbi sit amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec ultrices quam nec orci venenatis suscipit.
- Maecenas sapien quam, pretium sit amet ullamcorper at, vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra diam, quis convallis magna
- finibus eget. Integer sed eros bibendum, consequat velit sit amet, tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus, ac congue
- mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet
- sodales libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo
- in, commodo dolor. Fusce at felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum tellus elementum in. Sed ut vulputate ante. Morbi cursus
- arcu quis odio convallis egestas. Donec vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor ac. Pellentesque massa leo, congue id
- ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed
- varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet eros metus
- sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere, at blandit orci accumsan. Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus.
- Donec posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce
- at odio enim. Donec rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies
- luctus, enim sem sodales quam, sed laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci ultrices posuere. Integer mi quam, faucibus et
- aliquet imperdiet, ornare ac ex. Nunc mattis molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed, condimentum sapien. Praesent fermentum
- iaculis orci, vitae tincidunt est viverra nec. Morbi semper turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet accumsan et, finibus a
- velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. Integer quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget risus
- sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel
- neque in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo
- lectus sed est posuere, et mollis nisi dapibus. Sed id ultrices arcu. Praesent tempor sodales aliquet. Donec suscipit ipsum eu odio cursus, quis sodales metus sodales. Nunc
- vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus.
- Donec facilisis imperdiet risus, in volutpat odio tincidunt a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi nibh nulla, pretium
- quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit amet
- congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi
- non condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. In sit amet lectus rutrum, sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum
- iaculis, leo erat interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia finibus ante. Phasellus facilisis lectus vitae sapien feugiat
- laoreet. Curabitur ultricies libero sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a mauris id efficitur. Suspendisse in dui nec
- dolor dignissim venenatis. Curabitur a magna turpis. Aliquam at commodo tellus. In id sem interdum, suscipit felis at, mattis velit. Proin accumsan sodales felis a lacinia.
- Curabitur at magna a massa varius maximus. Vestibulum in auctor ante. Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis vulputate
- felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi, at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus
- id. Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec
- vitae lacinia neque. Donec non lectus eget sem finibus ultrices vel nec felis. Proin fringilla mi a leo rhoncus aliquam sit amet quis augue. Duis congue ligula at est suscipit
- fringilla. Proin aliquam erat ut consequat dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio, tincidunt eget eleifend a, porttitor
- eu nisi. Suspendisse tristique eros at dolor scelerisque hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc ultrices. Ut gravida a dui
- sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem, fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna, dignissim
- consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu suscipit odio. Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod
- sapien. Donec sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum
- porttitor lectus, vitae ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate enim, sit amet aliquam nulla sapien ut sapien. Proin
- tincidunt ex non massa aliquet, quis aliquam nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula. Suspendisse in lobortis purus. Sed tellus
- tellus, mollis eget tempor sed, interdum ut lectus. Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa laoreet ultricies. Mauris ac
- elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget vestibulum risus
- elementum sed. In consequat nisi sit amet nulla euismod, at convallis tortor tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet
- blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in
- laoreet nibh malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet, venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat.
- Nulla eu interdum nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere. Praesent quis magna molestie, luctus tortor tincidunt, gravida
- neque. Quisque et ligula eget magna viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis tincidunt. Vestibulum id arcu vulputate,
- eleifend enim vel, accumsan turpis. Morbi faucibus convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et convallis metus accumsan.
- Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper enim, ac porta
- ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis lacinia
- mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. Sed consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum
- tincidunt tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida, volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque
- ex. Integer quis iaculis purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis, dignissim ante. Proin quis tristique lacus, sed sagittis
- nisl. Cras pharetra ultrices purus, sed ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor. Phasellus auctor tristique enim, eleifend
- molestie diam venenatis ut. Mauris dapibus, enim eget pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus justo.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at,
+ volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula rutrum id.
+ Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis
+ et felis fringilla lacinia in id nibh. Proin vitae dapibus odio. Mauris ornare eget urna id
+ volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et
+ tempor lacus sagittis in. Sed congue mauris quis nibh posuere, nec semper lacus auctor. Morbi sit
+ amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec
+ ultrices quam nec orci venenatis suscipit. Maecenas sapien quam, pretium sit amet ullamcorper at,
+ vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra
+ diam, quis convallis magna finibus eget. Integer sed eros bibendum, consequat velit sit amet,
+ tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus,
+ ac congue mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean
+ vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet sodales
+ libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum
+ arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo in, commodo dolor. Fusce at
+ felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum
+ tellus elementum in. Sed ut vulputate ante. Morbi cursus arcu quis odio convallis egestas. Donec
+ vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor
+ ac. Pellentesque massa leo, congue id ligula auctor, sollicitudin pharetra lorem. Curabitur a
+ lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur.
+ Mauris ornare, lorem sed varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in
+ ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet
+ eros metus sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere,
+ at blandit orci accumsan. Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus. Donec
+ posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula
+ iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce at odio enim. Donec
+ rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non
+ tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies luctus, enim sem sodales quam, sed
+ laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci
+ ultrices posuere. Integer mi quam, faucibus et aliquet imperdiet, ornare ac ex. Nunc mattis
+ molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed,
+ condimentum sapien. Praesent fermentum iaculis orci, vitae tincidunt est viverra nec. Morbi semper
+ turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet
+ accumsan et, finibus a velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. Integer
+ quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget
+ risus sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut
+ elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel neque
+ in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est
+ elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo lectus sed est posuere, et
+ mollis nisi dapibus. Sed id ultrices arcu. Praesent tempor sodales aliquet. Donec suscipit ipsum
+ eu odio cursus, quis sodales metus sodales. Nunc vestibulum massa at felis ullamcorper cursus.
+ Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus
+ sodales, vel suscipit metus faucibus. Donec facilisis imperdiet risus, in volutpat odio tincidunt
+ a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi
+ nibh nulla, pretium quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit
+ pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit
+ amet congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc
+ et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi non
+ condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. In sit amet lectus rutrum,
+ sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum iaculis, leo erat
+ interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia
+ finibus ante. Phasellus facilisis lectus vitae sapien feugiat laoreet. Curabitur ultricies libero
+ sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a
+ mauris id efficitur. Suspendisse in dui nec dolor dignissim venenatis. Curabitur a magna turpis.
+ Aliquam at commodo tellus. In id sem interdum, suscipit felis at, mattis velit. Proin accumsan
+ sodales felis a lacinia. Curabitur at magna a massa varius maximus. Vestibulum in auctor ante.
+ Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis
+ vulputate felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi,
+ at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus id.
+ Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at
+ mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec vitae lacinia neque.
+ Donec non lectus eget sem finibus ultrices vel nec felis. Proin fringilla mi a leo rhoncus aliquam
+ sit amet quis augue. Duis congue ligula at est suscipit fringilla. Proin aliquam erat ut consequat
+ dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio,
+ tincidunt eget eleifend a, porttitor eu nisi. Suspendisse tristique eros at dolor scelerisque
+ hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc
+ ultrices. Ut gravida a dui sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem,
+ fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna,
+ dignissim consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu
+ suscipit odio. Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod sapien. Donec
+ sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula
+ lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum porttitor lectus, vitae
+ ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate
+ enim, sit amet aliquam nulla sapien ut sapien. Proin tincidunt ex non massa aliquet, quis aliquam
+ nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula.
+ Suspendisse in lobortis purus. Sed tellus tellus, mollis eget tempor sed, interdum ut lectus.
+ Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa
+ laoreet ultricies. Mauris ac elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis
+ nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget
+ vestibulum risus elementum sed. In consequat nisi sit amet nulla euismod, at convallis tortor
+ tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet
+ blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla
+ in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in laoreet nibh
+ malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet,
+ venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat. Nulla eu interdum
+ nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere.
+ Praesent quis magna molestie, luctus tortor tincidunt, gravida neque. Quisque et ligula eget magna
+ viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis
+ tincidunt. Vestibulum id arcu vulputate, eleifend enim vel, accumsan turpis. Morbi faucibus
+ convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et
+ convallis metus accumsan. Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec
+ blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper
+ enim, ac porta ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra
+ ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis
+ lacinia mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. Sed
+ consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum tincidunt
+ tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida,
+ volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque ex. Integer quis iaculis
+ purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis,
+ dignissim ante. Proin quis tristique lacus, sed sagittis nisl. Cras pharetra ultrices purus, sed
+ ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor.
+ Phasellus auctor tristique enim, eleifend molestie diam venenatis ut. Mauris dapibus, enim eget
+ pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus
+ justo.
</p>
diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro
index 3f45d057f..faa131524 100644
--- a/examples/framework-lit/src/pages/index.astro
+++ b/examples/framework-lit/src/pages/index.astro
@@ -1,7 +1,7 @@
---
-import Lorem from '../components/Lorem.astro';
-import { CalcAdd } from '../components/calc-add.js';
-import { MyCounter } from '../components/my-counter.js';
+import Lorem from "../components/Lorem.astro";
+import { CalcAdd } from "../components/calc-add.js";
+import { MyCounter } from "../components/my-counter.js";
---
<!DOCTYPE html>
@@ -12,8 +12,8 @@ import { MyCounter } from '../components/my-counter.js';
</head>
<body>
<h1>Test app</h1>
- <MyCounter client:load></MyCounter>
+ <MyCounter client:load />
<Lorem />
- <CalcAdd num={33}></CalcAdd>
+ <CalcAdd num={33} />
</body>
</html>