diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100755 index a6ce6517853..00000000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/index.html b/src/index.html old mode 100755 new mode 100644 index 92da07de4e6..9839d568901 --- a/src/index.html +++ b/src/index.html @@ -1,15 +1,20 @@ - + - Page title + Team 3 Project + + + -

Example title

- - + + diff --git a/src/partials/example.html b/src/partials/example.html deleted file mode 100755 index f7f444c97e2..00000000000 --- a/src/partials/example.html +++ /dev/null @@ -1,37 +0,0 @@ -
-

HTML-partials

- - - - -

- The - - posthtml-include - - plugin allows you to add code from other HTML files (fragments) to HTML page - files. Fragments are stored in the src/partials folder. The - addition occurs when compiling page files, such as index.html. -

- -

- This example.html file is an example of such a snippet, with - the markup of a certain part of the main page. This is very convenient for - team development on student projects, when several people write in one HTML - file at once. -

- -

- The syntax for adding a fragment to the main file is: - <include src="./partials/filename.html"></include> -

- -
-
diff --git a/src/partials/footer.html b/src/partials/footer.html new file mode 100644 index 00000000000..ea5da37da98 --- /dev/null +++ b/src/partials/footer.html @@ -0,0 +1,62 @@ + + diff --git a/src/partials/images/icons.svg b/src/partials/images/icons.svg new file mode 100644 index 00000000000..187c46451a8 --- /dev/null +++ b/src/partials/images/icons.svg @@ -0,0 +1,17 @@ + diff --git a/src/partials/images/logoalb.png b/src/partials/images/logoalb.png new file mode 100644 index 00000000000..c2713a727c6 Binary files /dev/null and b/src/partials/images/logoalb.png differ diff --git a/src/sass/_example.scss b/src/sass/_example.scss deleted file mode 100755 index 05c89b464f5..00000000000 --- a/src/sass/_example.scss +++ /dev/null @@ -1,28 +0,0 @@ -.example { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, - Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - line-height: 1.5; - background-color: #fff; - color: #2f2f37; - max-width: 960px; - padding: 16px; -} - -.example code { - font-family: monospace; - font-size: 16px; - font-weight: 700; - background-color: #ff6b0a; - color: #fff; - padding: 2px 6px; - border-radius: 2px; -} - -.example .background { - height: 240px; - // ❗️❗️❗️ The path to images from a SASS file - // is always the same as from the css folder. - background-image: url('../images/logo.png'); - background-size: cover; - background-position: center; -} diff --git a/src/sass/footer.scss b/src/sass/footer.scss new file mode 100644 index 00000000000..c181d36dfc6 --- /dev/null +++ b/src/sass/footer.scss @@ -0,0 +1,104 @@ +body { + margin: 0; + font-family: 'Epilogue', sans-serif; + color: #fff; + background-color: #1E2827; +} + +.site-footer { + background-color: #1E2827; + padding: 40px 20px; + color: #fff; +} + +.footer-container { + display: flex; + justify-content: space-between; + align-items: flex-start; + max-width: 1200px; + margin: 0 auto; + padding-bottom: 20px; + border-bottom: 1px solid #333; +} + +.footer-left { + max-width: 200px; +} + +.footer-logo { + width: 40px; + margin-bottom: 40px; +} + +.footer-contact { + line-height: 1.6; + color: #b5b5b5; + font-size: 14px; +} + +.footer-center { + text-align: left; +} + +.footer-links { + list-style: none; + padding: 0; +} + +.footer-links li { + margin-bottom: 10px; +} + +.footer-links a { + color: #fff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +.footer-links a:hover { + color: #007aff; +} + +.footer-right { + display: flex; + align-items: center; +} + +.social-icons a { + margin-right: 10px; +} + +.social-icons img { + width: 36px; + height: 36px; + border-radius: 4px; + background-color: #FFFFFF1A; + padding: 8px; + transition: background-color 0.3s ease; +} + +.social-icons a:hover img { + background-color: #007aff; +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 20px auto 0; + font-size: 12px; + color: #b5b5b5; +} + +.footer-legal a { + color: #b5b5b5; + text-decoration: none; + margin-left: 20px; + transition: color 0.3s ease; +} + +.footer-legal a:hover { + color: #fff; +} \ No newline at end of file diff --git a/src/sass/index.scss b/src/sass/index.scss index 8d1a014a6b5..f52bb6e466f 100755 --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -1,2 +1,7 @@ @import './common'; @import './example'; +@import './header.scss'; +@import './hero.scss'; +@import './aboutus.scss'; +@import './styles.scss'; +@import './footer.scss'; \ No newline at end of file diff --git a/src/sass/styles.scss b/src/sass/styles.scss new file mode 100644 index 00000000000..d984040794c --- /dev/null +++ b/src/sass/styles.scss @@ -0,0 +1,74 @@ +/*Project style reset */ + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +ul { + padding: 0; + margin: 0; + list-style-type: none; +} + +a { + text-decoration: none; + font-style: normal; +} + +body { + font-family: 'Epilogue', sans-serif; + background-color: var(--white); +} + +img { + display: block; + width: 100%; + height: auto; +} + +:root { + --white: #ffffff; + --darkgreen: #1e2827; + --black: #141414; +} + +.section { + min-width: 375px; + width: 100%; +} + +.container { + max-width: 335px; + padding: 0 20px; + margin: 0 auto; +} + +@media screen and (min-width: 768px) { + .section { + min-width: 768px; + } + + .container { + max-width: 704px; + padding: 0 32px; + } +} + +@media screen and (min-width: 1280px) { + .section { + min-width: 1280px; + } + + .container { + max-width: 1176px; + padding: 0 128px; + } +} + +/* End style reset */ \ No newline at end of file