Skip to content

Updating interaction branch with rev2 changes #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bridgetorr17 merged 3 commits into from
Apr 6, 2025
Merged

Updating interaction branch with rev2 changes #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5535d6e
reworking content
bridgetorr17 Apr 6, 2025
d3a0eb6
tuning up rev2 styles
bridgetorr17 Apr 6, 2025
85a8628
Merge pull request #3 from bridgetorr17/rev2
bridgetorr17 Apr 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 33 additions & 44 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,60 +20,49 @@
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="about.html">Background</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="container2 dark">
<h2>Dr. Klos' Approach</h2>
<h2>Background</h2>
<div class="underline light"></div>
<div class="infographic">
<div class="infographic-sub1">
<img src="images/gear.png" alt="gear">
<span>BEHAVIORS</span>
<section class="sub1-container2">
<h4>Anxiety and Behavioral Program for Children</h4>
<div class="sub2-container2">
<p>For 25+ years, Dr. Klos ran a program called the Anxiety and Behavioral Program for Children, with offices in Bala Cynwyd,
Devon, and Paoli. The program focused on young children with developmental disabilities, physical disabilities,
and significant chronic health problems. Dr. Klos focused on the treatment of anxiety and behavior problems in children, helping them learn
better ways to manage their struggles. She has worked with children as young as 2 years old to help parents find ways to solve
problems their children are facing.</p>
<img src="images/parent-child-silhouette.png" alt="parent and child silhouette">
</div>
<div class="infographic-sub1">
<img src="images/thoughts.png" alt="thought bubble">
<span>THOUGHTS</span>
<h4>Current Work</h4>
<div class="sub2-container2">
<p>In <b>YEAR</b>, Dr. Klos decided to go back into clinical psychology. She missed working with clients, so she has set up a practice in Paoli.
She also has a small home office in South Philadelphia suitable only for individual adult clients. She continues her work with children and adults, helping them overcome and cope with trauma and anxiety based behaviors. </p>
</div>
<div class="infographic-sub1">
<img src="images/solution.png" alt="puzzle">
<span>SOLUTIONS</span>
<h4>Early Work</h4>
<div class="sub2-container2">
<p>Dr. Klos completed her clinical psychology internship at Central Montgomery
Mental Health Center in Norristown. She worked with developmentally
delayed preschoolers, doing developmental evaluations and consulting with
parents and teachers for five years in Northeast Philadelphia. She was the
Director of Psychology at Children's Rehabilitation Hospital in Philadelphia for
four years.</p>
</div>
<h4>Experience Abroad</h4>
<div class="sub2-container2">
<p>Dr. Klos took an early retirement for 15 years to do international volunteering in East Africa and teaching in China. She also was a seasonal National Park Ranger for
10 summer seasons in Haleakala National Park in Hawaii and Yellowstone National Park in Wyoming.</p>
<img src="" alt="sandy-travels">
</div>
<h4>Education</h4>
<div class="sub2-container2">
<p>Dr. Klos earned her PhD. in Clinical Psycology from Temple University. She is also a graduate of Bryn College with a degree in philosophy.</p>
</div>
</div>
<p>Dr. Klos is a behavioral psychologist, first and foremost. Her focus of treatment zeroes in on what you identify as
something you want to change. Dr. Klos provides the knowledge and guidance to start where you are and find strategies that will
move you in the direction you want to go.</p>
<section class="sub1-container2">
<h4>Is this Cognitive Behavioral Psychology?</h4>
<p>Yes. At its core, Cognitive Behavioral Therapy helps people overcome struggles in their life by changing their thoughts.
Thoughts are internal mental behaviors that are susceptible to learning in the same way that outward behaviors are. This
approach can be extremely helpful by focusing on the issue at hand and working through practical methods to address that issue.
Strategies to cope can be both behavioral and cognitive. </p>
</section>
<section class="sub1-container2">
<h4>What about a diagnosis?</h4>
<p>Having a diagnosis is not the same thing as knowing how to handle the behavior. For children, it is especially important to make
sure that the coping mechanism makes the child feel good about him or herself. A diagnosis is not a solution to a behavior problem.
Mastery is always the answer, learning something new that both works and feels like a success.</p>
</section>
<section class="sub1-container2">
<h4>How are parents involved?</h4>
<p>Dr. Klos works with a treatment model that involves both parents and children. Your child might have a behavior problem due to a learning difference, personality
characteristic, or in response to an upsetting experience. Dr. Klos assesses the problem and its impact, developing treatment strategies, practice of new techniques,
and ongoing assessment of progress and success of strategies. This leads to a happier outcome for all concerned. </p>
</section>
<section class="sub1-container2">
<h4>Does this work for Adults?</h4>
<p>Yes. The principles of learning apply to adults who want to change either their behavior or the way that they are coping with the stresses
of life. While Dr. Klos' work with adults is not as clearly goal centered as her work with children, the principles of learning underlie all of her
interventions, and building new skills is the road, again, to mastery.</p>
</section>
<section class="sub1-container2">
<h4>What is EMDR?</h4>
<p>Eye movement desensitization and reprocessing</p>
</section>
</section>
</main>
Expand Down
6 changes: 3 additions & 3 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="about.html">Background</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Expand Down Expand Up @@ -51,7 +51,7 @@ <h3>Aetna Provider</h3>
<h2>Offices</h2>
<div class="underline dark"></div>
<section class="sub1-container2">
<section class="sub2-container2">
<section class="sub2-container2 contact">
<iframe class="sub1-container1 map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1527.2988610661107!2d-75.47950602167765!3d40.039760121739896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6ecd52c07358f%3A0xbe1abf63ed73219d!2s63%20Chestnut%20Rd%2C%20Paoli%2C%20PA%2019301!5e0!3m2!1sen!2sus!4v1742336996280!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<section class="sub2-container1">
<h4>Paoli Office</h4>
Expand All @@ -62,7 +62,7 @@ <h4>Paoli Office</h4>
<h5>Availability on Monday and Tuesday afternoons and evenings</h5>
</section>
</section>
<section class="sub2-container2">
<section class="sub2-container2 contact">
<iframe class="sub1-container1 map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d48962.774746864285!2d-75.21422994462264!3d39.91513509367662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6c6070f5c647f%3A0xd6734b5fe2cdf9ce!2sSouth%20Philadelphia%2C%20Philadelphia%2C%20PA!5e0!3m2!1sen!2sus!4v1742337754657!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<section class="sub2-container1">
<h4>Home Office</h4>
Expand Down
166 changes: 90 additions & 76 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,68 @@ header span{
line-height: 2.1rem;
}

