THE BOY’S NAME WAS SANTIAGO. DUSK WAS FALLING AS the boy arrived
with his herd at an abandoned church. The roof had fallen in long
diff --git a/error404.html b/error404.html
index 7faad68..e83e151 100644
--- a/error404.html
+++ b/error404.html
@@ -4,7 +4,7 @@
diff --git a/index.html b/index.html
index 8ea24b9..fc19046 100644
--- a/index.html
+++ b/index.html
@@ -1,37 +1,50 @@
+
-
-
- Search
-
-
-
-
+
-
-
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
index 3dc5c30..4ff64c9 100644
--- a/script.js
+++ b/script.js
@@ -1,10 +1,27 @@
+///text to search code
+function search() {
+ let textToSearch = document.getElementById("text-to-search").value;
+ let paragraph = document.getElementById("paragraph");
+ textToSearch = textToSearch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-function search(){
- let textToSearch = document.getElementById("text-to-search").value;
- let paragraph = document.getElementById("paragraph");
- textToSearch = textToSearch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+ let pattern = new
+ RegExp(`\\b${textToSearch}\\b`,"gi");
- let pattern = new RegExp(`${textToSearch}`,"gi");
+ paragraph.innerHTML = paragraph.textContent.replace(pattern, match => `
${match} `)
+}
+
+///sticky header code
+
+window.onscroll = function () {myFunction()};
+
+var header = document.getElementById("myHeader");
+var sticky = header.offsetTop;
+
+function myFunction() {
+ if (window.pageYOffset > sticky) {
+ header.classList.add("sticky");
+ } else {
+ header.classList.remove("sticky");
+ }
+}
- paragraph.innerHTML = paragraph.textContent.replace(pattern, match => `
${match} `)
-}
\ No newline at end of file
diff --git a/style.css b/style.css
index fca8256..b23782e 100644
--- a/style.css
+++ b/style.css
@@ -1,24 +1,20 @@
* {
padding:0;
- margin: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
}
body {
+ margin: 0;
height: 100%;
}
.container {
-
- width: auto;
- background-color: #ffffffff;
+ margin: 0 auto;
+ width: 56em;
+ background-color: #f5f5f5ff;
padding: 50px 40px;
- position: absolute;
- transform: translate(-50%, -0%);
- top: 50%;
- left: 50%;
border-radius: 5px;
box-shadow: 0 20px 35px rgba(60, 60, 60, 0.2);
}
@@ -53,6 +49,29 @@ a {
text-decoration: none;
}
a:hover {
- color: #000;
- transition: all .5s;
-}
\ No newline at end of file
+ color: #e61919;
+ transition: all 0.7s;
+}
+.top-container {
+ background-color: f1f1f1;
+ padding: 30px;
+ text-align: center;
+}
+.header {
+ padding: 20px 160px;
+ background: 555;
+ color: f1f1f1;
+ background-color: #b3b3b3;
+}
+.content {
+ padding: 16px;
+}
+.sticky{
+ position: fixed;
+ top: 0;
+ width: 100%;
+}
+.sticky + .content {
+ padding-top: 102px;
+}
+