diff --git a/lib/attributeList.js b/lib/attributeList.js
new file mode 100644
index 0000000..72e4dee
--- /dev/null
+++ b/lib/attributeList.js
@@ -0,0 +1,842 @@
+module.exports = {
+  "accept":{
+    "name":"accept",
+    "belongsTo":"<input>",
+    "description":"Specifies whether the content of an element is editable or not"
+  },
+  "accept-charset":{
+    "name":"accept-charset",
+    "belongsTo":"<form>",
+    "description":"Specifies that audio/video controls should be displayed (such as a play/pause button etc)"
+  },
+  "accesskey":{
+    "name":"accesskey",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the coordinates of the area"
+  },
+  "action":{
+    "name":"action",
+    "belongsTo":"<form>",
+    "description":"Specifies the URL of the resource to be used by the object"
+  },
+  "align":{
+    "name":"align",
+    "belongsTo":"Not supported in HTML 5.",
+    "description":"Used to store custom data private to the page or application"
+  },
+  "alt":{
+    "name":"alt",
+    "belongsTo":"<area>, <img>, <input>",
+    "description":"Specifies the date and time"
+  },
+  "async":{
+    "name":"async",
+    "belongsTo":"<script>",
+    "description":"Specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate"
+  },
+  "autocomplete":{
+    "name":"autocomplete",
+    "belongsTo":"<form>, <input>",
+    "description":"Specifies that the script is executed when the page has finished parsing (only for external scripts)"
+  },
+  "autofocus":{
+    "name":"autofocus",
+    "belongsTo":"<button>, <input>, <select>, <textarea>",
+    "description":"Specifies the text direction for the content in an element"
+  },
+  "autoplay":{
+    "name":"autoplay",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies that the text direction will be submitted"
+  },
+  "bgcolor":{
+    "name":"bgcolor",
+    "belongsTo":"Not supported in HTML 5.",
+    "description":"Specifies that the specified element/group of elements should be disabled"
+  },
+  "border":{
+    "name":"border",
+    "belongsTo":"Not supported in HTML 5.",
+    "description":"Specifies that the target will be downloaded when a user clicks on the hyperlink"
+  },
+  "charset":{
+    "name":"charset",
+    "belongsTo":"<meta>, <script>",
+    "description":"Specifies whether an element is draggable or not"
+  },
+  "checked":{
+    "name":"checked",
+    "belongsTo":"<input>",
+    "description":"Specifies whether the dragged data is copied, moved, or linked, when dropped"
+  },
+  "cite":{
+    "name":"cite",
+    "belongsTo":"<blockquote>, <del>, <ins>, <q>",
+    "description":'Specifies how the form-data should be encoded when submitting it to the server (only for method="post")'
+  },
+  "class":{
+    "name":"class",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies which form element(s) a label/calculation is bound to"
+  },
+  "color":{
+    "name":"color",
+    "belongsTo":"Not supported in HTML 5.",
+    "description":"Specifies the name of the form the element belongs to"
+  },
+  "cols":{
+    "name":"cols",
+    "belongsTo":"<textarea>",
+    "description":'Specifies where to send the form-data when a form is submitted. Only for type="submit"'
+  },
+  "colspan":{
+    "name":"colspan",
+    "belongsTo":"<td>, <th>",
+    "description":"Specifies one or more headers cells a cell is related to"
+  },
+  "content":{
+    "name":"content",
+    "belongsTo":"<meta>",
+    "description":"Specifies the height of the element"
+  },
+  "contenteditable":{
+    "name":"contenteditable",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies that an element is not yet, or is no longer, relevant"
+  },
+  "controls":{
+    "name":"controls",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the range that is considered to be a high value"
+  },
+  "coords":{
+    "name":"coords",
+    "belongsTo":"<area>",
+    "description":"Specifies the URL of the page the link goes to"
+  },
+  "data":{
+    "name":"data",
+    "belongsTo":"<object>",
+    "description":"Specifies the language of the linked document"
+  },
+  "data-*":{
+    "name":"data-*",
+    "belongsTo":"Global Attributes",
+    "description":"Provides an HTTP header for the information/value of the content attribute"
+  },
+  "datetime":{
+    "name":"datetime",
+    "belongsTo":"<del>, <ins>, <time>",
+    "description":"Specifies a unique id for an element"
+  },
+  "default":{
+    "name":"default",
+    "belongsTo":"<track>",
+    "description":"Specifies an image as a server-side image-map"
+  },
+  "defer":{
+    "name":"defer",
+    "belongsTo":"<script>",
+    "description":"Specifies the kind of text track"
+  },
+  "dir":{
+    "name":"dir",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the title of the text track"
+  },
+  "dirname":{
+    "name":"dirname",
+    "belongsTo":"<input>, <textarea>",
+    "description":"Specifies the language of the element's content"
+  },
+  "disabled":{
+    "name":"disabled",
+    "belongsTo":"<button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea>",
+    "description":"Refers to a <datalist> element that contains pre-defined options for an <input> element"
+  },
+  "download":{
+    "name":"download",
+    "belongsTo":"<a>, <area>",
+    "description":"Specifies that the audio/video will start over again, every time it is finished"
+  },
+  "draggable":{
+    "name":"draggable",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the range that is considered to be a low value"
+  },
+  "dropzone":{
+    "name":"dropzone",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the maximum value"
+  },
+  "enctype":{
+    "name":"enctype",
+    "belongsTo":"<form>",
+    "description":"Specifies the maximum number of characters allowed in an element"
+  },
+  "for":{
+    "name":"for",
+    "belongsTo":"<label>, <output>",
+    "description":"Specifies what media/device the linked document is optimized for"
+  },
+  "form":{
+    "name":"form",
+    "belongsTo":"<button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea>",
+    "description":"Specifies the HTTP method to use when sending form-data"
+  },
+  "formaction":{
+    "name":"formaction",
+    "belongsTo":"<button>, <input>",
+    "description":"Specifies a minimum value"
+  },
+  "headers":{
+    "name":"headers",
+    "belongsTo":"<td>, <th>",
+    "description":"Specifies that a user can enter more than one value"
+  },
+  "height":{
+    "name":"height",
+    "belongsTo":"<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>",
+    "description":"Specifies that the audio output of the video should be muted"
+  },
+  "hidden":{
+    "name":"hidden",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the name of the element"
+  },
+  "high":{
+    "name":"high",
+    "belongsTo":"<meter>",
+    "description":"Specifies that the form should not be validated when submitted"
+  },
+  "href":{
+    "name":"href",
+    "belongsTo":"<a>, <area>, <base>, <link>",
+    "description":"Script to be run on abort"
+  },
+  "hreflang":{
+    "name":"hreflang",
+    "belongsTo":"<a>, <area>, <link>",
+    "description":"Script to be run after the document is printed"
+  },
+  "http-equiv":{
+    "name":"http-equiv",
+    "belongsTo":"<meta>",
+    "description":"Script to be run before the document is printed"
+  },
+  "id":{
+    "name":"id",
+    "belongsTo":"Global Attributes",
+    "description":"Script to be run when the document is about to be unloaded"
+  },
+  "ismap":{
+    "name":"ismap",
+    "belongsTo":"<img>",
+    "description":"Script to be run when the element loses focus"
+  },
+  "kind":{
+    "name":"kind",
+    "belongsTo":"<track>",
+    "description":"Script to be run when a file is ready to start playing (when it has buffered enough to begin)"
+  },
+  "label":{
+    "name":"label",
+    "belongsTo":"<track>, <option>, <optgroup>",
+    "description":"Script to be run when a file can be played all the way to the end without pausing for buffering"
+  },
+  "lang":{
+    "name":"lang",
+    "belongsTo":"Global Attributes",
+    "description":"Script to be run when the value of the element is changed"
+  },
+  "list":{
+    "name":"list",
+    "belongsTo":"<input>",
+    "description":"Script to be run when the element is being clicked"
+  },
+  "loop":{
+    "name":"loop",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when a context menu is triggered"
+  },
+  "low":{
+    "name":"low",
+    "belongsTo":"<meter>",
+    "description":"Script to be run when the content of the element is being copied"
+  },
+  "max":{
+    "name":"max",
+    "belongsTo":"<input>, <meter>, <progress>",
+    "description":"Script to be run when the cue changes in a <track> element"
+  },
+  "maxlength":{
+    "name":"maxlength",
+    "belongsTo":"<input>, <textarea>",
+    "description":"Script to be run when the content of the element is being cut"
+  },
+  "media":{
+    "name":"media",
+    "belongsTo":"<a>, <area>, <link>, <source>, <style>",
+    "description":"Script to be run when the element is being double-clicked"
+  },
+  "method":{
+    "name":"method",
+    "belongsTo":"<form>",
+    "description":"Script to be run when the element is being dragged"
+  },
+  "min":{
+    "name":"min",
+    "belongsTo":"<input>, <meter>",
+    "description":"Script to be run at the end of a drag operation"
+  },
+  "multiple":{
+    "name":"multiple",
+    "belongsTo":"<input>, <select>",
+    "description":"Script to be run when an element has been dragged to a valid drop target"
+  },
+  "muted":{
+    "name":"muted",
+    "belongsTo":"<video>, <audio>",
+    "description":"Script to be run when an element leaves a valid drop target"
+  },
+  "name":{
+    "name":"name",
+    "belongsTo":"<button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>",
+    "description":"Script to be run when an element is being dragged over a valid drop target"
+  },
+  "novalidate":{
+    "name":"novalidate",
+    "belongsTo":"<form>",
+    "description":"Script to be run at the start of a drag operation"
+  },
+  "onabort":{
+    "name":"onabort",
+    "belongsTo":"<audio>, <embed>, <img>, <object>, <video>",
+    "description":"Script to be run when dragged element is being dropped"
+  },
+  "onafterprint":{
+    "name":"onafterprint",
+    "belongsTo":"<body>",
+    "description":"Script to be run when the length of the media changes"
+  },
+  "onbeforeprint":{
+    "name":"onbeforeprint",
+    "belongsTo":"<body>",
+    "description":"Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)"
+  },
+  "onbeforeunload":{
+    "name":"onbeforeunload",
+    "belongsTo":"<body>",
+    "description":'Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")'
+  },
+  "onblur":{
+    "name":"onblur",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when an error occurs"
+  },
+  "oncanplay":{
+    "name":"oncanplay",
+    "belongsTo":"<audio>, <embed>, <object>, <video>",
+    "description":"Script to be run when the element gets focus"
+  },
+  "oncanplaythrough":{
+    "name":"oncanplaythrough",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when there has been changes to the anchor part of the a URL"
+  },
+  "onchange":{
+    "name":"onchange",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the element gets user input"
+  },
+  "onclick":{
+    "name":"onclick",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the element is invalid"
+  },
+  "oncontextmenu":{
+    "name":"oncontextmenu",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a user is pressing a key"
+  },
+  "oncopy":{
+    "name":"oncopy",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a user presses a key"
+  },
+  "oncuechange":{
+    "name":"oncuechange",
+    "belongsTo":"<track>",
+    "description":"Script to be run when a user releases a key"
+  },
+  "oncut":{
+    "name":"oncut",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the element is finished loading"
+  },
+  "ondblclick":{
+    "name":"ondblclick",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when media data is loaded"
+  },
+  "ondrag":{
+    "name":"ondrag",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when meta data (like dimensions and duration) are loaded"
+  },
+  "ondragend":{
+    "name":"ondragend",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run just as the file begins to load before anything is actually loaded"
+  },
+  "ondragenter":{
+    "name":"ondragenter",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a mouse button is pressed down on an element"
+  },
+  "ondragleave":{
+    "name":"ondragleave",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run as long as the mouse pointer is moving over an element"
+  },
+  "ondragover":{
+    "name":"ondragover",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a mouse pointer moves out of an element"
+  },
+  "ondragstart":{
+    "name":"ondragstart",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a mouse pointer moves over an element"
+  },
+  "ondrop":{
+    "name":"ondrop",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a mouse button is released over an element"
+  },
+  "ondurationchange":{
+    "name":"ondurationchange",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when a mouse wheel is being scrolled over an element"
+  },
+  "onemptied":{
+    "name":"onemptied",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the browser starts to work offline"
+  },
+  "onended":{
+    "name":"onended",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the browser starts to work online"
+  },
+  "onerror":{
+    "name":"onerror",
+    "belongsTo":"<audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video>",
+    "description":"Script to be run when a user navigates away from a page"
+  },
+  "onfocus":{
+    "name":"onfocus",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a user navigates to a page"
+  },
+  "onhashchange":{
+    "name":"onhashchange",
+    "belongsTo":"<body>",
+    "description":"Script to be run when the user pastes some content in an element"
+  },
+  "oninput":{
+    "name":"oninput",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the media is paused either by the user or programmatically"
+  },
+  "oninvalid":{
+    "name":"oninvalid",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the media has started playing"
+  },
+  "onkeydown":{
+    "name":"onkeydown",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the media has started playing"
+  },
+  "onkeypress":{
+    "name":"onkeypress",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the window's history changes."
+  },
+  "onkeyup":{
+    "name":"onkeyup",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the browser is in the process of getting the media data"
+  },
+  "onload":{
+    "name":"onload",
+    "belongsTo":"<body>, <iframe>, <img>, <input>, <link>, <script>, <style>",
+    "description":"Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)."
+  },
+  "onloadeddata":{
+    "name":"onloadeddata",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when a reset button in a form is clicked."
+  },
+  "onloadedmetadata":{
+    "name":"onloadedmetadata",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the browser window is being resized."
+  },
+  "onloadstart":{
+    "name":"onloadstart",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when an element's scrollbar is being scrolled"
+  },
+  "onmousedown":{
+    "name":"onmousedown",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the user writes something in a search field (for <input='search'>)"
+  },
+  "onmousemove":{
+    "name":"onmousemove",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the seeking attribute is set to false indicating that seeking has ended"
+  },
+  "onmouseout":{
+    "name":"onmouseout",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the seeking attribute is set to true indicating that seeking is active"
+  },
+  "onmouseover":{
+    "name":"onmouseover",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the element gets selected"
+  },
+  "onmouseup":{
+    "name":"onmouseup",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the browser is unable to fetch the media data for whatever reason"
+  },
+  "onmousewheel":{
+    "name":"onmousewheel",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a Web Storage area is updated"
+  },
+  "onoffline":{
+    "name":"onoffline",
+    "belongsTo":"<body>",
+    "description":"Script to be run when a form is submitted"
+  },
+  "ononline":{
+    "name":"ononline",
+    "belongsTo":"<body>",
+    "description":"Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason"
+  },
+  "onpagehide":{
+    "name":"onpagehide",
+    "belongsTo":"<body>",
+    "description":"Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)"
+  },
+  "onpageshow":{
+    "name":"onpageshow",
+    "belongsTo":"<body>",
+    "description":"Script to be run when the user opens or closes the <details> element"
+  },
+  "onpaste":{
+    "name":"onpaste",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a page has unloaded (or the browser window has been closed)"
+  },
+  "onpause":{
+    "name":"onpause",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run each time the volume of a video/audio has been changed"
+  },
+  "onplay":{
+    "name":"onplay",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)"
+  },
+  "onplaying":{
+    "name":"onplaying",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the mouse wheel rolls up or down over an element"
+  },
+  "onpopstate":{
+    "name":"onpopstate",
+    "belongsTo":"<body>",
+    "description":"Specifies that the details should be visible (open) to the user"
+  },
+  "onprogress":{
+    "name":"onprogress",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies what value is the optimal value for the gauge"
+  },
+  "onratechange":{
+    "name":"onratechange",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies a regular expression that an <input> element's value is checked against"
+  },
+  "onreset":{
+    "name":"onreset",
+    "belongsTo":"<form>",
+    "description":"Specifies a short hint that describes the expected value of the element"
+  },
+  "onresize":{
+    "name":"onresize",
+    "belongsTo":"<body>",
+    "description":"Specifies an image to be shown while the video is downloading, or until the user hits the play button"
+  },
+  "onscroll":{
+    "name":"onscroll",
+    "belongsTo":"All visible elements.",
+    "description":"Specifies if and how the author thinks the audio/video should be loaded when the page loads"
+  },
+  "onsearch":{
+    "name":"onsearch",
+    "belongsTo":"<input>",
+    "description":"Specifies that the element is read-only"
+  },
+  "onseeked":{
+    "name":"onseeked",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the relationship between the current document and the linked document"
+  },
+  "onseeking":{
+    "name":"onseeking",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies that the element must be filled out before submitting the form"
+  },
+  "onselect":{
+    "name":"onselect",
+    "belongsTo":"All visible elements.",
+    "description":"Specifies that the list order should be descending (9,8,7...)"
+  },
+  "onstalled":{
+    "name":"onstalled",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the visible number of lines in a text area"
+  },
+  "onstorage":{
+    "name":"onstorage",
+    "belongsTo":"<body>",
+    "description":"Specifies the number of rows a table cell should span"
+  },
+  "onsubmit":{
+    "name":"onsubmit",
+    "belongsTo":"<form>",
+    "description":"Enables an extra set of restrictions for the content in an <iframe>"
+  },
+  "onsuspend":{
+    "name":"onsuspend",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies whether a header cell is a header for a column, row, or group of columns or rows"
+  },
+  "ontimeupdate":{
+    "name":"ontimeupdate",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies that an option should be pre-selected when the page loads"
+  },
+  "ontoggle":{
+    "name":"ontoggle",
+    "belongsTo":"<details>",
+    "description":"Specifies the shape of the area"
+  },
+  "onunload":{
+    "name":"onunload",
+    "belongsTo":"<body>",
+    "description":"Specifies the width, in characters (for <input>) or specifies the number of visible options (for <select>)"
+  },
+  "onvolumechange":{
+    "name":"onvolumechange",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the size of the linked resource"
+  },
+  "onwaiting":{
+    "name":"onwaiting",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the number of columns to span"
+  },
+  "onwheel":{
+    "name":"onwheel",
+    "belongsTo":"All visible elements.",
+    "description":"Specifies whether the element is to have its spelling and grammar checked or not"
+  },
+  "open":{
+    "name":"open",
+    "belongsTo":"<details>",
+    "description":"Specifies the URL of the media file"
+  },
+  "optimum":{
+    "name":"optimum",
+    "belongsTo":"<meter>",
+    "description":"Specifies the HTML content of the page to show in the <iframe>"
+  },
+  "pattern":{
+    "name":"pattern",
+    "belongsTo":"<input>",
+    "description":"Specifies the language of the track text data (required if kind='subtitles')"
+  },
+  "placeholder":{
+    "name":"placeholder",
+    "belongsTo":"<input>, <textarea>",
+    "description":"Specifies the URL of the image to use in different situations"
+  },
+  "poster":{
+    "name":"poster",
+    "belongsTo":"<video>",
+    "description":"Specifies the start value of an ordered list"
+  },
+  "preload":{
+    "name":"preload",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the legal number intervals for an input field"
+  },
+  "readonly":{
+    "name":"readonly",
+    "belongsTo":"<input>, <textarea>",
+    "description":"Specifies an inline CSS style for an element"
+  },
+  "rel":{
+    "name":"rel",
+    "belongsTo":"<a>, <area>, <link>",
+    "description":"Specifies the tabbing order of an element"
+  },
+  "required":{
+    "name":"required",
+    "belongsTo":"<input>, <select>, <textarea>",
+    "description":"Specifies the target for where to open the linked document or where to submit the form"
+  },
+  "reversed":{
+    "name":"reversed",
+    "belongsTo":"<ol>",
+    "description":"Specifies extra information about an element"
+  },
+  "rows":{
+    "name":"rows",
+    "belongsTo":"<textarea>",
+    "description":"Specifies whether the content of an element should be translated or not"
+  },
+  "rowspan":{
+    "name":"rowspan",
+    "belongsTo":"<td>, <th>",
+    "description":"Specifies the type of element"
+  },
+  "sandbox":{
+    "name":"sandbox",
+    "belongsTo":"<iframe>",
+    "description":"Specifies an image as a client-side image-map"
+  },
+  "scope":{
+    "name":"scope",
+    "belongsTo":"<th>",
+    "description":"Specifies the value of the element"
+  },
+  "selected":{
+    "name":"selected",
+    "belongsTo":"<option>",
+    "description":"Specifies the width of the element"
+  },
+  "shape":{
+    "name":"shape",
+    "belongsTo":"<area>",
+    "description":"Specifies how the text in a text area is to be wrapped when submitted in a form"
+  },
+  "size":{
+    "name":"size",
+    "belongsTo":"<input>, <select>",
+    "description":"Specifies the width, in characters (for <input>) or specifies the number of visible options (for <select>)"
+  },
+  "sizes":{
+    "name":"sizes",
+    "belongsTo":"<img>, <link>, <source>",
+    "description":"Specifies the size of the linked resource"
+  },
+  "span":{
+    "name":"span",
+    "belongsTo":"<col>, <colgroup>",
+    "description":"Specifies the number of columns to span"
+  },
+  "spellcheck":{
+    "name":"spellcheck",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies whether the element is to have its spelling and grammar checked or not"
+  },
+  "src":{
+    "name":"src",
+    "belongsTo":"<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>",
+    "description":"Specifies the URL of the media file"
+  },
+  "srcdoc":{
+    "name":"srcdoc",
+    "belongsTo":"<iframe>",
+    "description":"Specifies the HTML content of the page to show in the <iframe>"
+  },
+  "srclang":{
+    "name":"srclang",
+    "belongsTo":"<track>",
+    "description":"Specifies the language of the track text data (required if kind='subtitles')"
+  },
+  "srcset":{
+    "name":"srcset",
+    "belongsTo":"<img>, <source>",
+    "description":"Specifies the URL of the image to use in different situations"
+  },
+  "start":{
+    "name":"start",
+    "belongsTo":"<ol>",
+    "description":"Specifies the start value of an ordered list"
+  },
+  "step":{
+    "name":"step",
+    "belongsTo":"<input>",
+    "description":"Specifies the legal number intervals for an input field"
+  },
+  "style":{
+    "name":"style",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies an inline CSS style for an element"
+  },
+  "tabindex":{
+    "name":"tabindex",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the tabbing order of an element"
+  },
+  "target":{
+    "name":"target",
+    "belongsTo":"<a>, <area>, <base>, <form>",
+    "description":"Specifies the target for where to open the linked document or where to submit the form"
+  },
+  "title":{
+    "name":"title",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies extra information about an element"
+  },
+  "translate":{
+    "name":"translate",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies whether the content of an element should be translated or not"
+  },
+  "type":{
+    "name":"type",
+    "belongsTo":"<a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>",
+    "description":"Specifies the type of element"
+  },
+  "usemap":{
+    "name":"usemap",
+    "belongsTo":"<img>, <object>",
+    "description":"Specifies an image as a client-side image-map"
+  },
+  "value":{
+    "name":"value",
+    "belongsTo":"<button>, <input>, <li>, <option>, <meter>, <progress>, <param>",
+    "description":"Specifies the value of the element"
+  },
+  "width":{
+    "name":"width",
+    "belongsTo":"<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>",
+    "description":"Specifies the width of the element"
+  },
+  "wrap":{
+    "name":"wrap",
+    "belongsTo":"<textarea>",
+    "description":"Specifies how the text in a text area is to be wrapped when submitted in a form"
+  }
+}
\ No newline at end of file
diff --git a/lib/build.js b/lib/build.js
index 1c37bc8..fe99d36 100644
--- a/lib/build.js
+++ b/lib/build.js
@@ -1,96 +1,213 @@
 var fs = require('fs')
