[add] news detail page added

aplus/#11
tribikram 2 years ago committed by Mahesh Sharma
parent d4514a7e5f
commit d552d5df02
  1. 65
      public/frontend/css/style.css
  2. 4
      public/frontend/icons/facebook-icon.svg
  3. 4
      public/frontend/icons/linkdin-link.svg
  4. 4
      public/frontend/icons/twiter-link.svg
  5. BIN
      public/frontend/images/test-desc.png
  6. 7
      resources/views/layout/app.blade.php
  7. 74
      resources/views/news.blade.php
  8. 132
      resources/views/news_detail.blade.php
  9. 4
      routes/web.php

@ -1237,6 +1237,9 @@ Responsive Codes
.news-page-card{ .news-page-card{
margin-top: 40px; margin-top: 40px;
} }
.news-page-card a{
text-decoration: none;
}
.news-card-desc{ .news-card-desc{
padding: 20px; padding: 20px;
margin-top: 20px; margin-top: 20px;
@ -1254,7 +1257,69 @@ Responsive Codes
line-height: 21px; line-height: 21px;
color: #071C39; color: #071C39;
} }
/* news details page css */
.bloghead-section,
.related-article{
padding: 3rem 6rem;
}
.blog-social{
display: flex;
justify-content: space-between;
align-items: center;
}
.blog-share{
display: flex;
align-items: center;
gap: 20px;
}
.blog-header h2{
font-weight: 700;
font-size: 38px;
line-height: 57px;
color: #082548;
margin-bottom: 0;
}
.blog-social p{
font-weight: 500;
font-size: 14px;
line-height: 21px;
color: #676676;
}
.blog-share h5{
font-weight: 600;
font-size: 16px;
line-height: 21px;
color: #474747;
margin-bottom: 0;
}
.blog-content p{
font-weight: 500;
font-size: 16px;
line-height: 28px;
color: #474747;
}
.blog-content h5{
font-weight: 600;
font-size: 22px;
margin-top: 0.5rem;
line-height: 33px;
color: #1D1D1D;
}
.related-article h3{
font-weight: 600;
font-size: 22px;
line-height: 33px;
color: #F54C5F;
display: inline-block;
}
.related-article h3::after{
content: '';
border-bottom: 2px solid #000000;
display: block;
margin-top: 5px;
width: 140%;
}
/* large screen */ /* large screen */
@media screen and (min-width: 1600px){ @media screen and (min-width: 1600px){

@ -0,0 +1,4 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17.5" cy="17.5" r="17.5" fill="#EEEEEE"/>
<path d="M18.6005 11.4334H20.1671V8.78344C19.4086 8.70456 18.6464 8.66562 17.8838 8.66677C15.6171 8.66677 14.0671 10.0501 14.0671 12.5834V14.7668H11.5088V17.7334H14.0671V25.3334H17.1338V17.7334H19.6838L20.0671 14.7668H17.1338V12.8751C17.1338 12.0001 17.3671 11.4334 18.6005 11.4334Z" fill="#3B5998"/>
</svg>

After

Width:  |  Height:  |  Size: 458 B

@ -0,0 +1,4 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17.5" cy="17.5" r="17.5" fill="#EEEEEE"/>
<path d="M13.9381 12.4451C13.9379 12.8282 13.7829 13.1955 13.5073 13.4662C13.2317 13.7369 12.8579 13.8889 12.4683 13.8887C12.0787 13.8885 11.7051 13.7362 11.4298 13.4652C11.1544 13.1942 10.9998 12.8267 11 12.4436C11.0002 12.0606 11.1552 11.6933 11.4308 11.4225C11.7064 11.1518 12.0802 10.9998 12.4698 11C12.8594 11.0002 13.233 11.1525 13.5083 11.4236C13.7837 11.6946 13.9383 12.062 13.9381 12.4451V12.4451ZM13.9822 14.9583H11.0441V24H13.9822V14.9583ZM18.6243 14.9583H15.7009V24H18.595V19.2553C18.595 16.6121 22.0986 16.3665 22.0986 19.2553V24H25V18.2731C25 13.8172 19.8143 13.9833 18.595 16.1715L18.6243 14.9583V14.9583Z" fill="#0072B1"/>
</svg>

After

Width:  |  Height:  |  Size: 796 B

@ -0,0 +1,4 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17.5" cy="17.5" r="17.5" fill="#EEEEEE"/>
<path d="M26 12.5294C25.3743 12.7971 24.6998 12.9729 24.001 13.0571C24.7161 12.6518 25.2686 12.0094 25.5287 11.2371C24.8542 11.6194 24.1066 11.8871 23.3184 12.04C22.6764 11.3824 21.7744 11 20.7505 11C18.8408 11 17.2806 12.4682 17.2806 14.2806C17.2806 14.5406 17.3131 14.7929 17.37 15.03C14.4771 14.8924 11.9011 13.5847 10.1864 11.6041C9.88576 12.0859 9.71511 12.6518 9.71511 13.2482C9.71511 14.3876 10.3246 15.3971 11.2672 15.9706C10.6902 15.9706 10.1539 15.8176 9.6826 15.5882V15.6112C9.6826 17.2018 10.8853 18.5324 12.478 18.8306C11.9667 18.9623 11.4298 18.9806 10.9097 18.8841C11.1304 19.536 11.5626 20.1064 12.1457 20.5152C12.7287 20.9239 13.4332 21.1505 14.1601 21.1629C12.9279 22.0809 11.4005 22.5771 9.82887 22.57C9.55258 22.57 9.27629 22.5547 9 22.5241C10.544 23.4571 12.3805 24 14.347 24C20.7505 24 24.2691 18.9988 24.2691 14.6629C24.2691 14.5176 24.2691 14.38 24.261 14.2347C24.9436 13.7759 25.5287 13.1947 26 12.5294V12.5294Z" fill="#1DA1F2"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

@ -53,7 +53,7 @@
<a class="nav-link" href="{{url('/insurance')}}">Insurance</a> <a class="nav-link" href="{{url('/insurance')}}">Insurance</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{{url('/news_detail')}}">News</a> <a class="nav-link" href="{{url('/news')}}">News</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link pr-0" href="{{url('/contact')}}">Contact</a> <a class="nav-link pr-0" href="{{url('/contact')}}">Contact</a>
@ -178,10 +178,13 @@
navHeader.classList.add("header-scroll"); navHeader.classList.add("header-scroll");
} }
if(window.scrollY==0){ if(window.scrollY==0 && location.pathname != '/news_detail'){
navHeader.classList.remove("header-scroll"); navHeader.classList.remove("header-scroll");
} }
} }
if(location.pathname === '/news_detail'){
navHeader.classList.add("header-scroll");
}
</script> </script>
@yield('script') @yield('script')
</body> </body>

