1
Answer

css and javascript

ras ras

ras ras
6y
682
1
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. margin: 0;  
  3. font-family: 'Source Sans Pro', sans-serif;  
  4. }  
  5. a {  
  6. text-decoration: none;  
  7. }  
  8. header {  
  9. background: url(http://cdn.magdeleine.co/wp-content/uploads/2015/08/9524476479_ef867c36a4_o-1400x935.jpg);  
  10. background-size: cover;  
  11. background-position: center;  
  12. height: 100vh;  
  13. width: 100%;  
  14. }  
  15. #darkBack {  
  16. width: 100%;  
  17. height: 100vh;  
  18. background: rgba(76, 56, 75, .15);  
  19. }  
  20. #popUp {  
  21. position: fixed;  
  22. max-width: 350px;  
  23. height: 225px;  
  24. background: rgba(236, 240, 241, 1);  
  25. border: 7px solid #fff;  
  26. bottom: 0;  
  27. margin-left: 0;  
  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. position: absolute;  
  36. color: #1c8dc4;  
  37. padding: 4px 10px;  
  38. font-size: 16px;  
  39. font-weight: 600;  
  40. letter-spacing: 1px;  
  41. margin-top: -5px;  
  42. }  
  43. #popUp .close {  
  44. color: #464646;  
  45. right: 8px;  
  46. top: 0px;  
  47. position: absolute;  
  48. font-size: 20px;  
  49. cursor: pointer;  
  50. }  
  51. #popUp h2 {  
  52. font-size: 17px;  
  53. color: #464646;  
  54. line-height: 24px;  
  55. font-weight: 400;  
  56. text-align: center;  
  57. margin-top: 40px;  
  58. padding: 0 20px;  
  59. }  
  60. #body {  
  61. height: 1200px;  
  62. background: #eee;  
  63. }  
  64. a.button {  
  65. margin: 0 auto;  
  66. text-align: center;  
  67. right: 0;  
  68. left: 0;  
  69. position: absolute;  
  70. width: 120px;  
  71. font-size: 15px;  
  72. color: #fff;  
  73. border-bottom: 2px solid #18729f;  
  74. background: #1c8dc4;  
  75. border-radius: 4px;  
  76. padding: 8px 0;  
  77. }  
  78. #plus {  
  79. position: fixed;  
  80. color: #fff;  
  81. bottom: 15%;  
  82. font-size: 15px;  
  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. cursor: pointer;  
  89. text-align: left;  
  90. letter-spacing: 1px;  
  91. }  
  92. #plus span {  
  93. position: absolute;  
  94. margin-top: 38px;  
  95. left: 4px;  
  96. }  
  97. #plus::after {  
  98. content: '';  
  99. display: block;  
  100. display: relative;  
  101. border-top: 55px solid transparent;  
  102. border-bottom: 55px solid transparent;  
  103. border-left: 55px solid #1c8dc4;  
  104. }  
  105. @media all and (max-width: 900px) {  
  106. #popUp {  
  107. margin-left: -425px;  
  108. }  
  109. #plus {  
  110. margin-left: 0px;  
  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)
Next Recommended Forum