Posts

Showing posts from August, 2020

Display Search on Button Click with Animation

  HTML  <button id="search_button" onclick="search_display()"><i class="fas fa-search"></i></button>        <div id="search"><input type="text" name="search_bar" id="search_bar" placeholder="Search.."><button id="search_button1"><i class="fas fa-search"></i></button></div> CSS #search_button,#search_button1 {   float: right;   width: 4vw;   height: 8vh;   border: none;   background: #fedd02;  }  #search_button:hover,#search_button1:hover {   color: white;  } #search {   display: none;   position: fixed;   top: 6.5vh;   right: 11.8vw;  }  #search_bar {   width: 20vw;   height: 8vh;   background: #000000;   color: #FFFFFF;   animation: 1s fade ease;  }  @keyframes fade {   from {     width: 0;   }   to{     width: 20vw;   } }  #search_bar::placeholder {   font-weight: 600;   color: #FFFFFF;   padding: 1vh 1vw;  }

Make Triangle using HTML, CSS

Method 1 <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <meta charset="utf-8">     <title></title>     <style>       span {         border-bottom: 100px solid red;         border-right: 50px solid transparent;         border-left: 50px solid transparent;       }     </style>   </head>   <body>     <span></span>   </body> </html> Method 2 <style>       span {         border-top: 100px solid red;         border-right: 50px solid transparent;         border-left: 50px solid transparent;       }     </style> <span></span>

Dynamic On Page Navigation

Dynamic On-page Navigation to load Previous and Next Pages <div class="container" id="art_animation">   <div class="row">     <div class="col">        <hgroup><h2>{{$blog->title}}</h2>         <span>By           <a href="#">             {{getUserData($user_id,'name')}}           </a>                </span>                  <span>In<a href="#">Blog</a></span><span class="text-secondary">{{date("l, F d, Y",strtotime($blog->created_at))}}</span></hgroup>        <p>{{strip_tags($blog->body)}}</p>     </div>   </div>   <hr>   <div id="navigate_pages">      <div id="box1">       <?php $id = $blog->id;              $first =App\BlogPost::oldest()->first();             if( $id == $first->id) {         echo "";      

Event Calendar

Event Calendar HTML, CSS and JS

Constructor & Destructor in PHP OOPS

Image

RESTful APi Laravel Tutorial

Laravel Commands

 1. To install New Project in the root directory of Xampp  i.e htdocs composer create-project --prefer-dist laravel/laravel laraone ("laraone" is the name of the Project Folder) 2. To Serve/run the project php artisan serve 3. To Migrate Tables to Database php artisan migrate 4. To Make a New Controller php artisan make:controller Country/CountryController ( New Folder " Country " is created  inside app/Http/Controllers and " CountryController " is the name of the controller inside  "Country" Folder ) 5. To  Make  a New Model php artisan make:model Models/CountryModel (New Folder "Models " is created inside app/Http and " CountryModel " is the name of the model inside  "Models" Folder )

Nav Menu Dynamic(Wordpress Like) in Laravel

Image
Packagist Harimayako Menu Package Link  

Font Size in rem and Making Responsive

Image
 1 rem = Font-size of the root html element Default 1rem = 16px To change font-size of html element -> Put in %(1rem=100%) And put font-size in media-query -> in % (accordingly)