All Codes

saadsdasdasssss asda

<p>&lt;!<span style="color: rgb(224, 108, 117);">DOCTYPE</span> <span style="color: rgb(209, 154, 102);">html</span>&gt;</p><p>&lt;<span style="color: rgb(224, 108, 117);">html</span> <span style="color: rgb(209, 154, 102);">lang</span>=<span style="color: rgb(152, 195, 121);">"en"</span>&gt;</p><p><br></p><p>&lt;<span style="color: rgb(224, 108, 117);">head</span>&gt;</p><p> &lt;%- include('../partials/head.ejs') %&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">link</span> <span style="color: rgb(209, 154, 102);">rel</span>=<span style="color: rgb(152, 195, 121);">"stylesheet"</span> <span style="color: rgb(209, 154, 102);">href</span>=<span style="color: rgb(152, 195, 121);">"https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">link</span> <span style="color: rgb(209, 154, 102);">rel</span>=<span style="color: rgb(152, 195, 121);">"stylesheet"</span> <span style="color: rgb(209, 154, 102);">href</span>=<span style="color: rgb(152, 195, 121);">"https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css"</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">script</span> <span style="color: rgb(209, 154, 102);">src</span>=<span style="color: rgb(152, 195, 121);">"https://code.jquery.com/jquery-3.6.0.min.js"</span>&gt;&lt;/<span style="color: rgb(224, 108, 117);">script</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">script</span> <span style="color: rgb(209, 154, 102);">src</span>=<span style="color: rgb(152, 195, 121);">"https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"</span>&gt;&lt;/<span style="color: rgb(224, 108, 117);">script</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">script</span> <span style="color: rgb(209, 154, 102);">src</span>=<span style="color: rgb(152, 195, 121);">"https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"</span>&gt;&lt;/<span style="color: rgb(224, 108, 117);">script</span>&gt;</p><p>&lt;/<span style="color: rgb(224, 108, 117);">head</span>&gt;</p><p><br></p><p>&lt;<span style="color: rgb(224, 108, 117);">body</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">main</span> <span style="color: rgb(209, 154, 102);">class</span>=<span style="color: rgb(152, 195, 121);">"d-flex align-items-stretch"</span>&gt;</p><p> &lt;%- include('../partials/sideNav.ejs') %&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">section</span> <span style="color: rgb(209, 154, 102);">class</span>=<span style="color: rgb(152, 195, 121);">"container-fluid"</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">div</span> <span style="color: rgb(209, 154, 102);">class</span>=<span style="color: rgb(152, 195, 121);">"row"</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">div</span> <span style="color: rgb(209, 154, 102);">class</span>=<span style="color: rgb(152, 195, 121);">"col"</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">h1</span> <span style="color: rgb(209, 154, 102);">class</span>=<span style="color: rgb(152, 195, 121);">"my-3"</span>&gt;BCL Vpn Users&lt;/<span style="color: rgb(224, 108, 117);">h1</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">div</span> <span style="color: rgb(209, 154, 102);">class</span>=<span style="color: rgb(152, 195, 121);">"table-responsive"</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">table</span> <span style="color: rgb(209, 154, 102);">id</span>=<span style="color: rgb(152, 195, 121);">"user-table"</span> <span style="color: rgb(209, 154, 102);">class</span>=<span style="color: rgb(152, 195, 121);">"table table-striped table-dark w-100"</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">thead</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">tr</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">th</span> <span style="color: rgb(209, 154, 102);">scope</span>=<span style="color: rgb(152, 195, 121);">"col"</span>&gt;Username&lt;/<span style="color: rgb(224, 108, 117);">th</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">th</span> <span style="color: rgb(209, 154, 102);">scope</span>=<span style="color: rgb(152, 195, 121);">"col"</span>&gt;Ip&lt;/<span style="color: rgb(224, 108, 117);">th</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">th</span> <span style="color: rgb(209, 154, 102);">scope</span>=<span style="color: rgb(152, 195, 121);">"col"</span>&gt;Domain&lt;/<span style="color: rgb(224, 108, 117);">th</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">th</span> <span style="color: rgb(209, 154, 102);">scope</span>=<span style="color: rgb(152, 195, 121);">"col"</span>&gt;Country&lt;/<span style="color: rgb(224, 108, 117);">th</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">th</span> <span style="color: rgb(209, 154, 102);">scope</span>=<span style="color: rgb(152, 195, 121);">"col"</span>&gt;City&lt;/<span style="color: rgb(224, 108, 117);">th</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">tr</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">thead</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">tbody</span>&gt;</p><p> &lt;% if (users &amp;&amp; users.length) { %&gt;</p><p> &lt;% users.forEach(user=&gt; { %&gt; &lt;<span style="color: rgb(224, 108, 117);">tr</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;%= user.user_name %&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;%= user.ip %&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;%= user.domain %&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;%= user.country %&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;%= user.city %&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">tr</span>&gt;</p><p> &lt;% }) %&gt;</p><p> &lt;% } else { %&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">tr</span>&gt;</p><p> &lt;<span style="color: rgb(224, 108, 117);">td</span> <span style="color: rgb(209, 154, 102);">colspan</span>=<span style="color: rgb(152, 195, 121);">"5"</span>&gt;No data available&lt;/<span style="color: rgb(224, 108, 117);">td</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">tr</span>&gt;</p><p> &lt;% } %&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">tbody</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">table</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">div</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">div</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">div</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">section</span>&gt;</p><p> &lt;/<span style="color: rgb(224, 108, 117);">main</span>&gt;</p><p>&lt;/<span style="color: rgb(224, 108, 117);">body</span>&gt;</p><p><br></p><p>&lt;/<span style="color: rgb(224, 108, 117);">html</span>&gt;</p>

pseudo element in css with example

<p><strong>pseudo-element</strong> in CSS is a keyword added to a selector by that you can style a specific part of the selected element. </p><p>For example:- </p><ul><li>You can style the <strong>first letter </strong>or <strong>line </strong>of an element.</li><li>Insert content <strong>before </strong>or <strong>after </strong>the content of an element.</li></ul><p><br></p><pre class="ql-syntax" spellcheck="false">selector::pseudo-element { property:value; } </pre><p><br></p><p><strong>::before </strong>- Creates a <strong>pseudo-element </strong>which is the first child of the selected element. <strong>::before </strong>is inline by default </p><pre class="ql-syntax" spellcheck="false">.classname::before{ content:'Hello'; } </pre><p><br></p><p><strong>::after </strong>- Creates a <strong>pseudo-element </strong>which is the lastchild of the selected element. <strong>::after </strong>is inline by default </p><pre class="ql-syntax" spellcheck="false">.classname::after{ content:'Hello'; } </pre><p><br></p><p><strong>::first-letter </strong>it applies style on the first letter of the first line.</p><pre class="ql-syntax" spellcheck="false">span::first-letter{ font-size:50px; } </pre><p><br></p><p><strong>::first-line </strong>it applies on the first line of the block level element.</p><pre class="ql-syntax" spellcheck="false">p::first-line{ color:red; } </pre><p><br></p><p><strong>::placeholder </strong>it applies on the input or textarea placeholder text.</p><pre class="ql-syntax" spellcheck="false">input::placeholder{ color:red; font-size:20px; } </pre>
Add a codeAdd Code
Remove adsremove

Latest codes

view all

Latest Snippets

view all