${result.snippet}
+ `; + + searchResults.appendChild(resultItme); + }); +} + +searchForm.addEventListener("submit", async (e) => { + e.preventDefault(); + + const query = searchInput.value.trim(); + + if (!query) { + searchResults.innerHTML = "Please enter a valid search term.
"; + return; + } + + searchResults.innerHTML = "No results found.
"; + } else { + displayResults(results.query.search); + } + } catch (error) { + console.error(error); + searchResults.innerHTML = `An error occured while searching. Please try again later.
`; + } +}); + +// Event listener for the theme toggler +themeToggler.addEventListener("click", () => { + body.classList.toggle("dark-theme"); + if (body.classList.contains("dark-theme")) { + themeToggler.textContent = "Dark"; + themeToggler.style.background = "#fff"; + themeToggler.style.color = "#333"; + } else { + themeToggler.textContent = "Light"; + themeToggler.style.border = "2px solid #ccc"; + themeToggler.style.color = "#333"; + } +}); diff --git a/100. Wikipedia Clone/index.html b/100. Wikipedia Clone/index.html new file mode 100644 index 0000000..c65e204 --- /dev/null +++ b/100. Wikipedia Clone/index.html @@ -0,0 +1,25 @@ + + + + +WE CONSTRUCT YOUR FUTURE
+ Learn More +Construction
+ARCHITECTURE PLANING
+CONSULTANCY
+1
+HIGH QUALIFIED & TECHNICAL PROFESSIONALS
+2
+ADVANCE PLANING
+3
+STABILITY RESOURCES & EXPERTIES
+4
+PASSION, INTEGRITY, & PUNCTUALITY
+5
+BREADTH OF SERVICES
+ARCHITECTURE DESIGN
+1
+2D & 3D MODELING
+2
+INTERIAL & EXTERIOR DESIGN
+3
+LANDSCAPING & OUTDOOR GARDENING
+4
++ ELECTRICAL, PLUMBING & SEWERAGE DRAWING PLANE. +
+5
+SOIL INVESTIGATION
+CONSTRUCTION
+ +1
+RESIDENTIAL & COMMERCIAL PROJECTS
+2
+TURNKEY PROJECT (WITH MATERIAL)
+3
+LANDSCAPING & OUTDOOR GARDENING
+4
+DEMOLATION
+5
+RENOVATION & RE-CONSTRUCTION
+REAL ESTATE
+1
++ B - 17 MULTI GARDEN
+2
+PARK VIEW CITY
+3
+BEAUTY OF HILLS
+4
++ FAISAL MARGALLAH CITY. +
+5
+BLUE WORLD CITY
+
+
+ Each fresh meal is perfectly sized for 1 person to enjoy at 1
+ sittings.
+ Our fully-prepared meals are delivered freash, & to eat in 3 minutes.
+
60+ recipes a week, cooked from 10 mins
++ Family classics, global cuisines plus Joe Wickss health rang +
+Tasty plant based and gluten free options too
+Fresh ingredients from trusted suppliers
+100% British fresh meat
++ All recipes tried, tasted and loved by our chefs and customers +
+Easy-to follow recipe cards
+Precise ingredients with zero food waste
+Precise ingredients with zero food waste
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor + doloremque reiciendis ea voluptatibus. Quis modi ratione incidunt + ipsam +
+ +Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ +
+ Espresso
+Chocolate
+Steamed Milk
+Espresso
+Chocolate
+Steamed Milk
+Espresso
+Chocolate
+Steamed Milk
++ Copyright @ 2022 HuXn WebDev | Provided by HuXn WebDev +
+ + + + diff --git a/92. Coffee/style.css b/92. Coffee/style.css new file mode 100644 index 0000000..e191dc5 --- /dev/null +++ b/92. Coffee/style.css @@ -0,0 +1,325 @@ +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&display=swap"); + +:root { + --main-color: #deab5f; + --primary-color: #312e2e; +} + +/* Utility Styles */ +button { + padding: 10px 30px; + background: var(--main-color); + border: none; + cursor: pointer; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + background: #100e0f; +} + +nav { + display: flex; + justify-content: space-around; + align-items: center; + color: #fff; + font-family: sans-serif; + padding-top: 15px; +} + +li { + display: inline; + list-style: none; +} + +li a { + color: #fff; + text-decoration: none; + margin-left: 40px; +} + +li a:hover { + border-bottom: 2px solid #deab5f; +} + +.header { + background: url("Images/pexels-nao-triponez-129207.jpg"); + background-position: center; + background-size: cover; + height: 100vh; + font-family: "Playfair Display SC", serif; + font-weight: normal; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #fff; + position: relative; + text-align: center; +} + +.main-headings { + position: absolute; + top: 7rem; + font-size: 4rem; + word-spacing: 10px; +} +.primary-heading { + position: absolute; + bottom: 4rem; + font-size: 4rem; + word-spacing: 10px; + margin-bottom: -40px; +} + +.main-btn { + position: absolute; + bottom: 2rem; + padding: 10px 30px; + margin-top: 20px; + background: transparent; + background: var(--main-color); + border: none; + cursor: pointer; + transform: translateY(60px); +} + +#our-story { + margin-top: 15%; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; +} + +.img { + width: 400px; + height: 400px; + background: url(Images/pexels-chitokan-2183027-removebg-preview.png); + background-position: center; + background-size: cover; +} + +.title-style { + display: flex; + align-items: center; +} + +.title { + font-family: "Playfair Display SC", serif; + font-size: 4rem; + color: #fff; + transform: translateX(-100px); +} + +.line { + width: 100px; + height: 2px; + background: #fff; + transform: translateX(-120px); +} + +.section-content p { + max-width: 500px; + color: #fff; + font-family: sans-serif; + line-height: 20px; + margin: 20px 0; +} + +.coffee-container { + display: flex; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + margin-top: 10rem; +} + +.content-section p { + max-width: 500px; +} + +.img-container { + width: 500px; + height: 400px; +} + +.img-2 { + width: 400px; + height: 400px; +} + +.title-two { + font-size: 3rem; + color: #fff; + font-family: "Playfair Display SC", serif; + font-weight: normal; +} + +.content-section p { + color: white; + margin-top: 20px; + font-family: sans-serif; +} + +.products { + margin-top: 5rem; +} + +.title-three { + font-size: 4rem; + margin-left: 10rem; + margin-top: 10rem; + margin-bottom: 10rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-around; + align-items: center; +} + +.card { + border: 2px solid #deab5f; + padding: 0 20px; + height: 400px; + width: 300px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + border-radius: 5px; + position: relative; + margin-bottom: 4rem; +} + +.card-img { + width: 100px; + height: 100px; + position: absolute; + top: -60px; +} + +.img-one { + background: url(Images/1.png); + background-position: center; + background-size: cover; +} +.img-two { + background: url(Images/3.png); + background-position: center; + background-size: cover; +} +.img-three { + background: url(Images/4.png); + background-position: center; + background-size: cover; +} + +.card-title { + color: #fff; + font-family: sans-serif; + margin-top: 50px; +} + +.card .items p { + color: #fff; + margin: 20px 0; + font-family: sans-serif; +} + +/* footer */ +footer { + height: 50vh; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + color: #fff; + font-family: sans-serif; +} + +footer .container { + margin: 20px; + max-width: 300px; + text-align: center; +} + +footer .heading-info { + margin-bottom: 20px; +} + +footer p { + line-height: 25px; +} + +span { + color: #deab5f; +} + +hr { + margin-bottom: 20px; + border-color: #deab5f; + width: 500px; + margin: 0 auto; +} + +.para { + color: white; + font-family: sans-serif; + text-align: center; + margin-top: 20px; +} + +@media only screen and (max-width: 768px) { + .main-headings, + .primary-heading { + font-size: 2.5rem; + } + + #our-story { + text-align: center; + } + + #our-story .title { + transform: translateX(50px); + } + + #our-story .line { + display: none; + } + + .content-section { + text-align: center; + } + + #our-story .img-container .img { + width: 70%; + text-align: center; + margin: 0 auto; + } + + .coffee-container .img-container { + margin-top: 5rem; + width: 50%; + } + + hr { + width: 400px; + } + + .hr-two { + display: none; + } + + .para { + margin-top: 10rem; + } +} diff --git a/93. The Art/index.html b/93. The Art/index.html new file mode 100644 index 0000000..5aa4bcb --- /dev/null +++ b/93. The Art/index.html @@ -0,0 +1,154 @@ + + + + + ++ Art, also called (to distinguish it from other art forms) visual art, a + visual object or experience consciously + created through an expression of skill or imagination. +
+
+ 
+ 
+ 
+ 
+ 
+ + The seven different art forms are + + Painting, Sculpture, Literature, Architecture, Theater, Film, and + Music + + . However, back in the day, the seven different art forms were called + the Liberal Arts, consisting of Grammar, Logic, Rhetoric, Arithmetic, + Geometry, Astronomy, and Music. +
+ +
+ 
+ 
+ 
+ 
+ 
+ 
+ + Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed do + eiusmod. Sit amet, constecture orem Ipsum dolor adipiscing elit, sed + do eiusmod. +
++ Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed do + eiusmod. +
+ +Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed
+Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed
+Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed.
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s +
+
+ Premium Product
+Happy Customers
+Awards Winnings
+Indoor Chair
+Indoor Chair
+Indoor Chair
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s. +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s. +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
+
+ + Art, also called (to distinguish it from other art forms) visual art, a + visual object or experience consciously + created through an expression of skill or imagination. +
+
+
+
+
+
+
+ + The seven different art forms are + + Painting, Sculpture, Literature, Architecture, Theater, Film, and + Music + + . However, back in the day, the seven different art forms were called + the Liberal Arts, consisting of Grammar, Logic, Rhetoric, Arithmetic, + Geometry, Astronomy, and Music. +
+ +
+
+
+
+
+
+
+ 
+ + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde + nostrum consequatur, nulla explicabo vero nesciunt architecto + officiis eius ullam alias. +
+ +${login}
+ +${bio}
+${description}
+${language}
+${watchers_count}
+
+ ${forks_count}
+ Public
+ `; + singleElement.innerHTML = html; + reposContainer.append(singleElement); + } + ); + } catch (error) { + console.error(error); + } +} + +form.addEventListener("submit", async (e) => { + e.preventDefault(); + const val = input.value; + + if (val) { + try { + await fetchData(val); + await fetchRepos(val); + } catch (error) { + console.log(error); + } finally { + input.value = ""; + } + } + + document + .querySelector("input") + .addEventListener("click", () => location.reload()); +}); diff --git a/99. Github Profile Clone/git-fork_1.svg b/99. Github Profile Clone/git-fork_1.svg new file mode 100644 index 0000000..5caf333 --- /dev/null +++ b/99. Github Profile Clone/git-fork_1.svg @@ -0,0 +1,39 @@ + \ No newline at end of file diff --git a/99. Github Profile Clone/index.html b/99. Github Profile Clone/index.html new file mode 100644 index 0000000..d313fbd --- /dev/null +++ b/99. Github Profile Clone/index.html @@ -0,0 +1,289 @@ + + + + +Popular Repositories
+
+ 
+ 
+