uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
245 lines (136 loc) • 9.12 kB
HTML
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
<meta charset="@@{website_charset}" />
<title>Simulate HTML Layout with threejs - @@{website_title}</title>
@@include('./src/components/_global/include-header.html')
</head>
<body class="page uix-hidden-scrollbar">
@@include('./src/components/_global/include-loader.html')
@@include('./src/components/_global/include-toggle-trigger.html')
<div class="uix-wrapper">
<!-- Header Area
============================================= -->
<header class="uix-header__container">
<div class="uix-header">
<div class="container">
@@include('./src/components/_global/include-brand.html')
@@include('./src/components/_global/include-menu.html')
</div>
<!-- .container end -->
<div class="uix-clearfix"></div>
</div>
</header>
<div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
<main id="uix-maincontent">
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Simulate HTML Layout with threejs</h3>
<p>Simulate Page Images Position & Ratio-calculation.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section id="app-3D-page-container" style="overflow-y: hidden; height: 100vh;">
<div class="container uix-t-c">
<div class="row">
<div class="col-12">
<div class="uix-t-c"><h2>Title Here</h2></div>
<div class="app-work-detail__wrapper">
<div class="app-innerCanvas"></div>
<!-- //////////////////////////////// -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<div class="row">
<div class="col-6">
<p style="padding: 50px 0;">
<span class="app-coverWebgl" data-url="https://placehold.co/1024x378/blue/white"></span>
<img style="box-shadow: 0 3px 23px #f00; opacity: 0.3" src="https://placehold.co/1024x378/blue/white" alt="null">
</p>
</div>
<div class="col-6">
<p style="padding: 50px 0;">Content here...</p>
</div>
<div class="col-6">
<p style="padding: 50px 0; text-align: right">Content here...</p>
</div>
<div class="col-6">
<p style="padding: 50px 0;">
<span class="app-coverWebgl" data-url="https://placehold.co/1024x342/orange/white"></span>
<img style="box-shadow: 0 3px 23px #f00; opacity: 0.3" src="https://placehold.co/1024x342/orange/white" alt="null">
</p>
</div>
<div class="col-6">
<p style="padding: 50px 0;">
<span class="app-coverWebgl" data-url="https://placehold.co/800x600/green/white"></span>
<img style="box-shadow: 0 3px 23px #f00; opacity: 0.3" src="https://placehold.co/800x600/green/white" alt="null">
</p>
</div>
<div class="col-6">
<p style="padding: 50px 0;">Content here...</p>
</div>
<div class="col-12">
<p style="padding: 50px 0;">
<span class="app-coverWebgl" data-url="https://placehold.co/1120x400/red/white"></span>
<img style="box-shadow: 0 3px 23px #f00; opacity: 0.3" src="https://placehold.co/1120x400/red/white" width="100%" alt="null">
</p>
</div>
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
<div class="col-6">
<p style="padding: 50px 0;">
<span class="app-coverWebgl" data-url="https://placehold.co/600x300/gray/white"></span>
<img style="box-shadow: 0 3px 23px #f00; opacity: 0.3" src="https://placehold.co/600x300/gray/white" alt="null">
</p>
</div>
<div class="col-6">
<p style="padding: 50px 0;">Content here...</p>
</div>
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a mi ac diam varius commodo sit amet a eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
</div>
</div>
<!-- //////////////////////////////// -->
</div>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
</main>
@@include('./src/components/_global/include-copyright.html')
</div>
<!-- .uix-wrapper end -->
@@include('./src/components/_global/include-footer.html')