ras ras

ras ras

  • NA
  • 154
  • 1.4k

css and javascript

Dec 16 2018 12:45 AM
Can you please help me to design the codepen code 
 
https://codepen.io/zeinab92/pen/JYKyBx
 
in this page login window comes first I need that plus icon comes first then as normal ...
 
HTML Code 
 
  1. <header>  
  2. <div id="darkBack"></div>  
  3. <div id="popUp">  
  4. <div id="close" class="close"><i class="fa fa-times"></i></div>  
  5. <div id="new"><span>NEW!</span></div>  
  6. <h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>  
  7. <br>  
  8. <a href="#" target="_blank" class="button">Visit Page</a>  
  9. </div>  
  10. <div id="plus"><span>NEW<br>  <i class="fa fa-plus"></i></span></div>  
  11. </header>  
  12. <div id="body"></div>  
CSS Code
  
  1. * {  
  2. margin0;  
  3. font-family'Source Sans Pro'sans-serif;  
  4. }  
  5. a {  
  6. text-decorationnone;  
  7. }  
  8. header {  
  9. backgroundurl(http://cdn.magdeleine.co/wp-content/uploads/2015/08/9524476479_ef867c36a4_o-1400x935.jpg);  
  10. background-size: cover;  
  11. background-positioncenter;  
  12. height100vh;  
  13. width100%;  
  14. }  
  15. #darkBack {  
  16. width100%;  
  17. height100vh;  
  18. background: rgba(765675, .15);  
  19. }  
  20. #popUp {  
  21. positionfixed;  
  22. max-width350px;  
  23. height225px;  
  24. background: rgba(2362402411);  
  25. border7px solid #fff;  
  26. bottom: 0;  
  27. margin-left0;  
  28. -webkit-transition: all 1s ease;  
  29. -moz-transition: all 1s ease;  
  30. -o-transition: all 1s ease;  
  31. transition: all 1s ease;  
  32. }  
  33. #new span {  
  34. background#fff;  
  35. positionabsolute;  
  36. color#1c8dc4;  
  37. padding4px 10px;  
  38. font-size16px;  
  39. font-weight600;  
  40. letter-spacing1px;  
  41. margin-top-5px;  
  42. }  
  43. #popUp .close {  
  44. color#464646;  
  45. right: 8px;  
  46. top: 0px;  
  47. positionabsolute;  
  48. font-size20px;  
  49. cursorpointer;  
  50. }  
  51. #popUp h2 {  
  52. font-size17px;  
  53. color#464646;  
  54. line-height24px;  
  55. font-weight400;  
  56. text-aligncenter;  
  57. margin-top40px;  
  58. padding0 20px;  
  59. }  
  60. #body {  
  61. height1200px;  
  62. background#eee;  
  63. }  
  64. a.button {  
  65. margin0 auto;  
  66. text-aligncenter;  
  67. right: 0;  
  68. left: 0;  
  69. positionabsolute;  
  70. width120px;  
  71. font-size15px;  
  72. color#fff;  
  73. border-bottom2px solid #18729f;  
  74. background#1c8dc4;  
  75. border-radius: 4px;  
  76. padding8px 0;  
  77. }  
  78. #plus {  
  79. positionfixed;  
  80. color#fff;  
  81. bottom: 15%;  
  82. font-size15px;  
  83. margin-left-425px;  
  84. -webkit-transition: all 1.25s ease;  
  85. -moz-transition: all 1.25s ease;  
  86. -o-transition: all 1.25s ease;  
  87. transition: all 1.25s ease;  
  88. cursorpointer;  
  89. text-alignleft;  
  90. letter-spacing1px;  
  91. }  
  92. #plus span {  
  93. positionabsolute;  
  94. margin-top38px;  
  95. left: 4px;  
  96. }  
  97. #plus::after {  
  98. content'';  
  99. displayblock;  
  100. displayrelative;  
  101. border-top55px solid transparent;  
  102. border-bottom55px solid transparent;  
  103. border-left55px solid #1c8dc4;  
  104. }  
  105. @media all and (max-width900px) {  
  106. #popUp {  
  107. margin-left-425px;  
  108. }  
  109. #plus {  
  110. margin-left0px;  
  111. }  
  112. }  
JavaScript Code 
  1. $(document).scroll(function() {  
  2. var scroll = $(this).scrollTop();  
  3. if (scroll >= 150) {  
  4. $("#popUp").css("margin-left""-425px");  
  5. $("#plus").css("margin-left""0px");  
  6. }  
  7. });  
  8. $("#plus").click(function() {  
  9. $("#popUp").css("margin-left""0px");  
  10. $("#plus").css("margin-left""-425px");  
  11. });  
  12. $("#close").click(function() {  
  13. $("#popUp").css("margin-left""-425px");  
  14. $("#plus").css("margin-left""0px");  
  15. });
https://codepen.io/zeinab92/pen/JYKyBx

Answers (1)