Skip to content

Instantly share code, notes, and snippets.

@tvieiragoncalves

tvieiragoncalves/central-coast-psychology.markdown

Created May 3, 2019 16:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tvieiragoncalves/c0e6d3578e24d3bb0b1f7b899601afbc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tvieiragoncalves/c0e6d3578e24d3bb0b1f7b899601afbc to your computer and use it in GitHub Desktop.
Download ZIP
Central Coast Psychology
Raw
central-coast-psychology.markdown

Central Coast Psychology

Prototyping a site for a mate. Tring to keep it plain and simple, focusing on content and accesibility.

It's a 1 pager with scrollspy and modals for additional content considered too long for the flow. Google maps needs to be imbedded with a private key, hence the image placeholder

A Pen by Tiago Gonçalves on CodePen.

License.

Raw
index.html
<body data-spy="scroll" data-target="#bs-example-navbar-collapse-1" data-offset="70">
<nav class="navbar navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">
<svg class="brand-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M9.5 19c-0.084 0-0.167-0.021-0.243-0.063-0.116-0.065-2.877-1.611-5.369-4.082-0.196-0.194-0.197-0.511-0.003-0.707s0.511-0.197 0.707-0.003c1.979 1.962 4.186 3.346 4.908 3.776 0.723-0.431 2.932-1.817 4.908-3.776 0.196-0.194 0.513-0.193 0.707 0.003s0.193 0.513-0.003 0.707c-2.493 2.471-5.253 4.017-5.369 4.082-0.076 0.042-0.159 0.063-0.243 0.063z"></path>
<path fill="#000000" d="M1.279 11c-0.188 0-0.368-0.106-0.453-0.287-0.548-1.165-0.826-2.33-0.826-3.463 0-2.895 2.355-5.25 5.25-5.25 0.98 0 2.021 0.367 2.931 1.034 0.532 0.39 0.985 0.86 1.319 1.359 0.334-0.499 0.787-0.969 1.319-1.359 0.91-0.667 1.951-1.034 2.931-1.034 2.895 0 5.25 2.355 5.25 5.25 0 1.133-0.278 2.298-0.826 3.463-0.118 0.25-0.415 0.357-0.665 0.24s-0.357-0.415-0.24-0.665c0.485-1.031 0.731-2.053 0.731-3.037 0-2.343-1.907-4.25-4.25-4.25-1.703 0-3.357 1.401-3.776 2.658-0.068 0.204-0.259 0.342-0.474 0.342s-0.406-0.138-0.474-0.342c-0.419-1.257-2.073-2.658-3.776-2.658-2.343 0-4.25 1.907-4.25 4.25 0 0.984 0.246 2.006 0.731 3.037 0.118 0.25 0.010 0.548-0.24 0.665-0.069 0.032-0.141 0.048-0.212 0.048z"></path>
<path fill="#000000" d="M10.515 15c-0.005 0-0.009-0-0.013-0-0.202-0.004-0.569-0.109-0.753-0.766l-1.217-4.334-0.807 3.279c-0.158 0.643-0.525 0.778-0.73 0.8s-0.592-0.027-0.889-0.62l-0.606-1.211c-0.029-0.058-0.056-0.094-0.076-0.117-0.003 0.004-0.007 0.009-0.011 0.015-0.37 0.543-1.192 0.953-1.913 0.953h-1c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h1c0.421 0 0.921-0.272 1.087-0.516 0.223-0.327 0.547-0.501 0.891-0.478 0.374 0.025 0.708 0.279 0.917 0.696l0.445 0.89 0.936-3.803c0.158-0.64 0.482-0.779 0.726-0.783s0.572 0.125 0.751 0.76l1.284 4.576 1.178-3.608c0.205-0.628 0.582-0.736 0.788-0.745s0.59 0.068 0.847 0.677l0.724 1.719c0.136 0.322 0.578 0.616 0.927 0.616h1.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-1.5c-0.747 0-1.559-0.539-1.849-1.228l-0.592-1.406-1.274 3.9c-0.207 0.634-0.566 0.733-0.771 0.733z"></path>
</svg>
Cental Coast Psychology
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about-us">About Us</a></li>
<li><a href="#our-service">Our Service</a></li>
<li><a href="#referrer-info">Refferers</a></li>
<li><a href="#contact-us">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Hero -->
<section class="hero" id="home">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="text-center">Dedicated Psychology Services</h1>
<h4 class="text-muted text-center">Focused on quality treatments to children, adolescants, adults and families</h4>
</div>
<div class="col-sm-12 text-center">
<button class="btn btn-lg btn-primary">Contact Us</button>
</div>
</div>
</div><!-- /.container -->
</section><!-- /.hero -->
<!-- About Us -->
<section id="about-us" class="banner">
<!-- About Us description -->
<section class="content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-header">About Us</div>
</div>
<div class="col-sm-8 col-sm-offset-2 text-center">
<p>We're dedicated to providing high quality focussed psychological services and treatments to children, adolescents, adults and families. We use therapies found to be effective by research, tailored to meet your individual treatment goals.</p>
</div>
</div>
</div><!-- /.container -->
</section><!-- /.about us description -->
<!-- Psychologists -->
<section class="content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-sub-header">
<div class="sub-header__text">Psychologists</div>
</div>
</div>
</div>
<!-- Ana -->
<div id="ana" class="row">
<div class="profile col-sm-12">
<div class="col-sm-4">
<div class="profile-image image-ana"></div>
</div>
<div class="col-sm-8">
<div class="profile-name">Dr. Ana Lopes</div>
<div class="profile-position">Clinical Psychologist</div>
<div class="profile-description">Ana’s approach to therapy is supportive, warm and non-judgemental. She works collaboratively with each individual, developing an understanding of each person’s unique goals and implementing individualised, tailored therapy programs.</div>
<button type="button" class="btn btn-link profile-link" data-toggle="modal" data-target="#anaModal">See More</button>
<div class="profile-contacts">
<div class="contact-info contact-small"><i class="material-icons">&#xE325;</i><div class="contact-info__text">0406 000 491</div></div>
<div class="contact-info contact-small"><i class="material-icons">&#xE0BE;</i><div class="contact-info__text">alopes@centralcoastpp.com.au</div></div>
</div>
</div>
</div>
</div><!-- /.ana -->
<!-- Belinda -->
<div id="belinda" class="row">
<div class="profile col-sm-12">
<div class="col-sm-4">
<div class="profile-image image-belinda"></div>
</div>
<div class="col-sm-8">
<div class="profile-name">Belinda Preston</div>
<div class="profile-position">Psychologist</div>
<div class="profile-description">Belinda’s approach to therapy is compassionate, collaborative and non-judgemental. Belinda aims to develop client centred treatment plans to address the specific needs of the person. This process occurs in collaboration with the client. </div>
<button type="button" class="btn btn-link profile-link" data-toggle="modal" data-target="#belindaModal">See More</button>
<div class="profile-contacts">
<div class="contact-info contact-small"><i class="material-icons">&#xE325;</i><div class="contact-info__text">0407 279 817</div></div>
<div class="contact-info contact-small"><i class="material-icons">&#xE0BE;</i><div class="contact-info__text">bpreston@centralcoastpp.com.au</div></div>
</div>
</div>
</div>
</div><!-- /.belinda -->
</div><!-- /.container -->
</section><!-- /.psychologists -->
<!-- We can help with -->
<section class="content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="section-sub-header">
<div class="sub-header__text">We can help with</div>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-4">
<ul class="help-list">
<li>Depression</li>
<li>Anxiety</li>
<li>Obsessive Compulsive Disorder</li>
<li>Trauma including PTSD</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="help-list">
<li>Autism Spectrum Conditions</li>
<li>Tic Disorders</li>
<li>Self Esteem</li>
<li>Interpersonal Difficulties</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="help-list">
<li>Sleep Difficulties</li>
<li>Grief and Loss</li>
<li>Parenting</li>
</ul>
</div>
</div>
</div><!-- /.container -->
</section><!-- /.we can help with -->
</section><!-- /.about us -->
<!-- Our Service -->
<section id="our-service" class="banner">
<div class="section-header">Our Service</div>
<!-- Making an appointment -->
<section class="content">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="section-sub-header">
<div class="sub-header__text">Making an Appointment</div>
</div>
<p>
You don’t need a referral from your GP, Paediatrician or Psychiatrist to make an appointment to see one of the psychologists at the Central Coast Psychology Practice.
</p>
<p>
If you have been given a referral by your medical doctor, then you may be eligible for a Medicare rebate. For example, if your GP has given you a referral and a Mental Health Care Plan, then you are entitled to receive a rebate for each appointment you attend with your psychologist (for up to 10 appointments in one year).
</p>
<p>
If you are planning to see your medical doctor to discuss referral and rebate options, please request a longer consultation. You doctor will assess your eligibility for various care plan options.
</p>
<p>
We welcome any questions or requests for further information.
</p>
</div>
</div>
</div><!-- /.container -->
</section><!-- /.making an appointment -->
<!-- Initial Consultation -->
<section class="content">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="section-sub-header">
<div class="sub-header__text">Initial Consultation</div>
</div>
<p>
The therapy process begins with an initial consultation. The goal of this appointment is for you and your psychologist to work together in getting a thorough understanding of your difficulties, personal and family history and strengths. It is the start of the process of building a trusting and collaborative relationship with your psychologist.
</p>
<p>
Following this appointment, together you will develop an individualised formulation and treatment plan.
</p>
</div>
</div>
</div><!-- /.container -->
</section><!-- /.initial consulatation -->
<!-- The Therapy Process -->
<section class="content">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="section-sub-header">
<div class="sub-header__text">Therapy Process</div>
</div>
<p>
Sessions are 50 minutes in duration and the frequency of appointments is individually tailored to meet your needs and goals. Appointments can be scheduled weekly, fortnightly and monthly.
</p>
<p>
During the therapy process, your psychologist might need to consult with your other health professionals. Your written consent will be requested. Our psychologists are bound by a professional code of ethics and are required to abide by principles of professional conduct, responsibilities and confidentiality. Some limits of confidentiality apply, your psychologist will discuss these with you at your initial appointment.
</p>
</div>
</div>
</div><!-- /.container -->
</section><!-- /.therapy process -->
<!-- Fees & Rebates -->
<section class="content">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="section-sub-header">
<div class="sub-header__text">Fees and Rebates</div>
</div>
<p>
You may be eligible for Medicare or private health fund rebates depending on your referral and health fund provisions. The Central Coast Psychology Practice has electronic claiming and EFTPOS facilities. There is usually a gap payment. Please feel free to contact us to discuss appointment fees and rebates.
</p>
<p>
There is a cancellation fee of 50% for appointments cancelled within 24 hours of the appointment time or for non-attended appointments. Unfortunately, no rebates are available for cancellation fees. Cancellations made before the 24 hour time frame will not incur a fee.
</p>
<p>
Please also note that a schedule of fees applies for the following services (and there are no rebates available): phone consultation; report assessment and preparation; medico-legal report assessment and completion.
</p>
</div>
</div>
</div><!-- /.container -->
</section><!-- /.fees & rebates -->
</section><!-- /.our service -->
<!-- Referrer Info -->
<section id="referrer-info" class="banner">
<div class="section-header">Refferer Info</div>
<!-- Referrals for Ana -->
<section class="content">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="section-sub-header">
<div class="sub-header__text">Referrals for Ana</div>
</div>
<p>
Ana is registered to provide clinical psychology services under the Medicare Mental Health Care Plan, Enhanced Primary Care Plan, Helping Children with Autism initiative and under DSS/FaHCSIA funding.
</p>
<p>
Referrals made under a Medicare Mental Health Care Plan, may entitle your patients to receive a rebate per session for up to six sessions. The rebate that your patients will be eligible for under an Enhanced Primary Care Plan is $52.95 per appointment for up to five appointments in a calendar year, and $84.80 per appointment under the Helping Children with Autism initiative.
</p>
<p>
A treatment progress letter will be sent to you following each course of psychological treatment sessions and your patient will be asked to return to see you for a care plan review. Depending on your patient’s needs and treatment goals, consultation and treatment feedback might be provided at variable times. Please feel free to contact Ana if you have any questions or require further information regarding the progress and care of your patients. Ana aims to take a collaborative team approach in working with each individual.
</p>
<p>
If you would like to make a referral, or have any questions, please feel free to contact Ana. Referrals can either be faxed to (02) 4324 2062, posted to Suite 3, 283 Mann Street, Gosford NSW 2250, marked confidential, or can be given to your patient and brought in for the initial appointments. Your patients can contact Ana directly to arrange a suitable appointment time.
</p>
</div>
</div>
</div><!-- /.container -->
</section><!-- /.referrals for ana -->
</section><!-- /.referrer info -->
<!-- Contact Us -->
<section id="contact-us" class="banner full-width">
<div class="container-fluid">
<div class="row">
<div class="map col-sm-6"></div>
<div class="col-sm-6 text-center pv-50">
<div class="section-header text-left">Contact Us</div>
<address>
<strong>Central Coast Psychology</strong><br>
283 Mann Street, Suite 3<br>
Gosford, NSW 2250<br>
</address>
<div class="contact-info"><i class="material-icons">&#xE0CD;</i><div class="contact-info__text">(02) 4302 0139</div></div><br />
<div class="contact-info"><i class="material-icons">&#xE8A8;</i><div class="contact-info__text">(02) 4324 2062</div></div>
<div class="row">
<div class="col-sm-12 pt-50">
<div class="section-sub-header">
<div class="sub-header__text">Direct Contact</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<div class="col-sm-6">
<div class="profile-image image-ana avatar"></div>
<a href="#ana" class="contact-link">Dr. Ana Lopes</a>
</div>
<div class="col-sm-6">
<div class="profile-image image-belinda avatar"></div>
<a href="#belinda" class="contact-link">Belinda Preston</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="text-center">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="footer-header">Disclaimer</div>
<p>Please note the Central Coast Psychology Practice does not provide a crisis service. If you are in crisis, please call the Mental Health Line on
1800 011 511, and go to the emergency department of your local hospital or call 000.</p>
<p>
The content on this website is only a summary of the subject matter covered and is not intended to be, nor should be relied on, as a substitute for professional advice.
</p>
<p>
Every care has been taken to ensure that information is accurate and appropriate to the general population. However, no warranties or
representations regarding the quality, accuracy or fitness for purpose of any content on this site are made.
Any person accessing this site shall have no right to seek any compensation for any loss or damage from any party associated with the site howsoever occasioned.
</p>
<p>
Links to third party sites are provided for general information only. Central Coast Psychology Practice does not guarantee the content of any sites.
Your access to, and reliance on, third part site is entirely at your own risk. Central Coast Psychology Practice excludes all liability (including for negligence)
for any loss, cost, expense or damage arising out of your use of third party sites.
</p>
<p>
© 2014 Central Coast Psychology Practice
</p>
</div><!-- /.col sm 12 -->
</div><!-- /.row -->
</div><!-- /.container -->
</footer>
<!-- Modal -->
<div class="modal fade" id="anaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<!-- <h4 class="modal-title" id="myModalLabel">Modal title</h4> -->
<div class="profile-image image-ana"></div>
<div class="profile-name text-center">Dr. Ana Lopes</div>
<div class="profile-position text-center">Clinical Psychologist</div>
</div>
<div class="modal-body">
<p>
Ana’s approach to therapy is supportive, warm and non-judgemental. She works collaboratively with each individual, developing an understanding of each person’s unique goals and implementing individualised, tailored therapy programs.
</p>
<p>
Ana is experienced in cognitive-behavioural therapy (CBT), mindfulness-based CBT, and schema-focussed therapy. She also has an interest and experience in working with parents and carers within the “Integrated Family Intervention Program” framework.
</p>
<p>
Ana has been providing psychological assessment and treatment to children, adolescents, adults and families for over 8 years. She has experience in therapies for anxiety, depression, trauma, sleep problems, grief and loss, self-esteem and emotion regulation difficulties, and impulse control disorders.
</p>
<p>
One of her areas of interest is also in working with Autism Spectrum conditions, including Asperger’s Syndrome. Many individuals with Autism Spectrum Disorder (ASD) experience additional mental health problems, including depression, anxiety, obsessive compulsive disorder, tics, and behavioural and emotional regulation difficulties. Ana has acquired substantial experience in supporting people who are struggling with multiple mental health difficulties. She also has experience in providing therapy for the siblings, parents, carers and partners, of people working through mental health conditions.
</p>
<p>
After completing her Bachelor of Psychology at Macquarie University 15 years ago, Ana’s first job was at a school and respite centre working with children with ASD. Her interest in working with children, youth and families grew and she went on to do further study. During her postgraduate studies at Sydney University, she co-developed the “Emotion-Based Social Skills Training Program” for children with High Functioning ASD and their families, at Westmead Children’s Hospital. Ana has also held clinical psychologist positions at Randwick Children’s Hospital and the University of NSW Child Behaviour Research Clinic.
</p>
<p>
Ana is a member of the Australian Clinical Psychology Association (ACPA), the Australian Psychological Society Clinical College (APS CCLIN) and the Australian Association of Cognitive Behaviour Therapy (AACBT).
</p>
<p>
Ana welcomes all enquiries, please feel free to contact her if you have any questions or would like further information.
</p>
</div><!-- /.modal body-->
<div class="modal-footer text-center">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- /.modal footer-->
</div><!-- /.modal content-->
</div><!-- /.modal dialog -->
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="belindaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<!-- <h4 class="modal-title" id="myModalLabel">Modal title</h4> -->
<div class="profile-image image-belinda"></div>
<div class="profile-name text-center">Belinda Preston</div>
<div class="profile-position text-center">Psychologist</div>
</div>
<div class="modal-body">
<p>
Belinda Preston is a Registered Psychologist who specialises in working with children, adolescents and adults. Belinda has six years’ experience working as a Psychologist. Belinda has specialised in assisting people with experiences of childhood sexual abuse, physical or emotional abuse, neglect, sexual assault, problematic mental health issues, risk of suicide, drug and alcohol abuse or dependence issues. Additionally, Belinda has experience in relation to medico-legal issues, conducts Psychological Assessments, treatment and completes court reports.
</p>
<p>
Furthermore, Belinda has fifteen years’ experience working in the treatment of mental health conditions, drug and alcohol dependence or abuse issues and working with victims or perpetrators of serious crime. Belinda has worked extensively with people detained in custody or who have committed serious or violent criminal offences.
</p>
<p>
Belinda’s approach to therapy is compassionate, collaborative and non-judgemental. Belinda aims to develop client centred treatment plans to address the specific needs of the person. This process occurs in collaboration with the client.
</p>
<p>
Belinda is experienced in a range of psychological approaches including cognitive-behavioural therapy (CBT), dialectical behavioural therapy (DBT), acceptance and commitment therapy (ACT), and refers to trauma Informed practices. Belinda uses her extensive experience and evidence based practices to determine which therapeutic approach would be most suitable for each individual by assessing what would be the most effective approach or combination of approaches to assist the person to improve the their mental health and overall quality of life.
</p>
<p>
Belinda is a Medicare accredited Psychologist and a Victim Services approved counsellor with the Attorney General and Justice Department.
</p>
<p>
Belinda is a member of the Australian Psychological Society (APS) and is the Coordinator of the Mental Health Professional Network, Central Coast. Belinda is also trained to facilitate the ASIST (Applied Suicide Intervention Skills Training) program and has an interest in reducing the suicide rate in Australia and internationally.
</p>
<p>
Belinda welcomes any inquiries, please feel free to contact her if you have any questions or require further information.
</p>
</div><!-- /.modal body-->
<div class="modal-footer text-center">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- /.modal footer-->
</div><!-- /.modal content-->
</div><!-- /.modal dialog -->
</div><!-- /.modal -->
</body>
Raw
script.js
$(function() {
// Anchor Target Scroll Animation
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - 62
}, 600);
return false;
}
}
});
// Header Shadow
$(window).scroll(function() {
var windowScroll = $(this).scrollTop();
if (windowScroll > 304) {
$(".navbar-fixed-top").addClass("shadow");
} else {
$(".navbar-fixed-top").removeClass("shadow");
}
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.sass
// Open Sans font import
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700)
// Variables
$font-family: "Open Sans", Helvetica, Arial, sans-serif
// Colours
$primary: #71C3A4
$grey: #BDC4D0
$text-dark: #555
$background-dark: #2F3032
// helper class
.pt-20
padding-top: 20px
.pt-50
padding-top: 50px
.pv-50
padding-top: 50px
padding-bottom: 50px
// Mixins
=absolute($top, $left, $right, $bottom)
position: absolute
top: $top
left: $left
right: $right
bottom: $bottom
=translate($x,$y)
-webkit-transform: translate($x,$y)
-webkit-transform: translate3d($x,$y,0)
-ms-transform: translate($x,$y)
-ms-transform: translate3d($x,$y,0)
transform: translate($x,$y)
transform: translate3d($x,$y,0)
// Typography
*
font-family: $font-family
html
height: 100%
font-size: 16px
.section-header
margin-bottom: 30px
font:
size: 1.5rem
weight: 300
text:
align: center
letter-spacing: 0.04rem
.section-sub-header
position: relative
margin-bottom: 30px
font:
size: 1rem
weight: 600
text:
align: center
// transform: uppercase
letter-spacing: 0.04rem
&:before
content: ''
display: block
+absolute(50%,50%,null,null)
width: 40%
height: 1px
// box-shadow: inset 0 0 -2px #71C3A4
+translate(-50%,-50%)
background: #71C3A4
// border-bottom: 6px solid #71C3A4
.sub-header__text
position: relative
display: inline-block
padding: 0 15px
background: white
// base
body
position: relative
min-height: 100vh
padding-top: 70px
background:
image: linear-gradient(top, #336666, #99ffcc)
attachment: fixed
// styles
.navbar
height: 70px
margin: 0
color: $text-dark
background: white
border-radius: 0
&.shadow
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16)
.navbar-brand
position: relative
height: 70px
padding: 25px 15px 25px 50px
font:
size: 1.25rem
weight: 300
letter-spacing: 0.04rem
color: #61AA94
svg.brand-icon
+absolute(50%,0,null,null)
width: 40px
height: 40px
+translate(0,-50%)
path
fill: #61AA94
.navbar-nav
position: relative
> li
position: relative
width: 130px
> a
padding: 25px 15px
text:
align: center
transform: uppercase
letter-spacing: 1px
color: $text-dark
&:hover, &:focus
background: white
// Moving Line Style
&:last-of-type:after
content: ''
display: block
+absolute(null,0,0,0)
height: 4px
background: $primary
+translate(-300%,0)
transition: transform 0.2s ease-in, opacity 0.2s ease-in
opacity: 0
// Active class applied by scrollspy
&.active
// Moving the line by sibling selector
&:first-of-type
~ :last-of-type:after
+translate(-300%,0)
opacity: 1
&:nth-of-type(2)
~ :last-of-type:after
+translate(-200%,0)
opacity: 1
&:nth-of-type(3)
~ :last-of-type:after
+translate(-100%,0)
opacity: 1
&:last-of-type:after
+translate(0,0)
opacity: 1
> a
color: $primary
background: white
.hero
position: relative
height: 300px
margin-bottom: 4px
padding-top: 80px
color: white
background:
image: url('https://images.unsplash.com/photo-1446071103084-c257b5f70672?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1920&h=2907&q=80')
color: white
size: cover
position: center center
.overlay
+absolute(0,0,0,0)
background: linear-gradient(180deg,rgba(0,0,0,.7) 0,transparent 30%,transparent 70%,rgba(0,0,0,.7))
.banner
margin-bottom: 4px
padding: 50px 15px
background: white
&.full-width
min-height: 500px
padding: 0
.content
// applies padding to content children of banners
&:not(:first-of-type)
padding: 50px 0 0 0
p
margin-bottom: 25px
font:
size: 0.875rem
text-align: center
color: $text-dark
letter-spacing: 0.04rem
.help-list
margin: 0
padding: 20px 0
list-style: none
li
margin-bottom: 12px
font:
size: 1rem
text:
align: center
letter-spacing: 0.04rem
color: $text-dark
.profile
position: relative
padding-top: 10px
margin-bottom: 30px
letter-spacing: 0.04rem
// Rounded images of original pictures
.profile-image
position: relative
margin: 10px auto 20px auto
width: 125px
height: 125px
border-radius: 100%
overflow: hidden
@media screen and (min-width: 769px)
margin: 10px 15px 0 auto
// Pseudo element contains picture as background to allow custom placement
&:before
content: ''
display: block
+absolute(-10px,-12px,null,null)
width: 150px
height: 197.25px
background:
size: cover
position: center center
// Ana's image
&.image-ana
&:before
background:
image: url(https://www.centralcoastpp.com.au/pictures/ana_lopes.png)
// Belindas image
&.image-belinda
&:before
background:
image: url(https://www.centralcoastpp.com.au/pictures/belinda_preston.png)
// shrinks to avatar size 50px x 50px
&.avatar
width: 50px
height: 50px
margin: 0 auto 10px
&:before
+absolute(-3px,-4px,null,null)
width: 60px
height: 78.9px
.profile-name
font:
size: 1rem
weight: 400
text-align: center
color: $text-dark
@media screen and (min-width: 769px)
text-align: left
.profile-position
margin-bottom: 15px
font:
size: 0.875rem
weight: 400
text-align: center
color: $grey
@media screen and (min-width: 769px)
text-align: left
.profile-contacts
padding-top: 25px
text-align: center
@media screen and (min-width: 769px)
text-align: left
.profile-description
// margin-bottom: 15px
font:
size: 0.875rem
color: $text-dark
text-align: center
@media screen and (min-width: 769px)
text-align: left
.profile-link
display: block
margin: 0 auto
padding: 8px 0
color: $primary
text-align: center
outline: none !important
@media screen and (min-width: 769px)
margin: 0 auto 0 0
&:hover
color: darken($primary, 10%)
&:focus
color: darken($primary, 10%)
.map
height: 500px
background:
image: url('https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap')
size: cover
position: center center
.contact-info
display: inline-block
position: relative
margin-bottom: 20px
padding-left: 30px
line-height: 1rem
vertical-align: middle
letter-spacing: 0.04rem
i
display: block
+absolute(50%,0,null,null)
+translate(0,-50%)
.contact-info__text
display: inline-block
font:
size: 1rem
line-height: 1rem
// small variant
&.contact-small
i
color: #757575
.contact-info__text
margin-right: 12px
font:
size: 0.8375rem
color: #757575
.contact-link
text:
align: center
decoration: underline
letter-spacing: 1px
color: $primary
footer
padding: 50px 15px
background: $background-dark
.footer-header
margin-bottom: 30px
font:
size: 1rem
letter-spacing: 1px
color: white
p
margin-bottom: 25px
font:
size: 0.875rem
text-align: center
color: rgba(255,255,255,0.7)
letter-spacing: 0.04rem
.modal
.modal-body
max-height: 500px
padding: 25px
overflow: auto
.profile-image
position: relative
margin: 10px auto 20px auto
width: 125px
height: 125px
border-radius: 100%
overflow: hidden
// Pseudo element contains picture as background to allow custom placement
&:before
content: ''
display: block
+absolute(-10px,-12px,null,null)
width: 150px
height: 197.25px
background:
size: cover
position: center center
.profile-name
margin-bottom: 5px
font:
size: 1rem
weight: 400
text-align: center
color: $text-dark
.profile-position
margin-bottom: 15px
font:
size: 0.875rem
weight: 400
text-align: center
color: $grey
p
margin-bottom: 25px
font:
size: 0.875rem
color: $text-dark
letter-spacing: 0.04rem
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment