diff --git a/css/styles.css b/css/styles.css index f8c598f..c49336d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -29,8 +29,9 @@ body { } .profile-pic { - max-width: 100%; - border-radius: 50%; + max-width: 70%; + border-top-left-radius: 15px; + border-top-right-radius: 15px; } .tagline { @@ -127,3 +128,61 @@ body { padding-right: 20px; } } + +.skills-section { + padding: 10px 0; + color: #fff; +} + +.skills-section h2 { + text-align: center; + margin-bottom: 40px; + font-size: 2.5em; + color: #fff; +} + +.skills-list { + list-style: none; + padding: 0; +} + +.skills-list li { + font-size: 1.2em; + margin-bottom: 20px; + display: flex; + flex-direction: column; +} + +.skill-name { + font-weight: bold; + margin-bottom: 10px; +} + +.progress-bar { + width: 100%; + background-color: #1c1c1c; + border-radius: 1px; + overflow: hidden; +} + +.progress { + height: 15px; + background-color: #A5FFC9; + border-radius: 5px; + width: 0; + transition: width 1s ease-in-out; +} + +.skills-list li:hover .progress { + width: 100%; +} + +@media (max-width: 768px) { + .skills-list li { + font-size: 1em; + + } + .navbar { + display: none; +} +} diff --git a/index.html b/index.html index 6ba26a0..8d95db7 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@