API tools faq
paste
Advertisement
coffeecode12

Untitled

coffeecode12
Dec 14th, 2021
1,376
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
TypeScript 21.37 KB | None | 0 0
raw download clone embed print report
  1. <div class="overflow-x-hidden bg-gray-100 overlay">
  2.  
  3.  
  4.     <nav class="relative flex flex-wrap items-center justify-between px-2 py-3  mb-3">
  5.         <div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
  6.             <div class="w-full relative flex justify-between lg:w-auto  px-4 lg:static lg:block lg:justify-start">
  7.                 <a class="text-3xl leading-relaxed inline-block mr-4 py-2 whitespace-nowrap  text-white">
  8.                     <b>Social</b>Network
  9.                 </a>
  10.                 <button class="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button" (click)="toggleNavbar()">
  11.                     <i class="fas fa-bars"></i>
  12.                 </button>
  13.             </div>
  14.             <div class="text-gray-600 lg:block hidden w-screen md:w-1/3 h-10 flex  justify-center ">
  15.                 <div class="box-wrapper">
  16.  
  17.                     <div class=" bg-white rounded flex items-center w-full p-3 shadow-sm border border-gray-200 justify-center">
  18.                         <input type="search" name="" id="" placeholder="Find" x-model="q" class="w-full pl-4 text-sm outline-none focus:outline-none bg-transparent">
  19.                             <button class="outline-none focus:outline-none">
  20.                                 <svg class=" w-5 text-gray-600 h-5 cursor-pointer" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
  21.                                     <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
  22.                                 </svg>
  23.                             </button>
  24.                         </div>
  25.  
  26.                     </div>
  27.                 </div>
  28.  
  29.  
  30.                 <div [ngClass]="{'hidden': !showMenu, 'flex': showMenu}" class="lg:flex lg:flex-grow items-center">
  31.                     <ul class="flex flex-col lg:flex-row list-none ml-auto">
  32.                         <a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
  33.                             <li class="nav-item">
  34.                                 <button class="relative bg-gray-700 hover:bg-gray-800 duration-300 py-2 px-4 text-gray-100 shadow-lg transform active:scale-x-75 transition-transform mx-5 flex">
  35.                                     <i class="fas fa-upload"></i>
  36.                                     Upload
  37.                                 </button>
  38.  
  39.                             </li>
  40.                         </a>
  41.                         <li class="nav-item">
  42.                             <a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
  43.  
  44.                                 <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded">
  45.                                     <i class="fas fa-user"></i>
  46.                                     <span class="absolute bg-red-600 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
  47.                                 </button>
  48.                             </a>
  49.                         </li>
  50.                     </ul>
  51.  
  52.  
  53.                 </div>
  54.             </div>
  55.             <!-- <ul class="flex flex-col lg:flex-row list-none ml-auto">
  56.                                 <li class="nav-item">
  57.                                   <button class="py-3 px-6 trelative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded py-3 px-6  shadow-lg md:inline-block mr-2"><i class="fas fa-upload"></i> Upload</button>
  58.                                 </li>
  59.                                 <li class="nav-item">
  60.                                     <button class="relative bg-blue-700 hover:bg-blue-800 duration-300 py-2 px-4 text-blue-100 rounded py-3 px-6  shadow-lg"><i class="fas fa-user"></i>
  61.                                       <span class="absolute bg-red-600 px-2 py-1 text-xs font-bold rounded-full -top-3 -right-3">99+</span>
  62.                                    </button>
  63.                    
  64.                                  
  65.                                 </li>
  66.                                
  67.                               </ul> -->
  68.         </nav>
  69.  
  70.  
  71.         <hr class="text-gray-800">
  72.             <ol class="flex  justify-center breadcrumb">
  73.  
  74.                 <li>
  75.                     <a class="text-blue-600 hover:text-blue-700">Video</a>
  76.                 </li>
  77.                 <li>
  78.                     <span class="text-gray-500 mx-2">/</span>
  79.                 </li>
  80.                 <li class="text-gray-500">People</li>
  81.                 <li>
  82.                     <span class="text-gray-500 mx-2">/</span>
  83.                 </li>
  84.                 <li class="text-gray-500">Documents</li>
  85.                 <li>
  86.                     <span class="text-gray-500 mx-2">/</span>
  87.                 </li>
  88.                 <li class="text-gray-500">Events</li>
  89.                 <li>
  90.                     <span class="text-gray-500 mx-2">/</span>
  91.                 </li>
  92.                 <li class="text-gray-500">Communities</li>
  93.                 <li>
  94.                     <span class="text-gray-500 mx-2">/</span>
  95.                 </li>
  96.                 <li class="text-gray-500">Favorit</li>
  97.                 <li>
  98.                     <span class="text-gray-500 mx-2">/</span>
  99.                 </li>
  100.                 <li class="text-gray-500">Channels</li>
  101.             </ol>
  102.  
  103.             <hr class="text-gray-800">
  104.                 <div class="px-6 py-8">
  105.                     <div class="container flex justify-between mx-auto">
  106.                         <div class="w-full lg:w-10/12 ">
  107.                             <div class="flex items-center justify-between mb-2">
  108.                                 <h1 class="text-xl font-bold text-gray-700 md:text-2xl">Videos</h1>
  109.                                 <h1 class="text-xs text-blue-800 md:text-xs float-right cursor-pointer">Browse All Videos</h1>
  110.                                 <div></div>
  111.                             </div>
  112.                             <ul class="grid">
  113.                                 <li class="grid__item" *ngFor="let item of videoWatch; let i = index;">
  114.  
  115.                                     <a class="card">
  116.                                         <div class="card__image">
  117.                                             <video src="{{item.linkVideos}}" controls="controls"></video>
  118.  
  119.                                         </div>
  120.                                         <article class="card__content">
  121.                                             <h2 class="card__title font-bold ">{{item.desc}}</h2>
  122.                                             <!-- <div class="card__body">
  123.                                                                                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, eligendi.</p>
  124.                                                                                                       </div> -->
  125.                                             <div class="card__footer">
  126.                                                 <span class="text-xs">{{item.name}}</span>
  127.                                                 <span class="float-right text-xs">
  128.                                                     <i class="fas fa-eye"></i>
  129.                                                     {{item.view}}
  130.                                                     views</span>
  131.                                             </div>
  132.                                         </article>
  133.                                     </a>
  134.  
  135.  
  136.                                 </li>
  137.                             </ul>
  138.  
  139.                             <br>
  140.  
  141.                                 <div class="flex items-center justify-between mb-2">
  142.                                     <h1 class="text-xl font-bold text-gray-700 md:text-2xl">People</h1>
  143.                                     <h1 class="text-xs text-gray-400 md:text-xs float-right">View All</h1>
  144.                                     <div></div>
  145.                                 </div>
  146.                                 <ul class="grid">
  147.                                     <li class="grid__item" *ngFor="let items of peoples;let i = index; let first = first ;let last = last;">
  148.  
  149.  
  150.                                         <a class="card">
  151.                                             <div class="card__image">
  152.  
  153.                                                 <video src="{{items.linkVideos}}" controls="controls" *ngIf="!last"></video>
  154.  
  155.                                                 <div class="input_field flex flex-col w-max mx-auto text-center" *ngIf="last">
  156.                                                     <svg class="text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
  157.                                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
  158.                                                     <label>
  159.                                                         <input class="text-sm cursor-pointer w-25 hidden" type="file" multiple="multiple">
  160.                                                             <div class="text bg-indigo-600 text-white border border-gray-300 rounded font-semibold cursor-pointer p-1 px-3 hover:bg-indigo-500">Select</div>
  161.                                                         </label>
  162.  
  163.                                                         <div class="title text-indigo-500 uppercase">or drop files here</div>
  164.                                                     </div>
  165.                                                 </div>
  166.                                                 <article class="card__content" *ngIf="!last">
  167.                                                     <h2 class="card__title font-bold ">{{items.desc}}</h2>
  168.                                                     <!-- <div class="card__body">
  169.                                                                                                                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, eligendi.</p>
  170.                                                                                                                 </div> -->
  171.                                                     <div class="card__footer">
  172.                                                         <span class="tag">{{items.name}}</span>
  173.                                                         <span class="float-right text-xs">
  174.                                                             <i class="fas fa-eye"></i>
  175.                                                             {{items.view}}
  176.                                                             views</span>
  177.                                                     </div>
  178.                                                 </article>
  179.                                             </a>
  180.  
  181.  
  182.                                         </li>
  183.                                     </ul>
  184.  
  185.                                     <br>
  186.  
  187.                                         <div class="flex items-center justify-between mb-2">
  188.                                             <h1 class="text-xl font-bold text-gray-700 md:text-2xl">Document</h1>
  189.                                             <h1 class="text-xs text-gray-400 md:text-xs float-right cursor-pointer">Browse All Document</h1>
  190.                                             <div></div>
  191.                                         </div>
  192.                                         <ul class="grid">
  193.                                             <li class="grid__item" *ngFor="let item of videoWatch;let i = index;">
  194.  
  195.                                                 <a class="card">
  196.                                                     <div class="card__image">
  197.                                                         <video src="{{item.linkVideos}}" controls="controls"></video>
  198.  
  199.                                                     </div>
  200.                                                     <article class="card__content">
  201.                                                         <!-- <h2 class="card__title font-bold ">How To Improve Your Skill</h2> -->
  202.                                                         <!-- <div class="card__body">
  203.                                                                                                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, eligendi.</p>
  204.                                                                                                                       </div> -->
  205.                                                             <div class="card__footer"> <span class="tag">{{item.name}}</span>
  206.                                                             <span class="float-right text-xs">
  207.                                                                 <i class="fas fa-eye"></i>
  208.                                                                 {{item.view}}
  209.                                                                 views</span>
  210.                                                         </div>
  211.                                                     </article>
  212.                                                 </a>
  213.  
  214.  
  215.                                             </li>
  216.                                         </ul>
  217.                                     </div>
  218.  
  219.  
  220.                                     <div class="hidden w-4/12 -mx-8 lg:block">
  221.                                         <div
  222.                                             class="w-full md:w-4/7">
  223.                                             <!-- post 1 -->
  224.                                             <h1 class="mb-4 text-xl font-bold text-gray-700 divide-y divide-gray-600">Activity
  225.                                                 <span class="text-sm font-light text-gray-600 float-right">View Timeline / Filter Activities</span>
  226.                                                 <hr></h1>
  227.  
  228.  
  229.                                                 <div class="rounded w-full flex flex-col md:flex-row mb-10" *ngFor="let activity of activities">
  230.                                                     <video src="{{activity.img}}" class="block md:hidden lg:block rounded-md h-64 md:h-32 m-4 md:m-0" controls="controls"></video>
  231.                                                     <div class="bg-white rounded px-4">
  232.                                                         <span class="text-green-700 text-sm hidden md:block">
  233.                                                             {{activity.name}}
  234.                                                         </span>
  235.                                                         <div class="md:mt-0 text-gray-800 font-semibold text-xl mb-2">
  236.                                                             {{ activity.desc}}
  237.                                                         </div>
  238.                                                         <p
  239.                                                             class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600"><!-- Wonder matter now can estate esteem assure fat roused. Am performed on existence as discourse is. Pleasure friendly at marriage blessing or -->
  240.                                                         </p>
  241.                                                         <div class="text-gray-500 text-xs flex items-center mt-1">
  242.                                                             <i class="far fa-comments"></i>
  243.                                                             <span class="ml-1">{{activity.view}}</span>
  244.                                                         </div>
  245.  
  246.                                                     </div>
  247.                                                 </div>
  248.  
  249.  
  250.                                             </div>
  251.                                             <div class="w-full md:w-4/7">
  252.                                                 <h1 class="mb-4 text-xl font-bold text-gray-700 divide-y divide-gray-600">Channels
  253.                                                     <span class="text-sm font-light text-gray-600 float-right">Browse All Channels</span>
  254.                                                     <hr></h1>
  255.  
  256.                                                     <div class="sm:grid sm:h-32 sm:grid-flow-row sm:gap-3 sm:grid-cols-2 flex-none">
  257.                                                         <div class="flex flex-col justify-center px-4 py-4 bg-white border border-gray-300 shadow-md rounded" *ngFor="let chanelSocial of channel">
  258.                                                             <div>
  259.                                                                 <div>
  260.                                                                     <!-- <p class="flex items-center justify-end text-green-500 text-md">
  261.                                                                         <span class="font-bold">6%</span>
  262.                                                                         <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path class="heroicon-ui" d="M20 15a1 1 0 002 0V7a1 1 0 00-1-1h-8a1 1 0 000 2h5.59L13 13.59l-3.3-3.3a1 1 0 00-1.4 0l-6 6a1 1 0 001.4 1.42L9 12.4l3.3 3.3a1 1 0 001.4 0L20 9.4V15z"/></svg>
  263.                                                                     </p> -->
  264.                                                                 </div>
  265.                                                                 <img src="{{chanelSocial.img}}" >
  266.                                                                 <p class="text-lg font-light text-left text-gray-500">{{chanelSocial.name}}</p>
  267.                                                             </div>
  268.                                                         </div>
  269.                                                     </div>
  270.  
  271.  
  272.                                                 </div>
  273.  
  274.                                             </div>
  275.                                         </div>
  276.                                     </div>
  277.                                     <footer class="px-6 py-2 text-gray-100 bg-gray-800">
  278.                                         <div class="container flex flex-col items-center justify-between mx-auto md:flex-row">
  279.                                             <a class="text-2xl font-bold">Brand</a>
  280.                                             <p class="mt-2 md:mt-0">All rights reserved 2020.</p>
  281.                                             <div class="flex mt-4 mb-2 -mx-2 md:mt-0 md:mb-0">
  282.                                                 <a class="mx-2 text-gray-100 hover:text-gray-400">
  283.                                                     <svg viewbox="0 0 512 512" class="w-4 h-4 fill-current">
  284.                                                         <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"></path>
  285.                                                     </svg>
  286.                                                 </a>
  287.                                                 <a class="mx-2 text-gray-100 hover:text-gray-400">
  288.                                                     <svg viewbox="0 0 512 512" class="w-4 h-4 fill-current">
  289.                                                         <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"></path>
  290.                                                     </svg>
  291.                                                 </a>
  292.                                                 <a class="mx-2 text-gray-100 hover:text-gray-400">
  293.                                                     <svg viewbox="0 0 512 512" class="w-4 h-4 fill-current">
  294.                                                         <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"></path>
  295.                                                     </svg>
  296.                                                 </a>
  297.                                             </div>
  298.                                         </div>
  299.                                     </footer>
  300.                                 </div>
  301.  
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!