API tools faq
paste
Advertisement
Tariqul_Islam

Auto text slider without bootstrape

Tariqul_Islam
Sep 18th, 2022
527
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title></title>
  7.  
  8.     <!-- CSS start -->
  9.     <style type="text/css">
  10.         .event{
  11.             padding: 50px 0 40px;
  12.         }
  13.         .feature-wrap{
  14.             padding: 20px;
  15.             width: 100%;
  16.         }
  17.         .event-feature{
  18.             margin: 0 auto;
  19.             padding: 20px 10px 10px;
  20.             width: 90%;
  21.             overflow: hidden;
  22.             box-shadow: 10px 7px 20px 5px #dbdbdb;
  23.         }
  24.  
  25.         .event-left {
  26.             margin-top: 25px;
  27.             width: 50%;
  28.             float: left;
  29.             background: #ffffff;
  30.             overflow: hidden;
  31.         }
  32.  
  33.         .slider-frame {
  34.             display: flex;
  35.             position: relative;
  36.         }
  37.  
  38.         .slide-content {
  39.             width: 100%;
  40.             flex-shrink: 0;
  41.         }
  42.  
  43.         .slide-content p:first-child{
  44.             margin: 0;
  45.             padding: 0 15px;
  46.             font-size: 30px;
  47.         }
  48.         .slide-content h1{
  49.             margin: 0 0 25px;
  50.             padding: 0 15px;
  51.             font-family: 'Alfa Slab One', cursive;
  52.             font-size: 40px;
  53.             line-height: 40px;
  54.         }
  55.         .slide-content p:last-child{
  56.             margin: 0;
  57.             padding: 0 15px;
  58.             font-family: 'Montserrat', sans-serif;
  59.             font-size: 18px;
  60.             text-transform: none;
  61.             line-height: 30px;
  62.         }
  63.  
  64.  
  65.         @keyframes slideh {
  66.           0% { right: 0; }
  67.           30% { right: 0; }
  68.           33% { right: 100%; }
  69.           63% { right: 100%; }
  70.           66% { right: 200%; }
  71.           97% { right: 200%; }
  72.           100% { left: 0; }
  73.         }
  74.         .slider-frame {
  75.             animation: slideh linear 5s infinite;
  76.         }
  77.         .slider-frame:hover {
  78.             animation-play-state: paused;
  79.         }
  80.  
  81.         .event-right{
  82.             padding-right: 0;
  83.             float: left;
  84.             width: 50%;
  85.         }
  86.         .event-img{}
  87.         .event-img img{
  88.             width: 100%;
  89.         }
  90.     </style>
  91.     <!-- CSS end -->
  92. </head>
  93. <body>
  94.     <!-- Event Section start -->
  95.             <section class="event">
  96.                 <div class="container">
  97.                     <div class="feature-wrap">
  98.                         <div class="event-feature">
  99.                             <!-- Event Left Content -->
  100.                             <div class="event-left">
  101.                                 <div class="slider-frame">
  102.                                   <div class="slide-content">
  103.                                     <p>Discover</p>
  104.                                     <h1>Upcoming Events</h1>
  105.                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
  106.                                   </div>
  107.                                   <div class="slide-content">
  108.                                     <p>Discover</p>
  109.                                     <h1>Upcoming Events</h1>
  110.                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
  111.                                   </div>
  112.                                   <div class="slide-content">
  113.                                     <p>Discover</p>
  114.                                     <h1>Upcoming Events</h1>
  115.                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilis.</p>
  116.                                     </div>
  117.                                 </div>
  118.                             </div>
  119.                             <!-- Event Right Content -->
  120.                             <div class="event-right">
  121.                                 <div class="event-img">
  122.                                     <!-- <img src="images/event.jpg" alt="Burger"> -->
  123.                                 </div>
  124.                             </div>
  125.                         </div>
  126.                     </div>
  127.                 </div>
  128.             </section>
  129.             <!-- Event Section end -->
  130. </body>
  131. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!