diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..88ae3a2 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +milhoverde.ml \ No newline at end of file diff --git a/footer.css b/footer.css new file mode 100644 index 0000000..8e7548c --- /dev/null +++ b/footer.css @@ -0,0 +1,96 @@ +.main-footer { + display: flex; + flex-direction: column; + align-items: center; + padding: 80px 0 24px; +} + +.main-footer h1 { + font-size: 1.75rem; + font-weight: 500; + line-height: 2rem; + margin-bottom: 16px; +} + +.main-footer > p { + font-size: 1.125rem; + line-height: 1.5rem; +} + +.btn-create-nanny { + color: #fff; + padding: 12px 21px; + background: #5E20A4; + border-radius: 5%; + border: 0; + align-items: center; + display: flex; + gap: 21px; + margin: 32px 0 24px; + width: 304px; +} + +.btn-create-nanny div { + align-items: flex-start; + display: flex; + flex-direction: column; +} + +.title-btn { + font-size: 1rem; + font-weight: 1.75rem; +} + +.desc-btn { + font-size: 0.75rem; + font-weight: 1rem; +} + +.nanny-shares { + font-size: 1rem; + margin-bottom: 66px; + color: #5E20A4; +} + +.nav-footer { + align-items: center; + display: flex; + justify-content: space-between; + margin: 58px 128px; + max-width: 1440px; +} + +.logo-hapu { + width: 14vw; +} + +.logo-gray { + width: 4.4vw; +} + +.nav-menu-footer { + display: flex; + gap: 30px; + justify-content: center; +} + +.area-nav { + display: flex; + gap: 30px; + justify-content: center; +} + +.nav-footer .link-nav { + color: #3d3d3d; + font-size: 0.9rem; + line-height: 1.25rem; + text-decoration: none; +} + +.copyrigth { + font-size: 0.75rem; + line-height: 1rem; + opacity: 0.6; + padding: 32px 0; + text-align: center; + } diff --git a/hero.css b/hero.css new file mode 100644 index 0000000..b6c1738 --- /dev/null +++ b/hero.css @@ -0,0 +1,132 @@ +* { + box-sizing: border-box; + font-family: Inter, sans-serif; + margin: 0; + padding: 0; +} +a, a:visited { + font-weight: 500; + transition: 0.15s; + text-underline-position: under; +} + +body { + background-color: #f2f2f2; +} + +header { + background-blend-mode: overlay; + background-position: center; + background: url("resources/banner_image.png"), + linear-gradient( + 314.72deg, + #c86dd7 -1.5%, + #7e49c3 39.43%, + #5912ac 86.02% + ); + background-size: cover; + background-repeat: no-repeat; + height: 616px; + display: flex; + flex-direction: column; + font-size: 1rem; + font-weight: 500; + left: 0; + margin: auto; + max-width: 1440px; + right: 0; +} + +.nav-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 40px; + margin: 0 20px; +} + +.nav-menu { + display: flex; + justify-content: space-between; + align-items: center; + gap: 40px; +} + +.logo { + height: 64px; +} + +.nav-header a { + color: #fff; + text-decoration: none; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.nav-sign { + display: flex; + align-items: center; + gap: 23px; +} +nav { + display: flex; + gap: 32px; +} + +.nav-sign button { + border: 1px; + border-radius: 5%; + color: #fff; + padding: 12px 21px; + background: #00C88C; +} + +.hero { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-items: center; + color: #fff; + gap: 15vw; + margin-left: 8vw; + height: 100%; + width: 80vw; +} + +.hero article { + width: 38vw; +} +.hero article h1 { + font-size: 2.5rem; + font-weight: 500; + letter-spacing: -1px; + line-height: 3rem; + margin-bottom: 24px; +} + +.hero article p { + font-size: 1.125rem; + line-height: 1.5rem; + margin-bottom: 24px; +} + +.hapu-action, .hapu-action > a { + align-items: center; + display: flex; + gap: 16px; + color: #fff; +} + +.btn-play { + align-items: center; + border-radius: 100%; + border: 0; + display: flex; + cursor: pointer; + +} + +.hero > img { + width: 25vw; +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..5756811 --- /dev/null +++ b/index.html @@ -0,0 +1,225 @@ + + + + + + + HAPU + + + + + + + + + +
+ + +
+
+ + +
+
+ + Sign In +
+
+ + + + + +
+
+

Easily create or join a local nanny share with Hapu

+

+ Hapu is Airbnb for nanny share. Share your home, nanny and costs and + create new flexible, affordable solutions in childcare. +

+
+ + See hapu in action (27 seconds) +
+
+ banner modal +
+ + + +
+ + + + + +
+ Sarah profile +
+ Sarah’s day care available now in North Sydney +

Wednesday, Thursday, Friday - 7:30 - 5:30

+
+
+ + + + + +
+
+

+ Share your home, +
nanny and costs +

+

+ You have a fantastic home, a fantastic nanny and wouldn’t cutting + your costs in half be, well, fantastic?! If only it was easy to + connect with other parents to share your costs? Well now it is, with + Hapu. Hapu means tribe and it’s our foundational 3 + tribal principles that empowers you to create and manage your own + tribe. A tribe that together has the power to create new affordable + solutions in childcare that work for you and your community. +

+ Ready to get started? +
+ nanny share macbook +
+ +
+ +
+
+

Are you a parent without a nanny and looking to share?

+

+ Leave us your name and email and we’ll update you as soon as a share + becomes available in your area! +

+
+
+ + + +
+
+ +
+ +
+ shared payments +
+

Shared payments made simple

+

+ Sometimes it’s hard enough just sharing a restaurant bill. Try + sharing that bill week in, week out and you might encounter more + than a few snares. But not with Hapu. Simply set your rates and our + automated payment system takes care of the rest. You need never talk + money or who owes what. +

+ Read how Bridget’s share (without Hapu) ended over $15 +
+
+ +
+ +
+
+

A framework built for the long term

+

+ Childcare is for the long term. And you need a framework you can + count on that gives your share long term viability and success. + That’s why we’ve defined Hapu around our three tribal principles; + clearly defined process, transparency over money and equality of + participation. +

+ Read how Hapu’s tribal background defines our app +
+ billing history +
+ +
+ +
+ diary icon +
+

Coming soon: Nanny Share Daily Diary!

+

+ With the Hapu daily diary your nanny will be able to update you and + your sharers with photos and commentary of the day. You and sharers + will receive notifications and you’ll be able to login to view the + daily adventures fo your little ones. We can’t wait! +

+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/infos.css b/infos.css new file mode 100644 index 0000000..059c427 --- /dev/null +++ b/infos.css @@ -0,0 +1,169 @@ +hr { + border-top: 2px solid #dfdfdf; + margin: auto; + width: 57vw; + left: 50%; +} + +a { + color: #5E20A4; + font-size: 1rem; +} + +.section-info-1 { + display: flex; + flex-direction: row; + gap: 4vw; + margin: 120px 9vw 120px 16vw; +} + +.section-info-1 article{ + gap: 40px; + display: flex; + flex-direction: column; +} +.section-info-1 img { + width: 39vw; +} + +.section-info-1 h1 { + font-weight: 500; + font-size: 1.75rem; + line-height: 2rem; +} + + +.section-info-2 { + margin: 64px auto; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 70px; +} + +.section-info-2 article { + width: 60vw; + gap: 20px; +} + +.section-info-2 h1 { + font-weight: 500; + font-size: 1.375rem; + line-height: 2rem; + margin-bottom: 1vw; +} + +.section-info-2 p { + font-size: 1.125rem; + line-height: 1.75rem; +} + +input { + border-radius: 4px; + border: 1px solid #dfdfdf; + height: 44px; + padding: 0 20px; +} + +.btn-send { + color: #fff; + padding: 12px 21px; + background: #00C88C; + border-radius: 5%; + border: 0; +} + +.section-info-3 { + display: flex; + flex-direction: row; + gap: 3vw; + margin: 96px 16vw; +} + +.section-info-3 img { + width: 34vw; +} + +.section-info-3 div { + display: flex; + flex-direction: column; + gap: 40px; +} + +.section-info-3 h1 { + font-weight: 500; + font-size: 1.75rem; + line-height: 2rem; +} + +.section-info-3 p, a { + font-size: 1rem; + font-weight: 500; + line-height: 1.75rem; +} +.section-info-3 a { + line-height: 1.5rem; +} + +.section-info-4 { + display: flex; + flex-direction: column; + align-items: center; + margin: 96px 23vw; + gap: 64px; + text-align: center; +} + +.section-info-4 div { + display: flex; + flex-direction: column; + gap: 40px; +} + +.section-info-4 h1 { + font-size: 1.75rem; + font-weight: 500; + line-height: 2rem; +} +.section-info-4 p, a { + font-size: 1rem; + font-weight: 500; + line-height: 1.75rem; +} +.section-info-4 a { + line-height: 1.5rem; +} + +.section-info-4 img { + width: 68.3vw; +} + +.section-info-5 { + display: flex; + flex-direction: column; + margin: 96px 23vw; + align-items: center; + text-align: center; +} + +.section-info-5 div { + display: flex; + flex-direction: column; + gap: 40px; +} + +.section-info-5 h1 { + font-size: 1.75rem; + font-weight: 500; + line-height: 2rem; + margin-top: 40px; +} + +.section-info-5 P { + font-size: 1rem; + line-height: 1.5rem; +} +.section-info-5 img { + width: 216px; +} \ No newline at end of file diff --git a/news.css b/news.css new file mode 100644 index 0000000..0fcede6 --- /dev/null +++ b/news.css @@ -0,0 +1,30 @@ +.news { + align-items: center; + background-color: #fff; + border: 1px solid #dfdfdf; + display: flex; + gap: 32px; + height: 114px; + justify-content: center; +} + +.news img { + width: 3.9vw; +} + +.info-news { + align-items: center; + display: flex; + font-size: 1rem; + font-weight: 500; + line-height: 1.5rem; +} + +.info-news a { + color: #5E20A4; +} + +.info-news p { + font-family: Arial, Helvetica, sans-serif; + color: #000; +} \ No newline at end of file diff --git a/resources/facebook_logo.svg b/resources/facebook_logo.svg new file mode 100644 index 0000000..d9793b4 --- /dev/null +++ b/resources/facebook_logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/instagram_logo.svg b/resources/instagram_logo.svg new file mode 100644 index 0000000..8d56ffc --- /dev/null +++ b/resources/instagram_logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/twitter_logo.svg b/resources/twitter_logo.svg new file mode 100644 index 0000000..c0d3d1f --- /dev/null +++ b/resources/twitter_logo.svg @@ -0,0 +1,4 @@ + + + +