96 lines
5.1 KiB
PHP
96 lines
5.1 KiB
PHP
@extends('layout')
|
|
|
|
@section('title', 'homepage')
|
|
|
|
|
|
@section('content')
|
|
{{-- Hero section --}}
|
|
<section class="w-full h-[700px] bg-light-gray">
|
|
<div class="flex h-full items-end justify-center">
|
|
<img src="assets/hero_image.jpg" alt="" class="mix-blend-multiply w-[501px] h-[655px] ">
|
|
</div>
|
|
<div
|
|
class="flex justify-start items-center min-w-[358px] h-[95px] bg-black rounded-l-full top-[278px] right-[-280px] absolute hover:-translate-x-[280px] duration-200">
|
|
<img src="assets/waving_hand.png" alt="" class="w-[45px] h-[45px] ml-[33px] mr-[28px]">
|
|
<p class="text-white text-heading3 font-medium pr-[27px]">Hi, I'm Szilard</p>
|
|
</div>
|
|
</section>
|
|
{{-- About section --}}
|
|
<section class="w-full bg-off-white">
|
|
<div class="flex justify-between pl-[80px] pr-[80px] pt-[160px]">
|
|
<p class="text-heading3">About</p>
|
|
<div class="max-w-[840px] text-para-large">
|
|
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.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{-- Recent works section --}}
|
|
<section class="w-full bg-off-white">
|
|
<div class="flex justify-between pl-[80px] pr-[80px] pt-[160px]">
|
|
<p class="text-heading3">
|
|
Recent Work
|
|
</p>
|
|
<div class="flex flex-col w-full max-w-[840px] gap-y-[33px]">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex flex-col gap-y-[18px]">
|
|
<p class="text-heading2">Decodable.co</p>
|
|
<p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
|
|
</div>
|
|
<a href="" class="">
|
|
<div
|
|
class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
|
|
<x-heroicon-o-arrow-up-right
|
|
class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<span class="w-full h-[1px] bg-black"></span>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex flex-col gap-y-[18px]">
|
|
<p class="text-heading2">Gofirefly.io</p>
|
|
<p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
|
|
</div>
|
|
<a href="" class="">
|
|
<div
|
|
class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
|
|
<x-heroicon-o-arrow-up-right
|
|
class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<span class="w-full h-[1px] bg-black"></span>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex flex-col gap-y-[18px]">
|
|
<p class="text-heading2">Blinkops.com</p>
|
|
<p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
|
|
</div>
|
|
<a href="" class="">
|
|
<div
|
|
class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
|
|
<x-heroicon-o-arrow-up-right
|
|
class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<span class="w-full h-[1px] bg-black"></span>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex flex-col gap-y-[18px]">
|
|
<p class="text-heading2">Withkanvas.com</p>
|
|
<p class="text-para-medium">Brand Design - Webflow Development - Web Design</p>
|
|
</div>
|
|
<a href="" class="">
|
|
<div
|
|
class="flex justify-center items-center w-[85px] h-[85px] rounded-full border-solid border-2 text-dark-gray hover:border-0 hover:bg-black group">
|
|
<x-heroicon-o-arrow-up-right
|
|
class="w-[32px] h-[32px] text-dark-gray group-hover:text-off-white" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|