Skip to content

Commit

Permalink
feat: Added base page for addPet and tasks routes
Browse files Browse the repository at this point in the history
  • Loading branch information
@avasconcelos114
avasconcelos114 committed Aug 10, 2024
1 parent b9ace78 commit 04d0433
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 2 deletions.
59 changes: 58 additions & 1 deletion addPet/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,67 @@
<head>
<meta charset="UTF-8">
<title>GoodBoi Care - Add Pets</title>
<meta name="viewport">
<meta name="description" content="Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.">
<link rel="icon" type="image/x-icon" href="/public/images/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Nunito+Sans:ital,opsz,wght@1,6..12,700&family=Nunito:wght@700&family=Roboto:wght@300;900&display=swap" rel="stylesheet">
<style>
body { margin: 0px; min-width: 1200px; }
header { height: 100px; padding: 0px 20px; display: flex; flex: 1; flex-direction: row; align-items: center; background-color: #fff; position: sticky;}
header > h1 { margin-left: 40px;}
h1, h2, h3 { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
p, a, span { font-family: "Lato", sans-serif; font-weight: 400; font-style: normal; }
a { display: inline-block; width: 100px; margin: 0px 20px; text-decoration: none; color: #131316 }
.flex-space { flex: 1; }
.hero { padding: 0px 20px; }
.hero__contents-wrapper { background-color: #DDDAE7; border-radius: 64px; display: flex; flex-direction: row; }
.hero__contents-text { display: flex; flex: 6; flex-direction: column; min-width: 500px; padding-left: 40px; }
.hero__contents-text > h2 { font-size: 74px; margin-bottom: 0px; }
.hero__contents-text > p { display: flex; max-width: 680px; font-size: 22px}
.hero__contents-image { display: flex; flex: 4; padding-right: 20px;}
.hero__contents-image > img { margin-top: 60px; margin-bottom: 40px;}
.hero__contents-buttons { display: flex; flex-direction: row; row-gap: 40px;}
.hero__contents-buttons > a { width: 200px; margin: 0px; margin-right: 20px }
</style>
</head>

<body>
<p>To be implemented</p>
<!-- HEADER SECTION -->
<header>
<img src="/public/images/icon.png" alt="App Icon" width="65px" height="65px" />
<h1>GoodBoi Care</h1>
<div class="flex-space"></div>
<a href="https://goodboicare.com/terms">Terms of Use</a>
<a href="https://goodboicare.com/privacy">Privacy Policy</a>
</header>

<!-- MAIN SECTION -->
<main>
<div role="group" aria-label="Caring for your pets, simplified." class="hero">
<div class="hero__contents-wrapper">
<div class="hero__contents-text">
<h2>Caring for Your Pets, Simplified.</h2>
<p>Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.</p>
<div class="hero__contents-buttons">
<a href="#" aria-label="Download from App Store">
<img src="/public/images/app_store_button.png" width="200px" alt="App Store image button" />
</a>
<a href="#" aria-label="Download from Google Play Store">
<img src="/public/images/play_store_button.png" width="200px" alt="Play Store image button" />
</a>
</div>
</div>
<div class="hero__contents-image">
<img src="/public/images/hero_image.png" height="500px" alt="Hero image with app screenshots" />
</div>
</div>
</div>
</main>

<!-- FOOTER SECTION -->
<footer></footer>
</body>

</html>
59 changes: 58 additions & 1 deletion tasks/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,67 @@
<head>
<meta charset="UTF-8">
<title>GoodBoi Care - Tasks</title>
<meta name="viewport">
<meta name="description" content="Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.">
<link rel="icon" type="image/x-icon" href="/public/images/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Nunito+Sans:ital,opsz,wght@1,6..12,700&family=Nunito:wght@700&family=Roboto:wght@300;900&display=swap" rel="stylesheet">
<style>
body { margin: 0px; min-width: 1200px; }
header { height: 100px; padding: 0px 20px; display: flex; flex: 1; flex-direction: row; align-items: center; background-color: #fff; position: sticky;}
header > h1 { margin-left: 40px;}
h1, h2, h3 { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
p, a, span { font-family: "Lato", sans-serif; font-weight: 400; font-style: normal; }
a { display: inline-block; width: 100px; margin: 0px 20px; text-decoration: none; color: #131316 }
.flex-space { flex: 1; }
.hero { padding: 0px 20px; }
.hero__contents-wrapper { background-color: #DDDAE7; border-radius: 64px; display: flex; flex-direction: row; }
.hero__contents-text { display: flex; flex: 6; flex-direction: column; min-width: 500px; padding-left: 40px; }
.hero__contents-text > h2 { font-size: 74px; margin-bottom: 0px; }
.hero__contents-text > p { display: flex; max-width: 680px; font-size: 22px}
.hero__contents-image { display: flex; flex: 4; padding-right: 20px;}
.hero__contents-image > img { margin-top: 60px; margin-bottom: 40px;}
.hero__contents-buttons { display: flex; flex-direction: row; row-gap: 40px;}
.hero__contents-buttons > a { width: 200px; margin: 0px; margin-right: 20px }
</style>
</head>

<body>
<p>To be implemented</p>
<!-- HEADER SECTION -->
<header>
<img src="/public/images/icon.png" alt="App Icon" width="65px" height="65px" />
<h1>GoodBoi Care</h1>
<div class="flex-space"></div>
<a href="https://goodboicare.com/terms">Terms of Use</a>
<a href="https://goodboicare.com/privacy">Privacy Policy</a>
</header>

<!-- MAIN SECTION -->
<main>
<div role="group" aria-label="Caring for your pets, simplified." class="hero">
<div class="hero__contents-wrapper">
<div class="hero__contents-text">
<h2>Caring for Your Pets, Simplified.</h2>
<p>Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.</p>
<div class="hero__contents-buttons">
<a href="#" aria-label="Download from App Store">
<img src="/public/images/app_store_button.png" width="200px" alt="App Store image button" />
</a>
<a href="#" aria-label="Download from Google Play Store">
<img src="/public/images/play_store_button.png" width="200px" alt="Play Store image button" />
</a>
</div>
</div>
<div class="hero__contents-image">
<img src="/public/images/hero_image.png" height="500px" alt="Hero image with app screenshots" />
</div>
</div>
</div>
</main>

<!-- FOOTER SECTION -->
<footer></footer>
</body>

</html>

0 comments on commit 04d0433

Please sign in to comment.