diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..140d7330d Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index a15b0ecb9..737d45486 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# js-project-business-site \ No newline at end of file +# js-project-business-site + +https://ai-compass-business-site.netlify.app/ \ No newline at end of file diff --git a/form/index.html b/form/index.html new file mode 100644 index 000000000..caaf494b7 --- /dev/null +++ b/form/index.html @@ -0,0 +1,138 @@ + + + + + + + + + + + Form | AI Compass + + +
+
+

Sign Up

+
+
+

Name

+ +
+ + + +
+

Age Group

+
+ + + + +
+
+ +
+

Who are you?

+
+ + +
+
+ +
+ +
+

Interested in (*optional)

+ +
+ + +
+
+
+ AI Compass Image +
+
+ + diff --git a/form/robot.png b/form/robot.png new file mode 100644 index 000000000..c245ee724 Binary files /dev/null and b/form/robot.png differ diff --git a/form/style.css b/form/style.css new file mode 100644 index 000000000..8af277ca2 --- /dev/null +++ b/form/style.css @@ -0,0 +1,261 @@ +body { + font-family: "Montserrat",; + font-weight: 300; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + background-color: #A5D6A7; + color: rgb(103, 102, 102); +} + +* { + box-sizing: border-box; +} + +.signup-form { + display: flex; + flex-direction: row; + justify-content: center; + margin: 50px 0 auto; + box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1); + } + +form { + display: flex; + flex-direction: column; + width: 50%; + padding: 20px; + border: 1px solid #ccc; + border-radius: 10px 0 0 10px; + background-color: #f9f9f9; +} +@media (max-width: 668px) { + form { + width: 100%; + margin: 10px; + border-radius: 10px; + box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1); + } +} + +h2 { + text-align: center; + margin-bottom: 3px; +} + +h4 { + margin: 5px 0; +} + +p { + margin-bottom: 5px; + font-size: 14px; +} + + +fieldset { + border: none; + margin-bottom: 15px; + display: flex; + flex-direction: column; + padding: 10px; +} + +label { + width: 100%; + margin-bottom: 10px; + font-weight: bold; +} + +input[type="text"], +input[type="email"], +select { + width: 100%; + padding: 8px; + border: none; + border-radius: 5px; + font-size: 16px; +} + +input[type="checkbox"], +input[type="radio"] { + margin-right: 10px; +} + +.your-name:focus, +.input-email:focus { + border: 1px solid #FF9800; + outline: none; +} + +.your-name::placeholder, +.input-email::placeholder { + color: #FF9800; + font-size: 15px; + opacity: 0.7; + font-style: italic; +} + +.age-checkbox { + display: flex; + flex-wrap: wrap; + gap: 8px; + font-size: 16px; +} +.checkbox-label { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + margin-bottom: 4px; + line-height: 0.9; + font-size: small; + font-weight: lighter; + +} +input[type="checkbox"] { /*delete the default checkbox*/ + position: absolute; + opacity: 0; + cursor: pointer; + width: 0; + height: 0; +} +.custom-checkbox { /*create a custom checkbox*/ + display: inline-block; + height: 20px; + width: 20px; + background-color: #eee; + border-radius: 5px; + position: relative; + cursor: pointer; +} +.checkbox-label:hover input ~ .custom-checkbox { + background-color: #ccc; +} +.checkbox-label input:checked + .custom-checkbox { + background-color: #FF9800; +} +.custom-checkbox::after { /*create the check mark/indicator (hidden when not checked)*/ + content: ""; + position: absolute; + display: none; + width: 3px; + height: 6px; + border: solid white; + border-width: 0 3px 3px 0; + top: 5px; + left: 7px; + transform: rotate(45deg); + } +.age-checkbox input:checked ~ .custom-checkbox:after { /*putt the check mark on the custom checkbox when checked*/ + display: block; +} + +.line { + border: 1px solid #ccc; + margin: 5px 0; +} + +.who-are-you { + display: flex; + flex-direction: column; +} +.who-radio { + display: flex; + gap: 20px; + font-size: 16px; + user-select: none; + margin-bottom: 10px; +} +.who-radio input { /*delete the default radio button*/ + position: absolute; + opacity: 0; + cursor: pointer; + width: 0; + height: 0; +} +.radio-label { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + font-size: 16px; + font-weight: lighter; +} +.custom-radio { /*create a custom radio button*/ + display: inline-block; + top: 0; + left: 0; + height: 19px; + width: 19px; + margin: 5px 0; + background-color: #eee; + border-radius: 5px; + cursor: pointer; + border-radius: 50%; + position: relative; +} +.radio-label:hover .custom-radio { + background-color: #ccc; +} +.radio-label input:checked ~ .custom-radio { + background-color: #FF9800; +} +.custom-radio:after { /*create the check mark (hidden when not checked)*/ + content: ""; + position: absolute; + display: none; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 8px; + height: 8px; + border-radius: 50%; + background: white; + } +.who-radio input:checked + .custom-radio:after { + display: block; +} +.who-radio input:focus + .custom-radio { + outline: #898989 auto 1px; +} + +.select-answer { + color: #FF9800; + font-size: 15px; + opacity: 0.7; + font-style: italic; +} + +button { + padding: 10px; + background-color: #FF9800; + color: white; + border: none; + border-radius: 50px; + cursor: pointer; + margin: 20px; +} +button:hover { + background-color: #FFE0B2; + color: #FF9800; +} + +.robot-image { + display: flex; + align-items: center; + justify-content: center; + width: 50%; + background-color: #f0f0f0; + border: 1px solid #ccc; + border-left: none; + border-radius: 0 10px 10px 0; + padding: 20px; +} +@media (max-width: 668px) { + .robot-image { + display: none; + } + +} \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 000000000..b6db1b88e Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/AI Compass.png b/images/AI Compass.png new file mode 100644 index 000000000..fdaec6c38 Binary files /dev/null and b/images/AI Compass.png differ diff --git a/images/ai.png b/images/ai.png new file mode 100644 index 000000000..bdc69ec69 Binary files /dev/null and b/images/ai.png differ diff --git a/images/aibot.png b/images/aibot.png new file mode 100644 index 000000000..b8b719bd5 Binary files /dev/null and b/images/aibot.png differ diff --git a/images/bg-img.png b/images/bg-img.png new file mode 100644 index 000000000..6bd7df0e1 Binary files /dev/null and b/images/bg-img.png differ diff --git a/images/chat-with-ai.png b/images/chat-with-ai.png new file mode 100644 index 000000000..4deddcc13 Binary files /dev/null and b/images/chat-with-ai.png differ diff --git a/images/chatbot.png b/images/chatbot.png new file mode 100644 index 000000000..fbb76b6de Binary files /dev/null and b/images/chatbot.png differ diff --git a/images/eye.png b/images/eye.png new file mode 100644 index 000000000..751577401 Binary files /dev/null and b/images/eye.png differ diff --git a/images/graduation.png b/images/graduation.png new file mode 100644 index 000000000..18f69cb3c Binary files /dev/null and b/images/graduation.png differ diff --git a/images/guidline.png b/images/guidline.png new file mode 100644 index 000000000..c7e438e2c Binary files /dev/null and b/images/guidline.png differ diff --git a/images/hands.png b/images/hands.png new file mode 100644 index 000000000..bbd5fa830 Binary files /dev/null and b/images/hands.png differ diff --git a/images/hero-img.png b/images/hero-img.png new file mode 100644 index 000000000..a6307feed Binary files /dev/null and b/images/hero-img.png differ diff --git a/images/hero.jpg b/images/hero.jpg new file mode 100644 index 000000000..d573545a6 Binary files /dev/null and b/images/hero.jpg differ diff --git a/images/idea.png b/images/idea.png new file mode 100644 index 000000000..6f83f8295 Binary files /dev/null and b/images/idea.png differ diff --git a/images/lamp.png b/images/lamp.png new file mode 100644 index 000000000..691e6b5c0 Binary files /dev/null and b/images/lamp.png differ diff --git a/images/lock.png b/images/lock.png new file mode 100644 index 000000000..dee187fea Binary files /dev/null and b/images/lock.png differ diff --git a/images/rocket.png b/images/rocket.png new file mode 100644 index 000000000..1f774b774 Binary files /dev/null and b/images/rocket.png differ diff --git a/images/safety-pic.png b/images/safety-pic.png new file mode 100644 index 000000000..3bbc123fc Binary files /dev/null and b/images/safety-pic.png differ diff --git a/images/safety.png b/images/safety.png new file mode 100644 index 000000000..7cdfd3fb7 Binary files /dev/null and b/images/safety.png differ diff --git a/images/user-robot.png b/images/user-robot.png new file mode 100644 index 000000000..dd656c0e8 Binary files /dev/null and b/images/user-robot.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..2c4161c89 --- /dev/null +++ b/index.html @@ -0,0 +1,276 @@ + + + + + + + + + + + + AI Compass | AI Education for Children + + + +
+ + AI Compass logo + + +
+ +
+
+ +
+ + +
+ +
+
+

Give Your Child

+

the Superpower of AI

+

- The Skill of the Future

+
+
+

Fun, safe, and engaging AI lessons

+

designed for elementary and

+

middle school students

+
+ + + +
+ +
+ Hero Image +
+ +
+ +
+
+

AI Made Simple, Fun, and Exciting

+

In our program, children don't just learn AI - they create with it!

+

Through interactive activities, kids will:

+
+
+
+ Icon 1 +

Chat with AI and play creative games

+

Lower elementary:

+

Discover and play with AI through games and storytelling

+
+
+ Icon 2 +

Make their own story books and illustrations using AI tools

+

Upper elementary:

+

Learn how to ask better questions and create with AI

+
+
+ Icon 3 +

Team up with AI to brainstorm new ideas and projects

+

Middle School:

+

Understand how AI works, its real-world uses, and practice safe, responsible use

+
+
+ Icon 4 +

Develop advanced digital skills with AI

+

High School:

+

Explore real-world applications, and prepare for future careers through hands-on projects and + problem-solving challenges

+
+
+ +
+
+
+
+ +
+
+

Why Should Kids Learn AI Now?

+
+
+
+

AI is the new literacy. Just like digital skills and coding, AI will be must-have skill for the + Future

+ AI Image 1 +
+
+

AI is the new literacy. Just like digital skills and coding, AI will be must-have skill for the + Future

+ AI Image 2 +
+
+

AI is the new literacy. Just like digital skills and coding, AI will be must-have skill for the + Future

+ AI Image 3 +
+
+
+
+
+
+ +
+
+

Safety First - Always

+

We know parents worry about online risks

+

That's why our AI lessons are design with:

+
+
+ + safety-image +
+
+ guidelines +

Strict safety guidelines and no personal data sharing

+
+
+ eye +

Supervised sessions led by trained instructors

+
+
+ key +

Child-friendly AI tools appropriate for yourn learners

+
+
+
+
+ +
+
+

Choose the Best Way to Start

+
+
+
+ Trial Icon +

Trial Workshop(One-Time)

+

Free

+
+
+ Monthly Icon +

Monthly Plan

+

$xx/month (2 classes)

+
+
+ Group Icon +

School/Group Plan

+

Custom pricing available

+
+
+

👉Start small with a trial class - and see the excitement for yourself!

+
+ +
+
+

The Future Won't Wait

+

Let's Prepare Our Kids Today

+
+ + + +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 000000000..5de400665 --- /dev/null +++ b/script.js @@ -0,0 +1,38 @@ +const btn = document.querySelector(".btn"); +const mobileNav = document.querySelector(".mobile-navbar"); +const overlay = document.getElementById("overlay"); + +btn.addEventListener("click", () => { + btn.classList.toggle("active"); + mobileNav.classList.toggle("active"); + overlay.classList.toggle("active"); +}); + +//close button when click menu +document.querySelectorAll(".mobile-navbar a").forEach(link => { + link.addEventListener("click", () => { + btn.classList.remove("active"); + mobileNav.classList.remove("active"); + overlay.classList.remove("active"); + }); +}); + +// back to top button +const backButton = document.querySelector(".backBtn"); + +// back to top when click +backButton.addEventListener("click", () => { + window.scroll({ + top: 0, + behavior: "smooth" + }); +}); + +//show when scroll +window.addEventListener("scroll", () => { + if(window.scrollY > 100) { + backButton.classList.add("is-active"); + }else{ + backButton.classList.remove("is-active"); + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..6542762d9 --- /dev/null +++ b/style.css @@ -0,0 +1,574 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + background-color: #fcfcfc; + font-family: 'Montserrat', sans-serif; + font-weight: 300; + color: #5c5b62; +} + +h1 { + font-size: 52px; + margin: 10px 0; +} +h2 { + font-size: 48px; + font-weight: 500; + margin: 30px; +} + +p { + font-size: 18px; + line-height: 1.5; +} + +button { + background-color :#FF9800; + font-size: 24px; + font-weight: 500; + border: none; + border-radius: 30px; + padding: 10px 30px; + cursor: pointer; + color: white; + box-shadow: 5px 5px 10px #bebaba; +} +button:hover { + box-shadow: none; + transform: translateY(-2px); + background: #ffffff; + color: #FF9800; + border: 2px solid #FF9800; +} + +.section-title { + text-align: center; + margin-bottom: 50px; +} + +/*navigation bar*/ +header { + position: fixed; + top: 0; + width: 100%; + background-color: #9ecdcc; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + z-index: 300; +} + +nav { + display: flex; + align-items: center; + justify-content: space-around; + gap: 20px; + margin-right: 20px; +} + +/*container: hidden for tablet and mobile*/ +.container { + display: flex; + justify-content: center; +} +.container ul { + list-style: none; + display: flex; + align-items: center; + gap: 15px; + margin: 10px; +} +.mobile-navbar { + position: fixed; + top: 0; + right: -100%; + width: 60%; + height: 70vh; + background-color: #fcfcfc; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0 0 0 10px; + transition: right 0.5s ease; + z-index: 90; +} +.mob-nav-1 { + display: flex; + flex-direction: column; + justify-content: center; +} +.mob-nav-1 ul{ + list-style: none; + margin: 20px 0; +} +.mob-nav-1 li { + font-size: 40px; +} +.mob-nav-2 { + display: flex; + flex-direction: column; + align-items: center; +} +.mob-nav-2 img { + margin-bottom: 20px; +} +.mobile-navbar.active { + right: 0; +} +/*hamburger menu*/ +.btn { + position:fixed; + width: 35px; + height: 25px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + cursor: pointer; + z-index: 100; +} +.btn li { + list-style: none; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: #ffffff; + transition: .5s; +} +.line-1 { + top: 20px; +} +.line-2 { + top: 30px; +} +.line-3 { + top: 40px; +} +.btn.active .line-1 { + transform: translateY(10px) rotate(45deg); + background-color: #5c5b62; + +} +.btn.active .line-2 { + opacity: 0; +} +.btn.active .line-3 { + transform: translateY(-10px) rotate(-45deg); + background-color: #5c5b62; + +} +/*overlay for hamburger menu*/ +.mobile-overlay { + position: fixed; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + opacity: 0; + visibility: hidden; + transition: opacity 0.5s ease; + z-index: 10; +} +.mobile-overlay.active { + opacity: 1; + visibility: visible; +} +header a { + text-decoration: none; + color: #5c5b62; + font-weight: 500; + font-size: large; +} +/* for tablet and mobile */ +@media (max-width: 1023px) { + .container { + display: none; + } + .btn { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + cursor: pointer; + z-index: 100; + } + .btn li { + list-style: none; + width: 100%; + height: 4px; + background-color: #ffffff; + border-radius: 2px; + transition: 0.5 ease; + + } +} +/* for desktop */ +@media (min-width: 1024px) { + .container { + display: flex; + } + .mobile-navbar { + display: none; + } + .btn { + display: none; + } +} + +/*hero section*/ +.hero { + position: relative; + width: 100%; + height: 80vh; + overflow: hidden; +} +.hero-image img { /*this is for tablet and mobile*/ + object-fit: cover; + width: 100%; + height: 100%; + display: block; +} +@media (min-width:1024px) { /*hidden for desktop*/ + .hero-image { + display: none; + } +} +@media (max-width:1023px) { /*hidden for tablet and mobile*/ + video { + display: none; + } +} +.hero-video { + position: relative; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 0; +} +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + z-index: 1; +} +.hero-text { + position: absolute; + max-width: 90%; + color: #ffffff; + margin: 10px 0; + top: 25%; + margin-left: 50px; + z-index: 2; +} +.hero-h1 { + margin: 20px 0; +} +.hero-p { + margin-bottom: 20px; +} + +@media (max-width: 1023px) { + h1 { + font-size: 28px; + } + .hero { + height: 95vh; + text-align: center; + display: flex; + justify-content: center; + } + .hero-video { + height: auto; + width: 100%; + } + /* .hero img { + width: 300px; + height: auto; + margin: 0; + } */ + .hero-text { + margin: 0; + padding: 20px; + } +} + +/*services section*/ +.service { + background-color: #9ecdcc; + margin-bottom: 0; + padding: 50px; +} +.service-cards { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 60px; +} +.cards { + background-color: #ffffff; + border-radius: 20px; + text-align: center; + padding: 20px; + height: 100%; + box-shadow: 5px 5px 3px 0 #bebaba; + transition: transform 0.3s; +} + +.cards:hover { + transform: translateY(-5px); + background: #f7f6f6; +} +@media (max-width: 1023px) { + .service-cards { + grid-template-columns: repeat(2, 1fr); + gap: 80px; + } + +} +@media (max-width: 600px) { + .service-cards { + grid-template-columns: 1fr; + gap: 70px; + } +} + +.cards img { + width: 100px; + height: auto; + margin-bottom: 10px; +} +.wave { + overflow: hidden; +} +.wave1 { + background: #9ecdcc; + border-bottom-left-radius: 800px 200px; + border-bottom-right-radius: 800px 200px; + margin-left: -100px; + margin-right: -100px; + padding-left: 100px; + padding-right: 100px; + padding-bottom: 200px; + margin-bottom: 100px; + box-shadow: 0 10px 15px #bebaba; +} +.wave2 { + background: #9ecdcc; + border-top-left-radius: 800px 200px; + border-top-right-radius: 800px 200px; + margin-left: -100px; + margin-right: -100px; + padding-left: 100px; + padding-right: 100px; + padding-top: 150px; + margin-top: 100px; + box-shadow: 0 -10px 15px #bebaba; +} + +/*why ai section*/ +.why-ai { + display: flex; + flex-direction: column; + padding: 50px; +} + +.why-ai img { + width: 50px; + height: auto; + margin-bottom: 10px; +} +.ai-boxes { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} +.ai-box { + background-color: #ffffff; + border-radius: 20px; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 20px; + margin: 20px; + box-shadow: 5px 5px 3px 0 #9ecdcc; +} +.ai-box img { + width: 200px; + height: 200px; +} +.ai-box p { + width: 50%; + padding: 20px; + align-self: center; +} +@media (max-width: 1023px) { + .ai-box { + flex-direction: column; + text-align: center; + } + .ai-box p { + width: 100%; + } + .ai-box img { + width: 150px; + height: 150px; + margin-top: 20px; + align-self: center; + } +} + +/*safety section*/ +.safety { + margin-bottom: 50px; + margin-top: 0; + background-color: #9ecdcc; + padding: 50px; +} +.safety-img-text { + display: flex; + flex-direction: row; + width: 100%; + justify-content: space-around; + align-items: center; +} +.safety-boxes { + display: flex; + flex-direction: column; +} +.safety-box { + display: flex; + flex-direction: row; + align-items: center; + gap: 15px; + background-color: #ffffff; + border-radius: 20px; + padding: 20px; + margin: 10px 0; + box-shadow: 5px 5px 3px 0 #5c5b62; +} +.safety-boxes img { + width: 50px; + height: 50px; +} +#safety-img { + /* transform: scale(-1, 1); */ + width: 30%; + height: auto; + border-radius: 50%; +} +@media (max-width: 1023px) { + .safety-img-text { + flex-direction: column-reverse; + height: auto; + } + #safety-img { + width: 300px; + height: auto; + margin-bottom: 10px; + border-radius: 50%; + } + .safety-text { + font-size: 32px; + line-height: 2; + text-align: center; + } +} + +/*price section*/ +.price { + margin: 50px 0; + padding: 50px; +} +.price-box { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 50px; +} +.price-text { + text-align: center; + margin-top: 100px; +} +#free { + color: red; + font-size: larger; + font-weight: 500; + margin-top: 80px; +} +@media (max-width: 667px) { + .price-box { + grid-template-columns: 1fr; + gap: 70px; + } +} + +/*cta section*/ +.call-to-action { + background-image: url(./images/bg-img.png); + background-size: cover; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 20px; + margin-top: 20px; + height: 500px; +} +.call-to-action button { + margin-top: 20px; +} + +/* back to top button */ +.backBtn { + position: fixed; + display: flex; + align-items: center; + justify-content: center; + right: 20px; + bottom: 20px; + width: 80px; + height: 80px; + font-size: 20px; + color: #ffffff; + background-color: #bebaba; + border: none; + border-radius: 50%; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: .3s; +} +.backBtn:hover { + box-shadow: none; + background: #ffffff; + color: #bebaba; + border: 2px solid #bebaba; +} +.is-active { + opacity: 1; + visibility: visible; +} + +/*footer*/ +footer { + background-color: #9ecdcc; + text-align: center; + padding: 10px; +} +footer nav { + display: flex; + justify-content: center; + gap: 20px; +} \ No newline at end of file diff --git a/video/.DS_Store b/video/.DS_Store new file mode 100644 index 000000000..5008ddfcf Binary files /dev/null and b/video/.DS_Store differ diff --git a/video/hero-video.mp4 b/video/hero-video.mp4 new file mode 100644 index 000000000..4021725e8 Binary files /dev/null and b/video/hero-video.mp4 differ