diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/1.jpg b/1.jpg new file mode 100644 index 0000000..726ffd0 Binary files /dev/null and b/1.jpg differ diff --git a/BookLogo.jpg b/BookLogo.jpg new file mode 100644 index 0000000..366b35f Binary files /dev/null and b/BookLogo.jpg differ diff --git a/Book_slide.css b/Book_slide.css new file mode 100644 index 0000000..dabcab6 --- /dev/null +++ b/Book_slide.css @@ -0,0 +1,119 @@ +@import url('https://fonts.google.com/'); + .hello{ + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + font-family: "Roboto",sans-serif; + margin-left:80px; + /* background: linear-gradient(90deg,#fff 50%,#eecae6 50%); */ +} +input{ + display: none; +} +img{ + width: 100%; + height: 100%; +} +.book{ + display: flex; +} +#cover{ + width: 250px; + height: 400px; +} +.flip-book{ + width: 250px; + height: 400px; + position: relative; + perspective: 1500px; +} +.flip{ + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + transform-origin: left; + transform-style: preserve-3d; + transform: rotateY(0deg); + transform: .5s; + color: #000; +} +p{ + font-size: 14px; + line-height: 24px; +} +.front{ + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + /* background-color: #ffffff; */ + background-color: #efcee7; + box-sizing: border-box; + padding: 0 13px; + box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5) 0 2px 5px rgba(0,0,0,0.5); +} +.back{ + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 99; + transform: rotateY(180deg); + backface-visibility: hidden; + background-color: #000; +} +.next-btn{ + position: absolute; + bottom: 13px; + right: 13px; + cursor: pointer; + color: #000; +} +.back-btn{ + position: absolute; + bottom: 13px; + right: 13px; + cursor: pointer; + color: #fff; +} +/* p{ + color:rgb(255, 0, 230); +} */ +#p1{ + z-index: 5; +} +#p2{ + z-index: 4; +} +#p3{ + z-index: 3; +} +#p4{ + z-index: 2; +} +#c1:checked ~ .flip-book #p1{ + transform: rotateY(-180deg); + z-index: 1; +} +#c2:checked ~ .flip-book #p2{ + transform: rotateY(-180deg); + z-index: 2; +} +#c3:checked ~ .flip-book #p3{ + transform: rotateY(-180deg); + z-index: 3; +} +#c4:checked ~ .flip-book #p4{ + transform: rotateY(-180deg); + z-index: 4; +} +.info{ + height:75px; + width:100%; +} \ No newline at end of file diff --git a/Cart.css b/Cart.css new file mode 100644 index 0000000..7ed23fe --- /dev/null +++ b/Cart.css @@ -0,0 +1,218 @@ + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'poppins', sans-serif; + font-size: 18px; +} +body{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background-image:linear-gradient(to right,white,rgba(218, 165, 32, 0.578)); +} +.header{ + height: 80px; + width: 70%; + background-color: goldenrod; + border-radius: 3px; + margin: 30px 0px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px; +} +.header .logo{ + font-size: 30px; + font-weight: bold; + color: white; +} +.cart{ + display: flex; + background-color: white; + justify-content: space-between; + align-items: center; + padding: 7px 10px; + border-radius: 3px; + width: 80px; +} +.fa-solid{ + color: goldenrod; +} +.cart p{ + height: 22px; + width: 22px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 22px; + background-color: goldenrod; + color: white; +} +.container{ + display: flex; + width: 70%; + margin-bottom: 30px; + z-index: 99; + position: relative; +} +#root{ + width: 60%; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 20px; +} +.sidebar{ + width: 40%; + border-radius: 5px; + background-color: #eee; + margin-left: 20px; + padding: 15px; + text-align: center; +} +.head{ + background-color: goldenrod; + border-radius: 3px; + height: 40px; + padding: 10px; + margin-bottom: 20px; + color: white; + display: flex; + align-items: center; +} +.foot{ + display: flex; + justify-content: space-between; + margin: 20px 0px; + padding: 10px 0px; + border-top: 1px solid #333; +} +.box{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + border: 1px solid goldenrod; + border-radius: 5px; + padding: 15px; +} +.img-box{ + width: 100%; + height: 180px; + display: flex; + align-items: center; + justify-content: center; +} +.images{ + max-width: 90%; + max-height: 90%; + object-fit: cover; + object-position: center; +} +.bottom{ + margin-top: 20px; + width: 100%; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + height: 110px; +} +h2{ + font-size: 20px; + color: red; +} +button { + width: 100%; + position: relative; + border: none; + border-radius: 5px; + background-color: goldenrod; + padding: 7px 25px; + cursor: pointer; + color: white; +} +button:hover{ + background-color: #333; +} +.cart-item{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px; + background-color: white; + border-bottom: 1px solid #aaa; + border-radius: 3px; + margin: 10px 10px; +} +.row-img{ + width: 50px; + height: 50px; + border-radius: 50px; + border: 1px solid goldenrod; + display: flex; + align-items: center; + justify-content: center; +} +.rowimg{ + max-width: 43px; + max-height: 43px; + border-radius: 50%; +} +.fa-trash:hover{ + cursor: pointer; + color: #333; +} +#paymentButton +{ + width: 100%; + position: relative; + border: none; + border-radius: 5px; + background-color: goldenrod; + padding: 7px 25px; + cursor: pointer; + color: white; +} + +.success-message i{ + width: 100px; + display: inline; +} + +.success-message{ + z-index: 100; + margin-right: 160px; + position: absolute; + background-color: #555; + border: 4px solid black; + width: 250px; + height: 220px; + text-align: center; + padding: 2px; + display: none; +} +.success-message { + border: 2px solid #4CAF50; + background-color: #f2f2f2; + color: #4CAF50; + padding: 20px; + margin-bottom: 20px; +} + +.success-message h1 { + font-size: 35px; + margin-top: 0; +} + +.success-message p { + font-size: 16px; + margin-top: 10px; +} + +.success-message i { + margin-right: 10px; +} diff --git a/Cart.html b/Cart.html new file mode 100644 index 0000000..d3c9f6f --- /dev/null +++ b/Cart.html @@ -0,0 +1,35 @@ + + + + + + + + +
+ +

