Model :
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Str;
class Selai extends Model
{
use HasFactory;
protected $fillable=[
'title',
'thumbnail',
'gambar',
'slug',
'text',
'detail',
'option',
];
public function getPictureAttribute()
{
return asset ('storage/'. $this->thumbnail);
}
}
Controller :
<?php
namespace App\Http\Controllers;
use App\Models\Selai;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
class SelaiController extends Controller
{
public function index()
{
return view('selai.index',[
'selai' => Selai::paginate(3),
]);
}
public function create()
{
return view('selai.create',[
'selai' => new selai(),
]);
}
public function store(Request $request)
{
// Validasi input
$request->validate([
'title' => 'required|string|max:255',
'option' => 'required|string|max:255',
'detail' => 'required|string|max:400',
'text' => 'required|string',
'thumbnail' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
'gambar.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048', // Notice the wildcard * for multiple images
]);
// Simpan thumbnail ke dalam direktori 'images/selai'
$thumbnailPath = $request->file('thumbnail')->store('images/selai');
// Handle multiple image uploads
$gambarPaths = [];
if ($request->hasFile('gambar')) {
foreach ($request->file('gambar') as $image) {
$gambarPaths[] = $image->store('gambar/selai');
// You might want to associate the image with the selai model here
// For example: $selai->images()->create(['path' => $imagePath]);
}
}
// Convert array to JSON string
$gambarPathsJson = json_encode($gambarPaths);
// Buat slug dari judul
$slug = Str::slug($request->title, '-');
// Simpan data ke dalam database
$selai = Selai::create([
'title' => $request->title,
'text' => $request->text,
'thumbnail' => $thumbnailPath,
'detail' => $request->detail,
'option' => $request->option,
'slug' => $slug,
'gambar' => $gambarPathsJson, // Store JSON string in the database
]);
// Redirect ke halaman index
return redirect(route('tambahselai.index'))->with('success', 'Selai berhasil ditambahkan');
}
public function edit($id)
{
// Temukan selai berdasarkan ID
$selai = selai::findOrFail($id);
// Tampilkan halaman edit dengan data selai yang akan diubah
return view('selai.edit', compact('selai'));
}
public function update(Request $request, $id)
{
// Validasi input
$request->validate([
'title' => 'required|string|max:255',
'detail' => 'required|string|max:400',
'option' => 'required|string|max:255',
'text' => 'required|string',
'thumbnail' => 'image|mimes:jpeg,png,jpg,gif|max:2048',
'gambar.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048', // Notice the wildcard * for multiple images
]);
// Temukan selai berdasarkan ID
$selai = Selai::findOrFail($id);
// Update data selai
$selai->title = $request->title;
$selai->detail = $request->detail;
$selai->text = $request->text;
$selai->option = $request->option;
// Update thumbnail jika ada
if ($request->hasFile('thumbnail')) {
// Hapus thumbnail lama sebelum menyimpan yang baru
Storage::delete($selai->thumbnail);
$thumbnailPath = $request->file('thumbnail')->store('images/selai');
$selai->thumbnail = $thumbnailPath;
}
// Update gambar jika ada
if ($request->hasFile('gambar')) {
// Hapus gambar lama sebelum menyimpan yang baru
if ($selai->gambar) {
foreach (json_decode($selai->gambar) as $oldImage) {
Storage::delete($oldImage);
}
}
$gambarPaths = [];
foreach ($request->file('gambar') as $image) {
$gambarPaths[] = $image->store('gambar/selai');
}
$selai->gambar = json_encode($gambarPaths);
}
$selai->save();
// Redirect ke halaman index
return redirect(route('tambahselai.index'))->with('success', 'Selai berhasil diperbarui');
}
public function destroy($id)
{
// Temukan resep berdasarkan ID
$selai = selai::findOrFail($id);
// Hapus gambar dan thumbnail dari storage
Storage::delete([$selai->gambar, $selai->thumbnail]);
// Hapus resep dari database
$selai->delete();
// Redirect ke halaman index
return redirect(route('tambahselai.index'))->with('success', 'selai berhasil dihapus');
}
}
blade view :
<x-layout>
@foreach ($selai as $item)
<!-- Content -->
<div class="page-content bg-white">
<!-- inner page banner -->
<div class="dlab-bnr-inr overlay-black-middle bg-pt"
style="background-image:url(asssset/img/banner/banner4.jpg);">
<div class="container">
<div class="dlab-bnr-inr-entry">
<h1 class="text-white">Produk Selai Sonton Food</h1>
<!-- Breadcrumb row -->
<div class="breadcrumb-row">
<ul class="list-inline">
<li><a href="index.html">Home</a></li>
<li>{{ $item->title }}</li>
</ul>
</div>
<!-- Breadcrumb row END -->
</div>
</div>
</div>
<!-- inner page banner END -->
{{-- <div class="section-full text-white bg-img-fix content-inner overlay-black-dark counter-staus-box" style="background-image:url(images/background/bg4.jpg);"> --}}
<!-- contact area -->
<div class="content-area">
<div class="container max-w900">
<!-- blog start -->
<center>
<h1>{{ $item->title }}</h1>
</center>
<center>
<div class="card-container col-lg-12 col-md-12 col-sm-12 standard penthouse">
<div class="dlab-media dlab-img-overlay1 dlab-img-effect portbox3">
<div class="dlab-bnr-inr bg-pt"
style="position: relative; background-image: url(asssset/img/banner/banner-88.jpg); background-size: cover; background-position: center;">
<!-- SVG -->
<svg width="1024" height="1024" viewBox="0 0 283 283" fill="none"
xmlns="http://www.w3.org/2000/svg"
style="position: absolute; top: 0; left: -25%; width: 100%; height: 100%;">
<g opacity="0.5">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M116.175 2.27433C120.724 1.47524 125.334 0.860555 130.005 0.491745L141.531 141.125L153.056 0.491745C157.728 0.860555 162.338 1.47524 166.886 2.27433L141.542 141.268L141.55 141.36L189.138 8.23676C193.564 9.83493 197.866 11.6175 202.046 13.5845L141.552 141.389L141.555 141.421L222.023 25.1405C225.835 27.7837 229.523 30.6112 233.088 33.6232L141.556 141.434L141.557 141.451L249.377 49.9122C252.389 53.4159 255.216 57.1655 257.859 60.9765L141.558 141.46L141.559 141.472L269.415 80.9537C271.382 85.1336 273.165 89.4364 274.763 93.8621L141.56 141.479L141.561 141.5L141.558 141.479L141.5 141.5L141.557 141.473L141.555 141.462L141.5 141.5L141.553 141.455L141.551 141.44L141.5 141.5L141.549 141.43L141.544 141.406L141.5 141.5L141.541 141.386L141.531 141.332L141.5 141.5L141.519 141.268L116.175 2.27433ZM141.5 141.5L141.583 141.558L141.611 141.552L141.5 141.5ZM141.5 141.5L141.699 141.536L141.635 141.548L141.5 141.5ZM141.5 141.5L60.9766 257.859C57.1655 255.216 53.4774 252.389 49.9123 249.377L141.5 141.5ZM141.5 141.5L141.775 141.523L280.787 116.175C281.586 120.724 282.201 125.334 282.57 130.005L141.906 141.533L282.508 153.056C282.139 157.728 281.525 162.338 280.726 166.886L141.752 141.546L141.651 141.554L274.763 189.138C273.165 193.564 271.382 197.866 269.415 202.046L141.62 141.557L141.586 141.559L257.859 222.023C255.216 225.834 252.389 229.523 249.377 233.088L141.571 141.561L141.561 141.561L141.57 141.56L141.5 141.5ZM141.5 141.5L233.088 249.377C229.584 252.389 225.835 255.216 222.023 257.859L141.5 141.5ZM141.5 141.5L202.046 269.416C197.866 271.382 193.564 273.165 189.138 274.763L141.5 141.5ZM141.5 141.5L129.944 282.508C125.272 282.139 120.662 281.525 116.114 280.726L141.5 141.5ZM141.5 141.5L93.8621 274.763C89.4364 273.165 85.1336 271.382 80.9537 269.416L141.5 141.5ZM141.5 141.5L33.6232 233.088C30.6112 229.584 27.7837 225.834 25.1405 222.023L141.5 141.5ZM141.5 141.5L13.5845 202.046C11.6175 197.866 9.83493 193.564 8.23676 189.138L141.5 141.5ZM141.5 141.5L2.27434 166.886C1.47525 162.338 0.86057 157.728 0.49176 153.056L141.5 141.5ZM141.5 141.5L0.49176 129.944C0.86057 125.272 1.47525 120.662 2.27434 116.114L141.5 141.5ZM141.5 141.5L8.23676 93.8621C9.83493 89.4364 11.6175 85.1336 13.5845 80.9537L141.5 141.5ZM141.5 141.5L25.1405 60.9765C27.7837 57.1655 30.6112 53.4774 33.6232 49.9122L141.5 141.5ZM141.5 141.5L49.9737 33.6232C53.4774 30.6112 57.227 27.7837 61.038 25.1405L141.5 141.5ZM141.5 141.5L80.9537 13.5845C85.1336 11.6175 89.4364 9.83493 93.8621 8.23676L141.5 141.5ZM153.056 282.57C157.728 282.201 162.338 281.586 166.886 280.787L141.5 141.561L153.056 282.57Z"
fill="url(#paint0_radial_2721_1595)" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M141.51 141.51L149.281 46.6905C146.718 46.4838 144.114 46.3598 141.51 46.3598C138.906 46.3598 136.302 46.4838 133.781 46.6905L141.51 141.51ZM141.51 141.51L173.544 51.8985C168.749 50.1625 163.748 48.8398 158.581 47.8891L141.51 141.51ZM141.51 141.51L235.131 158.581C234.18 163.706 232.858 168.708 231.122 173.544L141.51 141.51ZM141.51 141.51L182.224 55.4945C186.936 57.7266 191.441 60.3306 195.657 63.2653L141.51 141.51ZM141.51 141.51L214.051 79.9228C210.703 75.9961 207.024 72.3174 203.097 68.9693L141.51 141.51ZM141.51 141.51L236.371 133.822C236.578 136.343 236.702 138.947 236.702 141.551C236.702 144.155 236.578 146.718 236.371 149.281L141.51 141.51ZM141.51 141.51L219.755 87.3629C222.69 91.6202 225.294 96.0843 227.526 100.796L141.51 141.51ZM141.51 141.51L235.131 124.439C234.18 119.273 232.858 114.271 231.122 109.476L141.51 141.51ZM141.51 141.51L227.526 182.224C225.294 186.936 222.69 191.441 219.755 195.657L141.51 141.51ZM141.51 141.51L63.2653 195.657C60.3306 191.4 57.7266 186.936 55.4945 182.224L141.51 141.51ZM141.51 141.51L214.051 203.097C210.703 207.024 207.024 210.703 203.097 214.051L141.51 141.51ZM141.51 141.51L182.224 227.526C186.936 225.294 191.4 222.69 195.657 219.755L141.51 141.51ZM141.51 141.51L133.781 236.371C136.343 236.578 138.906 236.702 141.51 236.702C144.114 236.702 146.718 236.578 149.239 236.371L141.51 141.51ZM141.51 141.51L173.544 231.122C168.749 232.858 163.748 234.18 158.581 235.131L141.51 141.51ZM141.51 141.51L100.796 227.526C96.0843 225.294 91.5789 222.69 87.3628 219.755L141.51 141.51ZM141.51 141.51L124.439 235.131C119.314 234.18 114.312 232.858 109.476 231.122L141.51 141.51ZM141.51 141.51L47.8891 158.581C48.8398 163.748 50.1625 168.749 51.8985 173.544L141.51 141.51ZM141.51 141.51L79.9228 214.051C75.9961 210.703 72.3174 207.024 68.9693 203.097L141.51 141.51ZM141.51 141.51L100.796 55.4945C96.0843 57.7266 91.6202 60.3306 87.3628 63.2653L141.51 141.51ZM141.51 141.51L46.6904 133.781C46.4838 136.343 46.3598 138.906 46.3598 141.51C46.3598 144.114 46.4838 146.718 46.6904 149.239L141.51 141.51ZM141.51 141.51L124.439 47.8891C119.272 48.8398 114.271 50.1625 109.476 51.8985L141.51 141.51ZM141.51 141.51L47.8891 124.439C48.8398 119.314 50.1625 114.312 51.8985 109.476L141.51 141.51ZM79.9228 68.9693L141.51 141.51L68.9693 79.9228C72.3174 75.9961 75.9961 72.3174 79.9228 68.9693ZM141.51 141.51L63.2653 87.4042C60.3306 91.6202 57.7266 96.1256 55.4945 100.838L141.51 141.51Z"
fill="url(#paint1_radial_2721_1595)" />
</g>
<defs>
<radialGradient id="paint0_radial_2721_1595" cx="0" cy="0"
r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.531 141.531) rotate(90) scale(141.039)">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</radialGradient>
<radialGradient id="paint1_radial_2721_1595" cx="0" cy="0"
r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(141.531 141.531) rotate(90) scale(95.1709)">
<stop stop-color="white" />
<stop offset="0.3125" stop-color="white" stop-opacity="0.75" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
<!-- Image -->
<img src="{{ $item->picture }}" alt=""
style="width: 50%; height: 100%; object-fit: cover; z-index: 1; position: relative;">
</div>
<div class="overlay-bx">
{{-- Additional content --}}
</div>
</div>
</div>
</center>
<div class="section-full bg-white content-inner">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="sort-title clearfix text-center">
<h4>Images box with content demo 2</h4>
</div>
<!-- Images box with content demo 1 -->
<div class="section-content p-b0">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 m-b30">
<div class="dlab-box img-content-style-1 fly-box">
<div class="dlab-media dlab-img-overlay1 dlab-img-effect">
<img src="<?php echo asset("storage/$item->gambar"); ?>" alt="{{ $item->title }}">
</div>
<div class="dlab-title-bx bg-white p-a20 text-center">
<p class="font-16 text-secondry m-b5">Herbal Beauty Salon</p>
<div class="dlab-divider margin-0 bg-black"></div>
<p class="font-16 text-secondry m-a0"><small>Branding and
Identity</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Images box with content demo 1 END -->
</div>
<div class="section-content box-sort-in button-example p-t10 p-b30 tabs-site-button">
<div class="dlab-tabs">
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#web-design-1" class="active"><i
class="ti-info"></i><span class="title-head">Detail</span></a></li>
<li><a data-toggle="tab" href="#graphic-design-1"><i class="ti-receipt"></i> <span
class="title-head">Informasi</span></a></li>
</ul>
<div class="tab-content">
<div id="web-design-1" class="tab-pane active">
<p class="m-b0">{!! $item->text !!}</p>
</div>
<div id="graphic-design-1" class="tab-pane">
<p class="m-b0"><strong><em> Berat : {{ $item->detail }}</em></strong><br>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- blog END -->
</div>
</div>
</div>
<!-- Content END-->
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
@endforeach
</x-layout>
<style>
svg {
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<style>
<svg width="283" height="283" viewBox="0 0 283 283" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M116.175 2.27433C120.724 1.47524 125.334 0.860555 130.005 0.491745L141.531 141.125L153.056 0.491745C157.728 0.860555 162.338 1.47524 166.886 2.27433L141.542 141.268L141.55 141.36L189.138 8.23676C193.564 9.83493 197.866 11.6175 202.046 13.5845L141.552 141.389L141.555 141.421L222.023 25.1405C225.835 27.7837 229.523 30.6112 233.088 33.6232L141.556 141.434L141.557 141.451L249.377 49.9122C252.389 53.4159 255.216 57.1655 257.859 60.9765L141.558 141.46L141.559 141.472L269.415 80.9537C271.382 85.1336 273.165 89.4364 274.763 93.8621L141.56 141.479L141.561 141.5L141.558 141.479L141.5 141.5L141.557 141.473L141.555 141.462L141.5 141.5L141.553 141.455L141.551 141.44L141.5 141.5L141.549 141.43L141.544 141.406L141.5 141.5L141.541 141.386L141.531 141.332L141.5 141.5L141.519 141.268L116.175 2.27433ZM141.5 141.5L141.583 141.558L141.611 141.552L141.5 141.5ZM141.5 141.5L141.699 141.536L141.635 141.548L141.5 141.5ZM141.5 141.5L60.9766 257.859C57.1655 255.216 53.4774 252.389 49.9123 249.377L141.5 141.5ZM141.5 141.5L141.775 141.523L280.787 116.175C281.586 120.724 282.201 125.334 282.57 130.005L141.906 141.533L282.508 153.056C282.139 157.728 281.525 162.338 280.726 166.886L141.752 141.546L141.651 141.554L274.763 189.138C273.165 193.564 271.382 197.866 269.415 202.046L141.62 141.557L141.586 141.559L257.859 222.023C255.216 225.834 252.389 229.523 249.377 233.088L141.571 141.561L141.561 141.561L141.57 141.56L141.5 141.5ZM141.5 141.5L233.088 249.377C229.584 252.389 225.835 255.216 222.023 257.859L141.5 141.5ZM141.5 141.5L202.046 269.416C197.866 271.382 193.564 273.165 189.138 274.763L141.5 141.5ZM141.5 141.5L129.944 282.508C125.272 282.139 120.662 281.525 116.114 280.726L141.5 141.5ZM141.5 141.5L93.8621 274.763C89.4364 273.165 85.1336 271.382 80.9537 269.416L141.5 141.5ZM141.5 141.5L33.6232 233.088C30.6112 229.584 27.7837 225.834 25.1405 222.023L141.5 141.5ZM141.5 141.5L13.5845 202.046C11.6175 197.866 9.83493 193.564 8.23676 189.138L141.5 141.5ZM141.5 141.5L2.27434 166.886C1.47525 162.338 0.86057 157.728 0.49176 153.056L141.5 141.5ZM141.5 141.5L0.49176 129.944C0.86057 125.272 1.47525 120.662 2.27434 116.114L141.5 141.5ZM141.5 141.5L8.23676 93.8621C9.83493 89.4364 11.6175 85.1336 13.5845 80.9537L141.5 141.5ZM141.5 141.5L25.1405 60.9765C27.7837 57.1655 30.6112 53.4774 33.6232 49.9122L141.5 141.5ZM141.5 141.5L49.9737 33.6232C53.4774 30.6112 57.227 27.7837 61.038 25.1405L141.5 141.5ZM141.5 141.5L80.9537 13.5845C85.1336 11.6175 89.4364 9.83493 93.8621 8.23676L141.5 141.5ZM153.056 282.57C157.728 282.201 162.338 281.586 166.886 280.787L141.5 141.561L153.056 282.57Z" fill="url(#paint0_radial_2721_1595)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M141.51 141.51L149.281 46.6905C146.718 46.4838 144.114 46.3598 141.51 46.3598C138.906 46.3598 136.302 46.4838 133.781 46.6905L141.51 141.51ZM141.51 141.51L173.544 51.8985C168.749 50.1625 163.748 48.8398 158.581 47.8891L141.51 141.51ZM141.51 141.51L235.131 158.581C234.18 163.706 232.858 168.708 231.122 173.544L141.51 141.51ZM141.51 141.51L182.224 55.4945C186.936 57.7266 191.441 60.3306 195.657 63.2653L141.51 141.51ZM141.51 141.51L214.051 79.9228C210.703 75.9961 207.024 72.3174 203.097 68.9693L141.51 141.51ZM141.51 141.51L236.371 133.822C236.578 136.343 236.702 138.947 236.702 141.551C236.702 144.155 236.578 146.718 236.371 149.281L141.51 141.51ZM141.51 141.51L219.755 87.3629C222.69 91.6202 225.294 96.0843 227.526 100.796L141.51 141.51ZM141.51 141.51L235.131 124.439C234.18 119.273 232.858 114.271 231.122 109.476L141.51 141.51ZM141.51 141.51L227.526 182.224C225.294 186.936 222.69 191.441 219.755 195.657L141.51 141.51ZM141.51 141.51L63.2653 195.657C60.3306 191.4 57.7266 186.936 55.4945 182.224L141.51 141.51ZM141.51 141.51L214.051 203.097C210.703 207.024 207.024 210.703 203.097 214.051L141.51 141.51ZM141.51 141.51L182.224 227.526C186.936 225.294 191.4 222.69 195.657 219.755L141.51 141.51ZM141.51 141.51L133.781 236.371C136.343 236.578 138.906 236.702 141.51 236.702C144.114 236.702 146.718 236.578 149.239 236.371L141.51 141.51ZM141.51 141.51L173.544 231.122C168.749 232.858 163.748 234.18 158.581 235.131L141.51 141.51ZM141.51 141.51L100.796 227.526C96.0843 225.294 91.5789 222.69 87.3628 219.755L141.51 141.51ZM141.51 141.51L124.439 235.131C119.314 234.18 114.312 232.858 109.476 231.122L141.51 141.51ZM141.51 141.51L47.8891 158.581C48.8398 163.748 50.1625 168.749 51.8985 173.544L141.51 141.51ZM141.51 141.51L79.9228 214.051C75.9961 210.703 72.3174 207.024 68.9693 203.097L141.51 141.51ZM141.51 141.51L100.796 55.4945C96.0843 57.7266 91.6202 60.3306 87.3628 63.2653L141.51 141.51ZM141.51 141.51L46.6904 133.781C46.4838 136.343 46.3598 138.906 46.3598 141.51C46.3598 144.114 46.4838 146.718 46.6904 149.239L141.51 141.51ZM141.51 141.51L124.439 47.8891C119.272 48.8398 114.271 50.1625 109.476 51.8985L141.51 141.51ZM141.51 141.51L47.8891 124.439C48.8398 119.314 50.1625 114.312 51.8985 109.476L141.51 141.51ZM79.9228 68.9693L141.51 141.51L68.9693 79.9228C72.3174 75.9961 75.9961 72.3174 79.9228 68.9693ZM141.51 141.51L63.2653 87.4042C60.3306 91.6202 57.7266 96.1256 55.4945 100.838L141.51 141.51Z" fill="url(#paint1_radial_2721_1595)"/></g><defs><radialGradient id="paint0_radial_2721_1595" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.531 141.531) rotate(90) scale(141.039)"><stop stop-color="white"/><stop offset="1" stop-color="white" stop-opacity="0"/></radialGradient><radialGradient id="paint1_radial_2721_1595" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.531 141.531) rotate(90) scale(95.1709)"><stop stop-color="white"/><stop offset="0.3125" stop-color="white" stop-opacity="0.75"/><stop offset="1" stop-color="white" stop-opacity="0"/></radialGradient></defs></svg>
/* circle */
ul.circles {
height: 340px
}
.circles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
margin: 0
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(182, 8, 2, 0.6);
animation: animate 45s linear infinite;
bottom: -150px;
z-index: 0
}
.circles li:nth-child(1) {
left: 25%;
width: 60px;
height: 60px;
animation-delay: 0s
}
.circles li:nth-child(2) {
left: 10%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 12s
}
.circles li:nth-child(3) {
left: 70%;
width: 10px;
height: 10px;
animation-delay: 4s
}
.circles li:nth-child(4) {
left: 40%;
width: 40px;
height: 40px;
animation-delay: 0s;
animation-duration: 18s
}
.circles li:nth-child(5) {
left: 65%;
width: 10px;
height: 10px;
animation-delay: 0s
}
.circles li:nth-child(6) {
left: 75%;
width: 90px;
height: 90px;
animation-delay: 3s
}
.circles li:nth-child(7) {
left: 35%;
width: 130px;
height: 130px;
animation-delay: 7s
}
.circles li:nth-child(8) {
left: 50%;
width: 15px;
height: 15px;
animation-delay: 15s;
animation-duration: 45s
}
.circles li:nth-child(9) {
left: 20%;
width: 5px;
height: 5px;
animation-delay: 2s;
animation-duration: 35s
}
.circles li:nth-child(10) {
left: 85%;
width: 130px;
height: 130px;
animation-delay: 0s;
animation-duration: 11s
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%
}
}
</style>
