Skip to content

Commit

Permalink
I almost finished the banner
Browse files Browse the repository at this point in the history
  • Loading branch information
@Oreo236
Oreo236 committed Aug 15, 2024
2 parents 8bb00af + a68cf6e commit 5bd42e0
Show file tree
Hide file tree
Showing 8 changed files with 373 additions and 261 deletions.
7 changes: 3 additions & 4 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,16 @@
<header class = "header">
<img src="images/Brand/Logo.svg"/>
<img src="images/Brand/Logo text.svg"/>
<label for="" class="icons">
<i class='bx bx-menu' style="font-size: 2.8rem; color: #1C3312;"></i>

</label>
<nav class="navbar">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="workshops.html">Workshops</a>
<a href="contact.html">Contact</a>
<button onclick="document.location='app.html'">Our App</button>
</nav>
<label for="" class="icons">
<i class='bx bx-menu' style="font-size: 2.8rem; color: #1C3312;"></i>
</label>
</header>
<section class="aboutus-about">
<img src="images/Brand/leaf sprout.svg"/>
Expand Down
109 changes: 39 additions & 70 deletions app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,8 @@ button{
}

/*App Starts*/
.meet-app {
justify-content: center;
flex-grow: 1;
display: flex;
margin-top:250px;
}
.meet-app {flex-grow: 1;
margin-top:250px;}
.meet-app h1{
position:relative;
display:flex;
Expand All @@ -57,39 +53,26 @@ button{
}

.blueleaf {position: relative;
top: -250px;
left:40px;}
/*.meet-box {margin-bottom: 100px;}*/
.meet-left {text-align: left;}
top: -140px;
left:1100px;
display:flex;}

.meet-left p{color: #083358;
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
position:relative;
width:150%;
font-size: 32px;
margin-left: 140px;
margin-top: -100px;
margin-bottom: 100px;
display:flex;
text-align: left;
left:-1030px;}
width:60%;}

.meet-right {
position:relative;
left:-200px;
top:-200px;
transform: scale(1.25);
}
.meeto-right-apple {
position:relative;
left:-300px;
top:56px;
}

.how-box {
display: flex;
.how-box {display: flex;
justify-content: left;
background: #083358;
}
.how-text h2{
color: #FFFFFF;
background: #083358;}
.how-text h2{color: #FFFFFF;
font-family: "Domine", serif;
font-weight: 700;
font-style: normal;
Expand All @@ -98,48 +81,36 @@ button{
font-size: 48px;
line-height: 54.72px;
margin-top:100px;
margin-left: 120px;
}
.ratio{
padding-bottom: 7.5%;
margin-left: 120px;}
.ratio{padding-bottom: 7.5%;
position:relative;
display: block;
width: 100%;
}
.ratio iframe{
align-items: center;
width: 100%;}
.ratio iframe{align-items: center;
justify-content:center;
text-align: center;
margin-left:112px;
margin-top:50px;
height:513px;
width:1215px;
}
width:1215px;}

#faq h2{
margin-top: 150px;
#faq h2{margin-top: 150px;
color: #1C3312;
font-family: "Domine", serif;
font-weight: 700;
font-style: normal;
font-size: 60px;
line-height: 72.96px;
}
line-height: 72.96px;}

