API tools faq
paste
techhjork

Testimonial

techhjork
Jul 11th, 2020
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.90 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <style>
  4. *{
  5. margin:0;
  6. padding:0;
  7. box-sizing:border:box;
  8. font-family:sans-serif;
  9. transition:all 1s;
  10. }
  11.  
  12. body{
  13. overflow:hidden;
  14. width:100%;
  15. height:100vh;
  16. display:flex;
  17. justify-content:center;
  18. align-items:center;
  19. background:linear-gradient(123deg,#9E9E9E,#BDBDBD,#EEEEEE)
  20. }
  21. .bg{
  22. position:absolute;
  23. width:200%;
  24. height:15%;
  25. background:#F50057;
  26. transform:rotateZ(-10deg);
  27. z-index:-1;
  28. }
  29. .container{
  30. position:relative;
  31. width:400px;
  32. background:#ffffff;
  33. display:flex;
  34. justify-content:space-between;
  35. align-items:center;
  36. flex-direction:column;
  37. }
  38.  
  39. .top{
  40. width:100%;
  41. display:flex;
  42. display:flex;
  43. justify-content:space-between;
  44. }
  45. .progress-track{
  46. width:50%;
  47. height:4px;
  48. }
  49. .progress-fill{
  50. width:100%;
  51. height:4px;
  52. background:#F50057;
  53. }
  54. .comma{
  55. position:relative;
  56. color:#F50057;
  57. width:25%;
  58. transform:rotate(180deg);
  59. margin-top:-10%;
  60. margin-right:20px;
  61. }
  62. svg{
  63. width:80%;
  64. z-index:99999;
  65. }
  66. .quote{
  67. align-self:flex-start;
  68. font-size:1.4rem;
  69. }
  70. .main{
  71. width:89%;
  72. margin-top:20px;
  73. margin-left:1.2rem;
  74. align-self:flex-start;
  75. display:flex;
  76. }
  77. .navigation{
  78. align-self:flex-end;
  79. display:flex;
  80. flex-direction:column;
  81. }
  82. .navigation span{
  83. margin-left:10px;
  84. margin-top:10px;
  85. width:10px;
  86. height:10px;
  87. border-radius:50%;
  88. border:4px solid #F50057;
  89. cursor:pointer;
  90. }
  91.  
  92. footer{
  93. align-self:flex-end;
  94. width:100%;
  95. padding:1.6rem 0rem;
  96. background:#F50057;
  97. display:flex;
  98. justify-content:space-around;
  99. align-items:center;
  100. margin-top:80px;
  101. }
  102. footer .img-container{
  103. width:10%;
  104. height:70%;
  105. }
  106. footer .img-container img{
  107. width:90px;
  108. height:90px;
  109. object-fit:cover;
  110. border-radius:50%;
  111. }
  112. footer .about{
  113. width:40%;
  114. text-align:center;
  115. }
  116. footer .about .name{
  117. color:#ffffff;
  118. font-weight:bolder;
  119. font-size:2rem;
  120. }
  121. footer .about .place{
  122. color:#ffffff;
  123. }
  124. footer .about .place{
  125. color:#ffffff;
  126. }
  127. footer .about i{
  128. padding:0px 5px;
  129. }
  130. .active{
  131. background:rgba(245, 0, 86,.8);
  132. }
  133.  
  134. </style>
  135.  
  136. </head>
  137. <body>
  138. <div class="bg"></div>
  139. <div class="container">
  140. <div class="top">
  141. <div class="progress-track">
  142. <div class="progress-fill"></div>
  143. </div>
  144. <div class="comma">
  145. <svg class="svg-inline--fa fa-quote-left fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="quote-left" role="img" viewBox="0 0 512 512" data-fa-i2svg="">
  146. <path fill="#F50057" d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path>
  147. </svg>
  148. </div>
  149. </div>
  150. <div class="main">
  151. <div class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum sit impedit obcaecati tempore unde dolore molestias qui eius sapiente iure atque et cupiditate, iusto a, asperiores deleniti accusantium, odit dolorem.
  152. Nemo dignissimos magnam et laudantium esse placeat ipsum </div>
  153. <div class="navigation">
  154. <span class="prev active" title="Prev"></span>
  155. <span class="next" title="Next"></span>
  156. </div>
  157. </div>
  158. <footer class="">
  159. <div class="img-container">
  160. <img src="https://images.unsplash.com/photo-1569124589089-bb9bcc84af86?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="img-fluid">
  161. </div>
  162. <div class="about">
  163. <div class="name">Rohini</div>
  164. <div class="place"><i class="fas fa-map-marker-alt"></i>Abroad</div>
  165. </div>
  166. </footer>
  167. </div>
  168.  
  169.  
  170. <script>
  171. (()=>{
  172. const progressFill = document.querySelector(".progress-fill");
  173. const quote = document.querySelector(".quote");
  174. const navigatCont = document.querySelectorAll(".navigation");
  175. const navigation = document.querySelectorAll(".navigation span");
  176. const imgFluid = document.querySelector(".img-fluid");
  177. const name = document.querySelector(".name");
  178. const place = document.querySelector(".place");
  179. let index = 0
  180. let customers = [];
  181. //constructor
  182. function Customer(name,place,quote,img){
  183. this.name = name
  184. this.place = place
  185. this.quote = quote
  186. this.img = img
  187. }
  188.  
  189. function createCustomer(name,place,quote,img){
  190. let imgLink = `https://${img}`;
  191. let customer = new Customer(name,place,quote,imgLink)
  192. customers.push(customer);
  193. }
  194. createCustomer('John','New York', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?','images.unsplash.com/flagged/photo-1550164823-2f26b6633eed?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
  195. createCustomer('York','America', 'adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?','images.unsplash.com/photo-1522032715977-01edfb9b2286?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
  196. createCustomer('Rohini','Nrezealand', 'Lsit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?','images.unsplash.com/photo-1564409352502-e34daa835f36?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
  197. createCustomer('Ram','India', 'Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?','images.unsplash.com/photo-1559430211-b0ce47683c38?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
  198. createCustomer('Rohan','Africa', 'neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?','images.unsplash.com/photo-1491234809623-3fd0736eee1a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
  199.  
  200. //Navigation
  201. //Random
  202. // function data(){
  203. // let rand = Math.floor(Math.random()*customers.length);
  204. // console.log(customers[rand]["quote"]);
  205. // }
  206.  
  207. function contentChange(){
  208. name.textContent = customers[index]["name"];
  209. place.textContent =customers[index]["place"];
  210. quote.textContent = customers[index]["quote"];
  211. imgFluid.setAttribute("src",`${customers[index]["img"]}`)
  212. }
  213. const custlen = customers.length-1;
  214.  
  215. // ############################################
  216. /*This function not working i wanna add this for span according to containers array length
  217. indicators*/
  218. for(i=0;i<=custlen;i++){
  219. // navigatCont.append('<span></span>');
  220. navigatCont.innerHTML += '<span></span>'
  221. //navigatCont.insertAdjacentHTML('beforeend', '<span></span>');
  222. }
  223. /*for Next or Prev buttons*/
  224. navigation.forEach((navigate)=>{
  225. navigate.addEventListener("click",()=>{
  226.  
  227. if(navigate.classList.contains("prev")){
  228. if(index > 0){
  229. index--;
  230. contentChange()
  231. }else{
  232. index = custlen;
  233. contentChange()
  234. }
  235. console.log(index + customers[index]);
  236. }
  237. })
  238. navigate.addEventListener("click",()=>{
  239. if(navigate.classList.contains("next")){
  240. if(index < custlen){
  241. index++
  242. contentChange()
  243. }else{
  244. index = 0;
  245. contentChange()
  246. }
  247. console.log(index + customers[index]);
  248. }
  249. })
  250. })
  251. })()
  252.  
  253.  
  254. </script>
  255. </body>
  256. </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!