diff --git a/styles.css b/styles.css index 5db2a01..c3baa2c 100644 --- a/styles.css +++ b/styles.css @@ -1,99 +1,88 @@ - -body{ +.main-container { margin: 0px; text-align: center; font-family: 'Merriweather', serif; } -h1{ +h1 { margin: 10px 0px auto auto; /*margin: 0 auto; */ font-family: 'Sacramento', cursive; font-size: 5.625rem; color: #66BFBF; - line-height: ; + // line-height: ; } -h2{ +h2 { font-family: 'Montserrat', sans-serif; margin-top: 20px; color: #66BFBF; font-weight: bold; - + } -h3{ +h3 { font-family: 'Montserrat', sans-serif; color: #11999E; - line-height: ; + // line-height: ; } -p{ +p { line-height: 2; } -a{ +a { color: #11999E; font-family: 'Montserrat', sans-serif; /* to remove the underline below the links */ - text-decoration: none; + text-decoration: none; } -a:hover{ +a:hover { color: #eaf6f6; } -hr{ +hr { border: dotted #eaf6f6 6px; border-bottom: none; width: 4%; margin: 100px auto 100px auto; } -.pro{ +.pro { text-decoration: underline; color: #66BFBF; } -.intro{ - width: 30%; +.intro { + width: 70%; margin: auto; } -img{ - border-radius: 100%; - padding: 15px; -} - -/* -div{ - background-color: #fceef5; -} -*/ -.topContainer{ +.topContainer { background-color: #e8ffff; padding-top: 50px; position: relative; } -.middleContainer{ - margin: 100px 0px; +.middleContainer { + margin: 100px 0px; position: relative; } -.bottomContainer{ +.bottomContainer { background-color: #66BFBF; - padding: 50px 0 20px ; + padding: 50px 0 20px; } -.penguin{ +.penguin { margin-top: 0px; margin-bottom: 0px; width: 65px; height: 65px; } -.top-c{ +.top-c { position: absolute; margin-top: 6%; margin-left: 5%; @@ -102,7 +91,7 @@ div{ } -.bottom-c{ +.bottom-c { position: absolute; margin-left: 10%; margin-bottom: 0px; @@ -110,79 +99,79 @@ div{ height: 10%; } -.mountain{ - width: 70%; - height: 2%; - margin-top: 40px; +.mountain { + width: 100%; + height: 1%; + // margin-top: 40px; + // margin-bottom: 0; } -.html{ +.html { width: 100px; height: 100px; } -.css{ +.css { width: 100px; height: 100px; } -.bootstrap{ +.bootstrap { width: 100px; height: 100px; } -.java{ +.java { width: 100px; height: 100px; } -.profile-pic{ +.profile-pic { width: 100px; height: 100px; + border-radius: 50%; } -.sound{ +.sound { width: 100px; height: 100px; - float:right; + float: right; margin-left: 30px; } -.tv{ +.tv { width: 100px; height: 100px; - float:left; - margin-right:30px; + float: left; + margin-right: 30px; } -.skills{ +.skills { position: relative; } -.skill-row -{ - width:50%; - margin:50px auto 40px auto; - text-align: left; - display:inline-block; - position: relative; +.skill-row { + width: 70%; + // margin: 40px auto 40px auto; + text-align: left; + display: inline-block; + position: relative; } -.skill-head{ +.skill-head { font-weight: bold; } -.p-align -{ - margin:auto 0 auto 20px; +.p-align { + margin: auto 0 auto 20px; } -.contact-me{ +.contact-me { width: 40%; margin: 40px auto 100px; } -.copyright{ +.copyright { color: #eaf6f6; font-size: .75rem; padding: 20px 0px; @@ -203,14 +192,14 @@ div{ font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; - } - - .btn:hover { +} + +.btn:hover { background: #30e3cb; - background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad); - background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad); - background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad); - background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad); - background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad); + background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad); + background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad); + background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad); + background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad); + background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad); text-decoration: none; - } \ No newline at end of file +}