Something went wrong. Try again.
This repository is a hands-on project to help you learn HTML & CSS, and create your own resume-like page using the same. inovus-labs.github.io/static-web-resume
Something went wrong. Try again.
2.8 kB · 163 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164/* Smooth Scroll */html { scroll-behavior: smooth;}body { background-color: black;}:root { --white-color: #ffff; --primary-font: 'Montserrat', sans-serif; --secondary-font: 'Roboto', sans-serif;}
/* custom scrollbar */::-webkit-scrollbar{ width: 10px;}::-webkit-scrollbar-track{ background: black;}::-webkit-scrollbar-thumb{ background: white; border-radius: 50px;}
/* NavBar section */.navbar-section { background-color: black;}.navbar-brand img { width: auto; height: 60px;}
/* Home section */.home-section { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../assets/images//background-img.jpg); min-height: 100vh; background-size: cover; background-position: center; background-attachment: fixed;}.home-section h1 { margin: 0; font-weight: 900; font-size: 60px; color: var(--white-color); font-family: var(--primary-font); text-transform: uppercase; letter-spacing: 1px; padding-bottom: 10px;}.open-source{ color: red;}.home-section p { margin: 0; font-size: 20px; color: var(--white-color); font-family: var(--secondary-font); letter-spacing: 1px;}
/* title */.head-title{ color: var(--white-color); text-align: center; text-transform: uppercase; font-family: var(--white-color); font-size: 36px; padding-top: 60px; padding-bottom: 60px; font-weight: 900;}
/* table */thead{ color: red; font-size: 18px; font-family: var(--primary-font);}th{ color: red; font-size: 18px; font-family: var(--secondary-font);}td{ color: white; font-size: 18px; font-family: var(--secondary-font);}td a{ text-decoration: none; color: white; font-weight: 900;}td a:hover{ color: red;}
/* footer */.footer{ background-color: black; padding-top: 20px; padding-bottom: 20px;}.footer h6{ margin: 0; text-transform: uppercase; text-align: right; color: red; font-family: var(--white-color); font-size: 16px; font-weight: 600;}.inovus{ text-align: right; margin: 0; color: white;}.inovus a{ text-decoration: none; color: white;}.inovus a:hover{ color: red;}
/* Custom Media Query *//* small devices */@media (max-width: 576px) { .home-section h1 { font-size: 36px; } .home-section p { font-size: 16px; } .head-title{ font-size: 24px; }}/* medium devices */@media (max-width: 768px) { .home-section h1 { font-size: 36px; } .home-section p { font-size: 16px; } .head-title{ font-size: 24px; }}/* large devices */@media (max-width: 992px) {
}/* extra large devices */@media (max-width: 1200px) {
}