diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..d33a45d --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Tom + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..e14bc6d --- /dev/null +++ b/README.md @@ -0,0 +1,162 @@ + +
+
+ Logo +

+

AnyWesbite

A Blank & Modern Website Template,
to start something new in web development.
+
+
+ Documentation » +
+ Demo + · + Report + · + Request +
+
+ + + + +
+ Contents +
    +
  1. + About + +
    2. +
  2. + Get Started + +
    3. +
  3. + Usage + +
    4. +
  4. Changelog
    5. +
  5. Contributing
    6. +
  6. Contact
    7. +
  7. Acknowledgements
    8. +
+

+ + + + +## About This Project +A fresh blank modern website template, that includes a ready-to-go front end, that uses a simple but robust grid system that is highly customizable and dynamic, scaling to all devices or screen sizes. Index test page already setup with the basic amenities like a menu, header and footer included. Easily expandable and can be added to any project. + +*This template is completely unrestricted, and free for anyone to use, unlimited, with no credit or acknowledgements needed. There are no signs of any ownership, or personal data, in this codebase. See the LICENSE file for more info.* + +
+ +### Tech Stack +* [HTML](https://www.w3.org/html/) - Website layout. +* [CSS](https://www.w3.org/Style/CSS/) - Website formatting and appearance. +* [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - Website scripting. + +

+ + + + +## Get Started +For help or guidance in downloading and running the application, see the following subsections. + +#### Installation +1. Clone/Download: + ```sh + git clone https://github.com/tberey/starter-modern-website-template.git + ``` +2. Test: + ```sh + Open 'index.html' file in any web browser. + ``` + +

