diff --git a/images/3.jpg b/images/3.jpg new file mode 100644 index 0000000..397dfb4 Binary files /dev/null and b/images/3.jpg differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..bbde2c6 --- /dev/null +++ b/index.css @@ -0,0 +1,298 @@ +.u-section-1 { + background-image: linear-gradient(0deg, rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("images/3.jpg"); + background-position: 50% 50%; +} + +.u-section-1 .u-sheet-1 { + min-height: 854px; +} + +.u-section-1 .u-text-1 { + margin: 40px auto 0; +} + +.u-section-1 .u-text-2 { + margin: 30px auto 0; +} + +.u-section-1 .u-text-3 { + width: 329px; + margin: 76px auto 0; +} + +.u-section-1 .u-layout-wrap-1 { + margin-top: 40px; + margin-bottom: 0; +} + +.u-section-1 .u-layout-cell-1 { + min-height: 400px; +} + +.u-section-1 .u-container-layout-1 { + padding: 30px; +} + +.u-section-1 .u-btn-1 { + border-style: none; + font-weight: 700; + font-size: 0.9375rem; + align-self: center; + margin: 0 -11px; + padding: 8px 33px; +} + +.u-section-1 .u-text-4 { + font-size: 1.25rem; + margin: 20px 0 0; +} + +.u-section-1 .u-layout-cell-2 { + min-height: 400px; +} + +.u-section-1 .u-container-layout-2 { + padding: 30px; +} + +.u-section-1 .u-btn-2 { + border-style: none; + font-weight: 700; + font-size: 0.9375rem; + margin: 0 auto; + padding: 8px 33px; +} + +.u-section-1 .u-text-5 { + font-size: 1.25rem; + margin: 20px auto 0 30px; +} + +.u-section-1 .u-layout-cell-3 { + min-height: 400px; +} + +.u-section-1 .u-container-layout-3 { + padding: 30px; +} + +.u-section-1 .u-btn-3 { + border-style: none; + font-weight: 700; + font-size: 0.9375rem; + margin: 0 auto; + padding: 8px 33px; +} + +.u-section-1 .u-text-6 { + font-size: 1.25rem; + margin: 20px 0 0; +} + +@media (max-width: 1199px) { + .u-section-1 .u-sheet-1 { + min-height: 634px; + } + + .u-section-1 .u-text-2 { + margin-bottom: 60px; + } + + .u-section-1 .u-layout-cell-1 { + min-height: 330px; + } + + .u-section-1 .u-btn-1 { + margin-left: 0; + margin-right: 0; + } + + .u-section-1 .u-layout-cell-2 { + min-height: 330px; + } + + .u-section-1 .u-text-5 { + margin-left: 24px; + } + + .u-section-1 .u-layout-cell-3 { + min-height: 330px; + } +} + +@media (max-width: 991px) { + .u-section-1 .u-sheet-1 { + min-height: 404px; + } + + .u-section-1 .u-layout-cell-1 { + min-height: 100px; + } + + .u-section-1 .u-layout-cell-2 { + min-height: 100px; + } + + .u-section-1 .u-text-5 { + margin-left: 17px; + } + + .u-section-1 .u-layout-cell-3 { + min-height: 100px; + } + + .u-section-1 .u-btn-3 { + margin-right: initial; + margin-left: initial; + } +} + +@media (max-width: 767px) { + .u-section-1 .u-sheet-1 { + min-height: 504px; + } + + .u-section-1 .u-container-layout-1 { + padding-left: 10px; + padding-right: 10px; + } + + .u-section-1 .u-container-layout-2 { + padding-left: 10px; + padding-right: 10px; + } + + .u-section-1 .u-text-5 { + margin-left: 49px; + } + + .u-section-1 .u-container-layout-3 { + padding-left: 10px; + padding-right: 10px; + } +} + +@media (max-width: 575px) { + .u-section-1 .u-text-5 { + margin-left: 30px; + } +}.u-section-2 { + background-image: url("images/default-image.jpg"); +} + +.u-section-2 .u-sheet-1 { + min-height: 546px; +} + +.u-section-2 .u-text-1 { + margin: 60px auto 0; +} + +.u-section-2 .u-layout-wrap-1 { + margin-top: 43px; + margin-bottom: 1px; +} + +.u-section-2 .u-layout-cell-1 { + min-height: 400px; +} + +.u-section-2 .u-container-layout-1 { + padding: 30px; +} + +.u-section-2 .u-btn-1 { + border-style: none; + font-weight: 700; + font-size: 0.9375rem; + margin: 0 auto; + padding: 8px 33px; +} + +.u-section-2 .u-text-2 { + font-size: 1.25rem; + margin: 20px 0 0; +} + +.u-section-2 .u-layout-cell-2 { + min-height: 400px; +} + +.u-section-2 .u-container-layout-2 { + padding: 30px; +} + +.u-section-2 .u-btn-2 { + border-style: none; + font-weight: 700; + font-size: 0.9375rem; + margin: 0 auto; + padding: 8px 33px; +} + +.u-section-2 .u-text-3 { + font-size: 1.25rem; + margin: 20px 0 0; +} + +@media (max-width: 1199px) { + .u-section-2 .u-sheet-1 { + min-height: 380px; + } + + .u-section-2 .u-layout-cell-1 { + min-height: 330px; + } + + .u-section-2 .u-layout-cell-2 { + min-height: 330px; + } + + .u-section-2 .u-btn-2 { + align-self: center; + } +} + +@media (max-width: 991px) { + .u-section-2 .u-sheet-1 { + min-height: 303px; + } + + .u-section-2 .u-layout-cell-1 { + min-height: 100px; + } + + .u-section-2 .u-text-2 { + margin-right: auto; + } + + .u-section-2 .u-layout-cell-2 { + min-height: 100px; + } + + .u-section-2 .u-text-3 { + margin-right: auto; + } +} + +@media (max-width: 767px) { + .u-section-2 .u-sheet-1 { + min-height: 810px; + } + + .u-section-2 .u-container-layout-1 { + padding-left: 10px; + padding-right: 10px; + } + + .u-section-2 .u-container-layout-2 { + padding-left: 10px; + padding-right: 10px; + } +} + +@media (max-width: 575px) { + .u-section-2 .u-sheet-1 { + min-height: 528px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 2c7597b..da89643 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,16 @@ Nathan Woodburn - + - - + + +