0

+
+
+
+
+

My Cart

+
Your cart is empty
+
+

Total

+

$ 0.00

+


+
+

+
+
+
+ +

Payment Successful!

+

Thank you for your purchase.

+
+ + + + + \ No newline at end of file diff --git a/Cart.js b/Cart.js new file mode 100644 index 0000000..8dbc7b2 --- /dev/null +++ b/Cart.js @@ -0,0 +1,106 @@ +const product = [ + { + id: 0, + image: 'Cart1.jpg', + title: 'AIML', + price: 120, + }, + { + id: 1, + image: 'Cart2.png', + title: 'Problem Solving', + price: 60, + }, + { + id: 2, + image: 'Cart3.jpg', + title: 'DBMS', + price: 230, + }, + { + id: 3, + image: 'Cart4.jpg', + title: 'FRONTEND', + price: 100, + } +]; +const categories = [...new Set(product.map((item)=> + {return item}))] + let i=0; +document.getElementById('root').innerHTML = categories.map((item)=> +{ + var {image, title, price} = item; + return( + `
+
+ +
+
+

${title}

+

$ ${price}.00

`+ + ""+ + `
+
` + ) +}).join('') + +var cart =[]; + +function addtocart(a){ + cart.push({...categories[a]}); + displaycart(); +} +function delElement(a){ + cart.splice(a, 1); + displaycart(); +} + +function displaycart(){ + let j = 0, total=0; + document.getElementById("count").innerHTML=cart.length; + if(cart.length==0){ + document.getElementById('cartItem').innerHTML = "Your cart is empty"; + document.getElementById("total").innerHTML = "$ "+0+".00"; + } + else{ + document.getElementById("cartItem").innerHTML = cart.map((items)=> + { + var {image, title, price} = items; + total=total+price; + document.getElementById("total").innerHTML = "$ "+total+".00"; + return( + `
+
+ +
+

${title}

+

$ ${price}.00

`+ + "
" + ); + }).join(''); + } + + +} + + +// Bill +function showSuccessMessage() { + const successMessage = document.getElementById("successMessage"); + successMessage.style.display = "block"; + + playPopUpSound(); + + setTimeout(function() { + successMessage.style.display = "none"; + }, 3000); +} + +function playPopUpSound() { + const audio = new Audio('QKTA234-pop.mp3'); + audio.play(); +} +const paymentButton = document.getElementById("paymentButton"); +paymentButton.addEventListener("click", function() { + showSuccessMessage(); +}); diff --git a/Cart1.jpg b/Cart1.jpg new file mode 100644 index 0000000..2c087b7 Binary files /dev/null and b/Cart1.jpg differ diff --git a/Cart2.png b/Cart2.png new file mode 100644 index 0000000..4c37974 Binary files /dev/null and b/Cart2.png differ diff --git a/Cart3.jpg b/Cart3.jpg new file mode 100644 index 0000000..ba142de Binary files /dev/null and b/Cart3.jpg differ diff --git a/Cart4.jpg b/Cart4.jpg new file mode 100644 index 0000000..957fc6a Binary files /dev/null and b/Cart4.jpg differ diff --git a/ChatBot.html b/ChatBot.html new file mode 100644 index 0000000..3a1f2ed --- /dev/null +++ b/ChatBot.html @@ -0,0 +1,107 @@ + + + + + + AI Assistant Chatbox + + + +
+

Hey!

+

Education is a critical factor for the progress of an individual and the nation. It is about gathering knowledge and learning how to think and apply the knowledge to solve problems.

+

+
+ + + Chatbot Icon + + + + \ No newline at end of file diff --git a/Course.html b/Course.html new file mode 100644 index 0000000..fb46efc --- /dev/null +++ b/Course.html @@ -0,0 +1,406 @@ + + + + + + Education + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ + + + Try for free + + + + + +
+
+
+ +
+


+ + + + + + +

+

Employees from leading companies worldwide have enrolled with us.

+
+
+ +
+

+ + + +
+
+ +
+
+

Courses focused on building strong foundational skills + for career growth!


+ +
+
+
+ + +
+

Explore our free courses


+