API tools faq
paste
Advertisement
ro8ot

Untitled

ro8ot
May 4th, 2020
104
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <link rel="stylesheet" href="style_cart.css">
  7.     <title></title>
  8. </head>
  9. <style media="screen">
  10.     @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
  11.     @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
  12.     *,
  13.     *:before,
  14.     *:after {
  15.         box-sizing: border-box;
  16.     }
  17.  
  18.     body {
  19.         font: 14px/22px "Lato", Arial, sans-serif;
  20.         background: #282825;
  21.     }
  22.  
  23.     .lighter-text {
  24.         color: #ABB0BE;
  25.     }
  26.  
  27.     .main-color-text {
  28.         color: #6394F8;
  29.     }
  30.  
  31.     nav {
  32.         padding: 1px 0 40px 0;
  33.         background: #F8F8F8;
  34.         font-size: 16px;
  35.     }
  36.  
  37.     nav .navbar-left {
  38.         float: left;
  39.     }
  40.  
  41.     nav .navbar-right {
  42.         float: right;
  43.     }
  44.  
  45.     nav ul li {
  46.         display: inline;
  47.         padding-left: 20px;
  48.     }
  49.  
  50.     nav ul li a {
  51.         color: #000;
  52.         text-decoration: none;
  53.     }
  54.  
  55.     nav ul li a:hover {
  56.         color: #1da0f1;
  57.     }
  58.  
  59.     .container {
  60.         margin: auto;
  61.         width: 80%;
  62.     }
  63.  
  64.     .badge {
  65.         background-color: #6394F8;
  66.         border-radius: 10px;
  67.         color: white;
  68.         display: inline-block;
  69.         font-size: 12px;
  70.         line-height: 1;
  71.         padding: 3px 7px;
  72.         text-align: center;
  73.         vertical-align: middle;
  74.         white-space: nowrap;
  75.     }
  76.  
  77.     .shopping-cart {
  78.         margin: 20px 0;
  79.         float: right;
  80.         background: white;
  81.         width: 320px;
  82.         position: relative;
  83.         border-radius: 3px;
  84.         padding: 20px;
  85.     }
  86.  
  87.     .lop {
  88.         height: 110px;
  89.     }
  90.  
  91.     .shopping-cart .shopping-cart-header {
  92.         border-bottom: 1px solid #E8E8E8;
  93.         padding-bottom: 15px;
  94.     }
  95.  
  96.     .shopping-cart .shopping-cart-header .shopping-cart-total {
  97.         float: right;
  98.     }
  99.  
  100.     .shopping-cart .shopping-cart-items {
  101.         padding-top: 20px;
  102.     }
  103.  
  104.     .shopping-cart .shopping-cart-items li {
  105.         margin-bottom: 18px;
  106.     }
  107.  
  108.     .shopping-cart .shopping-cart-items img {
  109.         float: left;
  110.         margin-right: 12px;
  111.     }
  112.  
  113.     .shopping-cart .shopping-cart-items .item-name {
  114.         display: block;
  115.         padding-top: 10px;
  116.         font-size: 16px;
  117.     }
  118.  
  119.     .shopping-cart .shopping-cart-items .item-price {
  120.         color: #6394F8;
  121.         margin-right: 8px;
  122.     }
  123.  
  124.     .shopping-cart .shopping-cart-items .item-quantity {
  125.         color: #ABB0BE;
  126.     }
  127.  
  128.     .shopping-cart:after {
  129.         bottom: 100%;
  130.         left: 89%;
  131.         border: solid transparent;
  132.         content: " ";
  133.         height: 0;
  134.         width: 0;
  135.         position: absolute;
  136.         pointer-events: none;
  137.         border-bottom-color: white;
  138.         border-width: 8px;
  139.         margin-left: -8px;
  140.     }
  141.  
  142.     .cart-icon {
  143.         color: #515783;
  144.         font-size: 24px;
  145.         margin-right: 7px;
  146.         float: left;
  147.     }
  148.  
  149.     .button {
  150.         background: #6394F8;
  151.         color: white;
  152.         text-align: center;
  153.         padding: 12px;
  154.         text-decoration: none;
  155.         display: block;
  156.         border-radius: 3px;
  157.         font-size: 16px;
  158.         margin: 25px 0 15px 0;
  159.     }
  160.  
  161.     .button:hover {
  162.         background: #729ef9;
  163.     }
  164.  
  165.     .clearfix:after {
  166.         content: "";
  167.         display: table;
  168.         clear: both;
  169.     }
  170.  
  171.     *,
  172.     *::before,
  173.     *::after {
  174.         box-sizing: border-box;
  175.     }
  176.  
  177.     .tol {
  178.         width: 300px;
  179.         border-radius: 5px;
  180.     }
  181.  
  182.     .tol1 {
  183.         width: 200px;
  184.         border-radius: 5px;
  185.     }
  186.  
  187.     .card {
  188.         position: relative;
  189.         width: 250px;
  190.         height: 200px;
  191.         padding: 13px;
  192.         overflow: hidden;
  193.         border-radius: 5px;
  194.         box-shadow: 0px 4px 10px rgba(10, 0, 10, 0.3);
  195.         transition: 0.5s;
  196.     }
  197.  
  198.     .img_ {
  199.         position: relative;
  200.         top: -7%;
  201.         width: 270px;
  202.         height: 205px;
  203.     }
  204.  
  205.     .card:hover {
  206.         box-shadow: 10px 4px 10px rgba(255, 255, 255, 0.3);
  207.         transition: 0.5s;
  208.     }
  209.     /*Light blue cover above the slide show*/
  210.  
  211.     .card::after {
  212.         content: '';
  213.         position: absolute;
  214.         left: 0;
  215.         top: 0;
  216.         z-index: 90;
  217.         display: block;
  218.         background-color: rgba(140, 22, 115, 0.2);
  219.     }
  220.  
  221.     .card_part {
  222.         position: absolute;
  223.         top: 555;
  224.         left: 0;
  225.         z-index: 7;
  226.         display: flex;
  227.         width: 100%;
  228.         height: 100%;
  229.         transform: translateX( 700px);
  230.         animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
  231.     }
  232.  
  233.     .card_part.card_part-two {
  234.         z-index: 6;
  235.         animation-delay: 7s;
  236.     }
  237.  
  238.     .card_part.card_part-three {
  239.         z-index: 5;
  240.         animation-delay: 14s;
  241.     }
  242.  
  243.     .card_part.card_part-four {
  244.         z-index: 4;
  245.         animation-delay: 21s;
  246.     }
  247.  
  248.     @keyframes opaqTransition {
  249.         3% {
  250.             transform: translateX( 0);
  251.         }
  252.         25% {
  253.             transform: translateX( 0);
  254.         }
  255.         28% {
  256.             transform: translateX( -700px);
  257.         }
  258.         100% {
  259.             transform: translateX( -700px);
  260.         }
  261.     }
  262.  
  263.     .card__ {
  264.         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  265.         width: 200px;
  266.         height: 280px;
  267.         text-align: center;
  268.         font-family: arial;
  269.         background-color: #1da0f1;
  270.         display: inline-block;
  271.         margin-left: 10px;
  272.             border-radius: 5px;
  273.     }
  274.  
  275.     .price__ {
  276.         color: rgb(22, 2, 2);
  277.         font-size: 22px;
  278.     }
  279.  
  280.     .card__ button {
  281.           border-radius: 3px;
  282.         border: none;
  283.         outline: 0;
  284.         padding: 12px;
  285.         color: white;
  286.         background-color: #000;
  287.         text-align: center;
  288.         cursor: pointer;
  289.         width: 100%;
  290.         font-size: 18px;
  291.     }
  292.  
  293.     .card__ button:hover {
  294.         opacity: 0.7;
  295.             border-radius: 9px;
  296.             box-sizing: content-box;
  297.      
  298.           border: 3px solid #1da0f1;
  299.     }
  300.     .img_{
  301.     border-radius: 5px;
  302.     position: static;
  303.  
  304.     }
  305.     .r{
  306.           border-radius: 5px;
  307.     }
  308.     ul {
  309.   margin: 0;
  310.   padding: 0;
  311.   list-style: none
  312. }
  313.  
  314.  
  315. .navigation > aq1 {
  316.   color: #282825;
  317.   padding: 15px 10px;
  318.   float: left
  319. }
  320.  
  321. .navigation > aq1 > aq {
  322.   color: #282825;
  323.   text-decoration: none
  324. }
  325.  
  326. .menu {
  327.   position: relative
  328. }
  329.  
  330. .menu .submenu {
  331.   position: absolute;
  332.   top: 200px;
  333.   left: 0;
  334.   width: 150px;
  335.   background-color: #fff;
  336.   position: absolute;
  337.   left: 10px;
  338.   top: 10px;
  339.   padding: 10px;
  340.   box-shadow: 1px 3px 12px rgba(55, 55, 0, .5);
  341.   transition:  11.100s ease-in;
  342.  
  343.   display: none
  344. }
  345.  
  346. .menu .submenu aq1 {
  347.   padding: 1px
  348.   border-radius: 3px;
  349.  
  350. }
  351.  
  352. .menu .submenu aq1 aq {
  353.   color: #282825;
  354.   border-radius: 3px;
  355.  
  356.   text-decoration: none
  357. }
  358.  
  359. .menu .submenu aq1 aq:hover {
  360.   color: #282825
  361.   border-radius: 3px;
  362.  
  363. }
  364.  
  365. .menu .submenu:before {
  366.   border-left: 6px solid transparent;
  367.   border-right: 6px solid transparent;
  368.   border-bottom: 6px solid #282825;
  369.   content: "";
  370.   height: 0;
  371.   left: 32px;
  372.   border-radius: 3px;
  373.  
  374.   position: absolute;
  375.   top:-3px;
  376.   width: 0;
  377. }
  378. .CradMM{
  379.   height:150px;
  380.   box-sizing: content-box;
  381. background-color:#fff;
  382. padding: 3px;
  383. border: 3px solid #1da0f1;
  384. }
  385. nav .menu:hover .submenu {
  386.   display: block
  387. }
  388. .fa-cc-visa:before{content:"\f1f0";
  389. }
  390. .fa{margin-top:-6vh;display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:ma}
  391. .Heloo{
  392.   color:#1da0f1;
  393.   margin-left:430px;
  394. }
  395. .fa-paypal:before{content:"\f1ed"}
  396. .w1{
  397. }.toph{
  398. margin-left:900px;
  399. }
  400. .s1{
  401.   margin-left:15px;
  402.   margin-top:56px;
  403.   text-align: center;
  404.   background-color:#1da0f1 ;
  405.  
  406. }
  407. .Log{
  408.   background-color:red ;
  409. color:#fff;
  410. border-radius: 6px;
  411.  
  412. }
  413. .endd{
  414.   background-color:#fff;
  415.   height:20px;
  416.   text-align: center;
  417.  
  418. }
  419. </style>
  420.  
  421. <body>
  422.     <nav>
  423.         <div class="nav-wrapper">
  424.             <a href=""><img style="width:70px;" src="https://i.imgur.com/ZMFgwj7.png"></a>
  425.             <ul style="margin-left:30px;margin-top: -55px;">
  426.               <li></li>
  427.               <li></li>
  428.                 <li><a href="#" id="cart"><i class="fa fa-shopping-cart"></i><span class="badge">0</span></a></li>
  429.                 <li><a href="#">حراج</a></li>
  430.                 <li><a href="#">شوبي</a></li>
  431.              
  432.                 <li class="menu">
  433.   <a href="#">المتجر</a>
  434.   <ul class="submenu">
  435.     <li class="aq1"><a href="#" class="aq">المنتجات</a></li><br>
  436. <li class="aq1"><a href="#" class="aq">الخدمات الرقميه</a></li><br>
  437.   </ul>
  438. </li>
  439. <li><a href="#">  <input type="submit" class="Log" value="Logout"></a></li>
  440.   </nav>      </ul><br>
  441.     </div><div class="CradMM">
  442.       <h2 class="Heloo">مرحبا بك في موقع الاساطير</h2>
  443.       <h4 style="  color:#000; margin-left:460px;">كيف نسطيع ان نخدمك؟</h4>
  444.      
  445.       <i class="fa fa-cc-visa" style="font-size:48px;color:#282825;"></i>
  446.        <i class="fa fa-paypal" style="font-size:48px;color:#282825;"></i>
  447.     </div><br>
  448.     <hr>
  449.     <div class="card">
  450.         <div class="card_part card_part-one">
  451.             <img src="https://i.imgur.com/jkzntPd.jpg" class="img_">
  452.         </div>
  453.         <!-- Photo 2 -->
  454.         <div class="card_part card_part-two">
  455.             <img src="https://i.imgur.com/uNTZwa7.jpg" class="img_">
  456.         </div>
  457.         <!-- Photo 3 -->
  458.         <div class="card_part card_part-three">
  459.             <img src="https://i.imgur.com/jkzntPd.jpg" class="img_">
  460.         </div>
  461.         <!-- Photo 4 -->
  462.         <div class="card_part card_part-four">
  463.             <img src="https://i.imgur.com/uNTZwa7.jpg" class="img_">
  464.         </div>
  465.     </div>
  466.     <hr>
  467.     <!-- ================================== Start Shop Cart ==================================  -->
  468.  
  469. <h4 class="s1">Soon..</h4>
  470.     <div class="card__">
  471.    
  472.         <img src="https://i.imgur.com/jkzntPd.jpg" class="r" style="width:100%">
  473.         <h1>gaming chair</h1>
  474.         <p class="price__">600.SAR</p>
  475.         <p>test test.</p>
  476.         <p><button>Add to Cart</button></p>
  477.     </div>
  478.    
  479.     <div class="card__">
  480.         <img src="https://i.imgur.com/jkzntPd.jpg" class="r" style="width:100%;  border-radius: 5px;">
  481.         <h1>gaming chair</h1>
  482.         <p class="price__">600.SAR</p>
  483.         <p>test test.</p>
  484.         <p><button>Add to Cart</button></p>
  485.     </div>
  486.     <div class="card__">
  487.         <img src="https://i.imgur.com/jkzntPd.jpg" class="r" style="width:100%">
  488.         <h1>gaming chair</h1>
  489.         <p class="price__">600.SAR</p>
  490.         <p>test test.</p>
  491.         <p><button>Add to Cart</button></p>
  492.        
  493.      
  494.     </div>
  495.   <h4 class="s1">Soon..</h4>
  496. <div class="endd">
  497.   <li>2020 - BY legends</li>
  498. </div>
  499. <br>
  500.  
  501.  
  502. </body>
  503.  
  504. </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!