diff --git a/sass/css/base.scss b/sass/css/base.scss index e08419e..1a3ac7d 100644 --- a/sass/css/base.scss +++ b/sass/css/base.scss @@ -29,38 +29,10 @@ html, body { font-family: LunaSans; } -header { - height: 48px; - max-width: 1100px; - margin: 0 auto 16px auto; - padding: 0 4px; - font-size: 24px; -} - -#header-logo { - float: left; - height: 48px; -} - -#header-menu ul { - float: right; - list-style-type: none; - margin: 9px 0 0 0; -} - -#header-menu li { - display: inline-block; - margin: 0 8px; -} - -#header-menu a { - padding: 8px 8px; - color: black; -} - -#header-menu a:hover, #header-menu a:focus { - text-shadow: 1px 2px 1px #ac44ff; -} +@import "header"; +@import "footer"; +@import "services"; +@import "process"; main { width: 100%; @@ -102,105 +74,3 @@ a, a:visited { font-size: 300%; font-family: Amatic; } - -.need_services { - margin-top: 16px; - display: flex; - align-items: stretch; - justify-content: center; - border-right: 32px solid #ac44ff; -} - -.need_box { - flex: 38%; - font-family: Amatic; - font-size: 42px; - background: linear-gradient(0.25turn, #0294d9, #ac44ff); - color: #fff; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.service_boxes { - flex: 62%; - text-align: center; - font-family: LunaSans; -} - -.service_box { - display: inline-block; - width: 144px; - padding-top: 4px; - vertical-align: top; -} - -.service_box-img { - max-width: 128px; - max-height: 128px; -} - -.service_box-img_wrap { - width: 128px; - height: 128px; - margin: auto; - display: flex; - justify-content: center; - align-items: center; -} - -.service_box-link, .service_box-link:visited { - color: #000; - text-decoration: none; -} - -.service_box-link:hover, .service_box-link:focus { - text-shadow: 1px 2px 1px #ac44ff; -} - -.service_box-title { - position: relative; - top: 8px; - display: inline-block; - padding-bottom: 14px; - font-size: 24px; -} - -.process-title { - font-family: Amatic; - font-size: 42px; - background: linear-gradient(0.25turn, #0294d9, #ac44ff); - color: #fff; -} - -.process_boxes { - flex: 62%; - text-align: center; - font-family: LunaSans; -} - -.process_box { - display: inline-block; - width: 256px; - padding-top: 4px; - vertical-align: top; -} - -.process_box-number { - display: inline-block; - width: 64px; - height: 64px; - font-size: 48px; - background: linear-gradient(-0.125turn, #0294d9, #ac44ff); - color: #fff; - border-radius: 32px; -} - -.process_box-title { - position: relative; - top: 8px; - display: inline-block; - padding-bottom: 14px; - font-size: 32px; -} diff --git a/sass/css/footer.scss b/sass/css/footer.scss new file mode 100644 index 0000000..5bbac6c --- /dev/null +++ b/sass/css/footer.scss @@ -0,0 +1,29 @@ +footer { + margin-top: 32px; + background: linear-gradient(0.25turn, #0294d9, #ac44ff); + color: #fff; + font-size: 18px; +} + +.footer-wrapper { + display: flex; + max-width: 1100px; + padding: 16px 4px; + margin: auto; +} + +.footer-pane { + flex: 1; +} + +footer a { + color: #fdb; +} + +footer a:hover, footer a:focus { + text-decoration: underline; +} + +.footer-bigger { + font-size: 24px; +} diff --git a/sass/css/header.scss b/sass/css/header.scss new file mode 100644 index 0000000..9da899e --- /dev/null +++ b/sass/css/header.scss @@ -0,0 +1,32 @@ +header { + height: 48px; + max-width: 1100px; + margin: 0 auto 16px auto; + padding: 0 4px; + font-size: 24px; +} + +#header-logo { + float: left; + height: 48px; +} + +#header-menu ul { + float: right; + list-style-type: none; + margin: 9px 0 0 0; +} + +#header-menu li { + display: inline-block; + margin: 0 8px; +} + +#header-menu a { + padding: 8px 8px; + color: black; +} + +#header-menu a:hover, #header-menu a:focus { + text-shadow: 1px 2px 1px #ac44ff; +} diff --git a/sass/css/process.scss b/sass/css/process.scss new file mode 100644 index 0000000..c1b8c64 --- /dev/null +++ b/sass/css/process.scss @@ -0,0 +1,40 @@ +.process-title { + font-family: Amatic; + font-size: 42px; + background: linear-gradient(0.25turn, #0294d9, #ac44ff); + color: #fff; + margin-top: 16px; + margin-bottom: 16px; +} + +.process_boxes { + flex: 62%; + text-align: center; + font-family: LunaSans; +} + +.process_box { + display: inline-block; + width: 256px; + padding-top: 4px; + vertical-align: top; + margin: 8px 16px; +} + +.process_box-number { + display: inline-block; + width: 64px; + height: 64px; + font-size: 48px; + background: linear-gradient(-0.125turn, #0294d9, #ac44ff); + color: #fff; + border-radius: 32px; +} + +.process_box-title { + position: relative; + top: 8px; + display: inline-block; + padding-bottom: 14px; + font-size: 32px; +} diff --git a/sass/css/services.scss b/sass/css/services.scss new file mode 100644 index 0000000..e2b3a69 --- /dev/null +++ b/sass/css/services.scss @@ -0,0 +1,64 @@ +.need_services { + margin-top: 16px; + display: flex; + align-items: stretch; + justify-content: center; + border-right: 32px solid #ac44ff; +} + +.need_box { + flex: 38%; + font-family: Amatic; + font-size: 42px; + background: linear-gradient(0.25turn, #0294d9, #ac44ff); + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.service_boxes { + flex: 62%; + text-align: center; + font-family: LunaSans; +} + +.service_box { + display: inline-block; + width: 144px; + padding-top: 4px; + vertical-align: top; + margin: 0 4px; +} + +.service_box-img { + max-width: 128px; + max-height: 128px; +} + +.service_box-img_wrap { + width: 128px; + height: 128px; + margin: auto; + display: flex; + justify-content: center; + align-items: center; +} + +.service_box-link, .service_box-link:visited { + color: #000; + text-decoration: none; +} + +.service_box-link:hover, .service_box-link:focus { + text-shadow: 1px 2px 1px #ac44ff; +} + +.service_box-title { + position: relative; + top: 8px; + display: inline-block; + padding-bottom: 14px; + font-size: 24px; +} diff --git a/templates/base.html b/templates/base.html index 1d8e4e3..7cef753 100644 --- a/templates/base.html +++ b/templates/base.html @@ -29,5 +29,30 @@ {% block body %}{% endblock body %} +