#accordion{
margin: 100px auto;
width: 1100px;
}
#accordion li{
list-style: none;
#accordion{margin: 100px auto;
width: 1100px;}
#accordion li{list-style: none;
margin-bottom: 10px;
background: inherit;
border: 0px 0px 2px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid rgba(0, 0, 0, 1);
}
#accordion li label{
padding: 10px;
border-bottom: 2px solid rgba(0, 0, 0, 1);}
#accordion li label{padding: 10px;
display: flex;
flex-grow: 1;
justify-content: space-between;
Expand All @@ -150,36 +121,34 @@ button{
color: rgba(28, 51, 18, 1);
font-family: "Domine", serif;
font-weight:bolder;
font-style: normal;
font-style: 100;
font-size: 40px;
line-height: 50px;
}
#accordion li label span{
transform: rotate(90deg);
line-height: 50px;}
#accordion li label span{transform: rotate(90deg);
color: #323232;
margin-left: auto;
padding-left: 10px;
}
padding-left: 10px;}
#accordion input[type="checkbox"]{display: none;}
#accordion .accordion-content{
padding: 0 10px;
#accordion .accordion-content{padding: 0 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
color: #1C3312;
font-family: "Domine", serif;
font-optical-sizing: auto;
font-style: normal;
font-style: lighter;
text-align: left;
justify-content: space-between;
align-items: center;
margin-top: 40px;
cursor: pointer;
font-weight: lighter;
font-size: 30px;
line-height: 50px;
}
#accordion input[type="checkbox"]:checked +.accordion-content{max-height: 400px;}
font-size: 27px;
line-height: 50px;}
#accordion input[type="checkbox"]:checked +.accordion-content{max-height: none;
overflow:hidden;
max-height: 1000px;
padding-bottom: 20px;}

