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

7
resources/views/about.blade.php Normal file
View File

@@ -0,0 +1,7 @@
@extends('layout')
@section("title", "about")
@section('content')
<p>TEst</p>
@endsection

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

1
resources/views/layout.blade.php
View File

@@ -10,5 +10,6 @@
<body>
@include('partials.navbar')
@yield('content')
@include('partials.footer')
</body>
</html>

31
resources/views/partials/footer.blade.php Normal file
View File

@@ -0,0 +1,31 @@
<footer class="pl-[80px] pr-[80px] pt-[80px] pb-[33px] bg-black flex flex-col gap-y-[138px]">
<div class="flex flex-col">
<div class="flex justify-between items-center w-full">
<p class="text-off-white text-heading2">Have something in mid? <br> <img src="/assets/footer_image.jpg"
alt="" class="w-[80px] h-[80px] inline bg-transparent rounded-full"> let's build it together
</p>
<a href="/contact" class="w-[190px] h-[70px] rounded-full bg-off-white flex justify-center items-center text-para-m font-medium">
<div>
Get in touch
</div>
</a>
</div>
</div>
<div class="flex justify-between w-full">
<p class="text-off-white text-para-medium">Built with {{ '<3' }} by Ivacsony Szilard </p>
<div class="flex justify-between gap-x-[32px] text-off-white text-para-medium">
<a href="">
<p>Linkedin</p>
</a>
<a href="">
<p>Twitter</p>
</a>
<a href="">
<p>Instagram</p>
</a>
<a href="">
<p>Webflow</p>
</a>
</div>
</div>
</footer>

60
resources/views/partials/navbar.blade.php
View File

@@ -1,42 +1,20 @@
<header class="bg-gray-50">
<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
<div class="sm:flex sm:items-center sm:justify-between">
<div class="text-center sm:text-left">
<h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Welcome Back, Barry!</h1>
<p class="mt-1.5 text-sm text-gray-500">Let's write a new blog post! 🎉</p>
</div>
<div class="mt-4 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center">
<button
class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-gray-200 bg-white px-5 py-3 text-gray-500 transition hover:text-gray-700 focus:outline-none focus:ring"
type="button"
>
<span class="text-sm font-medium"> View Website </span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</button>
<button
class="block rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white transition hover:bg-indigo-700 focus:outline-none focus:ring"
type="button"
>
Create Post
</button>
</div>
</div>
<nav class="top-0 absolute z-10 flex justify-between w-full pl-[80px] pr-[80px] pt-[26px]">
<div>
<a href="https://www.google.com" target="_blank">
<p class="text-black text-para-medium">
@Ivacsony Szilard
</p>
</a>
</div>
</header>
<div class="flex justify-between gap-[40px]">
<a href="">
<p class="text-para-medium">About</p>
</a>
<a href="">
<p class="text-para-medium]">Work</p>
</a>
<a href="">
<p class="text-para-medium">Contact</p>
</a>
</div>
</nav>