+var attributeList = require('./attributeList')
+//function  templateMethod()
 
 module.exports = function buildOuput(filename){
-  var objArray = [];
-  var compArray = [];
-  //create an array of objects
-  fs.readdirSync('./toruf/objects').forEach(function(filename){
-    if(filename.includes(".json")){
-      let name = filename.split('.json')[0];
-      objArray.push(name);
-    }
-  });
-  //create an array of components
-  fs.readdirSync('./toruf/components').forEach(function(filename){
-    if(filename.includes(".html")){
-      let name = filename.split('.html')[0];
-      compArray.push(name);
-    }
-  });
-  //read all templates
+  //read template
+  console.log(filename)
   if(filename.includes(".html")){
-    fs.readFile(`./toruf/templates/${filename}`, 'utf8', function(err, originFile){
+    fs.readFile(`./toruf/templates/${filename}`, 'utf8', function(err, fileContent){
       if(err) throw new Error(err)
       else{
         //replace components
-        for(let comp of compArray){
-          let htmlComp = fs.readFileSync(`./toruf/components/${comp}.html`, 'utf8')
-          let tag = `<#${comp.toUpperCase()}>`
-          if(originFile.includes(tag)){
-            let start_tag = 
-            `<!-- ${tag} -->
-            `;
-            let end_tag = 
-            `
-            <!-- !${tag} -->`;
-            let htmlCom = start_tag + htmlComp + end_tag; 
-            originFile = originFile.replace(tag, htmlCom);
+        replaceComponents(fileContent, {}, function(err,template){
+          if(err) throw new Error(err)
+          else{
+            console.log('comps done')
+            //replace objects
+            replaceObjects(template, function(err, newFile){
+              if(err) throw new Error(err)
+              else{
+                //if template method exists
+                //execute template method
+                fs.writeFileSync(`site/${filename}`, newFile)
+                console.log('success');
+                return 'success';
+              }
+            })
           }
+        })
+      }
+    })
+  }
+}
+
+function recourseComponents(parentsArr, parent, component, callback){
+    var compArray = [];
+    fs.readdirSync('./toruf/components').forEach(function(filename){
+      if(filename.includes(".html")){
+        let name = filename.split('.html')[0];
+        compArray.push(name);
+      }
+    });
+    for(let comp of compArray){
+      let tag = '#'+comp.toUpperCase();
+      let start_tag = 
+      `<!-- ${tag} -->
+      `;
+      let end_tag = 
+      `
+      <!-- !${tag} -->`;
+      if(typeof component === 'String'){
+        if(component.includes(`<${tag}>`)){
+          if(parentsArr.includes(comp)){
+            throw new Error('warning: you cannot have a child component that calls its parent.')
+          }
+          else {
+            let newComp = fs.readFileSync(`./toruf/components/${comp}.html`)
+            let htmlComp = '<'+start_tag+'>' + newComp + '<'+end_tag+'>'; 
+            let newParent = component.replace(tag, htmlComp)
+            let newParentsArr = parentsArr.append(comp)
+            recourseComponents(newParentsArr, newParent, newComp, callback)
+          }
+        }
+      }
+      else if(parent.includes(tag)){
+        if(parentsArr.includes(tag)){
+          throw new Error('warning: you cannot have a child component that calls its parent.')
+        }
+        else {
+          let newComp = fs.readFileSync(`./toruf/components/${comp}.html`)
+          let htmlComp = '<'+start_tag+'>' + newComp + '<'+end_tag+'>'; 
+          let newParent = parent.replace(tag, htmlComp)
+          recourseComponents(parentsArr, newParent, newComp, callback)
         }
-        //replace objects
-        for(let obj of objArray){
-          let tag = obj.toUpperCase();
-          if(originFile.includes(`<${tag}>`)){
-            let start_tag = 
-            `<!-- <${tag}> -->
-            `;
-            let end_tag = 
-            `
-            <!-- </${tag}> -->`;
-            let objTemplate = originFile.split(`<${tag}>`)[1].split(`</${tag}>`)[0];
-            let htmlObj = "";
-            if(objTemplate.includes('{') && objTemplate.includes('}')){
-              let rawdata = fs.readFileSync(`./toruf/objects/${obj}.json`);
-            let db = JSON.parse(rawdata)
-            Object.keys(db).map(function(key, index){
-              let unit = db[key]
-              let temp = objTemplate;
-              //insert ID in parent div toruf-OBJ-ID
-              Object.keys(unit).map(function(key, index){
-                let temparr = temp.split(`{${key}}`)
-                if(temparr[0].trim().endsWith('>') || /^[a-zA-Z0-9]/.test(temparr[0].substr(temparr[0].length - 1))){
-                  let newU = `<span class="torufattr_${key}">${unit[key]}</span>`
-                  temp = temp.replace(`{${key}}`, newU);
+      }
+      else {
+        callback(null, parent)
+      }
+    }
+}
+
+
+
+function replaceComponents(template, parents, callback) { 
+  if(template.includes('<#')){
+    //console.log(template)
+    var compArray = [];
+    fs.readdirSync('./toruf/components').forEach(function(filename){
+      if(filename.includes(".html")){
+        let name = filename.split('.html')[0];
+        compArray.push(name);
+      }
+    });
+    for(let i=0; i<=compArray.length; i++){
+      if(!compArray[i]){
+        callback(null, template)
+      }
+      else{
+        let tag = '#'+compArray[i].toUpperCase();
+        let start_tag = 
+        `<!-- ${tag} -->
+        `;
+        let end_tag = 
+        `
+        <!-- !${tag} -->`;
+        let comp_tag = `<${tag}>`
+        let comp = fs.readFileSync(`./toruf/components/${compArray[i]}.html`)
+        let htmlComp = start_tag + comp + end_tag; 
+        template = template.replace(comp_tag, htmlComp)
+        
+          /* if(template.includes(tag)){
+              recourseComponents([], template, parents, function(err, data){
+                if(err) throw new Error(err)
+                else{
+                  //replace component
+                  template.replace(tag, data)
                 }
-                else if(temparr[0].endsWith(`href="`)){
-                  let lastElem = temparr[0].split('<')[temparr[0].split('<').length - 1]
-                  if(lastElem.includes('class=')){
-                    let tempClassArr = temparr[0].split('class="')
-                    let tempClass = tempClassArr[tempClassArr.length - 1]
-                    temp = temp.replace(tempClass+`{${key}}`, `torufhref_${key} `+ tempClass+unit[key]);
-                  }
-                  else{
-                    let newClass = `class="torufhref_${key} href="${unit[key]}`
-                    temp = temp.replace(`href="{${key}}`, newClass);
-                    newTempArr = temparr[0].split()
+              })
+            }  */
+          }
+    }
+  }
+  else callback(null, template) 
+}
+
+
+function replaceObjects(template, callback){
+  //console.log('HELLo')
+  //create an array of objects
+  let newTemplate = template
+  var objArray = [];
+  fs.readdirSync('./toruf/objects').forEach(function(filename){
+    if(filename.includes(".json")){
+      let name = filename.split('.json')[0];
+      objArray.push(name);
+    }
+  });
+  for(let obj of objArray){
+    console.log(obj)
+    let tag = obj.toUpperCase();
+    if(template.includes(`<${tag}>`)){
+      let start_tag = 
+      `<!-- <${tag}> -->
+      `;
+      let end_tag = 
+      `
+      <!-- </${tag}> -->`;
+      let objTemplate = template.split(`<${tag}>`)[1].split(`</${tag}>`)[0];
+      //console.log(objTemplate)
+      let htmlObj = "";
+      if(objTemplate.includes('{{') && objTemplate.includes('}}')){
+        let rawdata = fs.readFileSync(`./toruf/objects/${obj}.json`);
+        let db = JSON.parse(rawdata)
+        Object.keys(db).map((key, index)=>{
+          //console.log(key)
+          let item = db[key]
+          let temp = objTemplate;
+          //insert ID in parent div toruf-OBJ-ID
+          Object.keys(item).map((key, index)=>{
+            //console.log(key)
+            if(temp.includes(`{{${key}}}`)){
+              let temparr = temp.split(`{{${key}}}`)
+              //check if its an html attribute value
+              //console.log(temparr)
+              let beginAttr = temparr[0].substr(0, temparr[0].lastIndexOf('"'));
+              //console.log('TEMPARR 0 ',temparr[1], '\n\n')
+              let endAttr = temparr[1].split('"')[1];
+              if(endAttr && beginAttr){
+                if(endAttr.startsWith(' ') && beginAttr.endsWith('=') || endAttr.startsWith('>') && beginAttr.endsWith('=')){    
+                  //check for tag in attribute list
+                  let tag = beginAttr.substr(beginAttr.lastIndexOf(' ')+1).split('=')[0]
+                  console.log('TAG ', tag)
+                  if(attributeList[tag]){
+                    //check if element already has a class item
+                    let lastElem = temparr[0].split('<')[temparr[0].split('<').length - 1]
+                    if(lastElem.includes('class=')){
+                      let tempClassArr = temparr[0].split('class="')
+                      let tempClass = tempClassArr[tempClassArr.length - 1]
+                      temp = temp.replace(tempClass+`{{${key}}}`, `toruf${tag}_${key} `+ tempClass+item[key]);
+                    }
+                    else{
+                      let newClass = `class="toruf${tag}_${key} href="${item[key]}`
+                      temp = temp.replace(`${tag}="{{${key}}}`, newClass);
+                      //newTempArr = temparr[0].split()
+                    }
                   }
+                  else throw new Error(`warning invalid html attribute ${tag}`);
                 }
-                else temp = temp.replace(`{${key}}`, unit[key]);
-              })
-              let initTemp = temp.split('>')[0]
-              temp = temp.replace(initTemp+'>', initTemp+` id="torufobj_${key}">`)
-              htmlObj+= temp;
-            });
-            let oldObj = `<${tag}>`+objTemplate+`</${tag}>`;
-            newHtmlObj = start_tag + htmlObj + end_tag; 
-            let newFile = originFile.replace(oldObj, newHtmlObj);
-            fs.writeFileSync(`site/${filename}`, newFile)
-            console.log('success');
-            return 'success';
+                else {
+                  let newVal = `<span class="torufattr_${key}">${item[key]}</span>`
+                  temp = temp.replace(`{{${key}}}`, newVal);
+                }
+              }
+              else {
+                let newVal = `<span class="torufattr_${key}">${item[key]}</span>`
+                temp = temp.replace(`{{${key}}}`, newVal);
+              }
             }
-          }
-        }
+          })
+          let initTemp = temp.split('>')[0]
+          temp = temp.replace(initTemp+'>', initTemp+` id="torufobj_${key}">`)
+          console.log(temp)
+          htmlObj+= temp;
+        });
+        let oldObj = `<${tag}>`+objTemplate+`</${tag}>`;
+        newHtmlObj = start_tag + htmlObj + end_tag; 
+        newTemplate = newTemplate.replace(oldObj, newHtmlObj);
+        //console.log(newHtmlObj)
       }
-    })
+    }
   }
-}
+  callback(null, newTemplate)
+}
\ No newline at end of file
diff --git a/lib/buildAll.js b/lib/buildAll.js
index 0b22f8e..b64e118 100644
--- a/lib/buildAll.js
+++ b/lib/buildAll.js
@@ -5,21 +5,22 @@ module.exports = function buildAllOutput(){
   var objArray = [];
   var compArray = [];
   //create an array of objects
-  fs.readdirSync('objects').forEach(function(filename){
+  fs.readdirSync('toruf/objects').forEach(function(filename){
     if(filename.includes(".json")){
       let name = filename.split('.json')[0];
       objArray.push(name);
     }
   });
   //create an array of components
-  fs.readdirSync('components').forEach(function(filename){
+  fs.readdirSync('toruf/components').forEach(function(filename){
     if(filename.includes(".html")){
       let name = filename.split('.html')[0];
       compArray.push(name);
     }
   });
   //read all templates
-  fs.readdirSync('templates').forEach(function(filename){
+  fs.readdirSync('toruf/templates').forEach(function(filename){
+    console.log(filename)
     build(filename);
   });
 }
\ No newline at end of file
diff --git a/lib/copyDirs.js b/lib/copyDirs.js
new file mode 100644
index 0000000..e69de29
diff --git a/site/index.html b/site/index.html
index 29382c2..10d8840 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1,410 +1,126 @@
-<!DOCTYPE html>
-<html lang="en">
-	<!-- <#HEAD> -->
-            <head>
-  <!-- Global site tag (gtag.js) - Google Analytics -->
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="description" content="A Free and open source tool that helps you create responsive HTML contact forms in an instant.">
-  <meta name="author" content="Torus Digital">
-
-  <title> Torus Project </title>
-  
-  <!-- Google Fonts -->
-  <!-- Bootstrap 4 -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-  <!-- Font Awesome Icons -->
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
-  <!-- favicon -->
-  <link rel="icon" href="img/sef-favicon.png">
-  <!-- Custom styles for this template -->
-  <link rel="stylesheet" href="../assets/css/index.css">
-  <link rel="stylesheet" href="../assets/css/flip-card.css">
-</head>
-            <!-- !<#HEAD> -->
-
-	<body id="page-top" class="text-left">
-
-		<!-- <#NAV> -->
-            <nav class="navbar navbar-expand-lg bg-primary px-5">
-  <div class="container-fluid">
-    <a class="navbar-brand" href="index.html">
-      <img src="../assets/img/toruscms-logo.svg" width="auto" height="60" alt="">
-    </a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="fa fa-2x fa-bars"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav ml-auto navbar-right">
-        <li class="nav-item active">
-          <a class="nav-link smooth-scroll" href="#about">About</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="#projects">Projects</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="#signup">Sign Up</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="#tutorials">Tutorials</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>
-            <!-- !<#NAV> -->
-
-
-		<header>
-			<div class="container">
-				<div class="row justify-content-center pt-5">
-					<h1 class="main-title text-main">Torus Project</h1>			
-				</div>
-				<div class="row justify-content-center pt-5">
-					<h4>Our mission is to help your open source projects/ideas come to light</h4>			
-				</div>
-			</div>
-		</header>
-
 
-		<section>
-			<div class="container">
-				<div class="row">
-					<div class="col-sm-12 py-5 text-center text-white-50 padding-text">
-						<h3>Torus Project is an ecosystem of intuitive and fully modular tools for your business needs.</h3>
-						<p>Our microservice based architecture and high tech stack provides us with an advantage allowing us to pass significatn cost savings for our end users.   Users will be able to pay for only what they need.  For example:  You could use Cubera Reservation and add a system channel manager, CRM, RMS ending up with a Full CRS centralized reservation system for your business. Aditionally users will be given the option for customer service, for an additional price.       </p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-
-		<section id="projects">
-			<div class="container">
-				<div class="row">
-					<div class="col-12 text-center">
-						<h1 class="text-white">Projects</h1>
-					</div>
-				</div>
-				<div class="row align-items-center">
-
-					<!-- <PROJECTS> -->
-            
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_torus_framework">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">The Torus Framework</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">An open source serverless form generator</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://supereasyforms.com/#getting_started">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_bootlib">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Bootlib</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A bootstrap4 template generator and theme gallery for the torus framework.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://bootlib.com">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://supereasyforms.com/#getting_started">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_super_easy_forms">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Super Easy Forms</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">An open source serverless form generator</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://supereasyforms.com/#getting_started">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_super_easy_forms_cli">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Super Easy Forms CLI</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A complete command line interface for super easy forms. Allows you to deploy both the frontend and backend of your forms with a single command.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_super_easy_docs">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Super Easy Docs</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A complete command line interface for super easy forms. Allows you to deploy both the frontend and backend of your forms with a single command.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_easy_md_to_html">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Easy MD to HTML</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A markdown to html converter with no external dependencies.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_torus_cms">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Torus CMS</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A complete command line interface for super easy forms. Allows you to deploy both the frontend and backend of your forms with a single command.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_arjan_workflows">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Arjan Build</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A two-way templating framework for html that only uses html syntax</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_arjan_optimize">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Arjan Build</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A two-way templating framework for html that only uses html syntax</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_arjan_translate">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Arjan Translate</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A localization and translation solution for static html websites</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_arjan_deploy">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Arjan Deploy</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A localization and translation solution for static html websites</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_raspi_led_animation">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Raspberry Pi Ws1228b led animations</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A localization and translation solution for static html websites</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-            <!-- </PROJECTS> -->
-
-				</div>
-			</div>
-		</section>
-
-
-		<!-- <#FOOTER> -->
-            <footer class="bg-main text-center text-white py-4">
+<!DOCTYPE html>
+  <html lang="en">
+    <head>  
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      <meta name="description" content="">
+      <meta name="author" content="">
+      <title> consultas - index </title>
+      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+      <link rel="stylesheet" href="css/index.css">
+    </head>
+    <body id="page-top" class="text-center text-md-left">
+      <nav class="navbar navbar-expand-lg px-lg-5 bg-white">
+        <a class="navbar-brand smooth-scroll" href="#page-top">
+          <img src="img/logo.svg" width="auto" height="40" alt="">
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <i class="fa fa-bars"></i>
+        </button>
+        <div class="collapse navbar-collapse text-alternate" id="mainNav">
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <a class="nav-link" href="#">Inicio</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Servicios</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Consultas</a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <header class="bg-img">
+        <div class="contianer text-center">
+          <h1 class="main-title-padding text-alternate">Consultas Legales Online en Panama</h1>
+          <a href="#" class="btn-lg bg-secondary text-alternate">Consultar</a>
+        </div>
+      </header>
+      <section>
+        <div class="container text-center">
+          <h2 class="text-alternate">Sobre las Consultas</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
+        </div>
+      </section>
+<section class="bg-secondary">
   <div class="container">
     <div class="row">
       <div class="col-sm-6">
-        <p class="text-lg-left">Copyright &copy; Torus Project</p>
+        <div class="smartphone">
+          <div class="content">
+            <img src="img/img.svg" alt="" style="">
+          </div>
+        </div>
       </div>
       <div class="col-sm-6">
-         <p class="text-lg-right">powered by <a href="https://torus-digital.com">Torus</a></p>
+        <h2 class="text-primary">Como hacer una consulta</h2>
+        <ol class="usage-instructions">
+          <li>Haga clic en la pestana de consultas</li>
+          <li>llene sus datos, seleccione el tipo de su consulta, y escriba su consulta textualmente</li>
+          <li>haga clic en enviar</li>
+          <li>llena tus datos de pago</li>
+          <li>Haga clic en enviar</li>
+          <li>Espera a ver el mensaje de confirmacion</li>
+          <li>En menos de 24 horas resivira una respuesta de alguno de los profesionales en nuestro equipo en su correo</li>
+        </ol>
       </div>
     </div>
   </div>
-</footer>
-            <!-- !<#FOOTER> -->
-
-
-		<script
-			src="https://code.jquery.com/jquery-3.4.1.min.js"
-			integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-			crossorigin="anonymous">
-		</script>
-
-		<script async defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
-
-		
-	</body>
-
-</html>
-
-
-
-
-
+</section>
+<section>
+  <div class="container text-center">
+    <h2 class="text-alternate">Ofrecemos una variedad de servicios legales</h2>
+    <a href="#" class="btn-lg bg-secondary text-alternate">Ver Servicios</a>
+  </div>
+</section>
+<section>
+  <div class="container text-center">
+    <MEMBERS>
+      <div class="row">
+        <div class="col-md-6 col-lg-4 col-xl-3">
+          <a href="#" data-toggle="modal" data-target="#team-member-{{index}}">
+            <img src="{{img}}" alt="{{name}}" class="mx-auto circle-img">
+            <h2 class="team-member-name">{{team-member-name}}</h2>
+          </a>
+          <p class="attribute">{{education}}</p>
+          <p class="attribute">{{labor}}</p>
+        </div>
+        <!-- Modal -->
+        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">{{name}}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                <img src="{{img}}" alt="{{name}}">
+                <h4>{{name}}</h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </MEMBERS>
+  </div>
+</section>
 
-		
\ No newline at end of file
+<footer class="bg-secondary py-md-3">
+  <div class="container">
+    <div class="row text-primary">
+      <div class="col-6">Faragon & Consulting S.A. ©</div>
+      <div class="col-6 text-md-right">powered by <a href="https://torus-digital.com">Torus</a></div>
+    </div>
+  </div>
+</footer>
+   
+        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
+        
+      </body>
+    </html>
\ No newline at end of file
diff --git a/site/servicios.html b/site/servicios.html
new file mode 100644
index 0000000..9435d5f
--- /dev/null
+++ b/site/servicios.html
@@ -0,0 +1,198 @@
+
+<!DOCTYPE html>
+  <html lang="en">
+    <head>  
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      <meta name="description" content="">
+      <meta name="author" content="">
+      <title> Consultas Panama - servicios </title>
+      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+      <link rel="stylesheet" href="css/servicios.css">
+    </head>
+      <body id="page-top" class="text-center text-md-left"><nav class="navbar navbar-expand-lg px-lg-5 bg-white">
+  <a class="navbar-brand smooth-scroll" href="#page-top">
+    <img src="img/logo.svg" width="auto" height="40" alt="">
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse text-alternate" id="mainNav">
+    <ul class="navbar-nav ml-auto">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Services</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Contact</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+<section>
+  <div class="container text-center">
+    <h2 class="text-alternate">Standard Section</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
+  </div>
+</section>
+<section>
+  <div class="container text-center">
+    <!-- <LEGAL_SERVICES> -->
+      
+      <div class="row" id="torufobj_corporate">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-briefcase fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Corporativo</span></h2>
+          <p><span class="torufattr_description">le Ofrecemos a su empresa la asesoria personalizada necesaria para que su ente corporativo cuente con  factores esenciales para exito el la finalidad de la persona juridica.</span></p>
+        </div>
+      </div>
+    
+      <div class="row" id="torufobj_maritime">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-ship fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Maritimo</span></h2>
+          <p><span class="torufattr_description">Asesoramos al naviero,capitan,Dueño de embarcaciones o empresario del sector maritimo en diferentes ambitos desde la marina mercante, adquisicion de embarcaciones,hipotecas navales,  la obtencion de licencias de operaciones y consesiones para llevar a cabo sus operaciones.</span></p>
+        </div>
+      </div>
+    
+      <div class="row" id="torufobj_mining">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-snowplow fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Minero</span></h2>
+          <p><span class="torufattr_description">Asesoramos a la empresas mineras que quieres establecer e invertir en el sector minero de Panama  para que cumpla con toda las regulaciones y requisitos que exige la ley. Contamos con un plan de trabajo de 6 meses de retainer.</span></p>
+        </div>
+      </div>
+    
+      <div class="row" id="torufobj_fiscal">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-gavel fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Fiscal</span></h2>
+          <p><span class="torufattr_description">Asesoramos a las personas y empresas que quieran conocer sobre el sistema fiscal en Panama. Brindamos a la vez servicios de contabilidad y  administracion contable. Tambien te asesoramos con las exoneraciones y regimen fiscales para los bienes inmuebles.</span></p>
+        </div>
+      </div>
+    
+      <div class="row" id="torufobj_commercial">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-exchange-alt fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Comercial</span></h2>
+          <p><span class="torufattr_description">Le ofrecemos a tu marca, tienda o negocio las herramientas necesarias para surgir en el mercado local ya sea conectandolos con contactos o nuevos proveedores y clientes, asistencia con contratos, registros de marcas, patentes de productos, registros sanitarios, financiamiento con bancos, Inscripcion con AMPYME y otros tramites necesarios para llevar a cabo su operacion comercial de forma exitosa.</span></p>
+        </div>
+      </div>
+    
+      <div class="row" id="torufobj_labor">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-plane-arrival fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Migratorio y Laboral</span></h2>
+          <p><span class="torufattr_description">Te asesoramos para cumplas tu sueño de poder vivir y trabajar en Panama de forma legal y puedas conocer de tus derechos laborales como extranjero trabajando en territorio panameño.</span></p>
+        </div>
+      </div>
+    
+      <!-- </LEGAL_SERVICES> -->
+  </div>
+</section>
+<section>
+  <div class="container text-center">
+    <!-- <FINANCIAL_SERVICES> -->
+      
+      <div class="row" id="torufobj_banking">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-money-check-alt fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Asesor Bancario</span></h2>
+          <p><span class="torufattr_description">te asistimos en la obtencion de hipotecas, linea de creditos, prestamos personales, leasing, Factoring, fideicomisos por medio de nuestro servicio de intermediacion financiera donde buscamos la mejor opcion para el cliente  con las mejores tasas para su beneficio.</span></p>
+        </div>
+      </div>
+    
+      <div class="row" id="torufobj_enterprise">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-building fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Asesoria empresarial</span></h2>
+          <p><span class="torufattr_description">te ofrecemos la mejor estructura corporativa para que tu negocio cuente con el mejor manejo financiero, fiscal y patrimonial con fin de que los socios puedan tener un mayor rendimiento en sus dividendos. Realizamos tambien gestiones de cobranzas de contratos cuentas por cobrar o facturas.</span></p>
+        </div>
+      </div>
+    
+      <div class="row" id="torufobj_patrimony">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-gem fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Patrimonial</span></h2>
+          <p><span class="torufattr_description">Te asesoramos para proteger tu patrimonio por medio de estructuras legales y financieras para el manejo ideal de tus activos y bienes. Tambien vemos temas sucesorios y herencias.</span></p>
+        </div>
+      </div>
+    
+      <div class="row" id="torufobj_investment">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-chart-line fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Asesoria de inversion</span></h2>
+          <p><span class="torufattr_description">Te asesoramos para que tengas tu cuenta de inversion con un banco de la localidad de forma exitosa facilitando el tramite de debida diligencia y sirviendote como tu asesor de inversion para que hagas la mejor inversion en la bolsa de valores. Tambien manejamos un portafolio de inversiones de proyectos y negocios privados.</span></p>
+        </div>
+      </div>
+    
+      <!-- </FINANCIAL_SERVICES> -->
+  </div>
+</section>
+<section>
+  <div class="container text-center">
+    <!-- <OTHER_SERVICES> -->
+      
+      <div class="row" id="torufobj_investigations">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-search fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Investigaciones:</span></h2>
+          <p><span class="torufattr_description">Fincas, mercados, sociedades</span></p>
+        </div>
+      </div>
+    
+      <div class="row" id="torufobj_mediation">
+        <div class="col-2">
+          <i class="torufclass_icon fas fa-balance-scale fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate"><span class="torufattr_title">Mediacion y Conciliacion:</span></h2>
+          <p><span class="torufattr_description">Contamos con un mediador idoneo para la resolucion de conflictos.</span></p>
+        </div>
+      </div>
+    
+      <!-- </OTHER_SERVICES> -->
+  </div>
+</section>
+<footer class="bg-secondary py-md-5">
+  <div class="container">
+    <div class="row text-primary">
+      <div class="col-6">yourdomain ©</div>
+      <div class="col-6 text-md-right">powered by <a href="https://bootlib.com">Bootlib</a></div>
+    </div>
+  </div>
+</footer>
+   
+        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
+        
+      </body>
+    </html>
\ No newline at end of file
diff --git a/toruf/objects/financial_services.json b/toruf/objects/financial_services.json
new file mode 100644
index 0000000..6a75f8e
--- /dev/null
+++ b/toruf/objects/financial_services.json
@@ -0,0 +1,26 @@
+{
+  "banking":{
+    "title":"Asesor Bancario",
+    "description":"te asistimos en la obtencion de hipotecas, linea de creditos, prestamos personales, leasing, Factoring, fideicomisos por medio de nuestro servicio de intermediacion financiera donde buscamos la mejor opcion para el cliente  con las mejores tasas para su beneficio.",
+    "icon":"fas fa-money-check-alt",
+    "type":"financial"
+  },
+  "enterprise":{
+    "title":"Asesoria empresarial",
+    "description":"te ofrecemos la mejor estructura corporativa para que tu negocio cuente con el mejor manejo financiero, fiscal y patrimonial con fin de que los socios puedan tener un mayor rendimiento en sus dividendos. Realizamos tambien gestiones de cobranzas de contratos cuentas por cobrar o facturas.",
+    "icon":"fas fa-building",
+    "type":"financial"
+  },
+  "patrimony":{
+    "title":"Patrimonial",
+    "description":"Te asesoramos para proteger tu patrimonio por medio de estructuras legales y financieras para el manejo ideal de tus activos y bienes. Tambien vemos temas sucesorios y herencias.",
+    "icon":"fas fa-gem",
+    "type":"financial"
+  },
+  "investment":{
+    "title":"Asesoria de inversion",
+    "description":"Te asesoramos para que tengas tu cuenta de inversion con un banco de la localidad de forma exitosa facilitando el tramite de debida diligencia y sirviendote como tu asesor de inversion para que hagas la mejor inversion en la bolsa de valores. Tambien manejamos un portafolio de inversiones de proyectos y negocios privados.",
+    "icon":"fas fa-chart-line",
+    "type":"financial"
+  }
+}
\ No newline at end of file
diff --git a/toruf/objects/legal_services.json b/toruf/objects/legal_services.json
new file mode 100644
index 0000000..11ef889
--- /dev/null
+++ b/toruf/objects/legal_services.json
@@ -0,0 +1,38 @@
+{
+  "corporate":{
+    "title":"Corporativo",
+    "description":"le Ofrecemos a su empresa la asesoria personalizada necesaria para que su ente corporativo cuente con  factores esenciales para exito el la finalidad de la persona juridica.",
+    "icon":"fas fa-briefcase",
+    "type":"legal"
+  },
+  "maritime":{
+    "title":"Maritimo",
+    "description":"Asesoramos al naviero,capitan,Dueño de embarcaciones o empresario del sector maritimo en diferentes ambitos desde la marina mercante, adquisicion de embarcaciones,hipotecas navales,  la obtencion de licencias de operaciones y consesiones para llevar a cabo sus operaciones.",
+    "icon":"fas fa-ship",
+    "type":"legal"
+  }, 
+  "mining":{
+    "title":"Minero",
+    "description":"Asesoramos a la empresas mineras que quieres establecer e invertir en el sector minero de Panama  para que cumpla con toda las regulaciones y requisitos que exige la ley. Contamos con un plan de trabajo de 6 meses de retainer.",
+    "icon":"fas fa-snowplow",
+    "type":"legal"
+  },
+  "fiscal":{
+    "title":"Fiscal",
+    "description":"Asesoramos a las personas y empresas que quieran conocer sobre el sistema fiscal en Panama. Brindamos a la vez servicios de contabilidad y  administracion contable. Tambien te asesoramos con las exoneraciones y regimen fiscales para los bienes inmuebles.",
+    "icon":"fas fa-gavel",
+    "type":"legal"
+  },
+  "commercial":{
+    "title":"Comercial",
+    "description":"Le ofrecemos a tu marca, tienda o negocio las herramientas necesarias para surgir en el mercado local ya sea conectandolos con contactos o nuevos proveedores y clientes, asistencia con contratos, registros de marcas, patentes de productos, registros sanitarios, financiamiento con bancos, Inscripcion con AMPYME y otros tramites necesarios para llevar a cabo su operacion comercial de forma exitosa.",
+    "icon":"fas fa-exchange-alt",
+    "type":"legal"
+  },
+  "labor":{
+    "title":"Migratorio y Laboral",
+    "description":"Te asesoramos para cumplas tu sueño de poder vivir y trabajar en Panama de forma legal y puedas conocer de tus derechos laborales como extranjero trabajando en territorio panameño.",
+    "icon":"fas fa-plane-arrival",
+    "type":"legal"
+  }
+}
\ No newline at end of file
diff --git a/toruf/objects/other_services.json b/toruf/objects/other_services.json
new file mode 100644
index 0000000..fb2c25b
--- /dev/null
+++ b/toruf/objects/other_services.json
@@ -0,0 +1,14 @@
+{
+  "investigations":{
+    "title":"Investigaciones:",
+    "description":"Fincas, mercados, sociedades",
+    "icon":"fas fa-search",
+    "type":"additional"
+  },
+  "mediation":{
+    "title":"Mediacion y Conciliacion:",
+    "description":"Contamos con un mediador idoneo para la resolucion de conflictos.",
+    "icon":"fas fa-balance-scale",
+    "type":"additional"
+  }
+}
\ No newline at end of file
diff --git a/toruf/templates/index.html b/toruf/templates/index.html
index a6cf11c..10d8840 100644
--- a/toruf/templates/index.html
+++ b/toruf/templates/index.html
@@ -1,94 +1,126 @@
-<!DOCTYPE html>
-<html lang="en">
-	<#HEAD>
-
-	<body id="page-top" class="text-left">
-
-		<#NAV>
-
-
-		<header>
-			<div class="container">
-				<div class="row justify-content-center pt-5">
-					<h1 class="main-title text-main">Torus Project</h1>			
-				</div>
-				<div class="row justify-content-center pt-5">
-					<h4>Our mission is to help your open source projects/ideas come to light</h4>			
-				</div>
-			</div>
-		</header>
-
-
-		<section>
-			<div class="container">
-				<div class="row">
-					<div class="col-sm-12 py-5 text-center text-white-50 padding-text">
-						<h3>Torus Project is an ecosystem of intuitive and fully modular tools for your business needs.</h3>
-						<p>Our microservice based architecture and high tech stack provides us with an advantage allowing us to pass significatn cost savings for our end users.   Users will be able to pay for only what they need.  For example:  You could use Cubera Reservation and add a system channel manager, CRM, RMS ending up with a Full CRS centralized reservation system for your business. Aditionally users will be given the option for customer service, for an additional price.       </p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-
-		<section id="projects">
-			<div class="container">
-				<div class="row">
-					<div class="col-12 text-center">
-						<h1 class="text-white">Projects</h1>
-					</div>
-				</div>
-				<div class="row align-items-center">
-
-					<PROJECTS>
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2>{title}</h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3">{description}</p>
-									<div>
-										<a class="px-2" href="{website}">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="px-2" href="{github}">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="px-2" href="{installation}">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					</PROJECTS>
-
-				</div>
-			</div>
-		</section>
-
 
-		<#FOOTER>
-
-
-		<script
-			src="https://code.jquery.com/jquery-3.4.1.min.js"
-			integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-			crossorigin="anonymous">
-		</script>
-
-		<script async defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
-
-		
-	</body>
-
-</html>
-
-
-
-
-
-
-		
\ No newline at end of file
+<!DOCTYPE html>
+  <html lang="en">
+    <head>  
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      <meta name="description" content="">
+      <meta name="author" content="">
+      <title> consultas - index </title>
+      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+      <link rel="stylesheet" href="css/index.css">
+    </head>
+    <body id="page-top" class="text-center text-md-left">
+      <nav class="navbar navbar-expand-lg px-lg-5 bg-white">
+        <a class="navbar-brand smooth-scroll" href="#page-top">
+          <img src="img/logo.svg" width="auto" height="40" alt="">
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <i class="fa fa-bars"></i>
+        </button>
+        <div class="collapse navbar-collapse text-alternate" id="mainNav">
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <a class="nav-link" href="#">Inicio</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Servicios</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Consultas</a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <header class="bg-img">
+        <div class="contianer text-center">
+          <h1 class="main-title-padding text-alternate">Consultas Legales Online en Panama</h1>
+          <a href="#" class="btn-lg bg-secondary text-alternate">Consultar</a>
+        </div>
+      </header>
+      <section>
+        <div class="container text-center">
+          <h2 class="text-alternate">Sobre las Consultas</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
+        </div>
+      </section>
+<section class="bg-secondary">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-6">
+        <div class="smartphone">
+          <div class="content">
+            <img src="img/img.svg" alt="" style="">
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <h2 class="text-primary">Como hacer una consulta</h2>
+        <ol class="usage-instructions">
+          <li>Haga clic en la pestana de consultas</li>
+          <li>llene sus datos, seleccione el tipo de su consulta, y escriba su consulta textualmente</li>
+          <li>haga clic en enviar</li>
+          <li>llena tus datos de pago</li>
+          <li>Haga clic en enviar</li>
+          <li>Espera a ver el mensaje de confirmacion</li>
+          <li>En menos de 24 horas resivira una respuesta de alguno de los profesionales en nuestro equipo en su correo</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</section>
+<section>
+  <div class="container text-center">
+    <h2 class="text-alternate">Ofrecemos una variedad de servicios legales</h2>
+    <a href="#" class="btn-lg bg-secondary text-alternate">Ver Servicios</a>
+  </div>
+</section>
+<section>
+  <div class="container text-center">
+    <MEMBERS>
+      <div class="row">
+        <div class="col-md-6 col-lg-4 col-xl-3">
+          <a href="#" data-toggle="modal" data-target="#team-member-{{index}}">
+            <img src="{{img}}" alt="{{name}}" class="mx-auto circle-img">
+            <h2 class="team-member-name">{{team-member-name}}</h2>
+          </a>
+          <p class="attribute">{{education}}</p>
+          <p class="attribute">{{labor}}</p>
+        </div>
+        <!-- Modal -->
+        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">{{name}}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                <img src="{{img}}" alt="{{name}}">
+                <h4>{{name}}</h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </MEMBERS>
+  </div>
+</section>
+
+<footer class="bg-secondary py-md-3">
+  <div class="container">
+    <div class="row text-primary">
+      <div class="col-6">Faragon & Consulting S.A. ©</div>
+      <div class="col-6 text-md-right">powered by <a href="https://torus-digital.com">Torus</a></div>
+    </div>
+  </div>
+</footer>
+   
+        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
+        
+      </body>
+    </html>
\ No newline at end of file
diff --git a/toruf/templates/servicios.html b/toruf/templates/servicios.html
new file mode 100644
index 0000000..62db0e2
--- /dev/null
+++ b/toruf/templates/servicios.html
@@ -0,0 +1,102 @@
+
+<!DOCTYPE html>
+  <html lang="en">
+    <head>  
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      <meta name="description" content="">
+      <meta name="author" content="">
+      <title> Consultas Panama - servicios </title>
+      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+      <link rel="stylesheet" href="css/servicios.css">
+    </head>
+      <body id="page-top" class="text-center text-md-left"><nav class="navbar navbar-expand-lg px-lg-5 bg-white">
+  <a class="navbar-brand smooth-scroll" href="#page-top">
+    <img src="img/logo.svg" width="auto" height="40" alt="">
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse text-alternate" id="mainNav">
+    <ul class="navbar-nav ml-auto">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Services</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Contact</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+<section>
+  <div class="container text-center">
+    <h2 class="text-alternate">Standard Section</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
+  </div>
+</section>
+<section>
+  <div class="container text-center">
+    <LEGAL_SERVICES>
+      <div class="row">
+        <div class="col-2">
+          <i class="{{icon}} fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate">{{title}}</h2>
+          <p>{{description}}</p>
+        </div>
+      </div>
+    </LEGAL_SERVICES>
+  </div>
+</section>
+<section>
+  <div class="container text-center">
+    <FINANCIAL_SERVICES>
+      <div class="row">
+        <div class="col-2">
+          <i class="{{icon}} fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate">{{title}}</h2>
+          <p>{{description}}</p>
+        </div>
+      </div>
+    </FINANCIAL_SERVICES>
+  </div>
+</section>
+<section>
+  <div class="container text-center">
+    <OTHER_SERVICES>
+      <div class="row">
+        <div class="col-2">
+          <i class="{{icon}} fa-3x"></i>
+        </div>
+        <div class="col-10 text-left">
+          <h2 class="text-alternate">{{title}}</h2>
+          <p>{{description}}</p>
+        </div>
+      </div>
+    </OTHER_SERVICES>
+  </div>
+</section>
+<footer class="bg-secondary py-md-5">
+  <div class="container">
+    <div class="row text-primary">
+      <div class="col-6">yourdomain ©</div>
+      <div class="col-6 text-md-right">powered by <a href="https://bootlib.com">Bootlib</a></div>
+    </div>
+  </div>
+</footer>
+   
+        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
+        
+      </body>
+    </html>
\ No newline at end of file