start adding svg icons

This commit is contained in:
Constantin Plaiasu 2024-08-31 02:34:31 +03:00
parent 782b1dd3b4
commit 0be9f590ca
14 changed files with 132 additions and 17 deletions

File diff suppressed because one or more lines are too long

View file

@ -1,4 +1,4 @@
/*! /*!
* Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/.fa,.fas,.far{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-book-open:before{content:""}.fa-box-open:before{content:""}.fa-cloud-showers-heavy:before{content:""}.fa-database:before{content:""}.fa-door-open:before{content:""}.fa-envelope-open:before{content:""}.fa-envelope-open-text:before{content:""}.fa-expand:before{content:""}.fa-expand-alt:before{content:""}.fa-expand-arrows-alt:before{content:""}.fa-eye:before{content:""}.fa-folder-open:before{content:""}.fa-frown-open:before{content:""}.fa-lock-open:before{content:""}.fa-opencart:before{content:""}.fa-openid:before{content:""}.fa-paper-plane:before{content:""}.fa-play:before{content:""}.fa-play-circle:before{content:""}.fa-playstation:before{content:""}.fa-search:before{content:""}.fa-search-dollar:before{content:""}.fa-search-location:before{content:""}.fa-search-minus:before{content:""}.fa-search-plus:before{content:""}.fa-searchengin:before{content:""}.fa-shower:before{content:""}.fa-star:before{content:""}.fa-teeth-open:before{content:""}.fa-unlock:before{content:""}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.svg#fontawesome) format("svg")}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Free";font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:"Font Awesome 5 Free";font-weight:900} */.fa,.fas,.far{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-book-open:before{content:""}.fa-box-open:before{content:""}.fa-cloud-showers-heavy:before{content:""}.fa-database:before{content:""}.fa-door-open:before{content:""}.fa-envelope-open:before{content:""}.fa-envelope-open-text:before{content:""}.fa-expand:before{content:""}.fa-expand-alt:before{content:""}.fa-expand-arrows-alt:before{content:""}.fa-eye:before{content:""}.fa-folder-open:before{content:""}.fa-frown-open:before{content:""}.fa-lock-open:before{content:""}.fa-opencart:before{content:""}.fa-openid:before{content:""}.fa-paper-plane:before{content:""}.fa-play:before{content:""}.fa-play-circle:before{content:""}.fa-playstation:before{content:""}.fa-search:before{content:""}.fa-search-dollar:before{content:""}.fa-search-location:before{content:""}.fa-search-minus:before{content:""}.fa-search-plus:before{content:""}.fa-searchengin:before{content:""}.fa-shower:before{content:""}.fa-star:before{content:""}.fa-teeth-open:before{content:""}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.svg#fontawesome) format("svg")}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Free";font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.eot);src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2) format("woff2"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff) format("woff"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.ttf) format("truetype"),url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:"Font Awesome 5 Free";font-weight:900}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -36,7 +36,7 @@
"isEntry": true "isEntry": true
}, },
"resources/scss/app.scss": { "resources/scss/app.scss": {
"file": "assets/app-BUXj9UVo.css", "file": "assets/app-C97fhcAN.css",
"src": "resources/scss/app.scss", "src": "resources/scss/app.scss",
"isEntry": true "isEntry": true
}, },

View file

@ -23,6 +23,7 @@ $secondary:#1B1B3F;
@import "components/header"; @import "components/header";
@import "components/form"; @import "components/form";
@import "components/movie-card"; @import "components/movie-card";
@import "components/svg-icons";
@import "main"; @import "main";
@import "color"; @import "color";
// @import "homesearch"; // @import "homesearch";

View file

@ -0,0 +1,17 @@
.si {
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
vertical-align: text-top;
fill: currentColor;
&.si-lg {
width:1.333em;
height:1.333em;
}
&.si-sm {
width:0.875em;
height:0.875em;
}
}

View file

