From 4e4cded4003d6f677a2f0f0f2eac67a7a4ac0a05 Mon Sep 17 00:00:00 2001 From: Kelly Ribeiro Date: Mon, 29 Jan 2024 18:04:23 -0300 Subject: [PATCH] add style css --- assets/css/style.css | 149 +++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + 2 files changed, 150 insertions(+) create mode 100644 assets/css/style.css diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 00000000..63e4da31 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,149 @@ +body { + background-color: black; +} + +h2 { + font-size: 2rem; + color: #33A8DB; + font-weight: bold; + letter-spacing: 4px; + text-transform: uppercase; + margin-bottom: 24px; +} + +p { + color: white; +} + +section { + margin: 100px auto; +} + +.banner { + background-image: linear-gradient(rgba(0, 0, 0, .4), rgba(49, 168, 200, .2), rgba(0, 0, 0, .6)), url('../images/banner.png'); + background-size: cover; + background-repeat: no-repeat; + height: 600px; + padding-top: 60px; + border-bottom: 1px solid #283a4280; +} + +.banner .banner-content { + color: white; + width: 600px; + margin: auto; + text-align: center; +} + +.banner h1 { + font-size: 2.5rem; + font-weight: 900; + text-transform: uppercase; + color: transparent; + background: -webkit-linear-gradient(#33A8DB, #1472B7); + background-clip: text; + -webkit-background-clip: text; +} + +.banner p { + font-size: 1.25rem; + margin: 16px 0 24px; +} + +.banner .logo { + background-color: rgba(0, 0, 0, .2); + height: 260px; + width: 260px; + margin: auto; + border-radius: 50%; + padding: 16px; + margin-bottom: 16px; +} + +.banner .logo img { + margin: auto; + width: 100%; + height: 100%; + object-fit: contain; +} + +.banner .banner-content button { + color: #31A8DD; + font-size: 1rem; + font-weight: bold; + padding: 16px 32px; + text-transform: uppercase; + letter-spacing: 4px; + background-color: transparent; + border-image: linear-gradient(#3BA1CD, #1572B7); + border-image-slice: 10; + border-radius: 30px; +} + +#course-content { + width: 800px; + text-align: center; +} + +#course-content .modules-list { + margin: 24px 0; +} + +#course-content .modules-list .module { + color: white; + width: 530px; + margin: 0 auto 24px; + border: 1px solid #33A8DB; + background-color: #252525; + padding: 16px; + border-radius: 100px; + box-shadow: inset -5px 6px 8px rgba(0, 0, 0, .7); +} + +#course-content .modules-list .module span { + color: #33A8DB; +} + +#transform-world { + height: 560px; + background-size: cover; + background-image: url("../images/woman-code.png"); + background-attachment: fixed; + border-top: 1px solid #33A8DB80; + border-bottom: 1px solid #33A8DB80; + padding: 200px; +} + +#transform-world p { + font-weight: 900; + font-size: 2.5rem; + text-transform: lowercase; + max-width: 250px; + text-shadow: 3px 2px #33A8DB; +} + +#professional-challenges { + text-align: center; + width: 800px; +} + +#professional-challenges img { + margin: 32px 0; +} + +footer { + padding: 60px 0; + text-align: center; + background-image: linear-gradient(rgba(50, 168, 219, .0), rgba(50, 168, 219, .2)); + border-top: 1px solid #33A8DB80; +} + +footer .dio-logo { + width: 300px; +} + +footer a { + color: #33A8DB; + font-weight: bold; + text-decoration: none; +} diff --git a/index.html b/index.html index 0dddc3db..310434ad 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Trilha de CSS - DIO