Skip to content

Commit

Permalink
animating circles
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikeumus
mikeumus committed Mar 20, 2024
1 parent 330c2a1 commit 14bfe1f
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 52 deletions.
30 changes: 17 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,24 @@
<!-- Your first section here -->
<div class="correlated">
<div class="container">
<div class="circle"></div>
<div class="satisfaction">
<div>
<div class="circle">
<div class="satisfaction-wrapper patient-wrapper">
<div class="satisfaction patient-satisfaction">
<span class="emoji patient-emoji">👩🏻‍💼</span>
<!-- Patient <br class="mobile-only"/> Satisfaction -->
Patient Satisfaction
Patient
<br/>
Satisfaction
</div>
</div>
<div>
<div class="satisfaction-wrapper physician-wrapper">
<div class="satisfaction physician-satisfaction">
<span class="emoji">👨🏾‍⚕️</span>
Physician Satisfaction
</div>
Physician
<br/>
Satisfaction
</div>
</div>
</div>
<div class="caption">
<span class="grey"> The two are directly correlated. </span>
</div>
Expand All @@ -47,7 +53,7 @@
<!-- The second section starts here -->
<div class="patient-container quote-container">
<img class="patient-image" src="images/ani-kolleshi-vu-DaZVeny0-unsplash.jpg" alt="female white patient blue darting eyes blond hair">
<div class="unsplash-patient">
<div class="unsplash-patient mobile-hide max-900-hide">
Photo by <a href="https://unsplash.com/@anikolleshi?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Ani Kolleshi</a> on <a href="https://unsplash.com/photos/closeup-photo-of-womans-eye-wearing-mask-vu-DaZVeny0?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
</div>
<div class="text-content">
Expand Down Expand Up @@ -136,7 +142,7 @@ <h2>We're training a family of Medical Language Models</h2>
</div>

<br/><br/><br/><br/><br/>
<hr/>
<hr style="width: 65%; background-color: #9c9c9c;"/>
<br/><br/><br/><br/><br/>

<div id="mc_embed_shell">
Expand Down Expand Up @@ -171,7 +177,7 @@ <h2>We're training a family of Medical Language Models</h2>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script></div>

<br/><br/><br/><br/><br/>
<hr/>
<hr style="width: 50%; background-color: #b6b6b6;"/>
<br/><br/><br/><br/><br/>

<!-- Footer starts here -->
Expand All @@ -182,8 +188,6 @@ <h2>We're training a family of Medical Language Models</h2>
</div>
</footer>
<!-- Footer ends here -->


</div>

<script>
Expand Down
123 changes: 84 additions & 39 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ body {
font-family: 'Montserrat', sans-serif;
justify-content: center;
align-items: center;
width: 100vw;
margin: 0;
overflow-x: clip;
}
Expand All @@ -25,13 +24,52 @@ body {
text-align: center;
margin-top: 275px;
}
/* Define the rotation keyframes */
@keyframes rotate-around-circle {
from {
transform: rotate(0deg) translate(-50%, -50%);
}
to {
transform: rotate(360deg) translate(-50%, -50%);
}
}
/* Position the wrappers absolutely around the circle */
.satisfaction-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center the wrapper on the circle */
width: 245px;
height: 245px;
}
/* Initial positioning of satisfaction blocks */
.patient-wrapper {
transform-origin: bottom;
animation: rotate-patient 20s linear infinite; /* Adjust time as needed */
}

.physician-wrapper {
transform-origin: top;
animation: rotate-physician 20s linear infinite; /* Adjust time as needed */
}

/* Keyframes for rotation */
@keyframes rotate-patient {
0% { transform: translate(-50%, -100%) rotate(0deg); }
100% { transform: translate(-50%, -100%) rotate(360deg); }
}