/******************************************
/* Typography
/*******************************************/

h1{
font-size: 3rem;
font-weight: 500;
margin: 0.5rem 0;
width: 80%;
text-align: left;
border-bottom: 2px solid rgb(30, 30, 30);
margin-bottom: 2rem;
}

h2{
font-size: 3rem;
font-weight: 400;
text-align: center;
margin: 0.5rem 0;
padding-top: 2rem;
}

h3{
font-size: 2rem;
font-weight: 300;
}

h5{
font-size: 1.5rem;
font-weight: 200;
}

h4{
font-size: 2.5rem;
font-weight: 300;
margin: 0;
padding: 1.5rem 0;
}

p, address{
font-size: 2rem;
font-weight: 200;
margin: 0;
}

a:hover{
color: rgb(155, 155, 155);
}

.underline{
width: 80%;
height: 1px;
margin: 0.1rem auto;
}

.iconStyle h3{
align-self: center;
padding-left: 3rem;
font-size: 2rem;
margin-top: 1rem;
}

/******************************************
/* Page Structure
/*******************************************/
Expand All @@ -63,11 +125,15 @@ main{

.sub1-container1{
width: 25%;
align-self: center;
}

.sub2-container1{
width: 50%;
padding-left: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}

.container2{
Expand Down Expand Up @@ -95,7 +161,7 @@ main{
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap-reverse;
padding: 3rem 0;
padding: 1rem 0;
}

.sub2-container2 p{
Expand Down Expand Up @@ -144,71 +210,13 @@ main{
color: rgb(222, 222, 222);
}

/******************************************
/* Typography
/*******************************************/

h1{
font-size: 3rem;
font-weight: 300;
margin: 0.5rem 0;
text-align: center;
}

h2{
font-size: 3rem;
font-weight: 400;
text-align: center;
margin: 0.5rem 0;
padding-top: 2rem;
}

h3{
font-size: 2rem;
font-weight: 300;
}

h5{
font-size: 1.5rem;
font-weight: 200;
}

h4{
font-size: 2.5rem;
font-weight: 300;
margin: 0;
padding: 1.5rem 0;
}

p, address{
font-size: 2rem;
font-weight: 200;
margin: 0;
}

a:hover{
color: rgb(155, 155, 155);
}

.underline{
width: 80%;
height: 1px;
margin: 0.1rem auto;
}

.iconStyle h3{
align-self: center;
padding-left: 3rem;
font-size: 2rem;
}

/******************************************
/* Media
/*******************************************/

#sandyHeadshot{
width: 100%;
max-width: 25rem;
max-width: 40rem;
min-width: 10rem;
border-radius: 0.25rem;
}
Expand All @@ -221,7 +229,7 @@ a:hover{
}

.iconStyle img{
width: 10%;
width: 15%;
height: 90%;
min-width: 5rem;
}
Expand Down Expand Up @@ -260,13 +268,28 @@ a:hover{
/******************************************
/* Responsive Styles
/*******************************************/
@media all and (min-width:900px){
h1{
font-size: 3vw;
}

h1 + p{
font-size: 2vw;
}
}

@media all and (max-width:900px){
.sub2-container2{
.contact{
display: flex;
flex-direction: column-reverse;
align-items: center;
align-items: flex-end;
width: 100%;
padding-left: 4rem;
}


.sub2-container1{
padding-left: 2rem;
}

.sub2-container2 p{
Expand All @@ -275,18 +298,16 @@ a:hover{

.map{
width: 75%;
padding-left: 2rem;
align-self: flex-end;
}

.sub1-container2 {
padding: 3rem;
}

.iconStyle h3{
font-size: 1.5vw
}
}

@media all and (max-width:600px){
@media all and (max-width:700px){
.container1{
flex-direction: column-reverse;
align-items: center;
Expand All @@ -295,7 +316,7 @@ a:hover{

.sub1-container1{
width: 60%;
margin-left: 6rem;
margin-left: 0rem;
}

.sub2-container1{
Expand All @@ -318,16 +339,9 @@ a:hover{
.map{
width: 100%;
height: 100%;
padding: 2rem;
}

.remove{
display: none;
}
}

@media all and (max-width:430px){
.sub1-container1{
margin-left: 0;
}
}
Loading