-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #16 from cse110-sp23-group20/home-page
Home page
- Loading branch information
Showing
10 changed files
with
251 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| OTF and TTF: Enchanted Land | ||
| Dennis Ludlow 2016 all rights reserved | ||
| by Sharkshock | ||
| dennis@sharkshock.net | ||
|
|
||
|
|
||
| Welcome to the Enchanted Land where fun has no age limit! This display font borrows obvious inspiration from the classic signage used by the famous west coast amusement park. There are several others floating out there but this one features a clean glyph set with many European characters | ||
| and diacritic support for extended latin. The whimsical style of the caps flow with consistency and shows up in the numbers and many other marks as well. OTF features like kerning, ordinals, fractions, ligatures, alternates, and proportional numbers and punctuation for uppercase characters are | ||
| all included. All caps are NOT recommended. Use Enchanted Land for a children's project, book title, or anywhere you'd like a little magic. | ||
|
|
||
|
|
||
| This font like my others are free for personal use only as long as this readme file stays intact. For commercial use please contact me at dennis@sharkshock.net to discuss an end user license agreement. You can also visit www.sharkshock.net/license for more info. I also design custom fonts for | ||
| businesses, logos, and many other things. If you'd like to leave me a PayPal donation you can use my email address above. Your generosity will be most appreciated! | ||
|
|
||
| tags: book, children, kids, script, amusement, park, fun, magic, serif, magical, publishing, display, font, typeface, fancy, whimsical, fantasy, enchanting, kid, rides, vacation, characters, Disney, land, logo | ||
|
|
||
|
|
||
| visit www.sharkshock.net for more and take a bite out of BORING design! | ||
|
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.39 MB
source/home-page/Images/craiyon_115136_tarot_card_with_fortune_cookie.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+770 KB
source/home-page/Images/craiyon_144054_a_tarot_card_depicting_palmistry.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <link rel="stylesheet" type="text/css" href="styles.css"> | ||
| <title>Fortune Telling App</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="welcome-section"> | ||
| <h1>Welcome to our Fortune Telling App</h1> | ||
| <h2>Improving the student experience by alleviating decision-making anxiety</h2> | ||
| </div> | ||
| <div> | ||
| <div class="card-container"> | ||
| <a href="#"> | ||
| <img src="Images/craiyon_142342_zodiac_wheel_tarot_card.png" alt="Love Compatibility Card" width="300" height="200"> | ||
| </a> | ||
| <p>Love Compatibility</p> | ||
| </div> | ||
| <div class="card-container"> | ||
| <a href="#"> | ||
| <img src="Images/craiyon_115136_tarot_card_with_fortune_cookie.png" alt="Fortune Cookie Card" width="300" height="200"> | ||
| </a> | ||
| <p>Fortune Cookie</p> | ||
| </div> | ||
| <div class="card-container"> | ||
| <a href="#"> | ||
| <img src="Images/craiyon_144054_a_tarot_card_depicting_palmistry.png" alt="Palm Reading Card" width="300" height="200"> | ||
| </a> | ||
| <p>Palm Reading</p> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <button class="randomize-button" onclick="randomize()">Randomize</button> | ||
| <p>Your destiny is in our hands</p> | ||
| </div> | ||
| <div> | ||
| <h2>Sign In</h2> | ||
| <form class="sign-in-form"> | ||
| <label for="name">Name:</label> | ||
| <input type="text" id="name" name="name"><br><br> | ||
| <label for="birthday">Birthday:</label> | ||
| <input type="date" id="birthday" name="birthday"><br><br> | ||
| <label for="age">Age:</label> | ||
| <input type="number" id="age" name="age"><br><br> | ||
| <input type="submit" value="Submit"> | ||
| </form> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| const cardContainers = document.querySelectorAll('.card-container'); | ||
|
|
||
| // Add click event listener to each card container | ||
| cardContainers.forEach((cardContainer, index) => { | ||
| cardContainer.addEventListener('click', () => { | ||
| // Determine the subpage URL based on the card index | ||
| let subpageURL; | ||
| switch (index) { | ||
| case 0: | ||
| subpageURL = 'love-compatibility.html'; | ||
| break; | ||
| case 1: | ||
| subpageURL = 'fortune-cookie.html'; | ||
| break; | ||
| case 2: | ||
| subpageURL = 'palm-reading.html'; | ||
| break; | ||
| // Add more cases for additional card containers if needed | ||
| default: | ||
| subpageURL = 'default.html'; | ||
| break; | ||
| } | ||
| // Navigate to the subpage | ||
| window.location.href = subpageURL; | ||
| }); | ||
| }); | ||
|
|
||
| // Get the "Randomize" button element | ||
| const randomizeButton = document.querySelector('.randomize-button'); | ||
|
|
||
| // Add click event listener to the "Randomize" button | ||
| randomizeButton.addEventListener('click', () => { | ||
| // Get a random index for the card containers | ||
| const randomIndex = Math.floor(Math.random() * cardContainers.length); | ||
|
|
||
| // Retrieve the corresponding card container element | ||
| const randomCardContainer = cardContainers[randomIndex]; | ||
|
|
||
| // Trigger the click event on the random card container | ||
| randomCardContainer.click(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| /* used to set background image*/ | ||
|
|
||
| @font-face { | ||
| font-family: "Enchanted Land"; | ||
| src: url("Fonts/enchanted_land/Enchanted\ Land.otf") format("woff2"), url("Fonts/enchanted_land/Enchanted\ Land.otf") format("woff"); | ||
| } | ||
|
|
||
| body { | ||
| font-family: "Enchanted Land", cursive; | ||
| background-image: url("Images/Background.png"); | ||
| background-repeat: no-repeat; | ||
| background-size: cover; | ||
| } | ||
|
|
||
|
|
||
| /*used to style our "welcome to our Fortune Telling App" section */ | ||
|
|
||
|
|
||
| /* .welcome-section { | ||
| text-align: center; | ||
| background-color: #F1C86C; | ||
| padding: 20px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-bottom:50px; | ||
| } */ | ||
|
|
||
|
|
||
| /* smaller version of the welcome section */ | ||
|
|
||
| .welcome-section { | ||
| text-align: center; | ||
| background-color: #F1C86C; | ||
| padding: 20px; | ||
| margin-bottom: 20px; | ||
| max-width: 800px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .welcome-section h1 { | ||
| font-size: 24px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .welcome-section h2 { | ||
| font-size: 18px; | ||
| font-style: italic; | ||
| } | ||
|
|
||
|
|
||
| /*used to center all of the image cards */ | ||
|
|
||
| .card-container { | ||
| text-align: center; | ||
| display: inline-block; | ||
| margin-right: 80px; | ||
| margin-bottom: 10px; | ||
| padding: 30px; | ||
| } | ||
|
|
||
|
|
||
| /*used to adjust the alignment of the "3 fortune telling cards" and their size */ | ||
|
|
||
| .card-container img { | ||
| text-align: center; | ||
| display: block; | ||
| margin: 0 auto; | ||
| width: 300px; | ||
| height: 300px; | ||
| } | ||
|
|
||
|
|
||
| /*used to style the text under each card */ | ||
|
|
||
| .card-container p { | ||
| font-size: 18px; | ||
| background-color: #36394D; | ||
| color: #191A25; | ||
| margin-top: 10px; | ||
| padding: 8px; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
|
|
||
| /*used to style the randomzier button */ | ||
|
|
||
| .randomize-button { | ||
| font-family: "Enchanted Land", cursive; | ||
| background-color: #F1C86C; | ||
| color: #191A25; | ||
| padding: 10px 20px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| font-size: 18px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .randomize-button:hover { | ||
| background-color: #EBAF3E; | ||
| } | ||
|
|
||
| .sign-in-form { | ||
| max-width: 400px; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| background-color: #f2f2f2; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .sign-in-form label { | ||
| display: block; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .sign-in-form input[type="text"], | ||
| .sign-in-form input[type="date"], | ||
| .sign-in-form input[type="number"] { | ||
| width: 100%; | ||
| padding: 8px; | ||
| margin-bottom: 15px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .sign-in-form input[type="submit"] { | ||
| background-color: #4caf50; | ||
| color: white; | ||
| padding: 10px 20px; | ||
| border: none; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .sign-in-form input[type="submit"]:hover { | ||
| background-color: #45a049; | ||
| } |