@keyframes rotate-physician {
0% { transform: translate(-50%, 0%) rotate(0deg); }
100% { transform: translate(-50%, 0%) rotate(-360deg); }
}
.correlated {
height: 404px;
width: 100%;
display: block;
}
.circle {
position: absolute;
position: relative;
width: 400px; /* Adjust size as needed */
height: 400px; /* Adjust size as needed */
background-color: transparent;
Expand All @@ -42,34 +80,47 @@ body {
left: 50%;
transform: translate(-50%, -50%);
}
.infinity-symbol {
font-size: 62px;
line-height: 1px;
}
.satisfaction {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
background-color: white; /* Make the text color white */
z-index: 1;
position: absolute;
background-color: #fbfbfb;
border-radius: 50%;
transform-origin: center;
background-color: white;
padding: 21px;
}
.satisfaction > div {
margin: 0px -15px 0px 22px;
margin: 0px 28px;
}
.satisfaction > div:not(:last-child):after {
content: '∞';
font-size: 75px;
line-height: 0;
margin-left: 20px;
vertical-align: middle;
background-color: white; /* Make the infinity symbol color white */
.patient-satisfaction {
top: -20px; /* Adjust this value based on the size of the circle */
animation: counter-rotate 20s linear infinite;
}

.physician-satisfaction {
bottom: -20px; /* Adjust this value based on the size of the circle */
animation: counter-rotate-physician 20s linear infinite;
}

/* Counter rotate the blocks */
@keyframes counter-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}

@keyframes counter-rotate-physician {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.emoji {
font-size: 50px;
line-height: 1;
display: block;
margin-bottom: 10px;
}
.patient-emoji {
margin: 0 0 0 -120px;
}
.caption {
margin-top: 20px;
Expand Down Expand Up @@ -109,10 +160,6 @@ body {
.content {
padding-top: 60px; /* Make space for fixed header */
}
.circle-section {
/* Your circle section styles here */
/* Make sure you adjust any top/bottom margins or padding as necessary */
}
.quote-container {
display: flex;
align-items: center;
Expand All @@ -126,8 +173,6 @@ body {
background-color: #cccccc; /* Placeholder color */
margin-right: 20px;
}
.text-content {
}
.quote1 {
padding: 22px 0 0 75px;
max-width: 785px;
Expand Down Expand Up @@ -182,10 +227,10 @@ body {
}
.unsplash-patient {
position: absolute;
top: 395px;
top: 406px;
z-index: 1;
color: grey;
left: 520px;
left: 535px;
font-size: 11px;

a {
Expand Down Expand Up @@ -233,7 +278,6 @@ body {

.section {
text-align: center;
margin-top: 40px; /* Adjust as needed for spacing between sections */
padding: 20px;
background-color: #ffffff; /* Assuming white background for the quote section */
}
Expand All @@ -251,7 +295,7 @@ body {

.branding {
text-align: center;
margin-top: 40px; /* Adjust as needed for spacing */
margin: 0 0 35px 0;
}

.with-galvani-logo {
Expand Down Expand Up @@ -444,6 +488,14 @@ body {
}

/* Mobile styles */
@media screen and (max-width: 900px) {
.patient-container, .quote-container {
flex-direction: column;
}
.max-900-hide {
display: none;
}
}
@media (max-width: 768px) {
.nav-header {
height: auto;
Expand All @@ -468,20 +520,18 @@ body {
}

.satisfaction > div {
/* font-size: 20px; */
margin: 0px -15px 0px auto;
margin: 0px -25px 0px 158px;
background-color: white;
}
.satisfaction {
font-size: 22px;
width: 377px;
}
.satisfaction > div:not(:last-child):after {
display: none;
content: "";
font-size: 42px;
}
.patient-emoji {
margin: 0 0 0 -27px;
}

.quote2 {
font-size: 33px;
Expand Down Expand Up @@ -510,11 +560,6 @@ body {
display: none;
}

.patient-container, .quote-container {
flex-direction: column;
text-align: center;
}

.patient-image {
width: 100%;
height: auto;
Expand Down

0 comments on commit 14bfe1f

Please sign in to comment.