diff --git a/css/site.css b/css/site.css index a0d50e0..67e55d3 100644 --- a/css/site.css +++ b/css/site.css @@ -1,134 +1,147 @@ html, - body { - height: 100%; - width: 100%; - padding: 0; - margin: 0; - } - @font-face{ - font-family: "Segoe UI"; - src: url('../fonts/segoeuil.ttf'); - } - .main-container { - height: 100%; - width: 100%; - background-color: #1d539d; - color: white; - padding-top: 6%; - box-sizing: border-box; - overflow-y: auto; - overflow-x: hidden; - font-family: "Segoe UI"; - } - - .cloud-image { - width: 1200px; - height: 250px; - padding-bottom: 50px; - margin: auto; - } - - .success-text { - padding-bottom: 20px; - font-size: 62px; - line-height: 73px; - } - - .description { - font-size: 34px; - line-height: 40px; - } - - .next-steps-container { - padding-top: 50px; - } - - .next-steps-header { - font-size: 24px; - line-height: 28px; - padding-bottom: 25px; - } - - .next-steps-body { - display: flex; - flex-direction: column; - } - - .step { - display: flex; - margin: 7px 0px; - font-size: 15px; - line-height: 21px; - } - - .step-icon { - height: 20px; - width: 20px; - margin-right: 10px; - } - - .step-text a { - color: white; - text-decoration: none; - } - - .step-text a:hover { - color: white; - text-decoration:underline; - } - - .content { - box-sizing: border-box; - min-width: 700px; - max-width: 830px; - position: relative; - margin: auto; - } - - .tweet-container { - min-width: 30px; - min-height: 100px; - margin: 0 20px; - position: absolute; - left: -100px; - top: 110px; - } - .content-body{ - min-width: 400px; - } - - @media (max-width: 1024px) { - .main-container{ - padding-top: 1%; - } - .cloud-image { - padding-bottom: 30px; - } - .next-steps-container { - padding-top: 30px; - } - .next-steps-header { - padding-bottom: 20px; - } - .success-text { - font-size: 50px; - line-height: 61px; - padding-bottom: 10px; - } - .description { - font-size: 26px; - line-height: 30px; - } - - .step { - font-size: 12px; - line-height: 18px; - } - .tweet-container { - top: 80px; - } - .content{ - max-width: 630px; - min-width: 630px; - } - } +body { + margin: 0; + padding: 0; + background-image: url('../images/images.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + + + @font-face { + font-family: "Segoe UI"; + src: url('../fonts/segoeuil.ttf'); + } + + .main-container { + height: 100%; + width: 100%; + background-color: white; + color: #1d539d; + padding-top: 6%; + box-sizing: border-box; + overflow-y: auto; + overflow-x: hidden; + font-family: "Segoe UI"; + } + + .cloud-image { + width: 1200px; + height: 250px; + padding-bottom: 50px; + margin: auto; + } + + .success-text { + padding-bottom: 20px; + font-size: 62px; + line-height: 73px; + } + + .description { + font-size: 34px; + line-height: 40px; + } + + .next-steps-container { + padding-top: 50px; + } + + .next-steps-header { + font-size: 24px; + line-height: 28px; + padding-bottom: 25px; + } + + .next-steps-body { + display: flex; + flex-direction: column; + } + + .step { + display: flex; + margin: 7px 0px; + font-size: 15px; + line-height: 21px; + } + + .step-icon { + height: 20px; + width: 20px; + margin-right: 10px; + } + + .step-text a { + color: white; + text-decoration: none; + } + + .step-text a:hover { + color: white; + text-decoration: underline; + } + + .content { + box-sizing: border-box; + min-width: 700px; + max-width: 830px; + position: relative; + margin: auto; + } + + .tweet-container { + min-width: 30px; + min-height: 100px; + margin: 0 20px; + position: absolute; + left: -100px; + top: 110px; + } + + .content-body { + min-width: 400px; + } + + @media (max-width: 1024px) { + .main-container { + padding-top: 1%; + } + + .cloud-image { + padding-bottom: 30px; + } + + .next-steps-container { + padding-top: 30px; + } + + .next-steps-header { + padding-bottom: 20px; + } + + .success-text { + font-size: 50px; + line-height: 61px; + padding-bottom: 10px; + } + + .description { + font-size: 26px; + line-height: 30px; + } + + .step { + font-size: 12px; + line-height: 18px; + } + + .tweet-container { + top: 80px; + } + + .content { + max-width: 630px; + min-width: 630px; + } + } \ No newline at end of file diff --git a/images.jpeg b/images.jpeg new file mode 100644 index 0000000..a69b6a3 Binary files /dev/null and b/images.jpeg differ