@ -4,7 +4,12 @@
<div class="row mb-none-30"> <div class="row mb-none-30">
<div class="col-lg-4 col-sm-8 mb-50"> <div class="col-lg-4 col-sm-8 mb-50">
<div class="footer-widget"> <div class="footer-widget">
<a href="{{ route('home') }}"><img class="mb-4" width="200" height="40" src="{{ asset('images/logo.svg') }}" alt="image"></a> <a href="{{ route('home') }}">
<svg class="mb-4" style="width: 200px; height:40px">
<use href="#svg-logo"></use>
</svg>
{{-- <img class="mb-4" width="200" height="40" src="{{ asset('images/logo.svg') }}" alt="image"> --}}
</a>
<p>123movies is the top website for watching an unlimited selection of free movies and TV shows online. There's no sign up required and it's easy to find something to watch with our intuitive search and user interface.</p> <p>123movies is the top website for watching an unlimited selection of free movies and TV shows online. There's no sign up required and it's easy to find something to watch with our intuitive search and user interface.</p>
<ul class="social-links mt-3"> <ul class="social-links mt-3">
{{-- @foreach ($socials as $social) {{-- @foreach ($socials as $social)
@ -40,7 +45,12 @@
<form class="subscribe-form mt-3"> <form class="subscribe-form mt-3">
@csrf @csrf
<input name="email" type="email" placeholder="@lang('Email Address')"> <input name="email" type="email" placeholder="@lang('Email Address')">
<button type="submit"><i class="fas fa-paper-plane"></i></button> <button type="submit">
{{-- <i class="fas fa-paper-plane"></i> --}}
<svg class="si">
<use href="#si-paper-plane"></use>
</svg>
</button>
</form> </form>
<div class="download-links"> <div class="download-links">
<a class="download-links__item" href="javascript:void(0);"> <a class="download-links__item" href="javascript:void(0);">

View file

@ -3,7 +3,10 @@
<div class="container-fluid p-0"> <div class="container-fluid p-0">
<nav class="navbar navbar-expand-xl align-items-center p-0"> <nav class="navbar navbar-expand-xl align-items-center p-0">
<a class="site-logo site-title" href="{{route('home')}}"> <a class="site-logo site-title" href="{{route('home')}}">
<img src="{{asset('images/logo.svg')}}" width="150" height="37" alt="site-logo"> <svg style="width: 150px; height:37px">
<use href="#svg-logo"></use>
</svg>
{{-- <img src="{{asset('images/logo.svg')}}" width="150" height="37" alt="site-logo"> --}}
<span class="logo-icon"><i class="flaticon-fire"></i></span> <span class="logo-icon"><i class="flaticon-fire"></i></span>
</a> </a>
@ -27,9 +30,25 @@
</ul> </ul>
<div class="nav-right d-flex ml-auto flex-wrap gap-4"> <div class="nav-right d-flex ml-auto flex-wrap gap-4">
<button class="nav-right__search-btn"><i class="fas fa-search"></i></button> <button class="nav-right__search-btn">{{-- <i class="fas fa-search"></i> --}}
<a href="javascript:void(0);"><i class="las la-sign-in-alt"></i> Login</a> <i>
<a href="javascript:void(0);"><i class="las la-user-plus"></i> Registration</a> <svg class="si">
<use href="#si-search"></use>
</svg>
</i>
</button>
<a href="javascript:void(0);">
<i>
<svg class="si">
<use href="#si-sign-in-alt"></use>
</svg>
</i>
Login</a>
<a href="javascript:void(0);"><i>
<svg class="si">
<use href="#si-user-plus"></use>
</svg>
</i> Registration</a>
</div> </div>
</div> </div>
</nav> </nav>
@ -42,7 +61,12 @@
<div class="col-lg-12"> <div class="col-lg-12">
<form class="header-search-form" action="{{ route('search') }}"> <form class="header-search-form" action="{{ route('search') }}">
<input name="search" type="text" placeholder="Search here...." id="search" autocomplete="off"> <input name="search" type="text" placeholder="Search here...." id="search" autocomplete="off">
<button type="submit"><i class="fas fa-search"></i></button> <button type="submit">
{{-- <i class="fas fa-search"></i> --}}
<svg class="si">
<use href="#si-search"></use>
</svg>
</button>
</form> </form>
</div> </div>
</div> </div>

View file

@ -0,0 +1,43 @@
<svg style="display: none">
<defs>
<!-- all your icon definitions -->
<symbol id="si-search" viewBox="0 0 512 512">
<title>search</title>
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6 .1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
</symbol>
<symbol id="si-play" viewBox="0 0 512 512">
<title>play</title>
<path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"/>
</symbol>
<symbol id="si-paper-plane" viewBox="0 0 512 512">
<path d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"/>
</symbol>
<symbol id="si-sign-in-alt" viewBox="0 0 32 32">
<title>sign in</title>
<path d="M 16 4 C 10.421875 4 5.742188 7.832031 4.40625 13 L 6.46875 13 C 7.746094 8.945313 11.53125 6 16 6 C 21.515625 6 26 10.484375 26 16 C 26 21.515625 21.515625 26 16 26 C 11.53125 26 7.746094 23.054688 6.46875 19 L 4.40625 19 C 5.742188 24.167969 10.421875 28 16 28 C 22.617188 28 28 22.617188 28 16 C 28 9.382813 22.617188 4 16 4 Z M 15.34375 11.28125 L 13.90625 12.71875 L 16.1875 15 L 4 15 L 4 17 L 16.1875 17 L 13.90625 19.28125 L 15.34375 20.71875 L 19.34375 16.71875 L 20.03125 16 L 19.34375 15.28125 Z"/>
</symbol>
<symbol id="si-user-plus" viewBox="0 0 32 32">
<title>user</title>
<path d="M 12 2 C 8.144531 2 5 5.144531 5 9 C 5 11.410156 6.230469 13.550781 8.09375 14.8125 C 4.527344 16.34375 2 19.882813 2 24 L 4 24 C 4 19.570313 7.570313 16 12 16 C 13.375 16 14.65625 16.359375 15.78125 16.96875 C 14.671875 18.34375 14 20.101563 14 22 C 14 26.40625 17.59375 30 22 30 C 26.40625 30 30 26.40625 30 22 C 30 17.59375 26.40625 14 22 14 C 20.253906 14 18.628906 14.574219 17.3125 15.53125 C 16.871094 15.253906 16.390625 15.019531 15.90625 14.8125 C 17.769531 13.550781 19 11.410156 19 9 C 19 5.144531 15.855469 2 12 2 Z M 12 4 C 14.773438 4 17 6.226563 17 9 C 17 11.773438 14.773438 14 12 14 C 9.226563 14 7 11.773438 7 9 C 7 6.226563 9.226563 4 12 4 Z M 22 16 C 25.324219 16 28 18.675781 28 22 C 28 25.324219 25.324219 28 22 28 C 18.675781 28 16 25.324219 16 22 C 16 18.675781 18.675781 16 22 16 Z M 21 18 L 21 21 L 18 21 L 18 23 L 21 23 L 21 26 L 23 26 L 23 23 L 26 23 L 26 21 L 23 21 L 23 18 Z"/>
</symbol>
<symbol id="si-eye" viewBox="0 0 32 32">
<title>eye</title>
<path d="M 16 8 C 7.664063 8 1.25 15.34375 1.25 15.34375 L 0.65625 16 L 1.25 16.65625 C 1.25 16.65625 7.097656 23.324219 14.875 23.9375 C 15.246094 23.984375 15.617188 24 16 24 C 16.382813 24 16.753906 23.984375 17.125 23.9375 C 24.902344 23.324219 30.75 16.65625 30.75 16.65625 L 31.34375 16 L 30.75 15.34375 C 30.75 15.34375 24.335938 8 16 8 Z M 16 10 C 18.203125 10 20.234375 10.601563 22 11.40625 C 22.636719 12.460938 23 13.675781 23 15 C 23 18.613281 20.289063 21.582031 16.78125 21.96875 C 16.761719 21.972656 16.738281 21.964844 16.71875 21.96875 C 16.480469 21.980469 16.242188 22 16 22 C 15.734375 22 15.476563 21.984375 15.21875 21.96875 C 11.710938 21.582031 9 18.613281 9 15 C 9 13.695313 9.351563 12.480469 9.96875 11.4375 L 9.9375 11.4375 C 11.71875 10.617188 13.773438 10 16 10 Z M 16 12 C 14.34375 12 13 13.34375 13 15 C 13 16.65625 14.34375 18 16 18 C 17.65625 18 19 16.65625 19 15 C 19 13.34375 17.65625 12 16 12 Z M 7.25 12.9375 C 7.09375 13.609375 7 14.285156 7 15 C 7 16.753906 7.5 18.394531 8.375 19.78125 C 5.855469 18.324219 4.105469 16.585938 3.53125 16 C 4.011719 15.507813 5.351563 14.203125 7.25 12.9375 Z M 24.75 12.9375 C 26.648438 14.203125 27.988281 15.507813 28.46875 16 C 27.894531 16.585938 26.144531 18.324219 23.625 19.78125 C 24.5 18.394531 25 16.753906 25 15 C 25 14.285156 24.90625 13.601563 24.75 12.9375 Z"/>
</symbol>
<symbol id="si-star" viewBox="0 0 32 32">
<title>star</title>
<path d="M 16 2.125 L 15.09375 4.1875 L 11.84375 11.46875 L 3.90625 12.3125 L 1.65625 12.5625 L 3.34375 14.0625 L 9.25 19.40625 L 7.59375 27.21875 L 7.125 29.40625 L 9.09375 28.28125 L 16 24.28125 L 22.90625 28.28125 L 24.875 29.40625 L 24.40625 27.21875 L 22.75 19.40625 L 28.65625 14.0625 L 30.34375 12.5625 L 28.09375 12.3125 L 20.15625 11.46875 L 16.90625 4.1875 Z M 16 7.03125 L 18.5625 12.8125 L 18.8125 13.34375 L 19.375 13.40625 L 25.65625 14.0625 L 20.96875 18.28125 L 20.53125 18.6875 L 20.65625 19.25 L 21.96875 25.40625 L 16.5 22.28125 L 16 21.96875 L 15.5 22.28125 L 10.03125 25.40625 L 11.34375 19.25 L 11.46875 18.6875 L 11.03125 18.28125 L 6.34375 14.0625 L 12.625 13.40625 L 13.1875 13.34375 L 13.4375 12.8125 Z"/>
</symbol>
<symbol id="si-plus-circle" viewBox="0 0 32 32">
<path d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 15 10 L 15 15 L 10 15 L 10 17 L 15 17 L 15 22 L 17 22 L 17 17 L 22 17 L 22 15 L 17 15 L 17 10 Z"/>
</symbol>
<symbol id="svg-logo" viewBox="0 0 971 244">
<title>logo</title>
<ellipse cx="528.2" cy="101.4" fill="#03cf03" rx="100" ry="100.4"/><path fill="#fff" fill-opacity=".4" d="M592 90l-94-56c-8-4-20 0-20 11v112c0 10 11 16 20 11l94-56a13 13 0 000-22zm-28 19l-56 33a9 9 0 01-13-7V68a9 9 0 0113-7l56 33a9 9 0 010 15z"/><path fill="#fff" d="M508 61l56 33a9 9 0 010 15l-56 33a9 9 0 01-13-7V68a9 9 0 0113-7zM67 22v159H28V95l-1-22c-1-2-2-4-5-5-6-2-12-3-17-2H1V47c19-4 33-12 43-25zm100 132v27H81v-23l46-78c4-10 7-18 7-24l-2-9c-2-2-4-4-7-4s-5 1-7 4l-2 14v15H81v-6l1-21c2-12 10-21 21-26 6-3 13-4 20-4 16 0 28 4 36 12 8 7 12 17 12 29 0 9-2 19-7 29-4 10-18 32-40 65h43zm90-63c6 2 10 5 13 10 3 4 4 15 4 32 1 13-1 23-4 30s-8 12-15 15c-8 4-17 6-27 6s-20-2-29-6c-6-4-11-9-14-16-3-10-4-21-3-32v-12h39v25l1 14 6 2c3 0 5-1 6-3l1-19v-11l-2-13c-1-3-3-5-6-5-5-2-10-2-16-2V83l18-1 5-5 1-11v-9c0-6 0-9-2-11-1-2-2-3-5-3s-4 1-5 3l-2 12v13h-39V58c0-16 3-26 10-31 7-6 18-8 33-8 19 0 31 3 38 11 7 7 10 18 10 31 0 9-1 15-3 19-4 5-8 8-13 11zm160-69v159h-36V74l-15 107h-25L326 76v105h-36V22h53l5 34 6 40 9-74h54zm315 0l-20 159h-63L625 22h44c5 44 8 81 10 111l7-81 3-30zm49 0v159h-41V22zm16 0h69v32h-28v30h26v30h-26v35h30v32h-71zm170 48h-38V58l-2-10c0-2-2-2-4-2-3 0-5 1-6 3l-2 9 2 12c3 4 7 7 12 9 18 11 30 20 34 27 5 7 8 19 8 34 0 12-2 20-4 25-4 6-9 11-16 14-8 4-17 5-26 5-11 0-20-2-28-6-7-3-13-9-15-16-3-9-4-18-4-28v-10h38v19l2 12c1 2 3 2 5 2 3 0 5-1 7-3l2-9c0-10-2-16-4-19l-19-14-21-15c-3-3-6-7-8-13l-3-21c0-12 1-21 4-26 3-6 8-10 15-13 8-4 17-5 25-5 11 0 20 2 28 5 6 2 11 7 15 13 2 9 4 18 3 27v6zM296 241v1l-1 1h-9l-1-1-1-1-7-27-6 27v1l-1 1h-10l-1-1v-1l-10-37v-3h9v1l7 33 8-32v-1l1-1h8v1l1 1 8 32 7-33 1-1h7v3zm38 1v1h-1l-2 1-2-1h-1v-3c-3 3-6 4-10 4l-7-2-2-3-1-4 1-5 3-3 5-2h9v-5l-1-1-2-1h-6l-5 2h-2v-1l-1-1 1-3v-1l2-1 6-2 9 1 4 2 3 3v6zm-8-12h-6l-3 1-1 1v2l1 3 3 1 3-1 3-2zm33 9v3l-1 1-2 1h-3l-5-1-3-2-1-3-1-5v-14h-3l-1-1-1-4 1-1v-1h4v-7l1-1h7v8h7l1 1v5l-1 1h-7v13l1 4 3 1h2l1-1h1v3zm27-1v3h-1l-1 1-5 2h-3l-6-1-4-3-3-5-1-7 1-7 3-6 5-3h11l2 1 1 1 1 1v5l-1 1-1-1-2-1-2-1h-3l-5 2-1 8v4l1 3 2 1 3 1h3l4-3h1l1 1v2zm34 4l-1 1h-7l-1-1v-20l-1-2-1-1-2-1-4 1-3 4v20h-8v-44l1-1h6l1 1v16l4-3 5-1 5 1 3 3 2 4 1 5zm76 0l-1 1h-7l-1-1v-34l-12 34v1h-8l-1-1-11-34h-1v35h-7l-1-1v-38l1-2 3-1h8l3 2 1 3 9 25 9-25 1-2 2-2 1-1h9l1 1 1 1v39zm38-15l-1 7-3 5-5 4h-14c-4-1-7-4-8-8v-14c2-4 5-7 8-9l7-1 7 1c4 1 7 5 8 8l1 7zm-9 1v-4l-1-3-2-3h-7l-2 2-2 3a21 21 0 001 12l2 2h7l2-2 2-3v-4zm42-15v1l-1 1-9 27v1h-11v-1l-9-27-1-2 1-1h8v1l7 21v1l6-22 1-1h7l1 1zm13 29l-1 1h-7l-1-1v-29l1-1h7l1 1v29zm0-39l-1 3-3 2-4-1-1-4 1-3 4-1 3 1 1 3zm35 24l-1 2-2 1h-18l1 3 1 3 3 1 3 1 7-1 2-1h2v6h-2l-2 1-7 1-7-1-5-3-3-5v-14l3-5c3-3 7-5 11-5l6 1c3 2 6 4 7 8l1 5zm-8-3l-2-5-4-2h-3l-2 2-1 2-1 3zm35 10l-1 4-3 3-4 2a19 19 0 01-14-1v-6l1-1 1 1 4 2h5l1-1 2-1v-1l-1-2-1-1-8-4-2-1c-2-2-2-4-2-6v-4l3-3 4-2a17 17 0 0111 1h1l1 1v5h-2l-3-2h-5l-1 1-1 1-1 1 1 2 2 1 2 1 5 2 3 2 2 6zm59-12l-1 9-4 7-6 4-9 2-9-1c-5-2-8-6-9-11-2-6-2-13 0-19l4-7c1-2 3-3 6-4 5-2 12-2 17-1l6 4 4 7 1 10zm-9 0v-6l-2-5-3-3-5-1-6 1-3 4-2 4v12l2 5 3 3 5 1 6-1 3-4 2-4v-6zm44 20v1h-8l-1-1v-20l-1-2-3-2-4 1-3 4v20h-8v-31h7v4l5-4 5-1 5 1 3 3 2 4 1 5v18zm16 0v1h-8v-44l1-1h6l1 1zm16 0v1h-8v-31h8v30zm1-39l-1 3-4 1-3-1-1-3 1-3 3-1 4 1 1 3zm35 39v1h-8v-21l-1-2-4-2-3 1-3 4v19l-1 1h-7l-1-1v-29l1-1h6v4l5-4 6-1 5 1 3 3 2 4v23zm35-15l-1 2-1 1h-18v3l2 3 2 1 4 1 6-1 2-1h2l1 1-1 4v1h-1l-3 1-7 1-7-1c-3-1-6-4-7-8-2-5-2-9 0-14 1-4 3-7 7-9l6-1 7 1c3 2 5 4 6 8l1 5zm-8-3l-1-5-5-2h-2l-2 2-2 2v3z"/>
</symbol>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 8.7 KiB

View file

@ -4,7 +4,12 @@
<div class="movie-card__thumb thumb__2"> <div class="movie-card__thumb thumb__2">
<img @if($item['image'])class="lazy"@endif width="300" height="450" src="data:image/svg+xml,%3Csvg width='300' height='450' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='300' height='450' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E" @if($item['image']) data-src="{{$item['image'] }}" @endif alt="{{ str($item['title'])->apa() }}"> <img @if($item['image'])class="lazy"@endif width="300" height="450" src="data:image/svg+xml,%3Csvg width='300' height='450' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='300' height='450' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E" @if($item['image']) data-src="{{$item['image'] }}" @endif alt="{{ str($item['title'])->apa() }}">
<span class="card-title text-center">{{ str($item['title'])->apa() }}</span> <span class="card-title text-center">{{ str($item['title'])->apa() }}</span>
<a href="{{ route($item['route'] ?? $item['type'], ['id' => $item['id'], 'slug' => $item['slug']]) }}" title="{{ str($item['title'])->apa() }}" class="icon"><i class="fas fa-play"></i></a> <a href="{{ route($item['route'] ?? $item['type'], ['id' => $item['id'], 'slug' => $item['slug']]) }}" title="{{ str($item['title'])->apa() }}" class="icon">
{{-- <i class="fas fa-play"></i> --}}
<svg class="si">
<use href="#si-play"></use>
</svg>
</a>
</div> </div>
</div> </div>
</div> </div>

View file

@ -102,6 +102,7 @@
<script> <script>
</script> </script>
@include('components.svgs.global')
</body> </body>
</html> </html>

View file

@ -60,17 +60,31 @@
<div class="movie-widget-area align-items-center"> <div class="movie-widget-area align-items-center">
<span class="movie-widget"> <span class="movie-widget">
<i class="lar la-star base--color"></i> <i class="base--color">
<svg class="si">
<use href="#si-star"></use>
</svg>
</i>
<span>{{$movie['vote_average']}}</span> <span>{{$movie['vote_average']}}</span>
</span> </span>
<span class="movie-widget"> <span class="movie-widget">
<i class="lar la-eye color--danger"></i> <i class="color--danger">
<svg class="si">
<use href="#si-eye"></use>
</svg>
</i>
<span>{{$movie['vote_count']}} views</span> <span>{{$movie['vote_count']}} views</span>
</span> </span>
<span class="movie-widget addWishlist " data-id="1207" data-type="item"><i class="las la-plus-circle"></i></span> <span class="movie-widget addWishlist " data-id="1207" data-type="item">
<i>
<svg class="si">
<use href="#si-plus-circle"></use>
</svg>
</i>
</span>
</div> </div>
<ul class="title-share d-flex align-items-center justify-content-sm-end justify-content-start flex-wrap"> <ul class="title-share d-flex align-items-center justify-content-sm-end justify-content-start flex-wrap">

View file

@ -203,7 +203,7 @@
</div> </div>
<div class="movie-small__lock"> <div class="movie-small__lock">
<span class="movie-small__lock-icon"> <span class="movie-small__lock-icon">
<i class="fas fa-unlock"></i> <i class="las la-carret-down"></i>
</span> </span>
</div> </div>
</li> </li>