inner.html

<!DOCTYPE html>
<html>
<head>
    <title> Dot</title>
	<link rel="icon" href="assets/icons/favicon.png"/>
	<link rel="stylesheet" href="assets/css/inner.css"/>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
   <!-- Nav Section -->
    <nav>
        <section class="nav-inner">
            <ul>
                <li class="logo"> <a href="index.html"> Dot </a> </li>
                <li> <a href="index.html"> HOME </a> </li>
                <li> <a href="faq.html"> FAQ </a> </li>
                <li> <a href="contact.html"> CONTACT </a> </li>
                <li> <a href="inner.html"> INNERPAGE </a> </li>
            </ul>
        </section>
    </nav>
    <!-- nav end-->
    <!-- main section strat-->
    <main class="main-inner">
         <!--=== aside section start ====-->
        <section>
            <aside>
                <ul>
                    <li class="installation">
                        <a href="index.html"><i class="fa-solid fa-rotate-left fa-flip-horizontal"></i> Installation</a>
                    </li>
                    <li class="requirments">
                        <a href="index.html">Requirments</a>
                    </li>
                    <li>
                        <a href="index.html">Install</a>  
                    </li>
                    <li>
                        <a href="index.html">Configuration</a>  
                    </li>
                    <li>
                        <a href="index.html">Customization</a>  
                    </li>
                    <li>
                        <a href="index.html">Elements</a>  
                     </li>
                </ul>
            </aside>
        </section>
        <!--=== elements section start ====-->
        <section class="body-elements">
            <h3 class="elements">Elements</h3>
        <section>
            <h1 class="head1"> Heading 1 </h1>
            <h2 class="head2"> Heading 2 </h2>
            <h3 class="head3"> Heading 3 </h3>
            <h4 class="head4"> Heading 4 </h4>
            <h5 class="head5"> Heading 5 </h5>
            <h6 class="head6"> Heading 6 </h6>
        </section>
        <hr/>
        <!--=== emphasis section start ====-->
        <section class="emp">
             <h4>Emphasis</h4>
            <p>Emphasis, aka italics, with asterisks or underscores.</p>
            <p>Strong emphasis, aka bold, with <b>asterisks or underscores</b>.</p>
            <p>Combined emphasis with <b><em> asterisks and underscores</em></b>.</p>
            <p>Strikethrough uses two tildes. <del>Scratch this.</del></p>
        </section>
        <hr/>
        <!--=== link section start ====-->
        <section class="link">
            <h4>Link</h4>
           <p><a href="index.html"> I’m an inline-style link </a> </p>
           <p><a href="index.html"> I’m an inline-style link two </a> </p>
           <p><a href="index.html"> I’m an inline-style link three</a> </p>
           <p>Or leave it empty and use the<a href="index.html"> I’m an inline-style link </a> </p>
           <p>URLs and URLs in angle brackets will automatically get turned into links.<a href="index.html"> http//:www.example.com </a> or sometimes <a href="index.html">http//:www.example.com</a> (but not on Github, for example).</p>
           <p>Some text to show that the reference links can follow later.</p>
       </section>
       <hr/>
       <!--=== paragraph section start ====-->
       <section class="para">
        <h4>Paragraph</h4>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil saepe modi commodi quibusdam tenetur, vel aperiam ea autem dolorum sequi obcaecati culpa. Quos excepturi eum eius aliquam distinctio temporibus laboriosam modi voluptate, nesciunt officiis odit sed voluptatibus aliquid alias amet animi suscipit praesentium repudiandae et nulla! Consequuntur expedita exercitationem voluptatem. Ducimus enim eveniet laborum doloremque nihil asperiores incidunt aut necessitatibus voluptate, nobis molestias beatae facilis iure. Sunt accusamus numquam suscipit saepe totam illo inventore explicabo, vel, porro dignissimos nobis nam doloribus sapiente enim corporis atque laudantium hic autem fugit reiciendis rem? Quod consectetur voluptates quidem fugiat similique distinctio eveniet soluta?</p>
   </section>
   <hr/>
   <!--=== ordered list section start ====-->
   <section class="order">
    <h4>Ordered List</h4>
    <ol>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ol>
</section>
<hr/>
<!--=== unordered list section start ====-->
<section class="unorder">
    <h4>Unordered List</h4>
    <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ul>