+ + + + +## Usage + +### Screenshots + +Website Screenshot Full Screen
+![Screenshot#1](https://github.com/tberey/starter-modern-website-template/blob/main/screenshots/full-screen-index.png?raw=true) + +Website Screenshot Mobile
+![Screenshot#2](https://github.com/tberey/starter-modern-website-template/blob/main/screenshots/mobile-screen-index.png?raw=true) + +Website Screenshot 3
+![Screenshot#3](https://github.com/tberey/starter-modern-website-template/blob/main/screenshots/full-screen-menu.png?raw=true) + +Website Screenshot 4
+![Screenshot#4](https://github.com/tberey/starter-modern-website-template/blob/main/screenshots/full-screen-widget.png?raw=true) + +

+ + + + +## Roadmap +Below is the refined and confirmed roadmap, that has been planned for completion. See [open issues](https://github.com/tberey/starter-modern-website-template/issues) and also the [project board](https://github.com/tberey/starter-modern-website-template/projects), for any other proposed features or known issues, which may not be listed below. + +| Feature/Task/Bugfix | Details | Version (if released) | Notes | +|:---|:---|:---|:---| +| Bug#1 | Bug details... | 0.0.1 | example | +| Feature#4 | Feature details... | | example | + +

+ + + + +## Changelog + +| Version | Date | Changes | +|:---|:---|:---| +| 1.0.0 | 2023-12-07 | | + + +

+ + + + +## Contributing +Contributions are welcomed and, of course, **greatly appreciated**. + +1. Fork the Project. +2. Create your Feature Branch (`git checkout -b feature/Feature`) +3. Commit your Changes (`git commit -m 'Add some Feature'`) +4. Push to the Branch (`git push origin feature/Feature`) +5. Open a Pull Request. + +

+ + + + +### Contact + +Tom Berey; Project Manager, Lead Developer, Principal Tester & Customer Services;
tomberey1@gmail.com; + +* [Issues & Requests](https://github.com/tberey/starter-modern-website-template/issues) +* [My Other Projects](https://github.com/tberey?tab=repositories) +* [Personal Website](https://tberey.github.io/) +* [Linked In](https://uk.linkedin.com/in/thomas-berey) + +

+ + +### Acknowledgements + +* [Me](https://github.com/tberey) diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 0000000..3530e7b --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,21 @@ +# Security Policy + +## Supported Versions + +Use this section to tell people about which versions of your project are +currently being supported with security updates. + +| Version | Supported | +| ------- | ------------------ | +| 5.1.x | :white_check_mark: | +| 5.0.x | :x: | +| 4.0.x | :white_check_mark: | +| < 4.0 | :x: | + +## Reporting a Vulnerability + +Use this section to tell people how to report a vulnerability. + +Tell them where to go, how often they can expect to get an update on a +reported vulnerability, what to expect if the vulnerability is accepted or +declined, etc. \ No newline at end of file diff --git a/assets/images/banner-auto-scroller/stock-photo-1.jpg b/assets/images/banner-auto-scroller/stock-photo-1.jpg new file mode 100644 index 0000000..a95cecf Binary files /dev/null and b/assets/images/banner-auto-scroller/stock-photo-1.jpg differ diff --git a/assets/images/banner-auto-scroller/stock-photo-2.jpg b/assets/images/banner-auto-scroller/stock-photo-2.jpg new file mode 100644 index 0000000..5c41eff Binary files /dev/null and b/assets/images/banner-auto-scroller/stock-photo-2.jpg differ diff --git a/assets/images/banner-auto-scroller/stock-photo-3.jpg b/assets/images/banner-auto-scroller/stock-photo-3.jpg new file mode 100644 index 0000000..60a2044 Binary files /dev/null and b/assets/images/banner-auto-scroller/stock-photo-3.jpg differ diff --git a/assets/images/banner.jpg b/assets/images/banner.jpg new file mode 100644 index 0000000..93d7a1a Binary files /dev/null and b/assets/images/banner.jpg differ diff --git a/assets/images/email-icon.png b/assets/images/email-icon.png new file mode 100644 index 0000000..131bd02 Binary files /dev/null and b/assets/images/email-icon.png differ diff --git a/assets/images/facebook-icon.png b/assets/images/facebook-icon.png new file mode 100644 index 0000000..9dcf48c Binary files /dev/null and b/assets/images/facebook-icon.png differ diff --git a/assets/images/favicon.ico b/assets/images/favicon.ico new file mode 100644 index 0000000..bd5d963 Binary files /dev/null and b/assets/images/favicon.ico differ diff --git a/assets/images/img.png b/assets/images/img.png new file mode 100644 index 0000000..479ec7a Binary files /dev/null and b/assets/images/img.png differ diff --git a/assets/images/instagram-icon.png b/assets/images/instagram-icon.png new file mode 100644 index 0000000..5913646 Binary files /dev/null and b/assets/images/instagram-icon.png differ diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..3c1047c Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/telephone-icon.png b/assets/images/telephone-icon.png new file mode 100644 index 0000000..699b014 Binary files /dev/null and b/assets/images/telephone-icon.png differ diff --git a/assets/images/twitter-icon.png b/assets/images/twitter-icon.png new file mode 100644 index 0000000..8900d48 Binary files /dev/null and b/assets/images/twitter-icon.png differ diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..d7bf3fb --- /dev/null +++ b/css/styles.css @@ -0,0 +1,548 @@ +/* ---- DOM CSS Properties ---- */ + +html, body { + width: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0; + background-color: rgb(0, 0, 90); + color: white; + font-family: sans-serif; + font-size: 100%; +} + +html body a { + color: white; + text-decoration: none; + cursor: pointer; +} + +.container-footer { + bottom: 0; +} + +.container-header { + top: 0; +} + +.container-1-header { + display: grid; + width: 98%; + margin-left: auto; + margin-right: auto; + padding-left: auto; + padding-right: auto; + grid-template-columns: 1fr; +} + +.container-3-header { + display: grid; + width: 98%; + margin-left: auto; + margin-right: auto; + padding-left: auto; + padding-right: auto; + grid-template-columns: 1fr 1fr 1fr; +} + +.container-1-banner { + display: grid; + position: fixed; + z-index: 97; + width: 100%; + height: min-content; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + grid-template-columns: 1fr; +} + +.container-2-banner { + display: grid; + position: fixed; + z-index: 97; + width: 100%; + height: min-content; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + grid-template-columns: 1fr 1fr; +} + +.container-1-col-1-banner { + display: grid; + z-index: 97; + width: 100%; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + grid-template-columns: 1fr; + grid-column-start: 1; +} + +.container-1 { + display: grid; + width: 92%; + margin-left: auto; + margin-right: auto; + padding-left: auto; + padding-right: auto; + grid-template-columns: 1fr; +} + +.container-2 { + display: grid; + width: 92%; + margin-left: auto; + margin-right: auto; + padding-left: auto; + padding-right: auto; + grid-template-columns: 1fr 1fr; +} + +.container-3 { + display: grid; + width: 92%; + margin-left: auto; + margin-right: auto; + padding-left: auto; + padding-right: auto; + grid-template-columns: 1fr 1fr 1fr; +} + +.container-4 { + display: grid; + width: 92%; + margin-left: auto; + margin-right: auto; + padding-left: auto; + padding-right: auto; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.container-5 { + display: grid; + width: 92%; + margin-left: auto; + margin-right: auto; + padding-left: auto; + padding-right: auto; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; +} + +.col-1 { + width: 100%; + min-width: 100%; + max-width: 100%; + grid-column-start: 1; +} + +.col-2 { + width: 100%; + min-width: 100%; + max-width: 100%; + grid-column-start: 2; +} + +.col-3 { + width: 100%; + min-width: 100%; + max-width: 100%; + grid-column-start: 3; +} + +.col-4 { + width: 100%; + min-width: 100%; + max-width: 100%; + grid-column-start: 4; +} + +.col-5 { + width: 100%; + min-width: 100%; + max-width: 100%; + grid-column-start: 5; +} + +.col-margin-space-l { + margin-left: 20px; +} + +.col-margin-space-r { + margin-right: 20px; +} + +.col-padding-space-t { + padding-top: 15px; +} + +.item-left { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} + +.item-right { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: flex-end; +} + +.item-center { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.image-left { + display: block; + margin-left: 0; + margin-right: auto; +} + +.image-right { + display: block; + margin-left: auto; + margin-right: 0; +} + +.image-center { + display: block; + margin-left: auto; + margin-right: auto; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + + + +/* ---- Header CSS Properties ---- */ + +.header-banner-js { + z-index: 99; + background-color: grey; + color: black; + font-weight: bolder; + font-size: 1.3rem; +} + +.header-menu-burger-button { + position: fixed; + z-index: 98; + top: 25px; + left: 25px; + width: 61px; + height: 61px; + border-radius: 20px; + background-color: rgba(0, 0, 10, 0.7); + cursor: pointer; +} + +.header-menu-burger-icon { + margin-top: 6px; + display: inline-block; +} + +.header-menu-burger-icon .bar1, +.header-menu-burger-icon .bar2, +.header-menu-burger-icon .bar3 { + width: 35px; + height: 3px; + background-color: white; + margin: 9px 13px; + transition: 0.4s; +} + +.header-menu-burger-button.transform .bar1 { + transform: translate(0, 11px) rotate(-45deg); +} + +.header-menu-burger-button.transform .bar2 { + opacity: 0; +} + +.header-menu-burger-button.transform .bar3 { + transform: translate(0, -13px) rotate(45deg); +} + +.header-menu { + position: fixed; + z-index: 100; + top: 0; + left: 0px; + width: 130px; + height: fit-content; + border-radius: 0 0 50px 0; + background-color: rgba(0, 0, 10, 0.7); + overflow-y: auto; + font-size: 1.2rem; +} + +.header-menu a { + display: block; + padding: 15px; + color: white; + text-decoration: none; +} + +.header-menu a:hover { + background-color: black; +} + +.header-image-banner { + width: 100%; + height: auto; +} + +.header-image { + position: relative; + display: block; + width: 100%; + height: 100%; + overflow: hidden; +} + +.header-image-logo { + position: absolute; + width: 100%; + height: 100%; + object-fit: contain; + background-size: contain; + background-repeat: no-repeat; + background-position: calc(100% - 20px) center; + background-image: url('../assets/images/logo.png'); +} + +.header-image-scroller { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + object-fit: contain; + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + transition: opacity 2s ease-in-out; +} + +.header-image-scroller.active-image { + opacity: 1; +} + +.header-image-1 { + background-image: url('../assets/images/banner-auto-scroller/stock-photo-1.jpg'); +} + +.header-image-2 { + background-image: url('../assets/images/banner-auto-scroller/stock-photo-2.jpg'); +} + +.header-image-3 { + background-image: url('../assets/images/banner-auto-scroller/stock-photo-3.jpg'); +} + +.header-icons-spacing-r { + margin-right: 4%; +} + +.header-social-icons { + width: 15%; + max-width: 65px; + height: auto; +} + +.header-contact-icons { + width: 11%; + max-width: 50px; + height: auto; +} + +.header-contact-text { + word-wrap: break-word; + white-space: normal; + overflow-wrap: break-word; + font-size: 1.35vw; +} + +.header-sticky-content { + position: fixed; + top: 0; + right: 0; + width: 15%; + max-width: fit-content; + min-width: min-content; + height: fit-content; + padding: 15px; + white-space: nowrap; + border-radius: 0px 0px 0px 25px; + background-color: rgba(0, 0, 10, 0.4); + font-size: 1.4rem; + display: none; +} + +.header-sticky-content-show { + display: block; +} + +.header-sticky-content .header-social-icons { + width: 24%; +} + +.header-sticky-content .header-contact-icons { + width: 22%; +} + +.header-sticky-content .header-contact-text { + max-width: 26vw; +} + +.header-feedback-button { + width: fit-content; + padding: 4px; + border: 2px solid white; + border-radius: 20px; + background-color: rgb(90, 20, 20); + font-size: 1.4vw; +} + +.header-space-bottom { + padding-bottom: 60px; +} + + + +/* ---- Footer CSS Properties ---- */ + +.footer-top-button { + z-index: 101; + position: fixed; + bottom: 100px; + right: 0; + display: none; + width: 55px; + height: 55px; + font-size: 30px; + background-color: rgba(0, 0, 10, 0.4); + color: white; + border: none; + cursor: pointer; + transition: background-color 0.4s ease-in-out; +} + +.footer-top-button:hover { + background-color: black; +} + +.footer-banner { + word-wrap: break-word; + white-space: normal; + overflow-wrap: break-word; + background-color: rgba(0, 0, 10, 0.4); + font-size: 0.8rem; +} + +.footer-space-top { + padding-top: 140px; +} + + + + + +/* ---- Small Screen or Mobile CSS Properties ---- */ + +@media (max-width: 899px) { + /* (Small/Mobile) DOM CSS Properties */ + + .container-1 { + width: 94%; + } + + .container-2 { + width: 94%; + } + + .container-3 { + width: 94%; + } + + .container-4 { + width: 94%; + } + + .container-5 { + width: 94%; + } + + .container-small-screen-layout-override { + display: block; + } + + .col-small-screen-margin-space-0 { + margin-left: 0; + margin-right: 0; + } + + .small-screen-hide { + display: none; + } + + + + /* (Small/Mobile) Header CSS Properties */ + + .header-banner-js { + font-weight: bold; + font-size: 1rem; + } + + .header-image-logo { + background-position: right center; + } + + .header-social-icons { + width: 24%; + max-width: 56px; + } + + .header-contact-icons { + width: 20%; + max-width: 48px; + } + + .header-contact-text { + font-size: 2.5vw; + } + + .header-feedback-button { + padding: 2px; + border: 1px solid white; + font-size: 2vw; + } + + + + /* (Small/Mobile) Footer CSS Properties */ + + .footer-banner { + font-size: 0.64rem; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..0082240 --- /dev/null +++ b/index.html @@ -0,0 +1,243 @@ + + + + + My WebServer - empowering web development + + + + + + + + + + + + +
+
+

⚠ JavaScript is disabled in your browser. Some features may not work.

+
+
+ +
+
+
+
+
+
+
+
+
+ Home + About + Contact + Item 4... +
+
+
+ +
+
+ Banner +
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+ + Facebook + + + Instagram + + + Twitter + +
+
+ + Phone +
+ +
+ + Email +
+ +
+ +
+
+ +
+
+
+ + Facebook + + + Instagram + + + Twitter + +
+
+ + Phone +
+ +
+ + Email +
+ +
+ +
+
+
+ +
+ +
+
+

Index Page

+
+
+ +
+
+

Hello, world!

+
+
+ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Euismod quis viverra nibh cras pulvinar mattis. Ullamcorper velit sed ullamcorper morbi tincidunt. + Dolor sit amet consectetur adipiscing elit duis. Feugiat vivamus at augue eget arcu. + Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. + Sed euismod nisi porta lorem mollis aliquam ut porttitor. Pretium aenean pharetra magna ac placerat vestibulum. + A pellentesque sit amet porttitor eget. Eget mi proin sed libero enim sed faucibus. Amet consectetur adipiscing elit pellentesque. + Viverra justo nec ultrices dui sapien eget mi proin. Turpis egestas integer eget aliquet nibh. Duis ultricies lacus sed turpis tincidunt. + Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sollicitudin aliquam ultrices sagittis orci a. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. + A condimentum vitae sapien pellentesque habitant. Ut diam quam nulla porttitor massa id neque. Magna fringilla urna porttitor rhoncus dolor purus non. + Risus commodo viverra maecenas accumsan. Aliquet lectus proin nibh nisl. Pretium quam vulputate dignissim suspendisse in est. Eu turpis egestas pretium aenean pharetra. + Neque egestas congue quisque egestas diam. Est ultricies integer quis auctor elit sed vulputate. Laoreet sit amet cursus sit amet dictum. +





+ Accumsan in nisl nisi scelerisque eu ultrices vitae. Eget egestas purus viverra accumsan in nisl nisi. Odio ut enim blandit volutpat maecenas. Mi proin sed libero enim sed. + Risus nec feugiat in fermentum posuere. Mauris sit amet massa vitae tortor condimentum lacinia quis. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet. + Sagittis id consectetur purus ut. Sollicitudin ac orci phasellus egestas tellus. Sem fringilla ut morbi tincidunt augue interdum velit. Odio euismod lacinia at quis risus sed. + Id porta nibh venenatis cras sed felis eget velit. A lacus vestibulum sed arcu non odio euismod lacinia at. Facilisis magna etiam tempor orci eu. Nunc mi ipsum faucibus vitae aliquet. + Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Volutpat ac tincidunt vitae semper quis lectus. Lectus arcu bibendum at varius. + Eu augue ut lectus arcu bibendum at varius vel pharetra. A pellentesque sit amet porttitor eget dolor morbi non arcu. Purus semper eget duis at tellus at urna. + Ut morbi tincidunt augue interdum velit euismod in pellentesque massa. Malesuada nunc vel risus commodo. Morbi tristique senectus et netus et malesuada fames. At lectus convallis convallis. + Fermentum leo vel orci porta non. Risus feugiat in ante metus dictum at tempor. Magnis dis parturient montes nascetur ridiculus. Vel quam elementum pulvinar etiam non quam. +


+ Orci eu lobortis elementum nibh. Nunc congue nisi vitae suscipit tellus mauris a.Sed sed risus pretium quam vulputate dignissim. Leo integer malesuada nunc vel risus commodo viverra. + Et pharetra pharetra massa massa ultricies mi quis hendrerit. Sagittis purus sit amet volutpat consequat mauris nunc. Accumsan sit amet nulla facilisi morbi tempus iaculis. + Sem et tortor consequat id porta. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Viverra orci sagittis eu volutpat odio facilisis mauris sit amet. + At elementum eu facilisis sed odio. Nam libero justo laoreet sit amet. Lectus proin nibh nisl condimentum id venenatis a condimentum. Et ligula ullamcorper malesuada proin libero consequat. + Nec dui nunc mattis enim ut tellus. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare.Vel turpis nunc eget lorem. Odio tempor orci dapibus ultrices in. + Integer feugiat scelerisque varius morbi enim nunc. Commodo odio aenean sed adipiscing diam donec. Elementum nisi quis eleifend quam adipiscing vitae proin. + Habitant morbi tristique senectus et netus et malesuada fames ac. Mauris sit amet massa vitae tortor condimentum. Duis ut diam quam nulla porttitor. + Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Et leo duis ut diam quam nulla porttitor massa. Nullam non nisi est sit amet facilisis magna etiam tempor. + Pellentesque id nibh tortor id aliquet lectus proin. Sem et tortor consequat id porta nibh venenatis. Augue lacus viverra vitae congue eu consequat ac felis. + Nunc scelerisque viverra mauris in aliquam sem fringilla. Enim eu turpis egestas pretium aenean pharetra magna. Neque ornare aenean euismod elementum nisi quis eleifend. +


+ Dis parturient montes nascetur ridiculus mus. Eget mi proin sed libero enim sed faucibus turpis.Eu facilisis sed morbi quis commodo odio aenean. Daccumsan sit amet nulla facilisi morbi tempus. + Adipiscing elit pellentesque habitant morbi tristique senectus et. Duis at tellus at urna condimentum mattis pellentesque. Facilisis magna etiam tempor orci eu lobortis elementum nibh. + Tristique senectus et netus et malesuada fames ac. Mauris sit amet massa vitae tortor condimentum. Duis ut diam quam nulla porttitor. + A pellentesque sit amet porttitor eget. Eget mi proin sed libero enim sed faucibus. Amet consectetur adipiscing elit pellentesque. + Viverra justo nec ultrices dui sapien eget mi proin. Turpis egestas integer eget aliquet nibh. Duis ultricies lacus sed turpis tincidunt. + Diam vulputate ut pharetra sit amet aliquam id diam. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Pharetra diam sit nisl suscipit adipiscing. Aliquam facilisi fermentum odio. + Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Euismod nisi porta lorem mollis aliquam. Non consectetur a erat nam. + Orci porta non pulvinar neque laoreet suspendisse. Malesuada pellentesque elit eget gravida cum sociis natoque. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. + Amet dictum sit amet justo donec enim. Tristique aliquet enim tortor at auctor urna. Nulla at volutpat diam ut venenatis tellus in. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. + Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Venenatis urna cursus eget nunc scelerisque viverra. Magnis dis parturient montes nascetur ridiculus mus mauris. + Pulvinar proin gravida hendrerit lectus. +


+ Ullamcorper a lacus vestibulum sed arcu non odio. Quam elementum pulvinar etiam non quam. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. Quis viverra nibh cras pulvinar mattis nunc. + Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Duis at consectetur lorem donec massa sapien faucibus. Ac turpis egestas sed tempus urna. Urna cursus eget nunc scelerisque. + Sed libero enim sed faucibus turpis in eu. Quis eleifend quam adipiscing vitae. Arcu risus quis varius quam quisque id. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. + Mi proin sed libero enim sed faucibus turpis in. Sed adipiscing diam donec adipiscing. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Semper quis lectus nulla at volutpat diam. + Lobortis feugiat vivamus at augue eget. Id neque aliquam vestibulum morbi blandit cursus risus. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Tempor orci dapibus ultrices in. + Venenatis tellus in metus vulputate eu scelerisque felis. Nulla pharetra diam sit amet nisl. Dui sapien eget mi proin sed libero enim. Ultrices vitae auctor eu augue. + Convallis a cras semper auctor neque vitae tempus quam. Sit amet dictum sit amet justo donec. Viverra tellus in hac habitasse platea. Ante metus dictum at tempor commodo. + Massa eget egestas purus viverra accumsan in nisl. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. At tempor commodo ullamcorper a lacus. + Auctor urna nunc id cursus metus aliquam eleifend. Pharetra massa massa ultricies mi. Odio aenean sed adipiscing diam. +


+ Euismod lacinia at quis risus sed vulputate odio ut. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis.Feugiat vivamus at augue eget arcu. + Ut venenatis tellus in metus vulputate eu scelerisque felis. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Cursus metus aliquam eleifend mi. + Etta lectus arcu bibendum at varius vel pharetra vel turpis. Quam nulla porttitor massa id. Faucibus turpis in eu mi. Convallis a cras semper auctor neque. + Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Sit amet nisl suscipit adipiscing bibendum est ultricies. Elementum nibh tellus molestie nunc non. + Nulla malesuada pellentesque elit eget gravida cum. Convallis convallis tellus id interdum. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. + Blandit massa enim nec dui nunc mattis enim ut tellus. +





+ Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Ut tortor pretium viverra suspendisse potenti. Montes nascetur ridiculus mus mauris vitae ultricies. + Non arcu risus quis varius. Volutpat consequat mauris nunc congue nisi vitae. Ac felis donec et odio pellentesque diam volutpat commodo. A iaculis at erat pellentesque adipiscing. + Vel pharetra vel turpis nunc eget lorem. Aliquam purus sit amet luctus venenatis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Egestas diam arcu cursus euismod quis viverra nibh. + Dui vivamus arcu felis bibendum ut tristique et egestas. In iaculis nunc sed augue lacus viverra vitae congue. Tristique sollicitudin nibh sit amet commodo nulla facilisi. + Proin sed libero enim sed faucibus turpis in eu mi. Tellus cras adipiscing enim eu turpis.Volutpat ac tincidunt vitae semper quis lectus. Lectus arcu bibendum at varius nisl. + Cras tincidunt lobortis feugiat vivamus at. Elementum sagittis vitae et leo duis. Ante metus dictum at tempor. Felis bibendum ut tristique et egestas. + Volutpat diam ut venenatis tellus in metus vulputate. Eget magna fermentum iaculis eu. Diam volutpat commodo sed egestas. Ultrices tincidunt arcu non sodales neque. + Habitant morbi tristique senectus et netus et malesuada fames ac. Mauris sit amet massa vitae tortor condimentum. Duis ut diam quam nulla porttitor. + Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Purus semper eget duis at tellus at urna. +

+

+
+
+ +
+ + + +
+
+

+ © Copyright 2023 MyWebsite. All rights reserved. +
Email: contact@email.com +
Phone: 0123 456 7890 +
Address: Business Name, 123 Fake Street, City, AB4 5CD. +

+
+ +
+
+

+ Login +
+
+ Registered Business 12345678. +
+ Some extra information can go here... +

+
+
+
+ + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..9a77008 --- /dev/null +++ b/js/script.js @@ -0,0 +1,88 @@ +document.getElementById('header-js-banner').style.display = 'none'; + +//Burger Button and Menu. + + document.getElementById('header-menu').style.left = '-130px'; + function toggleMenu() { + const menu = document.getElementById('header-menu'); + const burgerButton = document.querySelector('.header-menu-burger-button'); + + const isOpen = menu.style.left === '0px'; + menu.style.transition = 'left 0.4s ease-in-out'; + menu.style.left = isOpen ? '-130px' : '0px'; + + burgerButton.style.transition = 'left 0.4s ease-in-out, top 0.4s ease-in-out'; + burgerButton.style.left = isOpen ? '25px' : '130px'; + burgerButton.style.top = isOpen ? '25px' : '0px'; + burgerButton.style.borderRadius = isOpen ? '20px' : '0px 0px 20px 0px'; + + setTimeout(() => { + burgerButton.style.transition = ''; + }, 400); + } + + function burgerIcon(x) { + x.classList.toggle("transform"); + } + + + +//Header Image Auto-Scroller. + + const images = document.querySelectorAll('.header-image-scroller'); + let currentIndex = 0; + + function fadeImages() { + images[currentIndex].classList.remove('active-image'); + currentIndex = (currentIndex + 1) % images.length; + images[currentIndex].classList.add('active-image'); + } + + setInterval(fadeImages, 4000); + + + +// Header Sticky Content. + + function handleScroll() { + var triggerElement = document.getElementById('sticky-content-trigger'); + var scrollY = window.scrollY || window.pageYOffset; + + // Check if the user has scrolled past the trigger element or if user has scrolled down by at least 500px. + if (scrollY > triggerElement.offsetTop || scrollY > 600) { + // Show the sticky content. + document.querySelector('.header-sticky-content').classList.add('header-sticky-content-show'); + } else { + // Hide the sticky content. + document.querySelector('.header-sticky-content').classList.remove('header-sticky-content-show'); + } + } + + window.addEventListener('scroll', handleScroll); + handleScroll(); + + + +// Scroll-to-top Footer Button. + + function toggleScrollToTopButton() { + const scrollToTopBtn = document.querySelector('.footer-top-button'); + scrollToTopBtn.style.bottom = window.getComputedStyle(document.querySelector(".footer-banner")).getPropertyValue('height'); + + const scrollY = window.scrollY || window.pageYOffset; + if (scrollY > 100) { + scrollToTopBtn.style.display = 'block'; + } else { + scrollToTopBtn.style.display = 'none'; + } + } + + // Scroll to the top when button is clicked + document.querySelector('.footer-top-button').addEventListener('click', () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }); + + window.addEventListener('scroll', toggleScrollToTopButton); + + // Initial check on page load + toggleScrollToTopButton(); diff --git a/screenshots/full-screen-index.png b/screenshots/full-screen-index.png new file mode 100644 index 0000000..a01fb8d Binary files /dev/null and b/screenshots/full-screen-index.png differ diff --git a/screenshots/full-screen-menu.png b/screenshots/full-screen-menu.png new file mode 100644 index 0000000..c09275c Binary files /dev/null and b/screenshots/full-screen-menu.png differ diff --git a/screenshots/full-screen-widget.png b/screenshots/full-screen-widget.png new file mode 100644 index 0000000..621e6ed Binary files /dev/null and b/screenshots/full-screen-widget.png differ diff --git a/screenshots/mobile-screen-index.png b/screenshots/mobile-screen-index.png new file mode 100644 index 0000000..431fdcd Binary files /dev/null and b/screenshots/mobile-screen-index.png differ