@ -0,0 +1,74 @@
@extends('layout.app')
@section('title')
<title>News & Updates</title>
@endsection
@section('content')
<section class="news-banner-section">
<div class="news-banner-desc">
<h2>News & Updates</h2>
</div>
</section>
<section class="news-update-section">
<div class="news-update-head">
<h5>What’s New <hr></h5>
<h3>News & Updates</h3>
</div>
<div class="row mt-4">
<div class="col-md-6">
<div class="featured-news-image">
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
</div>
</div>
<div class="col-md-6">
<div class="featured-news-desc">
<h3>Recognition of Prior Learning (RPL)</h3>
<h5>Dec 08, 2022</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
<a href="/news_detail">Read More</a>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="news-page-card">
<a href="/news_detail">
<div class="news-card-img">
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
</div>
<div class="news-card-desc">
<h4>Lorem Ipsum is simply dummy text of the printing</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="news-page-card">
<a href="/news_detail">
<div class="news-card-img">
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
</div>
<div class="news-card-desc">
<h4>Lorem Ipsum is simply dummy text of the printing</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="news-page-card">
<a href="/news_detail">
<div class="news-card-img">
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
</div>
<div class="news-card-desc">
<h4>Lorem Ipsum is simply dummy text of the printing</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p>
</div>
</a>
</div>
</div>
</div>
</section>
@endsection

