Clinical Blurbs
Class = clinicalnote-green
Title
This is the text, and here is a link and here is more text to see
- Bullet 1
- bullet 2
and
- number
- number
CSS CODE
/* GREEN CLINICAL NOTE */
.clinicalnote-green {
color:rgba(3,3,3,0.7);
font-size: 15px;
line-height: 1.2;
}
/*** Responsive Styles Tablet And Above ***/
@media all and (min-width: 700px) {
.clinicalnote-green {
background-color: #edfcf5;
border-radius: 10px;
border-width: 2px;
border-style: solid;
border-color: #40c68c;
width: 550px;
margin: auto;
Margin-top: 20px;
padding: 10px;
transition-duration: .5s;
}
.clinicalnote-green:hover {
background-color: #edf5fc;
border-color: #4185c7;
transform: scale(105%);
transition-duration: 0.5s;
}
.clinicalnote-green img {
transform: rotate(30deg);
position: absolute;
left: 80%;
top: -14%;
width: 50px!important;
background-color: #40c68c;
border-radius: 10vw;
border-style: solid;
border-width: 2px;
border-color: #40c68c;
transition-duration: 0.5s;
}
.clinicalnote-green:hover img {
transform: rotate(50deg);
transition-duration: 0.5s;
background-color: #4185c7;
border-color: #4185c7
}
.clinicalnote-green H3{
color: #40c68c;
Font-family: ‘Bobby Jones soft’, arial, sans-serif;
font-weight: 100;
font-size: 25px;
margin-left: -8%;
transition-duration: .5s;
}
.clinicalnote-green:hover H3{
color: #4185c7;
transition-duration: .5s;
}
.clinicalnote-green p {
margin-left: -8%;
}
.clinicalnote-green ol, ul {
margin-left: -3%;
}
}
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 500px) {
.clinicalnote-green {
background-color: #edfcf5;
border-radius: 10px;
border-width: 2px;
border-style: solid;
border-color: #40c68c;
width: 90%;
margin: auto;
padding: 5px;
margin-top: 20px;
transition-duration: .5s;
}
.clinicalnote-green:hover {
background-color: #edf5fc;
border-color: #4185c7;
transform: scale(105%);
transition-duration: 0.5s;
}
.clinicalnote-green img {
transform: rotate(30deg);
position: absolute;
left: 70%;
top: -10%;
width: 50px!important;
background-color: #40c68c;
border-radius: 10vw;
border-style: solid;
border-width: 2px;
border-color: #40c68c;
transition-duration: 0.5s;
}
.clinicalnote-green:hover img {
transform: rotate(50deg);
transition-duration: 0.5s;
background-color: #4185c7;
border-color: #4185c7
}
.clinicalnote-green H3{
color: #40c68c;
Font-family: ‘Bobby Jones soft’, arial, sans-serif;
font-weight: 100;
font-size: 25px;
margin-left: -20%;
transition-duration: .5s;
}
.clinicalnote-green:hover H3{
color: #4185c7;
transition-duration: .5s;
}
.clinicalnote-green p {
margin-left: -20%;
}
.clinicalnote-green ol, ul {
margin-left: -10%;
}
}
.clinicalnote-green a {
color: #40c68c;
Font-family: ‘Bobby Jones soft’, arial, sans-serif;
font-weight: 100;
Text-decoration: underline;
transition-duration: 0.25s;
}
.clinicalnote-green a:hover {
color: #4185c7;
transition-duration: 0.25s;
}
Class = clinicalnote-red
Title
This is the text, and here is a link and here is more text to see
- Bullet 1
- bullet 2
and
- number
- number
CSS CODE
/* RED CLINICAL NOTE */
.clinicalnote-red {
color:rgba(3,3,3,0.7);
font-size: 15px;
line-height: 1.2;
}
/*** Responsive Styles Tablet And Above ***/
@media all and (min-width: 700px) {
.clinicalnote-red {
background-color: #feeaef;
border-radius: 10px;
border-width: 2px;
border-style: solid;
border-color: #e02d4c;
width: 550px;
margin: auto;
Margin-top: 20px;
padding: 10px;
transition-duration: .5s;
}
.clinicalnote-red:hover {
background-color: #feeafc;
border-color: #e02dc3;
transform: scale(105%);
transition-duration: 0.5s;
}
.clinicalnote-red img {
transform: rotate(30deg);
position: absolute;
left: 80%;
top: -14%;
width: 50px!important;
background-color: #e02d4c;
border-radius: 10vw;
border-style: solid;
border-width: 2px;
border-color: #e02d4c;
transition-duration: 0.5s;
}
.clinicalnote-red:hover img {
transform: rotate(50deg);
transition-duration: 0.5s;
background-color: #e02dc3;
border-color: #e02dc3
}
.clinicalnote-red H3{
color: #e02d4c;
Font-family: ‘Bobby Jones soft’, arial, sans-serif;
font-weight: 100;
font-size: 25px;
margin-left: -8%;
transition-duration: .5s;
}
.clinicalnote-red:hover H3{
color: #e02dc3;
transition-duration: .5s;
}
.clinicalnote-red p {
margin-left: -8%;
}
.clinicalnote-red ol, ul {
margin-left: -3%;
}
}
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 500px) {
.clinicalnote-red {
background-color: #feeaef;
border-radius: 10px;
border-width: 2px;
border-style: solid;
border-color: #e02d4c;
width: 90%;
margin: auto;
padding: 5px;
margin-top: 20px;
transition-duration: .5s;
}
.clinicalnote-red:hover {
background-color: #feeafc;
border-color: #e02dc3;
transform: scale(105%);
transition-duration: 0.5s;
}
.clinicalnote-red img {
transform: rotate(30deg);
position: absolute;
left: 70%;
top: -10%;
width: 50px!important;
background-color: #e02d4c;
border-radius: 10vw;
border-style: solid;
border-width: 2px;
border-color: #e02d4c;
transition-duration: 0.5s;
}
.clinicalnote-red:hover img {
transform: rotate(50deg);
transition-duration: 0.5s;
background-color: #e02dc3;
border-color: #e02dc3
}
.clinicalnote-red H3{
color: #e02d4c;
Font-family: ‘Bobby Jones soft’, arial, sans-serif;
font-weight: 100;
font-size: 25px;
margin-left: -20%;
transition-duration: .5s;
}
.clinicalnote-red:hover H3{
color: #e02dc3;
transition-duration: .5s;
}
.clinicalnote-red p {
margin-left: -20%;
}
.clinicalnote-red ol, ul {
margin-left: -10%;
}
}
.clinicalnote-red a {
color: #e02d4c;
Font-family: ‘Bobby Jones soft’, arial, sans-serif;
font-weight: 100;
Text-decoration: underline;
transition-duration: 0.25s;
}
.clinicalnote-red a:hover {
color: #e02dc3;
transition-duration: 0.25s;
}