my-website/resources/views/homepage.blade.php

96 lines
5.1 KiB
PHP
Raw Permalink Normal View History

2024-02-15 20:31:36 +02:00
@extends('layout')
2024-02-16 23:36:28 +02:00
@section('title', 'homepage')
2024-02-15 20:31:36 +02:00
@section('content')
2024-02-16 23:36:28 +02:00
{{-- 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