TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
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
<
header
>
<
div
id
=
"darkBack"
>
</
div
>
<
div
id
=
"popUp"
>
<
div
id
=
"close"
class
=
"close"
>
<
i
class
=
"fa fa-times"
>
</
i
>
</
div
>
<
div
id
=
"new"
>
<
span
>
NEW!
</
span
>
</
div
>
<
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
>
<
br
>
<
a
href
=
"#"
target
=
"_blank"
class
=
"button"
>
Visit Page
</
a
>
</
div
>
<
div
id
=
"plus"
>
<
span
>
NEW
<
br
>
<
i
class
=
"fa fa-plus"
>
</
i
>
</
span
>
</
div
>
</
header
>
<
div
id
=
"body"
>
</
div
>
CSS Code
* {
margin
:
0
;
font-family
:
'Source Sans Pro'
,
sans-serif
;
}
a {
text-decoration
:
none
;
}
header {
background
:
url
(http://cdn.magdeleine.co/wp-content/uploads/
2015/08
/
9524476479
_ef
867c36
a
4
_o
-1400x935
.jpg);
background-
size
: cover;
background-position
:
center
;
height
:
100
vh;
width
:
100%
;
}
#darkBa
ck {
width
:
100%
;
height
:
100
vh;
background
: rgba(
76
,
56
,
75
, .
15
);
}
#popUp
{
position
:
fixed
;
max-width
:
350px
;
height
:
225px
;
background
: rgba(
236
,
240
,
241
,
1
);
border
:
7px
solid
#fff
;
bottom:
0
;
margin-left
:
0
;
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
transition:
all
1
s ease;
}
#new
span {
background
:
#fff
;
position
:
absolute
;
color
:
#1c8dc4
;
padding
:
4px
10px
;
font-size
:
16px
;
font-weight
:
600
;
letter-spacing
:
1px
;
margin-top
:
-5px
;
}
#popUp
.close {
color
:
#464646
;
right:
8px
;
top:
0px
;
position
:
absolute
;
font-size
:
20px
;
cursor
:
pointer
;
}
#popUp
h
2
{
font-size
:
17px
;
color
:
#464646
;
line-height
:
24px
;
font-weight
:
400
;
text-align
:
center
;
margin-top
:
40px
;
padding
:
0 20px
;
}
#body
{
height
:
1200px
;
background
:
#eee
;
}
a.button {
margin
:
0
auto
;
text-align
:
center
;
right:
0
;
left:
0
;
position
:
absolute
;
width
:
120px
;
font-size
:
15px
;
color
:
#fff
;
border-bottom
:
2px
solid
#18729f
;
background
:
#1c8dc4
;
border-radius:
4px
;
padding
:
8px
0
;
}
#plus
{
position
:
fixed
;
color
:
#fff
;
bottom:
15%
;
font-size
:
15px
;
margin-left
:
-425px
;
-webkit-transition:
all
1.25
s ease;
-moz-transition:
all
1.25
s ease;
-o-transition:
all
1.25
s ease;
transition:
all
1.25
s ease;
cursor
:
pointer
;
text-align
:
left
;
letter-spacing
:
1px
;
}
#plus
span {
position
:
absolute
;
margin-top
:
38px
;
left:
4px
;
}
#plus
::after {
content
:
''
;
display
:
block
;
display
:
relative
;
border-top
:
55px
solid
transparent
;
border-bottom
:
55px
solid
transparent
;
border-left
:
55px
solid
#1c8dc4
;
}
@media
all
and (
max-width
:
900px
) {
#popUp
{
margin-left
:
-425px
;
}
#plus
{
margin-left
:
0px
;
}
}
JavaScript Code
$(document).scroll(
function
() {
var
scroll = $(
this
).scrollTop();
if
(scroll >= 150) {
$(
"#popUp"
).css(
"margin-left"
,
"-425px"
);
$(
"#plus"
).css(
"margin-left"
,
"0px"
);
}
});
$(
"#plus"
).click(
function
() {
$(
"#popUp"
).css(
"margin-left"
,
"0px"
);
$(
"#plus"
).css(
"margin-left"
,
"-425px"
);
});
$(
"#close"
).click(
function
() {
$(
"#popUp"
).css(
"margin-left"
,
"-425px"
);
$(
"#plus"
).css(
"margin-left"
,
"0px"
);
});
https://codepen.io/zeinab92/pen/JYKyBx
Reply
Answers (
1
)
Suddenly I could not run the site locally
MVC with Jquery