@media (max-width: 1024px) {
.meet-app {
Expand Down
97 changes: 62 additions & 35 deletions app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,16 @@
<header class = "header">
<img src="images/Brand/Logo.svg"/>
<img src="images/Brand/Logo text.svg"/>
<label for="" class="icons">
<i class='bx bx-menu' style="font-size: 2.8rem; color: #1C3312;"></i>

</label>
<nav class="navbar">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="workshops.html">Workshops</a>
<a href="contact.html">Contact</a>
<button onclick="document.location='app.html'">Our App</button>
</nav>
<label for="" class="icons">
<i class='bx bx-menu' style="font-size: 2.8rem; color: #1C3312;"></i>
</label>
</header>
<div class="meet-app">
<h1>Meet the CommuniCare App</h1>
Expand All @@ -37,13 +36,6 @@ <h1>Meet the CommuniCare App</h1>
distance, accessibility, insurance status among others to
recommend matched clinical and social healthcare resources.</p>
</div>
<div class="meet-right">
<a href="app-store-link"><img class="meeto-right-apple"
src="images/Button/Appstore.svg"
alt="Download on the App Store"></a>
<a href="google-play-link"><img src="images/Button/Googleplay.svg"
alt="Get it on Google Play"></a>
</div>
</div>
</div>
<section id="how-it-works">
Expand All @@ -66,61 +58,96 @@ <h2>How it Works</h2>
<h2>Frequently Asked Questions</h2>
<ul id = "accordion">
<li>
<label for="first">How does the CommuniCare app work?<span>&#x3e;</span></label>
<label for="first">What is the CommuniCare app?<span>&#x3e;</span></label>
<input type = "checkbox" name=" accordion" id="first">
<div class="accordion-content">
<p>Users can make an account in the Communicare app and provide basic information such as address, phone number, distance preferences, insurance status, and others. When you want to find healthcare resources in your area, simply use our map feature and filter recommendations based on the services required.
The app's machine learning based algorithm will recommend tailored resources based on your preferences. For more information, visit the "how it works" page.</p>
<p>The Communicare app is a powerful tool designed
to connect under-resourced individuals with healthcare
resources in their communities. Users can create an
account in the app by providing basic information such
as address, phone number, distance preferences,
insurance status, and other relevant details. When
you need to find healthcare resources in your area,
simply use our map feature to filter recommendations
based on the services required. The app's machine
learning-based algorithm will then recommend tailored
resources that match your preferences and needs. This
personalized approach ensures that users can easily
access the healthcare services they need. For more
information on how the app works, please visit the
"Our App" page on our website. </p>
</div>
</li>
<li>
<label for=" second">Who can benefit from CommuniCare?<span>&#x3e;</span></label>
<input type = "checkbox" name=" accordion" id=" second">
<div class="accordion-content">
<p>Communicare is designed to serve low-income and historically under-resourced communities. Our goal is to ensure that these individuals are not left behind in the healthcare system. By increasing awareness and utilization of existing resources, we hope to alleviate the burden of preventable diseases within these communities.
<p>Communicare is designed to serve low-income and historically
under-resourced communities, ensuring that these individuals
are not left behind in the healthcare system. Our goal
is to bridge the gap in healthcare access by providing
resources and support to those who need it the most.
Through our workshops, free app, and community partnerships,
we strive to create a more equitable healthcare landscape where no one is left behind.
</p>
</div>
</li>
<li>
<label for=" third">Is the CommuniCare app free to use?<span>&#x3e;</span></label>
<input type = "checkbox" name=" accordion" id=" third">
<div class="accordion-content">
<p>Yes, the Communicare app is completely free to use. Our mission is to make healthcare resources accessible to all, and we believe that cost should not be a barrier to this access. You can find our app in the Apple Store.
<p>Yes, the CommuniCare app is completely free to use!
Our mission is to make healthcare resources accessible
to all, and we firmly believe that cost should not be a
barrier to this access. By offering the app for free, we
aim to ensure that everyone, regardless of their financial
situation, can benefit from the healthcare resources and
support we provide.
</p>
</div>
</li>
<li>
<label for="fourth">How does CommuniCare ensure the quality of the healthcare resources listed?<span>&#x3e;</span></label>
<label for="fourth">How can healthcare services/programs get listed on the CommuniCare app?<span>&#x3e;</span></label>
<input type = "checkbox" name=" accordion" id="fourth">
<div class="accordion-content">
<p>We have a dedicated team that thoroughly vets each healthcare resource before it is listed on our app. We work closely with local and regional partners to ensure that these resources are reliable, effective, and beneficial for our users.
<p> Healthcare programs and services that wish to be listed
on the CommuniCare app can reach out to us through
our website. Our team will carefully review the
services provided to ensure they align with our
mission and meet the needs of our community. If
deemed suitable, we will add them to our comprehensive
database, making them accessible to the communities
we serve. By collaborating with a diverse range of
healthcare providers, we aim to offer a wide array
of resources to our users, enhancing their ability
to find the care they need.
</p>
</div>
</li>
<li>
<label for="fifth">How can healthcare services/programs get listed on the CommuniCare app?<span>&#x3e;</span></label>
<input type = "checkbox" name=" accordion" id="fifth">
<label for="fifth">How often is the information on the CommuniCare app updated?<span>&#x3e;</span></label>
<input type = "checkbox" name=" accordion" id="fifth" >
<div class="accordion-content">
<p>Healthcare programs and services that wish to be listed on the Communicare app can contact us through our website. Our team will then review the services provided and, if suitable, add them to our database.
<p> To ensure our users have access to the most current
and accurate healthcare resources, we update our
healthcare databases on a bi-monthly basis. This
regular updating process allows us to provide timely
information about available services, ensuring that
users can make informed decisions about their healthcare.
</p>
</div>
</li>
<li>
<label for="sixth">How often is the information on the CommuniCare app updated?<span>&#x3e;</span></label>
<input type = "checkbox" name=" accordion" id="sixth" >
<label for="sixth">How can I get involved with CommuniCare?<span>&#x3e;</span></label>
<input type = "checkbox" name=" accordion" id="sixth">
<div class="accordion-content">
<p>All healthcare databases are updated on a bi-monthly basis to ensure our users have access to the most current and accurate healthcare resources.
</p>
</div>
</li>
<li>
<label for="seventh">How can I get involved with CommuniCare?<span>&#x3e;</span></label>
<input type = "checkbox" name=" accordion" id="seventh">
<div class="accordion-content">
<p>If you are a student or faculty member interested in joining our mission, please fill out the interest form on our website. Applications are reviewed periodically and our team leads will be in touch.
</p>
<p>
If you are a community member or healthcare professional interested in partnering with us, please complete the contact form on our website and we will be in touch!
<p> If you are a student or faculty member interested
in joining our mission, please fill out the interest
form on our website. Applications are reviewed periodically
and one of our team leads will be in touch!<br></br>
If you are a community member or healthcare professional
interested in partnering with us, please email us
using the contact form, and we will be in touch!
</p>
</div>
</li>
Expand Down
Loading

0 comments on commit 5bd42e0

Please sign in to comment.