diff --git a/public/assets/home/image1110.jpg b/public/assets/home/image1110.jpg new file mode 100644 index 0000000..85d56ef Binary files /dev/null and b/public/assets/home/image1110.jpg differ diff --git a/public/styles/styles.css b/public/styles/styles.css index 191459d..bd2f5d6 100644 --- a/public/styles/styles.css +++ b/public/styles/styles.css @@ -168,7 +168,7 @@ body{ left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); - color: white; + color: rgb(60, 46, 46); padding: 20px; transition: opacity 0.5s ease; opacity: 0; @@ -177,3 +177,108 @@ body{ .card:hover .card-overlay { opacity: 1; } + + +#container-queryfloating { + background-color: #fff; + position: fixed; + min-height: 60%; + max-height: 70%; + top: 50%; + padding: 30px; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1000; + display: grid; + grid-template-columns: 1fr 1fr; + place-items: center; + visibility: hidden; + line-height: 1.5; + box-shadow: 0 20px 30px rgba(0, 0, 0, 0.185); +} + +#container-queryfloating::after { + content: ''; + position: absolute; + width: 900px; + height: 900px; + border-radius: 50%; + z-index: -1; +} + +.container-close { + position: absolute; + top: -15px; + right: -15px; + background-color: #fff; + width: 45px; + height: 45px; + + display: grid; + place-items: center; + font-size: 1.7rem; + color: #2E4052; + border-radius: 50%; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.164); + cursor: pointer; +} + +#container-queryfloating img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.container-text { + padding: 10px 40px; +} + +.container-text h2 { + font-size: 1.2rem; + color: #1A2250; +} + +.container-text p { + font-size: 14px; + color: #3B4169; + margin: 10px 0; +} + +.container-text input, +.container-text button { + width: 100%; + border: none; + padding: 14px; + border-radius: 3px; +} + +.container-text input { + background-color: rgb(233, 233, 233); + margin: 5px 0 10px; + font-size: 1.5rem; + font-weight: 700; + color: #c92200; +} + +.container-text button { + background-image: linear-gradient(to right, #ff3f3f, #f16f32); + display: block; + color: #fff; + font-size: 1rem; + cursor: pointer; + box-shadow: 0 5px 20px #89caff94; + transition: box-shadow .3s ease-in-out; +} + +.container-text button:hover { + box-shadow: none; +} + +.container-text span { + display: block; + text-align: center; + margin: 20px 0 0; + color: #BABDCB; + font-size: 12px; +} \ No newline at end of file diff --git a/views/components/navbar.ejs b/views/components/navbar.ejs index 537d9cc..adabea4 100644 --- a/views/components/navbar.ejs +++ b/views/components/navbar.ejs @@ -88,5 +88,7 @@ - --> + + + diff --git a/views/components/numberInputPopup.ejs b/views/components/numberInputPopup.ejs new file mode 100644 index 0000000..76cbb6f --- /dev/null +++ b/views/components/numberInputPopup.ejs @@ -0,0 +1,52 @@ + + +
+
×
+ image +
+

Enter Phone Number

+

You are just one click away from
your dream living.

+ + + No spams included +
+
+ + + \ No newline at end of file diff --git a/views/pages/home.ejs b/views/pages/home.ejs index ac93a1f..eaa3665 100644 --- a/views/pages/home.ejs +++ b/views/pages/home.ejs @@ -4,6 +4,7 @@ <%- include('../includes/head', title="Home Ornate-Wall") %> <%- include('../components/navbar') %> + <%- include('../components/numberInputPopup') %> <%- include('../components/heroSection') %> <%- include('../components/Approach') %> <%- include('../components/DesignExpertiseSection') %>