@ -1,69 +1,113 @@
@extends('layout.app') @extends('layout.app')
@section('title') @section('title')
<title>News & Updates</title> <title>Recognition of Prior Learning (RPL)</title>
@endsection @endsection
@section('content') @section('content')
<section class="news-banner-section"> <section class="bloghead-section">
<div class="news-banner-desc"> <div class="blog-header">
<h2>News & Updates</h2> <h2>Recognition of Prior Learning (RPL)</h2>
<div class="blog-social">
<p>Dec 09, 2022 . 2 min read</p>
<div class="blog-share">
<h5>Share on</h5>
<a href="https://www.facebook.com/people/A-Plus-Australia-Agency/100063871244808/" target="_blank"><img src="{{url('frontend/icons/facebook-icon.svg')}}" alt=""></a>
<a href="" target="_blank"><img src="{{url('frontend/icons/twiter-link.svg')}}" alt=""></a>
<a href="https://au.linkedin.com/company/a-plus-australia-agency?trk=public_profile_topcard-current-company" target="_blank"><img src="{{url('frontend/icons/linkdin-link.svg')}}" alt=""></a>
</div>
</div>
</div> </div>
</section> <div class="blog-desc mt-4">
<section class="news-update-section"> <div class="blog-featured-img">
<div class="news-update-head"> <img src="{{url('frontend/images/test-desc.png')}}" class="w-100" alt="">
<h5>What’s New <hr></h5> </div>
<h3>News & Updates</h3> <div class="blog-content mt-4">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letterset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letterset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<h5>Where does it come from?</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letterset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letterset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div> </div>
<div class="row mt-4"> </section>
<div class="col-md-6"> <section class="related-article">
<div class="featured-news-image"> <h3>Related Articles</h3>
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt=""> <div class="row g-4">
<div class="col-md-4">
<div class="news-page-card">
<a href="/news_detail">
<div class="news-card-img">
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
</div>
<div class="news-card-desc">
<h4>Lorem Ipsum is simply dummy text of the printing</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p>
</div>
</a>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-4">
<div class="featured-news-desc"> <div class="news-page-card">
<h3>Recognition of Prior Learning (RPL)</h3> <a href="/news_detail">
<h5>Dec 08, 2022</h5> <div class="news-card-img">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p> <img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
<a href="/">Read More</a> </div>
<div class="news-card-desc">
<h4>Lorem Ipsum is simply dummy text of the printing</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="news-page-card">
<a href="/news_detail">
<div class="news-card-img">
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
</div>
<div class="news-card-desc">
<h4>Lorem Ipsum is simply dummy text of the printing</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p>
</div>
</a>
</div> </div>
</div> </div>
</div>
<div class="row g-4">
<div class="col-md-4"> <div class="col-md-4">
<div class="news-page-card"> <div class="news-page-card">
<div class="news-card-img"> <a href="/news_detail">
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt=""> <div class="news-card-img">
</div> <img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
<div class="news-card-desc"> </div>
<h4>Lorem Ipsum is simply dummy text of the printing</h4> <div class="news-card-desc">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p> <h4>Lorem Ipsum is simply dummy text of the printing</h4>
</div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p>
</div>
</a>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="news-page-card"> <div class="news-page-card">
<div class="news-card-img"> <a href="/news_detail">
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt=""> <div class="news-card-img">
</div> <img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
<div class="news-card-desc"> </div>
<h4>Lorem Ipsum is simply dummy text of the printing</h4> <div class="news-card-desc">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p> <h4>Lorem Ipsum is simply dummy text of the printing</h4>
</div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p>
</div>
</a>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="news-page-card"> <div class="news-page-card">
<div class="news-card-img"> <a href="/news_detail">
<img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt=""> <div class="news-card-img">
</div> <img src="{{url('frontend/images/test-img.png')}}" class="img-fluid" alt="">
<div class="news-card-desc"> </div>
<h4>Lorem Ipsum is simply dummy text of the printing</h4> <div class="news-card-desc">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p> <h4>Lorem Ipsum is simply dummy text of the printing</h4>
</div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</p>
</div>
</a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
@endsection @endsection

@ -60,6 +60,10 @@ Route::get('/service_detail', function(){
return view('service_detail'); return view('service_detail');
}); });
Route::get('/news', function(){
return view('news');
});
Route::get('/news_detail', function(){ Route::get('/news_detail', function(){
return view('news_detail'); return view('news_detail');
}); });

Loading…
Cancel
Save