/* Theme Name: Flat Bootstrap Theme URI: https://xtremelysocial.com/wordpress/flat/ Author: XtremelySocial Author URI: https://xtremelysocial.com Description: Flat Bootstrap by XtremelySocial is a modern, fully responsive, "flat" style theme with a nice color palette, big full-width images, and full-width colored sections. It automatically adapts for desktops, tablets, and phones. It is based on the WordPress standard starter theme (_S) and the Twitter Bootstrap CSS framework. Features include a mobile navigation bar, multiple columns (grid), buttons, icons, labels, badges, tabbed content areas, collapsible content areas, progress bars, alert boxes, carousels (sliders) and much, much more. This is a theme for both users and theme developers with lots of features but without the bloat. For a live demo go to https://flat-bootstrap.xtremelysocial.com. Version: 1.10.1 Tested up to: 5.7 Requires PHP: 5.2 License: GNU General Public License License URI: http://www.opensource.org/licenses/GPL-3.0 Text Domain: flat-bootstrap Domain Path: /languages/ Tags: one-column, right-sidebar, left-sidebar, custom-header, custom-menu, featured-images, featured-image-header, full-width-template, flexible-header, theme-options, sticky-post, threaded-comments, translation-ready, rtl-language-support, custom-background Flat Bootstrap WordPress theme, Copyright (C) 2014 XtremelySocial Flat Bootstrap WordPress theme is licensed under the GPL. See readme.txt file for license information on components used in this theme. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Typography # Elements # Forms and Buttons # Navigation ## Links ## Menus # Content ## Header ## Footer ## Posts and pages ## Comments # Media ## Captions and Galleries # Widgets & Plugins ## Widgets ## Plugins --------------------------------------------------------------*/ /* * Note that most styles are handled already in our custom bootstrap.css, theme-base.css, * and theme-flat.css files. * * We have put comments next to some of the styles to show what our custom bootstrap.css * defaults to in case we (or anyone) wants to put these into custom bootstrap.css * instead. */ /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ /* * The cool thing about Lato and Raleway fonts is that they look great at light (300) and * regular (500) font weight. So we only use bold (700) sparingly. */ section.pricing { } .pricing .card { border: none; border-radius: 1rem; transition: all 0.2s; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); background: #007bff; background: linear-gradient(to bottom, #0062E6, #33AEFF); } .pricing hr { margin: 1.5rem 0; } .pricing .card-title { margin: 0.5rem 0; font-size: 0.9rem; letter-spacing: .1rem; font-weight: bold; } .pricing .card-price { font-size: 3rem; margin: 0; } .pricing .card-price .period { font-size: 0.8rem; } .pricing ul li { margin-bottom: 1rem; } .pricing .text-muted { opacity: 0.7; } .pricing .btn { font-size: 80%; border-radius: 5rem; letter-spacing: .1rem; font-weight: bold; padding: 1rem; opacity: 0.7; transition: all 0.2s; } /* Hover Effects on Card */ @media (min-width: 992px) { .pricing .card:hover { margin-top: -.25rem; margin-bottom: .25rem; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3); } .pricing .card:hover .btn { opacity: 1; } } body { font-family: "Lato", "Helvetica Neue", Arial, sans-serif; font-weight: 300; /*Bootstrap is 500;*/ font-size: 18px; /*BS is 16px;*/ } h1, h2, h3, h4, h5, h6 { font-family: "Raleway", Arial, "Helvetica Neue", sans-serif; /*"Helvetica Neue", Helvetica, Arial, sans-serif;*/ } /* Lighten the h1-h3 headings so you can use tags to have certain words stand out */ h1, h2, h3 { font-weight: 300; /*BS is 500 for h1-h6, including .h1-.h6*/ } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ /* Increase font size on article "lead" (usually for an "intro" paragraph */ .lead { font-size: 22px; /*18px, but goes to 24px @768 browser width */ } /* Style code tag like pre tag */ code { /*color: #2f2f2f; background-color: #f5f5f5; Moved to bootstrap.css*/ border: 1px solid #ccc; } /* Remove a bit of margin since Bootstrap h1-h3 tags already have 22px top margin */ hr { margin: 16px 0; /*22px 0;*/ } /* * Override margins on jumbotron in case someone uses it like a colored "section" from * this theme. Note: Moved here from theme-base.css. */ .jumbotron { margin-bottom: 0; } /* * Set block quote footer (author) to larger font size. BS quote is 20px, but footer * is only 14px for some reason. */ blockquote footer { font-size: 18px; } /* Color the collapsible panel hover color to match the link hover color */ .panel-title>a:hover, .panel-title>small:hover, .panel-title>.small:hover, .panel-title>small>a:hover, .panel-title>.small>a:hover { color: #19b798; } /*-------------------------------------------------------------- # Forms and Buttons --------------------------------------------------------------*/ /* Tone down field labels on forms, comments section, etc. */ label { font-weight: 300; } /* Match the default font color */ .form-control { color: #555; } /* * Generically set input buttons to look like Bootstrap, but set colors below that to make * it easier for users to override. Match Bootstrap btn-primary styles. */ button, html input[type="button"], input[type="submit"] { background-image: none; font-size: 16px; line-height: 22px; padding: 6px 12px; border: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; outline: 0; } button:hover, button:focus, html input[type="button"]:hover, html input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { outline: 0; } /* Set colors for input buttons (Search, Reply). Change these in your child theme. */ button, html input[type="button"], input[type="submit"] { color: #fff; background-color: #1abc9c; border-color: #1abc9c; } button:hover, button:focus, html input[type="button"]:hover, html input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { color: #fff; background-color: #16a085; border-color: #16a085; } /* Bootstrap uses "active" style on the
  • , but WordPress paginate_links() uses * "current" in a tag on the link. Also set the hover to match the primary button * color. */ .pagination>li>a, .pagination>li>span, span.page-numbers.current { color: #16a085; } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus, span.page-numbers.current { z-index: 2; color: #fff; background-color: #16a085; border-color: #16a085; } /* Force search field to not be rounded on iOS devices */ input.search-field { -webkit-appearance: none !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ /* * Generically style the links here. Set colors below to make it easier for users to * override. */ a { word-wrap: break-word; -webkit-transition: color .1s ease-in, background .1s ease-in; -moz-transition: color .1s ease-in, background .1s ease-in; -ms-transition: color .1s ease-in, background .1s ease-in; -o-transition: color .1s ease-in, background .1s ease-in; transition: color .1s ease-in, background .1s ease-in; } a:hover, a:focus { text-decoration: none; outline: 0; } a:before, a:after, a:hover i:before, a:focus i:before { -webkit-transition: color .1s ease-in, background .1s ease-in; -moz-transition: color .1s ease-in, background .1s ease-in; -ms-transition: color .1s ease-in, background .1s ease-in; -o-transition: color .1s ease-in, background .1s ease-in; transition: color .1s ease-in, background .1s ease-in; } /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ /* Since we lightened the body font, make the site title regular font weight */ .navbar-brand { font-weight: 500; /*height: 50px; BS already 50px*/ /* Fixes layout if nav bar wraps before collapsing for mobile */ } /* * Line up the navbar with the header and page content (it's in a container, but not a * row) */ div.navbar-collapse.collapse { margin-left: -15px; margin-right: -15px; } /* Since we lightened the body font, increase font weight on active tab */ .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { color: inherit; font-weight: 500; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Header --------------------------------------------------------------*/ /* Set content (page title) header to midnight blue */ .content-header { background-color: #34495e; color: #fff; } .content-header h1, .content-header h2, .content-header h3 { color: #fff; } /*-------------------------------------------------------------- ## Footer --------------------------------------------------------------*/ /* Set our footer to "almost" black */ .sidebar-footer { background-color: #d67558; color: white; } .sidebar-footer h1, .sidebar-footer h2, .sidebar-footer h3 { color: #fff; } /* Set our "after footer" (footer nav menu and site credits) to "not quite" black */ .after-footer { background: #cd4631; color: white; font-size: 16px; } /* Set link colors to off white and text to gray for footer and after footer */ .sidebar-footer, /*.after-footer {*/ .footer-nav-menu { color: #95a5a6; } .sidebar-footer a:not(.btn), .footer-nav-menu a:not(.btn) { /*.after-footer a:not(.btn) {*/ color: #f2f2f2; } .sidebar-footer a:hover:not(.btn), .sidebar-footer a:focus:not(.btn), .footer-nav-menu a:hover:not(.btn), .footer-nav-menu a:focus:not(.btn) { /*.after-footer a:hover:not(.btn), .after-footer a:focus:not(.btn) {*/ color: #3bc492; } /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ /* Reduce the size of post entry meta (date, author) */ .entry-meta { font-size: 16px; } /* Color "sticky" (featured) posts */ .sticky .entry-title:after { background-color: #1abc9c; color: #fff; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ /* Reduce the size of comment edit link */ .comment-edit-link { font-size: 16px; } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Captions and Galleries --------------------------------------------------------------*/ /* Color and style the Bootstrap carousel captions */ .carousel-caption, .carousel-caption h4, .carousel-caption p { font-weight: bold; } .carousel-caption { text-shadow: none; background-color: #16a085; color: #fff; opacity: .75; font-weight: bold; } .carousel-caption a { color: #fff; text-decoration: underline; } .carousel-caption a:hover, .carousel-caption a:focus { color: #bdc3c7; /*silver*/ } /*-------------------------------------------------------------- # Widgets and Plugins --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Widgets --------------------------------------------------------------*/ /* Get Jetpack Popular Posts Widget to look like other thumbnail posts */ .widgets-list-layout-links { float: left !important; margin-left: 15px !important; /*margin-left: 1.625em !important;*/ } /*-------------------------------------------------------------- ## Plugins --------------------------------------------------------------*/ /* Format Jetpack contact form with Bootstrap's form-control tag. */ form.contact-form input[type='text'], form.contact-form input[type='email'], form.contact-form textarea { display: block; width: 98%; height: 36px; padding: 6px 12px; font-size: 16px; line-height: 1.428571429; color: #a1a1a1; background-color: #fff; background-image: none; border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s } form.contact-form input[type='text']:focus, form.contact-form input[type='email']:focus, form.contact-form textarea:focus { color: #555; } section { padding-top: 4rem; padding-bottom: 5rem; background-color: #f1f4fa; } .wrap { display: flex; background: white; padding: 1rem 1rem 1rem 1rem; border-radius: 0.5rem; box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1); margin-bottom: 2rem; } .wrap:hover { background: linear-gradient(135deg,#d67558 0%,#dea47e 100%); color: white; } .ico-wrap { margin: auto; } .mbr-iconfont { font-size: 4.5rem !important; color: #313131; margin: 1rem; padding-right: 1rem; } .vcenter { margin: auto; } .mbr-section-title3 { text-align: left; } h2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .display-5 { font-family: 'Source Sans Pro',sans-serif; font-size: 1.4rem; } .mbr-bold { font-weight: 700; } p { padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 25px; } .display-6 { font-family: 'Source Sans Pro',sans-serif; font-size: 1re} .bg-gradient { background: #C9D6FF; background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF); background: linear-gradient(to right, #E2E2E2, #C9D6FF); } ul li { margin-bottom:1.4rem; } .pricing-divider { border-radius: 20px; background: #CD4631; padding: 1em 0 4em; position: relative; } .blue .pricing-divider{ background: #D67558; } .green .pricing-divider { background: #DEA47E; } .red b { color:#CD4631 } .blue b { color:#D67558 } .green b { color:#DEA47E } .pricing-divider-img { position: absolute; bottom: -2px; left: 0; width: 100%; height: 80px; } .deco-layer { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .btn-custom { background:#C64545; color:#fff; border-radius:20px } .img-float { width:50px; position:absolute;top:-3.5rem;right:1rem } .princing-item { transition: all 150ms ease-out; } .princing-item:hover { transform: scale(1.05); } .princing-item:hover .deco-layer--1 { -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } .princing-item:hover .deco-layer--2 { -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } .judul{ color:#fff; } #menuatas { background: #9E6240; height: 45px; padding-left: 18px; border-radius: 0px; } #menuatas ul, #menuatas li { margin: 0 auto; padding: 0; list-style: none } #menuatas ul { background:#9e6240; text-align: left; } #menuatas li { display: inline-block; position: relative; } #menuatas a { display: block; line-height: 45px; padding: 0 14px; text-decoration: none; color: #FFFFFF; font-size: 16px; } #menuatas a.dropdown-arrow:after { content: "\25BE"; margin-left: 5px; } #menuatas li a:hover { color: #CC580A; background: #DEA47E; } #menuatas input { display: none; margin: 0; padding: 0; height: 45px; width: 100%; opacity: 0; cursor: pointer } #menuatas label { display: none; line-height: 45px; text-align: center; position: absolute; left: 35px } #menuatas label:before { font-size: 1.6em; color: #FFFFFF; content: "\2261"; margin-left: 20px; } #menuatas ul.sub-menuatass{ height: auto; overflow: hidden; width: 170px; background: #DEA47E; position: absolute; z-index: 99; display: none; } #menuatas ul.sub-menuatass li { display: block; text-align: left; width: 100%; } #menuatas ul.sub-menuatass a { color: #1C1C1C; font-size: 16px; } #menuatas li:hover ul.sub-menuatass { display: block } #menuatas ul.sub-menuatass a:hover{ background: #BD8B6B; color: #344407; } @media screen and (max-width: 800px){ #menuatas {position:relative} #menuatas ul {background:#DEA47E;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;} #menuatas ul.sub-menuatass {width:100%;position:static;} #menuatas ul.sub-menuatass a {padding-left:30px;} #menuatas li {display:block;float:none;width:auto;} #menuatas input, #menuatas label {position:absolute;top:0;left:0;display:block} #menuatas input {z-index:4} #menuatas input:checked + label {color:#FFFFFF} #menuatas input:checked + label:before {content:"\00d7"} #menuatas input:checked ~ ul {display:block} } HTML Code