Ümit Tunç
124 lines
6.1 KiB
PHP
124 lines
6.1 KiB
PHP
|
||
<div id="content" class="">
|
||
<section id="flip" data-animate="flip" class="sec reorganise">
|
||
<div data-flip="toggle" class="flip-btn-w">
|
||
<button class="btn flip-switch-btn current">
|
||
<div>List</div>
|
||
</button>
|
||
<button class="btn flip-switch-btn">
|
||
<div>Grid</div>
|
||
</button>
|
||
</div>
|
||
<div class="layer"></div>
|
||
<div class="comp">
|
||
<ul data-flip="item" role="list" class="flip-list-w list w-list-unstyled">
|
||
<li>
|
||
<div class="flip-item">
|
||
<div class="item-num">01</div>
|
||
<h3 class="font-c size-md _w-ch">{{t("Yapay Zeka Uygulamaları")}}</h3>
|
||
<div class="abs-img">
|
||
<div class="dual-img">
|
||
<img src="{{asset('assets/img/gsap/yapay-zeka.png')}}" loading="eager" alt="" class="dual-img-img">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flip-item is-2">
|
||
<div class="item-num">02</div>
|
||
<h3 class="font-c size-md _w-ch">{{t("Semantik Web")}}</h3>
|
||
<div class="abs-img">
|
||
<div class="dual-img">
|
||
<img src="{{asset('assets/img/gsap/semantik-web.png')}}" loading="eager" alt="" class="dual-img-img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flip-item is-3">
|
||
<div class="item-num">03</div>
|
||
<h3 class="font-c size-md _w-ch">{{t("Parallax Web Sitesi")}}</h3>
|
||
<div class="abs-img">
|
||
<div class="dual-img">
|
||
<img src="{{asset('assets/img/gsap/parallax-web-site.png')}}" loading="eager" alt="" class="dual-img-img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flip-item is-4">
|
||
<div class="item-num">04</div>
|
||
<h3 class="font-c size-md _w-ch">{{t("Nesnelerin İnterneti")}}</h3>
|
||
<div class="abs-img">
|
||
<div class="dual-img">
|
||
<img src="{{asset('assets/img/gsap/iot.png')}}" loading="eager" alt="" class="dual-img-img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flip-item is-5">
|
||
<div class="item-num">05</div>
|
||
<h3 class="font-c size-md _w-ch">Sequenced Motion</h3>
|
||
<div class="abs-img">
|
||
<div class="dual-img">
|
||
<img src="{{asset('assets/img/gsap/yapay-zeka.png')}}" loading="eager" alt="" class="dual-img-img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flip-item is-6">
|
||
<div class="item-num">06</div>
|
||
<h3 class="font-c size-md _w-ch">FLEXIBLE LAYOUTS</h3>
|
||
<div class="abs-img">
|
||
<div class="dual-img">
|
||
<img src="{{asset('assets/img/gsap/yapay-zeka.png')}}" loading="eager" alt="" class="dual-img-img">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="explainer-w">
|
||
<div data-module="explainer" data-css="explainer" class="explainer-comp">
|
||
<label class="div">
|
||
<input type="checkbox" class="input">
|
||
<span class="span">
|
||
<div class="explainer-he">Make Show and Tell Flexible</div>
|
||
<div class="plus-icon-w">
|
||
<div class="plus-line rotate"></div>
|
||
<div class="plus-line"></div>
|
||
</div>
|
||
</span>
|
||
</label>
|
||
<div data-css="" class="explainer-expandable-w">
|
||
<div class="explainer-overflow">
|
||
<div class="explainer-content-w">
|
||
<p class="explainer-par">
|
||
Create seamless transitions between two visual states smoothly, not instantly. It removes the visual chaos when layouts shift, making things feel smooth, considered, and intentional.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="explainer-copy-btn-w">
|
||
<button
|
||
data-module="copybtn"
|
||
data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c8e5f450bdf4878517_flip-final.json.txt"
|
||
class="btn copy"
|
||
>
|
||
<div class="btn-cent-w">
|
||
<div class="text-block">Copy this</div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon">
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path>
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path>
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<div class="mobile-explainer-prompt">Copy this on Desktop</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|