bilo/my-website
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

hero, about, recent works

Browse Source
This commit is contained in:
Ivacsony Szilard
2024-02-16 23:36:28 +02:00
parent dfbbcb2ce4
commit 8c91a5e22b
18 changed files with 328 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
resources/views/homepage.blade.php
View File

@@ -1,8 +1,95 @@
@extends('layout')
@section("title", "homepage")
@section('title', 'homepage')
@section('content')
<x-emblem-heart />
@endsection
{{-- 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