API tools faq
paste
ro8ot

Untitled

ro8ot
May 5th, 2020
50
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.60 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. <link rel="stylesheet" type="text/css" href="dcodes/payment_icons/dc_payment_icons.css" />
  421. <link rel="stylesheet" type="text/css" href="http://cdn.dcodes.net/2/payment_icons/dc_payment_icons.css" />
  422. <body>
  423. <nav>
  424. <div class="nav-wrapper">
  425. <a href=""><img style="width:70px;" src="https://i.imgur.com/ZMFgwj7.png"></a>
  426. <ul style="margin-left:30px;margin-top: -55px;">
  427. <li></li>
  428. <li></li>
  429. <li><a href="#" id="cart"><i class="fa fa-shopping-cart"></i><span class="badge">0</span></a></li>
  430. <li><a href="#">حراج</a></li>
  431. <li><a href="#">شوبي</a></li>
  432.  
  433. <li class="menu">
  434. <a href="#">المتجر</a>
  435. <ul class="submenu">
  436. <li class="aq1"><a href="#" class="aq">المنتجات</a></li><br>
  437. <li class="aq1"><a href="#" class="aq">الخدمات الرقميه</a></li><br>
  438. </ul>
  439. </li>
  440. <li><a href="#"> <input type="submit" class="Log" value="Logout"></a></li>
  441. </nav> </ul><br>
  442. </div><div class="CradMM">
  443. <h2 class="Heloo">مرحبا بك في موقع الاساطير</h2>
  444. <h4 style=" color:#000; margin-left:460px;">كيف نسطيع ان نخدمك؟</h4>
  445.  
  446. <span class="dc_payment_icons_flat_32 dc_visa_flat" title="Visa Electron"></span>
  447. <span class="dc_payment_icons_flat_32 dc_mastercard_flat" title="MasterCard"></span>
  448. <span class="dc_payment_icons_flat_32 dc_paypal_flat" title="PayPal"></span>
  449.  
  450. </div><br>
  451. <hr>
  452.  
  453. <h4 class="s1">Soon..</h4>
  454. <div class="endd">
  455. <li>2020 - BY legends</li>
  456. </div>
  457. <br>
  458.  
  459.  
  460. </body>
  461.  
  462. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!