Viewing file:  about_details.blade.php (12.24 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.frontLayout')
@section('title') {{get_settings('app_name')}} - {{trans('About Details')}} @endsection
@section('css')
<style>
@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
.ul-circles * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ul-circles {
--innerSize: 8rem;
--rimSize: 2rem;
display: grid;
grid-template-columns: repeat(var(--repeatVal, 1), calc(var(--innerSize)));
justify-content: center;
gap: var(--rimSize);
padding: var(--rimSize);
font-family: sans-serif;
list-style: none;
}
.ul-circles.ul-circles-vertical {
--repeatVal: 1;
}
.ul-circles > li {
display: grid;
grid-template-rows: 1fr 1fr;
gap: calc(var(--rimSize) / 16);
aspect-ratio: 1/1;
padding: calc(var(--rimSize) / 16);
border-radius: 50%;
text-align: center;
position: relative;
}
.ul-circles > li::before,
.ul-circles > li::after {
content: "";
position: absolute;
aspect-ratio: 1/1;
border-radius: inherit;
z-index: 1;
}
.ul-circles > li::before {
width: calc(100% + calc(2 * var(--rimSize)));
left: calc(var(--rimSize) * -1);
top: calc(var(--rimSize) * -1);
background: var(--accent-color);
clip-path: polygon(
var(--clipX1, 0%) var(--clipY1, 0%),
var(--clipX2, 50%) var(--clipY1, 0%),
var(--clipX2, 50%) var(--clipY2, 100%),
var(--clipX1, 0%) var(--clipY2, 100%)
);
box-shadow: inset 2px -2px 10px rgba(255, 255, 255, 0.25),
inset -2px 2px 10px rgba(0, 0, 0, 0.5);
}
.ul-circles > li:nth-child(even)::before {
--clipX1: 50%;
--clipX2: 100%;
}
@media (min-width: 40rem) {
.ul-circles {
--repeatVal: auto-fit;
}
.ul-circles:not(.ul-circles-vertical) > li:nth-child(even)::before {
--clipX1: 0%;
--clipY1: 0%;
--clipX2: 100%;
--clipY2: 50%;
}
.ul-circles:not(.ul-circles-vertical) > li:nth-child(odd)::before {
--clipX1: 0%;
--clipY1: 50%;
--clipX2: 100%;
--clipY2: 100%;
}
}
.ul-circles > li::after {
width: 100%;
background: #ffffff;
box-shadow: -0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.25);
}
.ul-circles > li > i {
font-size: 2.5rem;
color: var(--accent-color);
align-self: end;
}
span.cv-year {
z-index: 7;
position: relative;
color: #333;
font-weight: 700;
top: 43px;
}
.card-section-right{
position: absolute;
z-index: 2;
height: 111px;
width: 439px;
left: 100px;
top: 16px;
margin: 0;
padding: 0;
}
.card-section-left{
position: absolute;
z-index: 2;
height: 111px;
width: 439px;
right: 100px;
top: 16px;
margin: 0;
padding: 0;
}
.card-section-right .custom-card {
width: 100%;
margin: 0 auto;
height: 100%;
background: white;
clip-path: polygon(94% 0%, 100% 40%, 94% 78%, 0 78%, 4% 41%, 0 0%);
padding: 5px 22px 20px 13px;
text-align: center;
color: #444141bd;
font-size: 13px;
}
.card-section-left .custom-card {
width: 100%;
margin: 0 auto;
height: 100%;
background: white;
clip-path: polygon(100% 0%, 97% 40%, 100% 79%, 7% 78%, 0 40%, 7% 0%);
padding: 5px 15px 20px 23px;
text-align: center;
color: #444141bd;
font-size: 13px;
}
.cv-section{
margin-top: 55px;
}
.contact-form input,textarea{
background-color: #024950 !important;
color: white !important;
border: 1px solid white;
}
.contact-form input::placeholder,textarea::placeholder {
color: white !important;
}
a.button-1.view-all-btn {
float: right;
}
input.input_your_pririty {
background: transparent;
border: 1px solid #fff;
border-radius: 4px;
color: #fff;
}
input.gra_input_your_pririty {
background: transparent;
border: 1px solid #fff;
border-radius: 4px;
color: #fff;
}
input.gra_input_your_pririty::placeholder {
color: rgb(255, 255, 255) !important ;
opacity: .7;
}
input.input_your_pririty::placeholder {
color: rgb(255, 255, 255) !important ;
opacity: .7;
}
img.client-single-img {
width: auto;
height: 90px;
}
.cv-sec-accodion {
background: #003135 !important;
color: #fff !important;
margin: 5px 0px !important;
}
.accordion-button:not(.collapsed) {
color: #ffffff !important ;
background-color: #003135 !important;
}
.accordion-body {
padding: 1rem 1.25rem;
text-align: left !important;
}
.cv-section-for-mobile-device{
display: none;
}
.accordion-button.collapsed::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-button:focus {
z-index: 3;
border-color: transparent !important;
outline: 0;
box-shadow: none !important;
}
/* res */
@media (max-width: 767.98px) {
.cv-section{
display: none;
}
.cv-section-for-mobile-device{
display: block;
}
}
/* */
.section-bg2{
background: #212228;
}
.mygoal-section{
min-height: 360px;
will-change: transform;
padding: 55px 30px 35px 30px;
background-color: #2d2e36;
border-radius: 10px;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
transition: transform 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99);
}
.mygoal-section:hover {
transform: rotateX(10deg) rotateY(10deg) scale3d(1.05, 1.05, 1.05); ;
}
.myGoal-section-text h4{
margin-bottom: 22px;
font-size: 24px;
}
.myGoal-section-text p{
font-size: 18px;
font-weight: 400;
line-height: 1.67;
color: #b0aac0;
}
.mygoal-section-down{
margin-top: 60px;
}
.download-file{
position: absolute;
z-index: 11;
left: -95px;
bottom: -100px;
}
.img-sec-about{
position: relative;
}
.rotated-img{
animation: rotation 10s infinite linear;
-webkit-animation: rotation 10s infinite linear;
}
@keyframes rotation{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.download-file-btn i{
position: absolute;
display: inline-block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
}
.section-bg{
background: #024950 !important;
}
</style>
@endsection
@section('main-section')
<div class="content-blog section-bg pt-100 pb-100 ">
<div class="container">
@php
$about_section=json_decode(get_settings('about_section'));
$cv_sections = isset($about_section->cv_sections)?$about_section->cv_sections:[];
@endphp
<div class="row align-items-center">
<div class="col-lg-5">
<div class="about-counter-up mt-40">
<div class="img-sec-about heor-img">
@if(isset($about_section->image) && $about_section->image)
<img src="{{asset('uploads/'.$about_section->image)}}" alt="">
@endif
<div class="download-file">
<img src="/images/download-bg.png" alt="" width="220" height="220" class="rotated-img">
@if(isset($about_section->file) && $about_section->file)
<a href="{{ asset('uploads/' . $about_section->file) }}" class="download-file-btn" download>
<i class="fa fa-download text-success"></i>
</a>
@else
<a href="{{ asset('uploads/') }}" class="download-file-btn" download>
<i class="fa fa-download text-success" ></i>
</a>
@endif
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="about-info">
<h5>{{isset($about_section->sub_title)?$about_section->sub_title:''}}</h5>
<h2>{{isset($about_section->title)?$about_section->title:''}}</h2>
@if(isset($about_section->description) && $about_section->description)
{!! $about_section->description !!}
@endif
<div class="about-social mt-20 mb-20">
<span>Follow Me :</span>
<ul>
<li><a href="{{isset($home_contact_us_section->facebook_link)?$home_contact_us_section->facebook_link:''}}"
target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="{{isset($home_contact_us_section->twitter_link)?$home_contact_us_section->twitter_link:''}}"
target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="{{isset($home_contact_us_section->instagram_link)?$home_contact_us_section->instagram_link:''}}"
target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="{{isset($home_contact_us_section->linkedin_link)?$home_contact_us_section->linkedin_link:''}}"
target="_blank"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
<div class="about-info-btn mt-30 d-none">
<a href="#" class="button-1">My Work <span></span></a>
<a href="#" class="button-2">Dwonload Cv <span></span></a>
</div>
</div>
</div>
<div class="col-lg-12 text-center">
<div class="cv-section">
<ul class="ul-circles ul-circles-vertical">
@php $colours=["#495460","#D3302C","#F3A22D"];
@endphp
@if($cv_sections)
@foreach($cv_sections as $key => $cv_section)
@php
$rand_key=array_rand($colours);
$random_color = $colours[$rand_key]; // Default color
@endphp
<li style="--accent-color: {{$random_color}};">
<span class="cv-year">{{$cv_section->year}}</span>
<div class="card-section-{{ $key % 2 == 0 ? 'right' : 'left' }}">
<div class="custom-card">
{{$cv_section->short_description}}
</div>
</div>
</li>
@endforeach
@endif
</ul>
</div>
<div class="cv-section-for-mobile-device">
<div class="accordion" id="accordionExample">
@foreach($cv_sections as $index => $item)
<div class="accordion-item">
<h2 class="accordion-header" id="heading{{ $index }}">
<button class="accordion-button cv-sec-accodion {{ $index == 0 ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $index }}" aria-expanded="{{ $index == 0 ? 'true' : 'false' }}" aria-controls="collapse{{ $index }}">
{{ $item->year }}
</button>
</h2>
<div id="collapse{{ $index }}" class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }} cv-sec-accordion-collapse" aria-labelledby="heading{{ $index }}" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{$item->short_description}}
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
|