@ -1,4 +1,4 @@
/* c ustom fonts */
/* C ustom fonts */
@ font-face { @ font-face {
font-family : centra ; font-family : centra ;
src : url ( './assets/font/CentraNo2-Bold.ttf' ) ; src : url ( './assets/font/CentraNo2-Bold.ttf' ) ;
@ -15,32 +15,34 @@
font-weight : 400 ; font-weight : 400 ;
} }
/* default CSS */
/* Default CSS */
# root {
min-height : 100vh ;
}
* { * {
margin : 0 ; margin : 0 ;
padding : 0 ; padding : 0 ;
box-sizing : border-box ; box-sizing : border-box ;
}
}
html {
html {
scroll-behavior : smooth ; scroll-behavior : smooth ;
scroll-padding-top : 75px ; scroll-padding-top : 75px ;
}
}
body {
body {
font-weight : 400 ; font-weight : 400 ;
overflow : hidden ;
position : relative ; position : relative ;
color : # 685454 ! important ; color : # 685454 ! important ;
font-family : 'Centra' , sans-serif ! important ; font-family : 'Centra' , sans-serif ! important ;
}
h1 , h2 , h3 , h4 , h5 , h6 {
margin : 0 ;
padding : 0 ;
line-height : normal ;
}
}
h1 , h2 , h3 , h4 , h5 , h6 {
margin : 0 ;
padding : 0 ;
line-height : normal ;
}
p , a , li , button , ul { p , a , li , button , ul {
margin : 0 ; margin : 0 ;
@ -67,35 +69,36 @@ input:focus, textarea:focus, select:focus {
outline : none ; outline : none ;
} }
@ media ( min-width : 1700px ) {
main . container {
max-width : 100 % ;
padding : 0 150px ;
}
@ media ( min-width : 1700px ) {
main . container {
max-width : 100 % ;
padding : 0 150px ;
}
} }
p . success { p . success {
color : green ;
color : green ;
} }
p . danger { p . danger {
color : red ;
color : red ;
} }
/************ Navbar Css ************/
/* Navbar CSS */
nav . navbar { nav . navbar {
padding : 18px 0 ; padding : 18px 0 ;
position : fixed ; position : fixed ;
width : 100 % ; width : 100 % ;
top : 0 ; top : 0 ;
z-index : 9999 ; z-index : 9999 ;
transition : 0 . 32s ease-in-out ;
transition : 0 . 32s ease-in-out ;
} }
nav . navbar . scrolled { nav . navbar . scrolled {
padding : 0px 0 ; padding : 0px 0 ;
background-color : # 121212 ; background-color : # 121212 ;
} }
nav . navbar a . navbar-brand { nav . navbar a . navbar-brand {
width : 9 % ;
width : 9 % ;
} }
nav . navbar . navbar-nav . nav-link . navbar-link { nav . navbar . navbar-nav . nav-link . navbar-link {
font-weight : 400 ; font-weight : 400 ;
@ -107,48 +110,48 @@ nav.navbar .navbar-nav .nav-link.navbar-link {
} }
nav . navbar . navbar-nav a . nav-link . navbar-link : hover , nav . navbar . navbar-nav a . nav-link . navbar-link : hover ,
nav . navbar . navbar-nav a . nav-link . navbar-link . active { nav . navbar . navbar-nav a . nav-link . navbar-link . active {
opacity : 1 ;
opacity : 1 ;
} }
span . navbar-text { span . navbar-text {
display : flex ;
align-items : center ;
display : flex ;
align-items : center ;
} }
. social-icon { . social-icon {
display : inline-block ;
margin-left : 14px ;
display : inline-block ;
margin-left : 14px ;
} }
. social-icon a { . social-icon a {
width : 42px ;
height : 42px ;
background : rgba ( 217 , 217 , 217 , 0 . 1 ) ;
display : inline-flex ;
border-radius : 50 % ;
margin-right : 6px ;
align-items : center ;
justify-content : center ;
line-height : 1 ;
border : 1px solid rgba ( 255 , 255 , 255 , 0 . 5 ) ;
width : 42px ;
height : 42px ;
background : rgba ( 217 , 217 , 217 , 0 . 1 ) ;
display : inline-flex ;
border-radius : 50 % ;
margin-right : 6px ;
align-items : center ;
justify-content : center ;
line-height : 1 ;
border : 1px solid rgba ( 255 , 255 , 255 , 0 . 5 ) ;
} }
. social-icon a :: before { . social-icon a :: before {
content : "" ;
width : 42px ;
height : 42px ;
position : absolute ;
background-color : # ffffff ;
border-radius : 50 % ;
transform : scale ( 0 ) ;
transition : 0 . 3s ease-in-out ;
content : "" ;
width : 42px ;
height : 42px ;
position : absolute ;
background-color : # ffffff ;
border-radius : 50 % ;
transform : scale ( 0 ) ;
transition : 0 . 3s ease-in-out ;
} }
. social-icon a : hover :: before { . social-icon a : hover :: before {
transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
} }
. social-icon a img { . social-icon a img {
width : 40 % ;
z-index : 1 ;
transition : 0 . 3s ease-in-out ;
width : 40 % ;
z-index : 1 ;
transition : 0 . 3s ease-in-out ;
} }
. social-icon a : hover img { . social-icon a : hover img {
filter : brightness ( 0 ) saturate ( 100 % ) invert ( 0 % ) sepia ( 7 % ) saturate ( 98 % ) hue-rotate ( 346deg ) brightness ( 95 % ) contrast ( 86 % ) ;
filter : brightness ( 0 ) saturate ( 100 % ) invert ( 0 % ) sepia ( 7 % ) saturate ( 98 % ) hue-rotate ( 346deg ) brightness ( 95 % ) contrast ( 86 % ) ;
} }
. navbar-text button { . navbar-text button {
font-weight : 700 ; font-weight : 700 ;
@ -157,9 +160,9 @@ span.navbar-text {
padding : 18px 34px ; padding : 18px 34px ;
font-size : 18px ; font-size : 18px ;
margin-left : 18px ; margin-left : 18px ;
position : relative ;
background-color : transparent ;
transition : 0 . 3s ease-in-out ;
position : relative ;
background-color : transparent ;
transition : 0 . 3s ease-in-out ;
} }
. navbar-text button span { . navbar-text button span {
z-index : 1 ; z-index : 1 ;
@ -179,15 +182,15 @@ span.navbar-text {
color : # 121212 ; color : # 121212 ;
} }
. navbar-text button : hover :: before { . navbar-text button : hover :: before {
content : "" ;
width : 100 % ;
height : 100 % ;
position : absolute ;
content : "" ;
width : 100 % ;
height : 100 % ;
position : absolute ;
} }
nav . navbar . navbar-toggler : active , nav . navbar . navbar-toggler : active ,
nav . navbar . navbar-toggler : focus { nav . navbar . navbar-toggler : focus {
outline : none ;
box-shadow : none ;
outline : none ;
box-shadow : none ;
} }
nav . navbar . navbar-toggler-icon { nav . navbar . navbar-toggler-icon {
width : 24px ; width : 24px ;
@ -199,43 +202,42 @@ nav.navbar .navbar-toggler-icon {
top : -2px ; top : -2px ;
} }
nav . navbar . navbar-toggler-icon : focus { nav . navbar . navbar-toggler-icon : focus {
border-bottom : 2px solid # fff ;
border-bottom : 2px solid # fff ;
} }
nav . navbar . navbar-toggler-icon : after , nav . navbar . navbar-toggler-icon : after ,
nav . navbar . navbar-toggler-icon : before { nav . navbar . navbar-toggler-icon : before {
width : 24px ;
position : absolute ;
height : 2px ;
background-color : # fff ;
top : 0 ;
left : 0 ;
content : '' ;
z-index : 2 ;
transition : all 300ms linear ;
width : 24px ;
position : absolute ;
height : 2px ;
background-color : # fff ;
top : 0 ;
left : 0 ;
content : '' ;
z-index : 2 ;
transition : all 300ms linear ;
} }
nav . navbar . navbar-toggler-icon : after { nav . navbar . navbar-toggler-icon : after {
top : 8px ;
top : 8px ;
} }
nav . navbar . navbar-toggler [ aria-expanded = "true" ] . navbar-toggler-icon : after { nav . navbar . navbar-toggler [ aria-expanded = "true" ] . navbar-toggler-icon : after {
transform : rotate ( 45deg ) ;
background-color : # fff ;
height : 2px ;
transform : rotate ( 45deg ) ;
background-color : # fff ;
height : 2px ;
} }
nav . navbar . navbar-toggler [ aria-expanded = "true" ] . navbar-toggler-icon : before { nav . navbar . navbar-toggler [ aria-expanded = "true" ] . navbar-toggler-icon : before {
transform : translateY ( 8px ) rotate ( -45deg ) ;
background-color : # fff ;
height : 2px ;
transform : translateY ( 8px ) rotate ( -45deg ) ;
background-color : # fff ;
height : 2px ;
} }
nav . navbar . navbar-toggler [ aria-expanded = "true" ] . navbar-toggler-icon { nav . navbar . navbar-toggler [ aria-expanded = "true" ] . navbar-toggler-icon {
border-color : transparent ;
border-color : transparent ;
} }
/* banner */
/* Banner */
. banner { . banner {
margin-top : 0 ; margin-top : 0 ;
margin-bottom : 0 ;
padding : 150px 0 100px 0 ; padding : 150px 0 100px 0 ;
position : relative ; position : relative ;
background-image : url ( './assets/img/0 1.jpg' ) ;
background-image : url ( './assets/img/136646 .jpg' ) ;
background-position : top center ; background-position : top center ;
background-size : cover ; background-size : cover ;
background-repeat : no-repeat ; background-repeat : no-repeat ;
@ -288,57 +290,101 @@ nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
animation : updown 3s linear infinite ; animation : updown 3s linear infinite ;
} }
@ keyframes updown { @ keyframes updown {
0 % {
transform : translateY ( -20px ) ;
}
50 % {
transform : translateY ( 20px ) ;
}
100 % {
transform : translateY ( -20px ) ;
}
0 % {
transform : translateY ( -20px ) ;
}
50 % {
transform : translateY ( 20px ) ;
}
100 % {
transform : translateY ( -20px ) ;
}
} }
. txt-rotate > . wrap { . txt-rotate > . wrap {
border-right : 0 . 08em solid # 666 ; border-right : 0 . 08em solid # 666 ;
} }
/* General styling for projects section */
. projects-section {
padding : 0 0 50px 0 ;
position : relative ;
}
/* Styling for the carousel container */
. skill-slider {
width : 80 % ;
margin : 0 auto ;
position : relative ;
}
. App {
text-align : center ;
/* Styling for the cards within the carousel */
. card-custom {
background-color : # 463c3c ; /* Light grey background for cards */
border-radius : 20px ; /* Rounded corners */
box-shadow : 0 4px 8px rgba ( 0 , 0 , 0 , 0 . 1 ) ; /* Shadow effect */
overflow : hidden ; /* Ensure content doesn't overflow */
position : relative ; /* Allow for overlapping */
transition : transform 250ms , box-shadow 250ms ; /* Smooth transitions */
} }
. App-logo {
height : 40vmin ;
pointer-events : none ;
/* Image styling */
. card-custom img {
width : 100 % ;
border-bottom : 1px solid # ddd ; /* Divider line between image and text */
} }
@ media ( prefers-reduced-motion : no-preference ) {
. App-logo {
animation : App-logo-spin infinite 20s linear ;
}
/* Styling for card content */
. card-custom-body {
padding : 1rem ;
} }
. App-header {
background-color : # 282c34 ;
min-height : 100vh ;
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
font-size : calc ( 10px + 2vmin ) ;
/* Hover effects for the card */
. card-custom : hover {
transform : translateY ( -10px ) rotate ( 3deg ) ; /* Move up and rotate */
box-shadow : 0 8px 16px rgba ( 0 , 0 , 0 , 0 . 2 ) ; /* Enhance shadow on hover */
}
/* Styling to ensure cards overlap */
. card-custom : nth-child ( n + 2 ) {
margin-left : -40px ; /* Overlap effect */
}
/* Adjust carousel arrows */
. react-multi-carousel-arrow {
background-color : # 333 ; /* Dark background for arrows */
border-radius : 50 % ; /* Round arrows */
height : 30px ;
width : 30px ;
z-index : 10 ;
}
. react-multi-carousel-arrow :: before {
font-size : 20px ;
color : # fff ; /* White arrow color */
}
/* contactform */
. modal-header {
background-color : # 121212 ;
color : white ; color : white ;
} }
. App-link {
color : # 61dafb ;
. modal-body {
background- color: # f8f9fa ;
} }
@ keyframes App-logo-spin {
from {
transform : rotate ( 0deg ) ;
}
to {
transform : rotate ( 360deg ) ;
}
. modal-footer {
background-color : # 121212 ;
}
. btn-primary {
background-color : # 007bff ;
border-color : # 007bff ;
} }
. btn-primary : hover {
background-color : # 0056b3 ;
border-color : # 0056b3 ;
}
khangtran
