API tools faq
paste
Advertisement
ro8ot

3

ro8ot
Jun 19th, 2020
214
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.97 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  7.     <title>Legends</title>
  8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  9.     <link rel="stylesheet" href="assets/css/Highlight-Blue.css">
  10.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
  11.     <link rel="stylesheet" href="assets/css/Navigation-with-Button.css">
  12.     <link rel="stylesheet" href="assets/css/Simple-Slider.css">
  13.     <link rel="stylesheet" href="assets/css/styles.css">
  14. </head>
  15.  
  16. <body>
  17.   <nav class="navbar navbar-light navbar-expand-md navigation-clean-button">
  18.       <div class="container"><a class="navbar-brand" href="#">Legends</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
  19.           <div class="collapse navbar-collapse"
  20.              id="navcol-1">
  21.               <ul class="nav navbar-nav mr-auto">
  22.                   <li class="nav-item" role="presentation"><a class="nav-link active" href="#">المنتجات الرئيسيه</a></li>
  23.                   <li class="nav-item" role="presentation"><a class="nav-link" href="#">المنتجات الفرعيه</a></li>
  24.                   <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#">الاقسام</a>
  25.                       <div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#">شوبي</a><a class="dropdown-item" role="presentation" href="#">حراج</a></div>
  26.                   </li>
  27.                       <div class="intro"><a class="btn btn-primary" role="button" href="#">Admin</a></div>
  28.               </ul><span class="navbar-text actions"> <a class="login" href="#">Log In</a><a class="btn btn-light action-button" role="button" href="#" style="background-color: #007bff;">Sign Up</a></span></div>
  29.       </div>
  30.   </nav>
  31.     <div class="article-list">
  32.         <div class="container">
  33.  
  34.             <h2 class="text-center">موقع الاساطير</h2>
  35.             <hr>
  36.             <p class="text-center">موقع الاساطير, موقع قائم على بيع المنتجات الرقميه والبرامج وتكوين المتاجر</p>
  37.             <div class="swiper-slide" style="background-image:url(https://placeholdit.imgix.net/~text?txtsize=68&amp;txt=Slideshow+Image&amp;w=1920&amp;h=500);"></div>
  38.         </div>
  39.     </div>
  40.     <div class="simple-slider">
  41.         <div class="swiper-container">
  42.             <div class="swiper-wrapper">
  43.  
  44.                 <div class="swiper-slide" style="background-image:url(https://placeholdit.imgix.net/~text?txtsize=68&amp;txt=Slideshow+Image&amp;w=1920&amp;h=500);"><center><img src="assets/img/building.jpg"></center></div>
  45.                 <div class="swiper-slide" style="background-image:url(https://placeholdit.imgix.net/~text?txtsize=68&amp;txt=Slideshow+Image&amp;w=1920&amp;h=500);"></div>
  46.                 <div class="swiper-slide" style="background-image:url(https://placeholdit.imgix.net/~text?txtsize=68&amp;txt=Slideshow+Image&amp;w=1920&amp;h=500);"></div>
  47.                 <div class="swiper-slide" style="background-image:url(https://placeholdit.imgix.net/~text?txtsize=68&amp;txt=Slideshow+Image&amp;w=1920&amp;h=500);"></div>
  48.             </div>
  49.             <div class="swiper-pagination"></div>
  50.             <div class="swiper-button-prev"></div>
  51.             <div class="swiper-button-next"></div>
  52.         </div>
  53.     </div>
  54.     <div class="simple-slider">
  55.         <div class="swiper-container">
  56.             <div class="swiper-pagination"></div>
  57.             <div class="swiper-button-prev"></div>
  58.             <div class="swiper-button-next"></div>
  59.         </div>
  60.     </div>
  61.     <div class="article-list">
  62.         <div class="container">
  63.             <div class="intro">
  64.                 <hr>
  65.                 <h2 class="text-center">لماذا نحن؟</h2>
  66.                 <p class="text-center"></p>
  67.             </div>
  68.             <div class="row articles">
  69.                 <div class="col-sm-6 col-md-4 item"><a href="#"><img class="img-fluid" src="https://assets.materialup.com/uploads/81597ced-06af-492c-a9b5-8df375ee7fd1/preview.gif"></a>
  70.                     <h3 class="name"><br>الاستخدام<br><br></h3>
  71.                     <p class="description"><br>سهل وسلس ف التصفح والاستخدام وفي يدعم جميع الاجهزه<br><br></p><a class="action" href="#"></a></div>
  72.                 <div class="col-sm-6 col-md-4 item"><a href="#"><img class="img-fluid" src="https://cdn.dribbble.com/users/688241/screenshots/5217438/subscribe-button.gif"></a>
  73.                     <h3 class="name"><br>الاشتراك<br><br></h3>
  74.                     <p class="description"><br>الاشتراك في اي وقت في اي مكان والتفعيل سهل ويمكنك تغير الجهاز في وقت مابغيت<br><br></p><a class="action" href="#"></a></div>
  75.                 <div class="col-sm-6 col-md-4 item"><a href="#"></a><img class="img-fluid" src="https://cdn.dribbble.com/users/205964/screenshots/3491880/payment.gif">
  76.                     <h3 class="name">طرق الدفع</h3>
  77.                     <p class="description">بيبال حاليا</p><a class="action" href="#"></a></div>
  78.                 <div class="col-sm-6 col-md-4 item"><a href="#"><img class="img-fluid" src="https://www.get33.site/wp-content/uploads/2020/03/laptop.gif"></a>
  79.                     <h3 class="name">الدعم</h3>
  80.                     <p class="description"><br>الدعم متواجد على مدار 24س لحل دميع المشاكل الشراء او&nbsp; استلام السلع والاقتراحات<br><br></p><a class="action" href="#"></a></div>
  81.             </div>
  82.         </div>
  83.     </div>
  84.     <div class="highlight-phone">
  85.         <div class="container">
  86.             <h2 class="text-center">!متجرك علينا</h2>
  87.             <p class="text-center">..نقدر نوفر لك متجر الخاص فيك لبيع الحسابات, السريالات والخ</p>      <p class="text-center">انشئ متجرك الان مجاني</p>
  88.             <div class="buttons"></div>
  89.         </div>
  90.         <div class="container">
  91.             <div class="row">
  92.                 <div class="col-md-8">
  93.                     <div class="intro"><a class="btn btn-primary" role="button" href="#">انشاء متجرك</a></div>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.     </div>
  98.     <style >
  99.     .highlight-phone {
  100.       color: #313437;
  101.       background-color: #eef4f7;
  102.       padding: 50px 0 55px;
  103.       overflow: hidden;
  104.     }
  105.     @media (max-width:767px) {
  106.       .highlight-phone {
  107.         text-align: center;
  108.       }
  109.     }
  110.     .highlight-phone .intro p {
  111.       margin-bottom: 35px;
  112.     }
  113.  
  114.     .highlight-phone .intro .btn {
  115.       padding: 16px 32px;
  116.       border: none;
  117.       background: none;
  118.       box-shadow: none;
  119.       text-shadow: none;
  120.       opacity: 0.9;
  121.       text-transform: uppercase;
  122.       font-weight: bold;
  123.       font-size: 13px;
  124.       letter-spacing: 0.4px;
  125.       line-height: 1;
  126.     }
  127.     .article-list {
  128.       color: #313437;
  129.       background-color: #fff;
  130.     }
  131.  
  132.     .article-list p {
  133.       color: #7d8285;
  134.     }
  135.  
  136.     .article-list h2 {
  137.       font-weight: bold;
  138.       margin-bottom: 40px;
  139.       padding-top: 40px;
  140.       color: inherit;
  141.     }
  142.  
  143.     .highlight-phone .intro .btn-primary {
  144.       background-color: #055ada;
  145.       color: #fff;
  146.     }
  147.     @media (max-width:767px) {
  148.       .article-list h2 {
  149.         margin-bottom: 25px;
  150.         padding-top: 25px;
  151.         font-size: 24px;
  152.       }
  153.     }
  154.  
  155.     .article-list .intro {
  156.       font-size: 16px;
  157.       max-width: 500px;
  158.       margin: 0 auto;
  159.     }
  160.  
  161.     .article-list .intro p {
  162.       margin-bottom: 0;
  163.     }
  164.  
  165.     .article-list .articles {
  166.       padding-bottom: 40px;
  167.     }
  168.  
  169.     .article-list .item {
  170.       padding-top: 50px;
  171.       min-height: 425px;
  172.       text-align: center;
  173.     }
  174.  
  175.     .article-list .item .name {
  176.       font-weight: bold;
  177.       font-size: 16px;
  178.       margin-top: 20px;
  179.       color: inherit;
  180.     }
  181.  
  182.     .article-list .item .description {
  183.       font-size: 14px;
  184.       margin-top: 15px;
  185.       margin-bottom: 0;
  186.     }
  187.  
  188.     .article-list .item .action {
  189.       font-size: 24px;
  190.       width: 24px;
  191.       margin: 22px auto 0;
  192.       line-height: 1;
  193.       display: block;
  194.       color: #4f86c3;
  195.       opacity: 0.85;
  196.       transition: opacity 0.2s;
  197.       text-decoration: none;
  198.     }
  199.  
  200.     .article-list .item .action:hover {
  201.       opacity: 1;
  202.     }
  203.  
  204.  
  205.     </style>
  206.     <div class="article-list">
  207.         <div class="container">
  208.             <div class="intro"></div>
  209.             <div class="row articles">
  210.                 <div class="col-sm-6 col-md-4 item"><a href="#"><img class="img-fluid" src="https://temilo.com/wp-content/uploads/2018/12/10_coding_.gif"></a>
  211.                     <h3 class="name">التسليم</h3>
  212.                     <p class="description">التسليم تلقائي وسريع&nbsp;</p><a class="action" href="#"></a></div>
  213.                 <div class="col-sm-6 col-md-4 item"><a href="#"></a><img class="img-fluid" src="https://cdn.dribbble.com/users/205964/screenshots/3491880/payment.gif">
  214.                     <h3 class="name">طرق الدفع</h3>
  215.                     <p class="description">بيبال حاليا</p><a class="action" href="#"></a></div>
  216.             </div>
  217.         </div>
  218.     </div>
  219.     <script src="assets/js/jquery.min.js"></script>
  220.     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
  221.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
  222.     <script src="assets/js/Simple-Slider.js"></script>
  223. </body>
  224.  
  225. </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!