Home Explore Help
Register Sign In
dsaravanan
/
reference
Watch 1
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
reference
/
opensource_tools_for_content_creators.html

opensource_tools_for_content_creators.html 19 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328 
  1. <!DOCTYPE html>
    2. 

  2. <head>
    3. 

  3. <title>10 open source tools for content creators | Opensource.com</title>
    4. 

  4.   
    5. 

  5. <h1>10 open source tools for content creators</h1>
    6. 

  6. 

  7. <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="schema:articleBody content:encoded"><p>There are a lot of well-known open source applications used in web design, but there are also many great tools that are not as popular. I thought I'd challenge myself to find some obscure options on the chance I might find something useful.</p>
    8. 

  8. 

  9. <p>Open source offers a wealth of options, so it's no surprise that I found 10 new applications that I now consider indispensable to my work.</p>
    10. 

  10. 

  11. <h2 id="bulma-css-framework">Bulma</h2>
    12. 

  12. 

  13. <p></p><div class="media media-element-container media-default"><div id="file-499126" class="file file-image file-image-jpeg">
    14. 

  14. 

  15.         <h2 class="element-invisible"><a href="/file/499126">bulma.jpg</a></h2>
    16. 

  16.   
    17. 

  17.   <div class="content">
    18. 

  18.     <img alt="Bulma widgets" title="Bulma widgets" style="height: 275px; width: 675px;" class="media-element file-default" data-delta="10" typeof="foaf:Image" src="https://opensource.com/sites/default/files/bulma.jpg" width="1077" height="439" /></div>
    19. 

  19.   
    20. 

  20. </div>
    21. 

  21. </div>
    22. 

  22.   
    23. 

  23. </div></div><a href="https://bulma.io/" target="_blank">Bulma</a> is a modular and responsive CSS framework for designing interfaces that flow beautifully. Design work is hardest between the moment of inspiration and the time of initial implementation, and that's exactly the problem Bulma helps solve. It's a collection of useful front-end components that a designer can combine to create an engaging and polished interface. And the best part is that it requires no JavaScript. It's all done in CSS.</p>
    24. 

  24. 

  25. <p>Included components include forms, columns, tabbed interfaces, pagination, breadcrumbs, buttons, notifications, and much more.</p>
    26. 

  26. 

  27. <h2 id="skeleton-framework">Skeleton</h2>
    28. 

  28. 

  29. <p></p><div class="media media-element-container media-default media-wysiwyg-align-center"><div id="file-498321" class="file file-image file-image-jpeg">
    30. 

  30. 

  31.         <h2 class="element-invisible"><a href="/file/498321">skeleton.jpg</a></h2>
    32. 

  32.     
    33. 

  33.   
    34. 

  34.   <div class="content">
    35. 

  35.     <img alt="Skeleton" title="Skeleton" class="media-element file-default" data-delta="1" typeof="foaf:Image" src="https://opensource.com/sites/default/files/uploads/skeleton.jpg" width="675" height="399" /><div class="field field-name-field-file-image-caption field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p class="rtecenter"><sup>(Kristina Tuvikene, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>)</sup></p>
    36. 

  36. </div></div></div>  </div>
    37. 

  37. 

  38.   
    39. 

  39. </div>
    40. 

  40. </div>
    41. 

  41. 

  42. <p><a href="http://getskeleton.com/" target="_blank">Skeleton</a> is a lightweight open source framework that gives you a simple grid, basic formats, and cross-browser support. It's a great alternative for bulky frameworks and lets you start coding your site with a minimal but highly functional foundation. There's a slight learning curve, as you do have to get familiar with its codebase, but after you've built one site with Skeleton, you've built a thousand, and it becomes second-nature.</p>
    43. 

  43. 

  44. <h2 id="the-noun-project-icons-and-images">The Noun Project</h2>
    45. 

  45. 

  46. <p></p><div class="media media-element-container media-default media-wysiwyg-align-center"><div id="file-498326" class="file file-image file-image-jpeg">
    47. 

  47. 

  48.         <h2 class="element-invisible"><a href="/file/498326">nounproject.jpg</a></h2>
    49. 

  49.     
    50. 

  50.   
    51. 

  51.   <div class="content">
    52. 

  52.     <img alt="The Noun Project" title="The Noun Project" class="media-element file-default" data-delta="2" typeof="foaf:Image" src="https://opensource.com/sites/default/files/uploads/nounproject.jpg" width="675" height="418" /><div class="field field-name-field-file-image-caption field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p class="rtecenter"><sup>(Kristina Tuvikene, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>)</sup></p>
    53. 

  53. </div></div></div>  </div>
    54. 

  54. 

  55.   
    56. 

  56. </div>
    57. 

  57. </div>
    58. 

  58. 

  59. <p><a href="https://thenounproject.com/" target="_blank">The Noun Project</a> is a collection of more than 3 million icons and images. You can use them on your site or as inspiration to create your own designs. I've found hundreds of useful icons on the site, and they're superbly easy to use. Because they're so basic, you can use them as-is for a nice, minimal look or bring them into your <a href="https://opensource.com/life/12/6/design-without-debt-five-tools-for-designers">favorite image editor</a> and customize them for your project.</p>
    60. 

  60. 

  61. <h2 id="mypaint-painting-tool">MyPaint</h2>
    62. 

  62. 

  63. <p></p><div class="media media-element-container media-default media-wysiwyg-align-center"><div id="file-498331" class="file file-image file-image-jpeg">
    64. 

  64. 

  65.         <h2 class="element-invisible"><a href="/file/498331">mypaint.jpg</a></h2>
    66. 

  66.     
    67. 

  67.   
    68. 

  68.   <div class="content">
    69. 

  69.     <img alt="MyPaint" title="MyPaint" class="media-element file-default" data-delta="3" typeof="foaf:Image" src="https://opensource.com/sites/default/files/uploads/mypaint.jpg" width="675" height="408" /><div class="field field-name-field-file-image-caption field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p class="rtecenter"><sup>(Kristina Tuvikene, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>)</sup></p>
    70. 

  70. </div></div></div>  </div>
    71. 

  71. 

  72.   
    73. 

  73. </div>
    74. 

  74. </div>
    75. 

  75. 

  76. <p>If you fancy creating your own icons or maybe some incidental art, then you should take a look at <a href="http://mypaint.org/" target="_blank">MyPaint</a>. It is a lightweight painting tool that supports various graphic tablets, features dozens of amazing brush emulators and textures, and has a clean, minimal interface, so you can focus on creating your illustration.</p>
    77. 

  77. 

  78. <h2 id="glimpse-photo-editor">Glimpse</h2>
    79. 

  79. 

  80. <p></p><div class="media media-element-container media-default media-wysiwyg-align-center"><div id="file-498336" class="file file-image file-image-jpeg">
    81. 

  81. 

  82.         <h2 class="element-invisible"><a href="/file/498336">glimpse.jpg</a></h2>
    83. 

  83.     
    84. 

  84.   
    85. 

  85.   <div class="content">
    86. 

  86.     <img alt="Glimpse" title="Glimpse" class="media-element file-default" data-delta="4" typeof="foaf:Image" src="https://opensource.com/sites/default/files/uploads/glimpse.jpg" width="675" height="400" /><div class="field field-name-field-file-image-caption field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p class="rtecenter"><sup>(Kristina Tuvikene, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>)</sup></p>
    87. 

  87. </div></div></div>  </div>
    88. 

  88. 

  89.   
    90. 

  90. </div>
    91. 

  91. </div>
    92. 

  92. 

  93. <p><a href="https://glimpse-editor.github.io/" target="_blank">Glimpse</a> is a cross-platform photo editor, a fork of <a href="https://www.gimp.org/" target="_blank">GIMP</a> that adds some nice features such as keyboard shortcuts similar to another popular (non-open) image editor. This is one of those must-have <a href="https://websitesetup.org/web-design-software/">applications for any graphic designer</a>. Climpse doesn't have a macOS release yet, but Mac users may use GIMP in the mean time.</p>
    94. 

  94. 

  95. <h2 id="lazpaint-vector-graphics-editor">LazPaint</h2>
    96. 

  96. 

  97. <p></p><div class="media media-element-container media-default media-wysiwyg-align-center"><div id="file-498341" class="file file-image file-image-jpeg">
    98. 

  98. 

  99.         <h2 class="element-invisible"><a href="/file/498341">lapaz.jpg</a></h2>
    100. 

  100.     
    101. 

  101.   
    102. 

  102.   <div class="content">
    103. 

  103.     <img alt="LaPaz" title="LaPaz" class="media-element file-default" data-delta="5" typeof="foaf:Image" src="https://opensource.com/sites/default/files/uploads/lapaz.jpg" width="675" height="393" /><div class="field field-name-field-file-image-caption field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p class="rtecenter"><sup>(Kristina Tuvikene, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>)</sup></p>
    104. 

  104. </div></div></div>  </div>
    105. 

  105. 

  106.   
    107. 

  107. </div>
    108. 

  108. </div>
    109. 

  109. 

  110. <p><a href="https://lazpaint.github.io/" target="_blank">LazPaint</a> is a lightweight raster and vector graphics editor with multiple tools and filters. It's also available on multiple platforms and offers straightforward vector editing for quick and basic work.</p>
    111. 

  111. 

  112. <h2 id="the-league-of-moveable-type">The League of Moveable Type</h2>
    113. 

  113. 

  114. <p></p><div class="media media-element-container media-default media-wysiwyg-align-center"><div id="file-498346" class="file file-image file-image-jpeg">
    115. 

  115. 

  116.         <h2 class="element-invisible"><a href="/file/498346">league-of-moveable-type.jpg</a></h2>
    117. 

  117.     
    118. 

  118.   
    119. 

  119.   <div class="content">
    120. 

  120.     <img alt="League of Moveable Type" title="League of Moveable Type" class="media-element file-default" data-delta="6" typeof="foaf:Image" src="https://opensource.com/sites/default/files/uploads/league-of-moveable-type.jpg" width="675" height="390" /><div class="field field-name-field-file-image-caption field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p class="rtecenter"><sup>(Kristina Tuvikene, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>)</sup></p>
    121. 

  121. </div></div></div>  </div>
    122. 

  122. 

  123.   
    124. 

  124. </div>
    125. 

  125. </div>
    126. 

  126. 

  127. <p>My favorite open source font foundry, <a href="https://www.theleagueofmoveabletype.com/" target="_blank">The League of Moveable Type</a>, offers expertly designed open source font faces. There's something suitable for every sort of project here.</p>
    128. 

  128. 

  129. <h2 id="shotcut-video-editor">Shotcut</h2>
    130. 

  130. 

  131. <p></p><div class="media media-element-container media-default media-wysiwyg-align-center"><div id="file-498351" class="file file-image file-image-jpeg">
    132. 

  132. 

  133.         <h2 class="element-invisible"><a href="/file/498351">shotcut.jpg</a></h2>
    134. 

  134.     
    135. 

  135.   
    136. 

  136.   <div class="content">
    137. 

  137.     <img alt="Shotcut" title="Shotcut" class="media-element file-default" data-delta="7" typeof="foaf:Image" src="https://opensource.com/sites/default/files/uploads/shotcut.jpg" width="675" height="367" /><div class="field field-name-field-file-image-caption field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p class="rtecenter"><sup>(Kristina Tuvikene, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>)</sup></p>
    138. 

  138. </div></div></div>  </div>
    139. 

  139. 

  140.   
    141. 

  141. </div>
    142. 

  142. </div>
    143. 

  143. 

  144. <p><a href="https://shotcut.org/" target="_blank">Shotcut</a> is a non-linear video editor that supports multiple audio and video formats. It has an intuitive interface, undockable panels, and you can do some basic to advanced video editing using this open source tool.</p>
    145. 

  145. 

  146. <h2 id="draw.io-diagram-editor">Draw.io</h2>
    147. 

  147. 

  148. <p></p><div class="media media-element-container media-default media-wysiwyg-align-center"><div id="file-498356" class="file file-image file-image-jpeg">
    149. 

  149. 

  150.         <h2 class="element-invisible"><a href="/file/498356">drawio.jpg</a></h2>
    151. 

  151.     
    152. 

  152.   
    153. 

  153.   <div class="content">
    154. 

  154.     <img alt="Draw.io" title="Draw.io" class="media-element file-default" data-delta="8" typeof="foaf:Image" src="https://opensource.com/sites/default/files/uploads/drawio.jpg" width="675" height="470" /><div class="field field-name-field-file-image-caption field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p class="rtecenter"><sup>(Kristina Tuvikene, <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>)</sup></p>
    155. 

  155. </div></div></div>  </div>
    156. 

  156. 

  157.   
    158. 

  158. </div>
    159. 

  159. </div>
    160. 

  160. 

  161. <p><a href="http://www.draw.io/" target="_blank">Draw.io</a> is lightweight, dedicated software with a straightforward user interface for creating professional diagrams and flowcharts. You can run it online or <a href="https://github.com/jgraph/drawio" target="_blank">get it from GitHub</a> and install it locally.</p>
    162. 

  162. 

  163. <h2 id="bonus-resource-olive-video-editor">Bonus resource: Olive video editor</h2>
    164. 

  164. 

  165. <p></p><div class="media media-element-container media-default media-wysiwyg-align-center"><div id="file-498361" class="file file-image file-image-png">
    166. 

  166. 

  167.         <h2 class="element-invisible"><a href="/file/498361">olive.png</a></h2>
    168. 

  168.     
    169. 

  169.   
    170. 

  170.   <div class="content">
    171. 

  171.     <img alt="Olive" title="Olive" class="media-element file-default" data-delta="9" typeof="foaf:Image" src="https://opensource.com/sites/default/files/uploads/olive.png" width="1920" height="1080" /><div class="field field-name-field-file-image-caption field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><p class="rtecenter"><sup>(©2021, <a href="https://olivevideoeditor.org/020.php" target="_blank">Olive</a>)</sup></p>
    172. 

  172. </div></div></div>  </div>
    173. 

  173. 

  174.   
    175. 

  175. </div>
    176. 

  176. </div>
    177. 

  177. 

  178. <p><a href="https://olivevideoeditor.org/" target="_blank">Olive video editor</a> is a work in progress but considered a very strong contender for premium open source video editing software. It's something you should keep your eye on for sure.</p>
    179. 

  179. 

  180. <h2 id="add-these-to-your-collection">Add these to your collection</h2>
    181. 

  181. 

  182. <p>Web design is an exciting line of work, and there's always something unexpected to deal with or invent. There are many great open source options out there for the resourceful web designer, and you'll benefit from trying these out to see if they fit your style.</p>
    183. 

  183. 

  184. <p>What open source web design tools do you use that I've missed? Please share your favorites in the comments!</p>
    185. 

  185. </div></div></div>
    186. 

  186.   
    187. 

  187.   </div>
    188. 

  188. <div class="panel-pane pane-views-panes pane-listacles-panel-pane-1"  >
    189. 

  189.   
    190. 

  190.       
    191. 

  191.   
    192. 

  192.   <div class="view view-listacles view-id-listacles view-display-id-panel_pane_1 view-dom-id-a293cae68189fef234183804e8909a11">
    193. 

  193.         
    194. 

  194.   
    195. 

  195.   
    196. 

  196.       <div class="view-content">
    197. 

  197.               
    198. 

  198.   <div class="views-field views-field-field-listacles">        <div class="field-content">
    199. 

  199. <div class="panelizer-view-mode node node-teaser-listacles node-article node-35881 node-promoted node-promoted">
    200. 

  200.         
    201. 

  201. <div class="panel-display teaser clearfix " >
    202. 

  202. 

  203.   <div class="teaser__first">
    204. 

  204.       <div class="panel-pane pane-entity-field pane-node-field-lead-image"  >
    205. 

  205.   
    206. 

  206.       
    207. 

  207.   
    208. 

  208.   <div class="field field-name-field-lead-image field-type-image field-label-hidden"><div class="field-items"><div class="field-item even" rel="schema:contentUrl" resource="https://opensource.com/sites/default/files/styles/teaser-wide/public/lead-images/bus_html_code.png?itok=k0uMKpY1"><a href="/article/17/4/boilerplate-web-design-templates"><img class="teaser-wide" typeof="foaf:Image" src="https://opensource.com/sites/default/files/styles/teaser-wide/public/lead-images/bus_html_code.png?itok=k0uMKpY1" width="250" height="130" alt="HTML code" title="HTML code" /></a></div></div></div>
    209. 

  209.   
    210. 

  210.   </div>
    211. 

  211.   </div>
    212. 

  212. 

  213.   <div class="teaser__second">
    214. 

  214.     <h2 class="teaser__title"><div class="panel-pane pane-node-title"  >
    215. 

  215.   
    216. 

  216.       
    217. 

  217.   
    218. 

  218.   <a href="/article/17/4/boilerplate-web-design-templates">3 open source boilerplate web design templates</a>
    219. 

  219.   
    220. 

  220.   </div>
    221. 

  221. </h2>
    222. 

  222.     <div class="teaser__body"><div class="panel-pane pane-token pane-node-field-article-subhead"  >
    223. 

  223.   
    224. 

  224.       
    225. 

  225.   
    226. 

  226.   These templates will help you get started designing a modern codebase for your next web project.
    227. 

  227.   
    228. 

  228.   </div>
    229. 

  229. </div>
    230. 

  230.     <div class="teaser__byline"><div class="panel-pane pane-os-content-article-byline"  >
    231. 

  231.   
    232. 

  232.       
    233. 

  233.   
    234. 

  234.   <div class="byline"><span class="byline__author-name"><a href="/users/jason-baker" title="View user profile." class="username" xml:lang="" about="/users/jason-baker" typeof="sioc:UserAccount" property="foaf:name" datatype="">Jason Baker <span class="content-moderator">(Red Hat)</span></a></span>
    235. 

  235. </div>
    236. 

  236.   
    237. 

  237.   </div>
    238. 

  238. </div>
    239. 

  239.   </div>
    240. 

  240. 

  241. </div>
    242. 

  242. </div>
    243. 

  243. </div>  </div>          
    244. 

  244.   <div class="views-field views-field-field-listacles">        <div class="field-content">
    245. 

  245. <div class="panelizer-view-mode node node-teaser-listacles node-article node-62841 node-promoted node-promoted">
    246. 

  246.         
    247. 

  247. <div class="panel-display teaser clearfix " >
    248. 

  248. 

  249.   <div class="teaser__first">
    250. 

  250.       <div class="panel-pane pane-entity-field pane-node-field-lead-image"  >
    251. 

  251.   
    252. 

  252.       
    253. 

  253.   
    254. 

  254.   <div class="field field-name-field-lead-image field-type-image field-label-hidden"><div class="field-items"><div class="field-item even" rel="schema:contentUrl" resource="https://opensource.com/sites/default/files/styles/teaser-wide/public/lead-images/painting_computer_screen_art_design_creative.png?itok=NdurRp4t"><a href="/article/20/6/open-source-design"><img class="teaser-wide" typeof="foaf:Image" src="https://opensource.com/sites/default/files/styles/teaser-wide/public/lead-images/painting_computer_screen_art_design_creative.png?itok=NdurRp4t" width="249" height="140" alt="Painting art on a computer screen" title="Painting art on a computer screen" /></a></div></div></div>
    255. 

  255.   
    256. 

  256.   </div>
    257. 

  257.   </div>
    258. 

  258. 

  259.   <div class="teaser__second">
    260. 

  260.     <h2 class="teaser__title"><div class="panel-pane pane-node-title"  >
    261. 

  261.   
    262. 

  262.       
    263. 

  263.   
    264. 

  264.   <a href="/article/20/6/open-source-design">Use your artistic skills to help open source</a>
    265. 

  265.   
    266. 

  266.   </div>
    267. 

  267. </h2>
    268. 

  268.     <div class="teaser__body"><div class="panel-pane pane-token pane-node-field-article-subhead"  >
    269. 

  269.   
    270. 

  270.       
    271. 

  271.   
    272. 

  272.   Open Source Design connects projects that need design help with the designers who can help them.
    273. 

  273.   
    274. 

  274.   </div>
    275. 

  275. </div>
    276. 

  276.     <div class="teaser__byline"><div class="panel-pane pane-os-content-article-byline"  >
    277. 

  277.   
    278. 

  278.       
    279. 

  279.   
    280. 

  280.   <div class="byline"><span class="byline__author-name"><a href="/users/jeffmacharyas" title="View user profile." class="username" xml:lang="" about="/users/jeffmacharyas" typeof="sioc:UserAccount" property="foaf:name" datatype="">Jeff Macharyas</a></span>
    281. 

  281. </div>
    282. 

  282.   
    283. 

  283.   </div>
    284. 

  284. </div>
    285. 

  285.   </div>
    286. 

  286. 

  287. </div>
    288. 

  288. </div>
    289. 

  289. </div>  </div>      </div>
    290. 

  290.   
    291. 

  291.   
    292. 

  292.   
    293. 

  293.   
    294. 

  294.   
    295. 

  295.   
    296. 

  296. </div>
    297. 

  297.   
    298. 

  298.   </div>
    299. 

  299. <div class="panel-pane pane-entity-field pane-node-field-tags"  >
    300. 

  300.   
    301. 

  301.         <h2 class="pane-title">
    302. 

  302.       Topics    </h2>
    303. 

  303.     
    304. 

  304.   
    305. 

  305.   <div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even" rel="schema:keywords"><a href="/tags/art-and-design" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Art and design</a></div></div></div>
    306. 

  306.   
    307. 

  307.   </div>
    308. 

  308. <div class="panel-pane pane-views-panes pane-author-info-panel-pane-1"  >
    309. 

  309.   
    310. 

  310.       
    311. 

  311.   
    312. 

  312.   <div class="view view-author-info view-id-author_info view-display-id-panel_pane_1 view-dom-id-9bc548f1167fac07ad9236ea1176d9a2">
    313. 

  313.         
    314. 

  314.   
    315. 

  315.   
    316. 

  316.       <div class="view-content">
    317. 

  317.               
    318. 

  318.   <div class="authorbio">        <h2 class="authorbio__pane-title pane-title">About the author</h2>
    319. 

  319. <div class="authorbio__thumbnail"><a href="/users/hfkristina"><img class="profile-pictures" typeof="foaf:Image" src="https://opensource.com/sites/default/files/styles/profile_pictures/public/pictures/kristina.jpg?itok=G-yEUOLW" width="100" height="100" alt="" /></a></div>
    320. 

  320. <div class="authorbio__content">
    321. 

  321.   <span class="authorbio__name">Kristina Tuvikene</span> - <span class="authorbio__about">
    322. 

  322. Kristina Tuvikene is a freelance writer that specializes in working for about cybersecurity and cloud hosting brands.
    323. 

  323. </span>
    324. 

  324. </div>
    325. 

  325.   
    326. 

  326. </body>
    327. 

  327. </html>
    328. 

  328.