Skip to content

Commit 2d5e671

Browse files
singhofensinghofen
authored
Add files via upload
1 parent e696101 commit 2d5e671

File tree

4 files changed

+124
-0
lines changed

4 files changed

+124
-0
lines changed

‎modal-css-javascript/chaseNY.JPG

99 KB
Loading

‎modal-css-javascript/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="modal.css">
8+
<title>CSS Modal</title>
9+
</head>
10+
<body>
11+
<div class="typewriter"><h1>CSS, Modal & TypeWriter Effect: <small>Refresh & repeat </small></h1></div>
12+
13+
14+
15+
<button id="button" onclick="typeWriter()">Hey! Click Here too!!</button>
16+
<p id="typeWriter"></p>
17+
<br><br><br>
18+
19+
<a href="#modalWindow">Click for Modal </a>
20+
<div id="modalWindow" class="modalBox">
21+
<div>
22+
<a class="closeWindow" href="#close">X Surprise it's a Modal :)</a>
23+
<p></p>
24+
</div>
25+
</div>
26+
<script src="modal.js"></script>
27+
</body>
28+
</html>

‎modal-css-javascript/modal.css

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.modalBox {
2+
position: fixed; /* create the modal window layer, and have it fill the entire screen */
3+
top: 0;
4+
right: 0;
5+
left: 0;
6+
bottom: 0;
7+
background: rgba(0,0,0,0.8); /* set the modal window layer's background color to a translucent black */
8+
z-index: 99999; /* put the layer on top of every other layer */
9+
opacity:0; /* make the layer invisible intially */
10+
pointer-events: none;
11+
12+
}
13+
14+
.modalBox:target {
15+
opacity:1; /* make the modal window layer visible */
16+
pointer-events: auto;
17+
position: fixed;
18+
}
19+
20+
.modalBox > div {
21+
width: 1500px; /* set the window's width */
22+
height: 1500px;
23+
position: relative;
24+
margin: 9% auto; /* center the window horizontally */
25+
padding: 5px;
26+
background-image: url("chaseNY.JPG");
27+
/* background-image: url("https://images.pexels.com/photos/271955/pexels-photo-271955.jpeg?auto=compress&cs=tinysrgb&h=350");*/
28+
background-repeat:no-repeat;
29+
}
30+
p, a{
31+
color: white;
32+
font-size: 20px;
33+
font-family: cursive;
34+
text-decoration: none;
35+
margin: 15px;
36+
}
37+
body{
38+
background-color: grey;
39+
/* background-image: url(""); optional*/
40+
}
41+
body a:hover{
42+
color: rgb(28, 247, 28);
43+
}
44+
45+
#button:hover{
46+
color: red;
47+
}
48+
#button {
49+
color: green;
50+
51+
}
52+
button{
53+
border-radius: 50px;
54+
padding: 20px;
55+
border: none;
56+
font-weight: 700;
57+
font-family: cursive;
58+
}
59+
small{
60+
font-size: 18px;
61+
color: rgb(19, 247, 19);
62+
}
63+
.typewriter h1 {
64+
text-align: center;
65+
overflow: hidden; /* Ensures the content is not revealed until the animation */
66+
border-right: .15em solid orange; /* The typwriter cursor */
67+
white-space: nowrap; /* Keeps the content on a single line */
68+
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
69+
letter-spacing: .15em; /* Adjust as needed */
70+
animation:
71+
typing 4.5s steps(44, end),
72+
blink-caret .75s step-end infinite;
73+
}
74+
75+
/* The typing effect */
76+
@keyframes typing {
77+
from { width: 0 }
78+
to { width: 80% }
79+
}
80+
81+
/* The typewriter cursor effect */
82+
@keyframes blink-caret {
83+
from, to { border-color: transparent }
84+
50% { border-color: orange; }
85+
}

‎modal-css-javascript/modal.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var i = 0;
2+
var txt = 'Click Modal Window to see the modal!'; /* The text */
3+
var speed = 50; /* The speed/duration of the effect in milliseconds */
4+
5+
function typeWriter() {
6+
if (i < txt.length) {
7+
document.getElementById("typeWriter").innerHTML += txt.charAt(i);
8+
i++;
9+
setTimeout(typeWriter, speed);
10+
}
11+
}

0 commit comments

Comments
 (0)