</section>
<hr/>
<!--=== notice section start ====-->
<section class="notice">
    <h4>Notice</h4>
    <h5><i class="fa-solid fa-circle-info"></i> Note</h5>
    <p>This is a simple note.</p>
</section>
<!--=== tip section start ====-->
<section class="tip">
    <h5><i class="fa-solid fa-circle-info"></i> Tip</h5>
    <p>This is a simple tip.</p>
</section>
<!--=== info section start ====-->
<section class="info">
    <h5><i class="fa-solid fa-circle-info"></i> Info</h5>
    <p>This is a simple info.</p>
</section>
<hr/>
<!--=== code section start ====-->
<section class="code">
    <h4> Code and Syntax Highlighting</h4>
    <p class="top-p">Inline <span class="pink"> code </span>has <span class="pink" > back-ticks around</span> it.</p>
    <p class="box1">
        <span class="sky">var</span> <span class="green"> s</span> <span class="red">=</span> <span class="yellow">"JavaScript syntax highlighting";<br>
        alert(s);</span>
    </p>
    <p class="box1">
        <span class="white"> s</span> <span class="red">=</span> <span class="yellow">"Python syntax highlighting"</span><br><span class="sky">print</span><span class="white"> s</span>
    </p>
    <p class="bottom-p">
        No language indicated,so no syntax highlighting.
       <br> But let's throw in a <b> tag </b>.
    </p>
</section>
<hr/>
<!--=== blockquote section start ====-->
<section class="block">
    <h4> Blockquote</h4>
    <blockquote>
        This is a blockquote example.
    </blockquote>
</section>
<hr/>
<!--=== inline html section start ====-->
<section class="inline">
    <h4> Inline HTML</h4>
    <p class="inline-p">You can also use raw HTML in your Markdown, and it’ll mostly work pretty well.</p>
    <h5 class="inline-header">Definition list</h5>
    <p class="inline-p">Is someting people use sometimes.</p>
    <h5 class="inline-header">Markdown in HTML</h5>
    <p>Does*not*work**very**well. Use HTML <i>tags</i></p>
</section>
<hr/>
<!--=== table section start ====-->
<section class="table">
    <h4> Table</h4>
    <p class="table-p">Colons can be used to align columns.</p>
    <p class="table-p">There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.</p>
    <table cellspacing="0" cellpadding="0">
        <tr class="th">
            <th> Markdown </th>
            <th> Less </th>
            <th> Pretty </th>
        </tr>
        <tr class="td">
            <td > <i> Still</i> </td>
            <td> <span class="rendesrs"> Renders </span></td>
            <td> <b>Nicely</b> </td>
        </tr>
        <tr class="td">
            <td> 1 </td>
            <td> 2 </td>
            <td> 3 </td>
        </tr>
    </table>    
</section>
<hr/>
<!--=== image section start ====-->
<section class="image">
    <h4> Image</h4>
    <img src="assets/images/banner.jpg" alt="banner">
</section>
<hr/>
<!--=== video section start ====-->
<section class="video">
    <h4> Youtube Video</h4>
    <iframe width="560" height="400" src="https://www.youtube.com/embed/CHSnz0bCaUk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    <p class="date"> <i>Updated on 05 Jan 2020</i></p>
</section>
<hr/>
<!--=== navigation bottom section start ====-->
<section class="nav-bottom">
    <h4 class="left"> <i class="fa-solid fa-arrow-left"></i> Customization</h4>
    <h4 class="right"> Billing & Pricing <i class="fa-solid fa-arrow-right"></i></h4>
</section>
        </section>
    </main>
    <!-- main section end-->

    <!-- footer start -->
	<footer>
		<section class="footer-inner">
				<ul>
					<li class="copy"> Copyright © 2023 Designed and Developed by<a href="index.html">FLASH⚡</a> </li>
					<li> <a href="index.html"> <i class="fa-brands fa-facebook-f"></i> </a> </li>
					<li> <a href="index.html"> <i class="fa-brands fa-twitter"></i> </a> </li>
					<li> <a href="index.html"> <i class="fa-solid fa-hashtag"></i> </a> </li>
					<li> <a href="index.html"> <i class="fa-brands fa-linkedin"></i> </a> </li>
				</ul>
			</section>
	</footer>
	<!-- footer end -->
</body>
</html>