TanchoToplineCargo/public/sunsari/css/partials/profile-3.css

486 lines
9.0 KiB
CSS
Raw Normal View History

2024-05-05 04:47:49 +00:00
/* =====================================
HOME NICHE COLOR STRUCTURE.
===================================== */
:root {
--primary-color: var(--profile-primary);
--secundary-color: var(--profile-secundary);
--headline-color: var();
--paragraph-color: var();
--background-color: var();
}
/* ========== PAGE HERO ========== */
.pages-hero {
background-color: var(--profile-primary);
height: 550px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.pages-hero-diagonal {
height: 100%;
background-image: url("../../images/commons/inner-pages/hero-cover-2.jpg");
transform: skewY(-1deg);
transform-origin: top left;
}
.pages-hero-diagonal:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, var(--headline-color), var(--headline-color));
opacity: 0.4;
}
.profile-avatar {
width: 150px;
margin: auto;
}
.profile-avatar img {
border-radius: 50%;
}
.pages-title-center h1 {
font-size: 35px;
line-height: 42px;
text-transform: uppercase;
margin: 15px 0 0;
}
.profile-center-title {
text-align: center;
max-width: 700px;
margin: auto;
margin-bottom: 2.8rem;
}
.profile-center-title h2 {
margin-bottom: 10px;
}
ul.profile-social {
display: flex !important;
justify-content: center !important;
}
ul.profile-social li {
display: inline-block;
font-size: 40px;
margin: 0px 20px;
}
ul.profile-social li a {
color: var(--portfolio-primary);
}
/* ========== TIMELINE ========== */
h3.timeline-title {
font-size: 1.7rem;
margin-bottom: 2.5rem;
font-weight: 600;
}
/*-- GENERAL STYLES
------------------------------*/
.timeline {
line-height: 1.4em;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.timeline h1,
.timeline h2,
.timeline h3,
.timeline h4,
.timeline h5,
.timeline h6 {
line-height: inherit;
}
/*----- TIMELINE ITEM -----*/
.timeline-item {
padding-left: 40px;
position: relative;
}
.timeline-item:last-child {
padding-bottom: 0;
}
/*----- TIMELINE INFO -----*/
.timeline-info {
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
margin: 0 0 .5em 0;
text-transform: uppercase;
white-space: nowrap;
}
/*----- TIMELINE MARKER -----*/
.timeline-marker {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15px;
}
.timeline-marker:before {
background: var(--portfolio-primary);
border: 3px solid transparent;
border-radius: 100%;
content: "";
display: block;
height: 15px;
position: absolute;
top: 4px;
left: 0;
width: 15px;
transition: 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
content: "";
width: 3px;
background: #CCD5DB;
display: block;
position: absolute;
top: 24px;
bottom: 0;
left: 6px;
}
.timeline-item:last-child .timeline-marker:after {
content: none;
}
.timeline-item:not(.period):hover .timeline-marker:before {
background: transparent;
border: 3px solid var(--portfolio-primary);
}
/*----- TIMELINE CONTENT -----*/
.timeline-content {
padding-bottom: 40px;
}
.timeline-content p:last-child {
margin-bottom: 0;
}
/*----- TIMELINE PERIOD -----*/
.period {
padding: 0;
}
.period .timeline-info {
display: none;
}
.period .timeline-marker:before {
background: transparent;
content: "";
width: 15px;
height: auto;
border: none;
border-radius: 0;
top: 0;
bottom: 30px;
position: absolute;
border-top: 3px solid #CCD5DB;
border-bottom: 3px solid #CCD5DB;
}
.period .timeline-marker:after {
content: "";
height: 32px;
top: auto;
}
.period .timeline-content {
padding: 40px 0 70px;
}
.timeline-content p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 0px;
}
.period .timeline-title {
margin: 0;
}
h5.timeline-title {
color: var(--main-dark-color);
font-size: 1.3rem;
font-weight: 500;
}
/*----------------------------------------------
MOD: TIMELINE SPLIT
----------------------------------------------*/
@media (min-width: 768px) {
.timeline-split .timeline,
.timeline-centered .timeline {
display: table;
}
.timeline-split .timeline-item,
.timeline-centered .timeline-item {
display: table-row;
padding: 0;
}
.timeline-split .timeline-info,
.timeline-centered .timeline-info,
.timeline-split .timeline-marker,
.timeline-centered .timeline-marker,
.timeline-split .timeline-content,
.timeline-centered .timeline-content,
.timeline-split .period .timeline-info,
.timeline-centered .period .timeline-info {
display: table-cell;
vertical-align: top;
}
.timeline-split .timeline-marker,
.timeline-centered .timeline-marker {
position: relative;
}
.timeline-split .timeline-content,
.timeline-centered .timeline-content {
padding-left: 30px;
}
.timeline-split .timeline-info,
.timeline-centered .timeline-info {
padding-right: 30px;
}
.timeline-split .period .timeline-title,
.timeline-centered .period .timeline-title {
position: relative;
left: -45px;
}
}
/*----------------------------------------------
MOD: TIMELINE CENTERED
----------------------------------------------*/
@media (min-width: 992px) {
.timeline-centered,
.timeline-centered .timeline-item,
.timeline-centered .timeline-info,
.timeline-centered .timeline-marker,
.timeline-centered .timeline-content {
display: block;
margin: 0;
padding: 0;
}
.timeline-centered .timeline-item {
padding-bottom: 40px;
overflow: hidden;
}
.timeline-centered .timeline-marker {
position: absolute;
left: 50%;
margin-left: -7.5px;
}
.timeline-centered .timeline-info,
.timeline-centered .timeline-content {
width: 50%;
}
.timeline-centered>.timeline-item:nth-child(odd) .timeline-info {
float: left;
text-align: right;
padding-right: 30px;
}
.timeline-centered>.timeline-item:nth-child(odd) .timeline-content {
float: right;
text-align: left;
padding-left: 30px;
}
.timeline-centered>.timeline-item:nth-child(even) .timeline-info {
float: right;
text-align: left;
padding-left: 30px;
}
.timeline-centered>.timeline-item:nth-child(even) .timeline-content {
float: left;
text-align: right;
padding-right: 30px;
}
.timeline-centered>.timeline-item.period .timeline-content {
float: none;
padding: 0;
width: 100%;
text-align: center;
}
.timeline-centered .timeline-item.period {
padding: 50px 0 90px;
}
.timeline-centered .period .timeline-marker:after {
height: 30px;
bottom: 0;
top: auto;
}
.timeline-centered .period .timeline-title {
left: auto;
}
}
/*----------------------------------------------
MOD: MARKER OUTLINE
----------------------------------------------*/
.marker-outline .timeline-marker:before {
background: transparent;
border-color: var(--portfolio-primary);
}
.marker-outline .timeline-item:hover .timeline-marker:before {
background: var(--portfolio-primary);
}
/* ========== SKILS ========== */
.circular-progress {
width: 154px;
height: 154px;
position: relative;
display: inline-block;
}
.circular-progress>svg {
width: 100%;
display: block;
}
.circular-progress .other-ball {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--portfolio-primary);
position: absolute;
z-index: 1;
transform: translate(-50%, -50%);
}
.circular-progress .other-ball:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
background: #fff;
transform: translate(-50%, -50%);
}
.single-progress-bar {
margin: 1.5rem 0rem;
}
.single-progress-bar .top-box {
position: relative;
}
.single-progress-bar .top-box .text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: var(--headline-color);
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.single-progress-bar h3 {
margin: 0;
font-size: 16px;
font-weight: 500;
margin: 25px 0px 0px;
}
/* ========== SERVICES ========== */
.remove-margin {
margin-bottom: 2.5rem;
}
.service-box {
padding: 2rem 2.5rem;
border-radius: 5px;
margin: 1rem 0rem;
-webkit-box-shadow: 0px 2px 10px 0px rgba(12, 0, 46, 1);
box-shadow: 0px 2px 10px 0px rgba(12, 0, 46, 0.09);
background-color: #fff;
}
.service-box .sb-icon {
width: 60px;
}
.sb-caption {
text-align: left;
}
.sb-caption h4 {
font-size: 1.25rem;
font-weight: 600;
margin: 25px 0px 10px;
}
.sb-caption P {
font-weight: 400;
font-size: 15px;
}
/* ========== HOME CONTACT ========== */
.tp-contact1-parallax {
background-image: url("../../images/commons/inner-pages/profile-botttom-pic.jpg");
height: 650px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* =====================================
MEDIA QUERIES.
===================================== */
@media (max-width:991px) {}
@media (max-width:480px) {}
@media (max-width:767px) {}
@media (max-width:576px) {}
@media (max-width:480px) {}