Headers
Header 1 (h1)
Demo
Code Only (Without ACF Integration)
HTML
<!-- Header 1 start --> <section class="wa_h1_hdrone"> <div class="container"> <div class="row"> <div class="col-12 col-md-12 col-lg-6"> <div class="wa_h1_logoone"><img src="<?php echo $tmp_dir; ?>car_icon_top.png" /></div> <div class="wa_h1_logotwo"><img src="<?php echo $tmp_dir; ?>name_top.png" /></div> </div> <div class="col-12 col-md-12 col-lg"> <div class="wa_h1_logo_t"><img src="<?php echo $tmp_dir; ?>5_stars_top.png" /></div> </div> <div class="col-12 col-lg-auto"> <div class="wa_h1_top"><img src="<?php echo $tmp_dir; ?>instagram.png" /> uptowntransporation</div> <div class="wa_h1_tel"><a href="tel:7174015450">717-401-5450</a></div> <div class="wa_h1_email"><a href="mailto:webmaster@example.com">Email Us</a></div> </div> </div> </div> <div class="wa_h1_subhead">PROVIDING TRANSPORTATION SERVICES</div> </section> <!-- Header 1 End -->
CSS
/* Header 1 Start --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
.wa_h1_hdrone{
margin-top: 20px;
text-align: center;
}
.wa_h1_logoone{
}
.wa_h1_logotwo{
margin-top: 15px;
margin-bottom: 20px;
}
.wa_h1_logo_t{
}
.wa_h1_top{
text-transform: uppercase;
font-size: 0.9em;
font-weight: 500;
margin-top: 20px;
}
.wa_h1_tel{
margin-top: 5px;
margin-bottom: 5px;
font-family: 'Oswald', sans-serif;
font-size: 2em;
color: #3541a1;
}
.wa_h1_tel a:link,.wa_h1_tel a:visited, .wa_h1_tel a:active {
color: #3541a1;
text-decoration: none;
}
.wa_h1_tel a:hover{
color: #f44336;
text-decoration: none;
}
.wa_h1_email{
font-weight: 700;
}
.wa_h1_subhead{
margin-top: 10px;
background-color: #000f24;
color: #ebd738;
padding: 10px 0;
font-size: 1.3em;
font-weight: 600;
letter-spacing: 0.2em;
border-bottom: solid 3px #f9a90c;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.wa_h1_logoone {
float: left;
margin-left: 40px;
}
.wa_h1_logotwo{
float: left;
margin-left: 10px;
}
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.wa_h1_logo_t{
margin-top: 54px;
}
.wa_h1_top, .wa_h1_tel, .wa_h1_email{
text-align: left;
}
.wa_h1_logo_t{
text-align: left;
}
.wa_h1_logotwo{
margin-top: 0;
}
.wa_h1_top {
margin-top: 0px;
}
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.wa_h1_logoone {
margin-left: 0px;
}
.wa_h1_logotwo{
margin-left: 5px;
}
.wa_h1_tel{
margin-top: 0px;
margin-bottom: 0px;
}
.wa_h1_logo_t{
margin-top: 20px;
}
.wa_h1_logotwo{
margin-top: 29px;
}
.wa_h1_logoone{
margin-top: 10px;
}
.wa_h1_logo_t {
text-align: center;
}
}
/* Header 1 End --------------------------------------------------------- */Logo first part: 152px X 66px
Logo second part: 179px X 32px
Middle section element (rating): 166px X 41px
Phone number, email and social link is plain text.
Header 2 (h2)
Demo
Code Only (Without ACF Integration)
HTML
<!-- H2 Header 2 -----------------------------------------------> <section class="wa_h2"> <div class="container"> <div class="row"> <div class="col-12 col-lg-auto mt-4" align="center"> <img src="<?php echo $tmp_dir; ?>logo_top.png"> </div> <div class="col-12 col-lg mt-4" align="center"> <img src="<?php echo $tmp_dir; ?>text_top.png"> </div> </div> </div> </section> <!-- H2 END ----------------------------------------------->
CSS
/* H2 Header 2 ----------------------------------------------- */
.wa_h2{
background-color: #162639;
padding-bottom: 20px;
border-bottom: solid 8px #F7A818;
}
/* H2 END --------------------------------------------------------*/Header 3 (h3)
Code Only (Without ACF Integration)
HTML
<!-- Header 3 start --> <section class="wa_h3_hdrone"> <div class="container"> <div class="row"> <div class="col-12 col-md-12 col-lg-6"> <div class="wa_h3_logoone"><img src="<?php echo $tmp_dir; ?>logo_top.png" /></div> </div> <div class="col-12 col-md-12 col-lg"> <div class="wa_h3_logo_t"><img src="<?php echo $tmp_dir; ?>stars_top.png" /></div> </div> <div class="col-12 col-lg-auto"> <div class="wa_h3_tel"><a href="tel:7174015450">647-896-5540</a></div> <div class="wa_h3_email"><a href="mailto:webmaster@example.com">schedule an appointment</a></div> </div> </div> </div> </section> <!-- Header 3 End -->
CSS
/* Header 3 Start --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;600;700;800&display=swap');
.wa_h3_hdrone{
margin-top: 20px;
text-align: center;
}
.wa_h3_tel{
margin-top: 5px;
margin-bottom: 5px;
font-family: 'Montserrat', sans-serif;
font-size: 1.8em;
color: #599DEF;
font-weight: 700;
}
.wa_h3_tel a:link,.wa_h3_tel a:visited, .wa_h3_tel a:active {
color: #0066B3;
text-decoration: none;
}
.wa_h3_tel a:hover{
color: #0066B3;
text-decoration: none;
}
.wa_h3_email{
font-weight: 700;
font-family: 'Teko', sans-serif;
font-size: 1.4em;
text-transform: uppercase;
color: #fff;
background-color: #F37A49;
padding: 5px 10px 0;
}
.wa_h3_email a:link,.wa_h3_email a:visited, .wa_h3_email a:active {
color: #FFF;
text-decoration: none;
}
.wa_h3_email a:hover{
color: #000;
text-decoration: none;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.wa_h3_logoone {
margin-left: 40px;
}
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.wa_h3_logo_t{
margin-top: 10px;
}.wa_h3_email{
text-align: left;
}
.wa_h3_logo_t{
text-align: left;
}
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.wa_h3_logoone {
margin-left: 0px;
margin-top: 10px;
text-align: left;
}
.wa_h3_tel{
margin-top: 0px;
margin-bottom: 0px;
}
.wa_h3_logo_t{
margin-top: 20px;
}
.wa_h3_logo_t {
text-align: left;
}
}
/* Header 3 End --------------------------------------------------------- */
