This is an automated email from the ASF dual-hosted git repository. martyntaylor pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/activemq-website.git
commit 33cde8c167bfb36939246eb9c9411dc896cc0a61 Author: Martyn Taylor <[email protected]> AuthorDate: Wed Jul 25 11:10:01 2018 +0100 Initial Import of ActiveMQ Website --- .../_variables.scssc | Bin 1227 -> 3994 bytes _includes/features.html | 121 ++++++ _includes/footer.html | 52 +++ _includes/head.html | 4 +- _includes/users.html | 49 +++ _site/assets/img/apache-logo.png | Bin 0 -> 25977 bytes _site/assets/img/customers/igindex.png | Bin 0 -> 2268 bytes _site/assets/img/features/protocol-translation.png | Bin 0 -> 10058 bytes _site/assets/img/main-logo.png | Bin 14576 -> 14583 bytes _site/css/main.css | 461 ++++++++++++++------- _site/index.html | 312 +++++++++++++- assets/img/apache-logo.png | Bin 0 -> 25977 bytes assets/img/customers/igindex.png | Bin 0 -> 2268 bytes assets/img/features/protocol-translation.png | Bin 0 -> 10058 bytes assets/img/main-logo.png | Bin 14576 -> 14583 bytes css/custom/_variables.scss | 15 +- css/main.scss | 201 +++++++++ index.html | 85 ++++ 18 files changed, 1143 insertions(+), 157 deletions(-) diff --git a/.sass-cache/85ac98fe8c4c43833c0e54c39e78b7d4dbd6d975/_variables.scssc b/.sass-cache/85ac98fe8c4c43833c0e54c39e78b7d4dbd6d975/_variables.scssc index e2b77a6..df1156e 100644 Binary files a/.sass-cache/85ac98fe8c4c43833c0e54c39e78b7d4dbd6d975/_variables.scssc and b/.sass-cache/85ac98fe8c4c43833c0e54c39e78b7d4dbd6d975/_variables.scssc differ diff --git a/_includes/features.html b/_includes/features.html new file mode 100644 index 0000000..5505b83 --- /dev/null +++ b/_includes/features.html @@ -0,0 +1,121 @@ +<!-- Features --> +<div class="row narative-alt"> + <div class="col-12"> + <div class="container"> + <!-- Narative 2 --> + <div class="row"> + <div class="col-sm-12 narative-alt"> + <div class="card"> + <div class="card-body narative-alt"> + <span>Create messaging infrastructure for any environment! Internet of Things, Cloud Messaging, Micro Services or Enterprise, + we have all the bells and whistles required. Read about some of our core features below.</span> + </div> + </div> + </div> + </div> + </div> + </div> +</div> + +<!-- Feature 1 --> +<div class="row features"> + <div class="col-12"> + <div class="container"> + <div class="row"> + <div class="col-sm-12 col-md-4"> + <div style="padding: 10px;" class="card card-white"> + <h5 style="maring-left: 10px" class="card-title card-title-purple text-purple"> + PROTOCOL TRANSLATION + </h5> + <h6> + SEND IN ONE PROTOCOL RECIEVE IN ANOTHER + </h6> + <div class="card-body"> + <div class="row"> + <div class="col-sm-12 col-lg-12 feature-img"> + <img src="assets/img/features/protocol-translation.png"></img> + </div> + <div class="col-sm-12 col-lg-12 feature-narative"> + <p>Applications and deployment environments are varied + by their very nature. Use protocols that best suit your specific + applications and let ActiveMQ do the work of integrating the + specific tecnologies for you.</p> + + <p>Produce telemetry data using MQTT for devices with limited + resources. Process via AMQP or JMS in your enterprise application.</p> + </div> + <div class="row"> + <div class="col-sm-12"> + <button style="margin-top: 10px" href="#" class="btn btn-warning">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="col-sm-12 col-md-4"> + <div style="padding: 10px" class="card card-white feature-purple"> + <h5 style="maring-left: 10px" class="card-title card-title-pink text-pink"> + BUILT IN REPLICATION + </h5> + <h6> + SEND IN ONE PROTOCOL RECIEVE IN ANOTHER + </h6> + <div class="card-body"> + <div class="row"> + <div class="col-sm-12 col-lg-12 feature-img"> + <img src="assets/img/features/protocol-translation.png"></img> + </div> + <div class="col-sm-12 col-lg-12 feature-narative"> + <p>Applications and deployment environments are varied + by their very nature. Use protocols that best suit your specific + applications and let ActiveMQ do the work of integrating the + specific tecnologies for you.</p> + + <p>Produce telemetry data using MQTT for devices with limited + resources. Process via AMQP or JMS in your enterprise application.</p> + </div> + <div class="row"> + <div class="col-sm-12"> + <button style="margin-top: 10px" href="#" class="btn btn-secondary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="col-sm-12 col-md-4"> + <div style="padding: 10px" class="card card-white feature-purple"> + <h5 style="maring-left: 10px" class="card-title card-title-orange text-orange"> + BUILT IN REPLICATION + </h5> + <h6> + SEND IN ONE PROTOCOL RECIEVE IN ANOTHER + </h6> + <div class="card-body"> + <div class="row"> + <div class="col-sm-12 col-lg-12 feature-img"> + <img src="assets/img/features/protocol-translation.png"></img> + </div> + <div class="col-sm-12 col-lg-12 feature-narative"> + <p>Applications and deployment environments are varied + by their very nature. Use protocols that best suit your specific + applications and let ActiveMQ do the work of integrating the + specific tecnologies for you.</p> + + <p>Produce telemetry data using MQTT for devices with limited + resources. Process via AMQP or JMS in your enterprise application.</p> + </div> + </div> + <div class="row"> + <div class="col-sm-12"> + <button style="margin-top: 10px" href="#" class="btn btn-success">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/_includes/footer.html b/_includes/footer.html index e69de29..eff0e34 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -0,0 +1,52 @@ +<div class="row sitemap"> + <div class="col-sm-12"> + <div class="container"> + <div class="row"> + <div class="col-sm-12 col-md-6"> + <div class="row"> + <div class="col-sm-4"> + <h5>Projects</h5> + <ul> + <li><a href="#">Artemis</a></li> + <li><a href="#">ActiveMQ</a></li> + <li><a href="#">NMS</a></li> + <li><a href="#">CMS</a></li> + </ul> + </div> + <div class="col-sm-4"> + <h5>Community</h5> + <ul> + <li><a href="#">Artemis</a></li> + <li><a href="#">ActiveMQ</a></li> + <li><a href="#">NMS</a></li> + <li><a href="#">CMS</a></li> + </ul> + </div> + <div class="col-sm-4"> + <h5>Getting Started</h5> + <ul> + <li><a href="#">Artemis</a></li> + <li><a href="#">ActiveMQ</a></li> + <li><a href="#">NMS</a></li> + <li><a href="#">CMS</a></li> + </ul> + </div> + </div> + </div> + <div class="col-sm-6"> + <div class="row"> + <div style="text-align: center; margin-bottom: 30px; margin-top: 30px;" class="col-sm-6"> + Apache ActiveMQ is an open source project licensed under Apache License 2.0. + </div> + <div class="col-sm-6"> + <div > + <img class="float-left" style="max-height: 100px" src="assets/img/main-logo.png"/> + <img class="float-right" style="max-height: 80px" src="assets/img/apache-logo.png"/> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/_includes/head.html b/_includes/head.html index 0e426d0..56cf5a4 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -2,11 +2,11 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> - <title>Jekyll and Bootstrap</title> + <title>ActiveMQ</title> <link rel="stylesheet" href="/css/main.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"; integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"; integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"; integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"; integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -</head> \ No newline at end of file +</head> diff --git a/_includes/users.html b/_includes/users.html new file mode 100644 index 0000000..2befe0a --- /dev/null +++ b/_includes/users.html @@ -0,0 +1,49 @@ +<div class="users row"> + <div class="col-sm-12"> + <div class="container"> + <div class="row"> + <div class="col-sm-12"> + <h2 style="margin-bottom: 20px; color: white">OUR USERS</h2> + </div> + <div class="row"> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + </div> + </div> + </div> + </div> +</div> diff --git a/_site/assets/img/apache-logo.png b/_site/assets/img/apache-logo.png new file mode 100644 index 0000000..f3b0ef9 Binary files /dev/null and b/_site/assets/img/apache-logo.png differ diff --git a/_site/assets/img/customers/igindex.png b/_site/assets/img/customers/igindex.png new file mode 100644 index 0000000..b4f01e0 Binary files /dev/null and b/_site/assets/img/customers/igindex.png differ diff --git a/_site/assets/img/features/protocol-translation.png b/_site/assets/img/features/protocol-translation.png new file mode 100644 index 0000000..d95c9cb Binary files /dev/null and b/_site/assets/img/features/protocol-translation.png differ diff --git a/_site/assets/img/main-logo.png b/_site/assets/img/main-logo.png index cba87aa..aa20089 100644 Binary files a/_site/assets/img/main-logo.png and b/_site/assets/img/main-logo.png differ diff --git a/_site/css/main.css b/_site/css/main.css index 695d57e..78d6685 100644 --- a/_site/css/main.css +++ b/_site/css/main.css @@ -5,14 +5,14 @@ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ :root { - --blue: #007bff; + --blue: #3e489f; --indigo: #6610f2; - --purple: #6f42c1; - --pink: #e83e8c; + --purple: #714099; + --pink: #c12766; --red: #dc3545; - --orange: #fd7e14; + --orange: #cf242a; --yellow: #ffc107; - --green: #28a745; + --green: #78932c; --teal: #20c997; --cyan: #17a2b8; --white: #fff; @@ -20,9 +20,9 @@ --gray-dark: #343a40; --primary: #78932c; --secondary: #c12766; - --success: #28a745; - --info: #17a2b8; - --warning: #ffc107; + --success: #cf242a; + --info: #3e489f; + --warning: #714099; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; @@ -420,7 +420,7 @@ samp { code { font-size: 87.5%; - color: #e83e8c; + color: #c12766; word-break: break-word; } a > code { color: inherit; } @@ -1255,35 +1255,35 @@ pre { .table-success, .table-success > th, .table-success > td { - background-color: #c3e6cb; } + background-color: #f2c2c3; } .table-hover .table-success:hover { - background-color: #b1dfbb; } + background-color: #eeadae; } .table-hover .table-success:hover > td, .table-hover .table-success:hover > th { - background-color: #b1dfbb; } + background-color: #eeadae; } .table-info, .table-info > th, .table-info > td { - background-color: #bee5eb; } + background-color: #c9cce4; } .table-hover .table-info:hover { - background-color: #abdde5; } + background-color: #b8bcdc; } .table-hover .table-info:hover > td, .table-hover .table-info:hover > th { - background-color: #abdde5; } + background-color: #b8bcdc; } .table-warning, .table-warning > th, .table-warning > td { - background-color: #ffeeba; } + background-color: #d7cae2; } .table-hover .table-warning:hover { - background-color: #ffe8a1; } + background-color: #cbbad9; } .table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th { - background-color: #ffe8a1; } + background-color: #cbbad9; } .table-danger, .table-danger > th, @@ -1559,7 +1559,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for width: 100%; margin-top: 0.25rem; font-size: 80%; - color: #28a745; } + color: #cf242a; } .valid-tooltip { position: absolute; @@ -1572,18 +1572,18 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for font-size: .875rem; line-height: 1; color: #fff; - background-color: rgba(40, 167, 69, 0.8); + background-color: rgba(207, 36, 42, 0.8); border-radius: .2rem; } .was-validated .form-control:valid, .form-control.is-valid, .was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #28a745; } + border-color: #cf242a; } .was-validated .form-control:valid:focus, .form-control.is-valid:focus, .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #28a745; - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } + border-color: #cf242a; + box-shadow: 0 0 0 0.2rem rgba(207, 36, 42, 0.25); } .was-validated .form-control:valid ~ .valid-feedback, .was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, .form-control.is-valid ~ .valid-tooltip, @@ -1594,27 +1594,27 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for display: block; } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #28a745; } + color: #cf242a; } .was-validated .form-check-input:valid ~ .valid-feedback, .was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, .form-check-input.is-valid ~ .valid-tooltip { display: block; } .was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #28a745; } + color: #cf242a; } .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - background-color: #71dd8a; } + background-color: #ea888c; } .was-validated .custom-control-input:valid ~ .valid-feedback, .was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, .custom-control-input.is-valid ~ .valid-tooltip { display: block; } .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - background-color: #34ce57; } + background-color: #df474c; } .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(207, 36, 42, 0.25); } .was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #28a745; } + border-color: #cf242a; } .was-validated .custom-file-input:valid ~ .custom-file-label::before, .custom-file-input.is-valid ~ .custom-file-label::before { border-color: inherit; } .was-validated .custom-file-input:valid ~ .valid-feedback, @@ -1622,7 +1622,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for .custom-file-input.is-valid ~ .valid-tooltip { display: block; } .was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } + box-shadow: 0 0 0 0.2rem rgba(207, 36, 42, 0.25); } .invalid-feedback { display: none; @@ -1810,66 +1810,66 @@ fieldset:disabled a.btn { .btn-success { color: #fff; - background-color: #28a745; - border-color: #28a745; } + background-color: #cf242a; + border-color: #cf242a; } .btn-success:hover { color: #fff; - background-color: #218838; - border-color: #1e7e34; } + background-color: #ae1e23; + border-color: #a41c21; } .btn-success:focus, .btn-success.focus { - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(207, 36, 42, 0.5); } .btn-success.disabled, .btn-success:disabled { color: #fff; - background-color: #28a745; - border-color: #28a745; } + background-color: #cf242a; + border-color: #cf242a; } .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { color: #fff; - background-color: #1e7e34; - border-color: #1c7430; } + background-color: #a41c21; + border-color: #991b1f; } .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(207, 36, 42, 0.5); } .btn-info { color: #fff; - background-color: #17a2b8; - border-color: #17a2b8; } + background-color: #3e489f; + border-color: #3e489f; } .btn-info:hover { color: #fff; - background-color: #138496; - border-color: #117a8b; } + background-color: #333c83; + border-color: #30377a; } .btn-info:focus, .btn-info.focus { - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(62, 72, 159, 0.5); } .btn-info.disabled, .btn-info:disabled { color: #fff; - background-color: #17a2b8; - border-color: #17a2b8; } + background-color: #3e489f; + border-color: #3e489f; } .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { color: #fff; - background-color: #117a8b; - border-color: #10707f; } + background-color: #30377a; + border-color: #2c3371; } .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(62, 72, 159, 0.5); } .btn-warning { - color: #212529; - background-color: #ffc107; - border-color: #ffc107; } + color: #fff; + background-color: #714099; + border-color: #714099; } .btn-warning:hover { - color: #212529; - background-color: #e0a800; - border-color: #d39e00; } + color: #fff; + background-color: #5d357e; + border-color: #563175; } .btn-warning:focus, .btn-warning.focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(113, 64, 153, 0.5); } .btn-warning.disabled, .btn-warning:disabled { - color: #212529; - background-color: #ffc107; - border-color: #ffc107; } + color: #fff; + background-color: #714099; + border-color: #714099; } .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { - color: #212529; - background-color: #d39e00; - border-color: #c69500; } + color: #fff; + background-color: #563175; + border-color: #502d6c; } .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(113, 64, 153, 0.5); } .btn-danger { color: #fff; @@ -1977,67 +1977,67 @@ fieldset:disabled a.btn { box-shadow: 0 0 0 0.2rem rgba(193, 39, 102, 0.5); } .btn-outline-success { - color: #28a745; + color: #cf242a; background-color: transparent; background-image: none; - border-color: #28a745; } + border-color: #cf242a; } .btn-outline-success:hover { color: #fff; - background-color: #28a745; - border-color: #28a745; } + background-color: #cf242a; + border-color: #cf242a; } .btn-outline-success:focus, .btn-outline-success.focus { - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(207, 36, 42, 0.5); } .btn-outline-success.disabled, .btn-outline-success:disabled { - color: #28a745; + color: #cf242a; background-color: transparent; } .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { color: #fff; - background-color: #28a745; - border-color: #28a745; } + background-color: #cf242a; + border-color: #cf242a; } .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(207, 36, 42, 0.5); } .btn-outline-info { - color: #17a2b8; + color: #3e489f; background-color: transparent; background-image: none; - border-color: #17a2b8; } + border-color: #3e489f; } .btn-outline-info:hover { color: #fff; - background-color: #17a2b8; - border-color: #17a2b8; } + background-color: #3e489f; + border-color: #3e489f; } .btn-outline-info:focus, .btn-outline-info.focus { - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(62, 72, 159, 0.5); } .btn-outline-info.disabled, .btn-outline-info:disabled { - color: #17a2b8; + color: #3e489f; background-color: transparent; } .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { color: #fff; - background-color: #17a2b8; - border-color: #17a2b8; } + background-color: #3e489f; + border-color: #3e489f; } .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(62, 72, 159, 0.5); } .btn-outline-warning { - color: #ffc107; + color: #714099; background-color: transparent; background-image: none; - border-color: #ffc107; } + border-color: #714099; } .btn-outline-warning:hover { - color: #212529; - background-color: #ffc107; - border-color: #ffc107; } + color: #fff; + background-color: #714099; + border-color: #714099; } .btn-outline-warning:focus, .btn-outline-warning.focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(113, 64, 153, 0.5); } .btn-outline-warning.disabled, .btn-outline-warning:disabled { - color: #ffc107; + color: #714099; background-color: transparent; } .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { - color: #212529; - background-color: #ffc107; - border-color: #ffc107; } + color: #fff; + background-color: #714099; + border-color: #714099; } .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + box-shadow: 0 0 0 0.2rem rgba(113, 64, 153, 0.5); } .btn-outline-danger { color: #dc3545; @@ -3296,27 +3296,27 @@ tbody.collapse.show { .badge-success { color: #fff; - background-color: #28a745; } + background-color: #cf242a; } .badge-success[href]:hover, .badge-success[href]:focus { color: #fff; text-decoration: none; - background-color: #1e7e34; } + background-color: #a41c21; } .badge-info { color: #fff; - background-color: #17a2b8; } + background-color: #3e489f; } .badge-info[href]:hover, .badge-info[href]:focus { color: #fff; text-decoration: none; - background-color: #117a8b; } + background-color: #30377a; } .badge-warning { - color: #212529; - background-color: #ffc107; } + color: #fff; + background-color: #714099; } .badge-warning[href]:hover, .badge-warning[href]:focus { - color: #212529; + color: #fff; text-decoration: none; - background-color: #d39e00; } + background-color: #563175; } .badge-danger { color: #fff; @@ -3397,31 +3397,31 @@ tbody.collapse.show { color: #3a0c1e; } .alert-success { - color: #155724; - background-color: #d4edda; - border-color: #c3e6cb; } + color: #6c1316; + background-color: #f5d3d4; + border-color: #f2c2c3; } .alert-success hr { - border-top-color: #b1dfbb; } + border-top-color: #eeadae; } .alert-success .alert-link { - color: #0b2e13; } + color: #410b0d; } .alert-info { - color: #0c5460; - background-color: #d1ecf1; - border-color: #bee5eb; } + color: #202553; + background-color: #d8daec; + border-color: #c9cce4; } .alert-info hr { - border-top-color: #abdde5; } + border-top-color: #b8bcdc; } .alert-info .alert-link { - color: #062c33; } + color: #12152e; } .alert-warning { - color: #856404; - background-color: #fff3cd; - border-color: #ffeeba; } + color: #3b2150; + background-color: #e3d9eb; + border-color: #d7cae2; } .alert-warning hr { - border-top-color: #ffe8a1; } + border-top-color: #cbbad9; } .alert-warning .alert-link { - color: #533f03; } + color: #20122c; } .alert-danger { color: #721c24; @@ -3562,37 +3562,37 @@ tbody.collapse.show { border-color: #641435; } .list-group-item-success { - color: #155724; - background-color: #c3e6cb; } + color: #6c1316; + background-color: #f2c2c3; } .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus { - color: #155724; - background-color: #b1dfbb; } + color: #6c1316; + background-color: #eeadae; } .list-group-item-success.list-group-item-action.active { color: #fff; - background-color: #155724; - border-color: #155724; } + background-color: #6c1316; + border-color: #6c1316; } .list-group-item-info { - color: #0c5460; - background-color: #bee5eb; } + color: #202553; + background-color: #c9cce4; } .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus { - color: #0c5460; - background-color: #abdde5; } + color: #202553; + background-color: #b8bcdc; } .list-group-item-info.list-group-item-action.active { color: #fff; - background-color: #0c5460; - border-color: #0c5460; } + background-color: #202553; + border-color: #202553; } .list-group-item-warning { - color: #856404; - background-color: #ffeeba; } + color: #3b2150; + background-color: #d7cae2; } .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus { - color: #856404; - background-color: #ffe8a1; } + color: #3b2150; + background-color: #cbbad9; } .list-group-item-warning.list-group-item-action.active { color: #fff; - background-color: #856404; - border-color: #856404; } + background-color: #3b2150; + border-color: #3b2150; } .list-group-item-danger { color: #721c24; @@ -4149,28 +4149,28 @@ button.bg-secondary:focus { background-color: #971e50 !important; } .bg-success { - background-color: #28a745 !important; } + background-color: #cf242a !important; } a.bg-success:hover, a.bg-success:focus, button.bg-success:hover, button.bg-success:focus { - background-color: #1e7e34 !important; } + background-color: #a41c21 !important; } .bg-info { - background-color: #17a2b8 !important; } + background-color: #3e489f !important; } a.bg-info:hover, a.bg-info:focus, button.bg-info:hover, button.bg-info:focus { - background-color: #117a8b !important; } + background-color: #30377a !important; } .bg-warning { - background-color: #ffc107 !important; } + background-color: #714099 !important; } a.bg-warning:hover, a.bg-warning:focus, button.bg-warning:hover, button.bg-warning:focus { - background-color: #d39e00 !important; } + background-color: #563175 !important; } .bg-danger { background-color: #dc3545 !important; } @@ -4239,13 +4239,13 @@ button.bg-dark:focus { border-color: #c12766 !important; } .border-success { - border-color: #28a745 !important; } + border-color: #cf242a !important; } .border-info { - border-color: #17a2b8 !important; } + border-color: #3e489f !important; } .border-warning { - border-color: #ffc107 !important; } + border-color: #714099 !important; } .border-danger { border-color: #dc3545 !important; } @@ -6378,22 +6378,22 @@ a.text-secondary:hover, a.text-secondary:focus { color: #971e50 !important; } .text-success { - color: #28a745 !important; } + color: #cf242a !important; } a.text-success:hover, a.text-success:focus { - color: #1e7e34 !important; } + color: #a41c21 !important; } .text-info { - color: #17a2b8 !important; } + color: #3e489f !important; } a.text-info:hover, a.text-info:focus { - color: #117a8b !important; } + color: #30377a !important; } .text-warning { - color: #ffc107 !important; } + color: #714099 !important; } a.text-warning:hover, a.text-warning:focus { - color: #d39e00 !important; } + color: #563175 !important; } .text-danger { color: #dc3545 !important; } @@ -6497,12 +6497,20 @@ ul.navbar-nav { margin-top: 10px; } .content { - margin-top: 60px; } + margin-top: 60px; + width: 100%; } + +.container { + padding: 0 10px 0 10px; } + +body { + width: 100%; } .slider { background-color: #78932c; margin: auto; - text-align: left !important; } + text-align: left !important; + margin-bottom: 20px; } .logo { padding-left: 20px; } @@ -6535,6 +6543,10 @@ a.get-started:hover { border: 2px solid #c12766; background-color: white; } +.navbar { + display: block; + position: fixed; } + .nav { border-bottom: 1px solid black; } @@ -6560,3 +6572,150 @@ table.slider { .slider-lg { height: 400px; } + +.narative-alt { + font-size: 1.2rem; + color: white; + padding: 10px !important; + background-color: grey; } + +.narative { + font-size: 1.2rem; + color: grey; + padding: 10px !important; + background-color: white; } + +.feature-narative { + font-size: 1rem; + padding: 0px !important; } + +.card { + border: 0 !important; + border-radius: 0 !important; } + +.card-purple { + border-left: 5px solid #714099 !important; + margin-bottom: 40px; } + +.card-pink { + border: 0 !important; + border-left: 5px solid #c12766 !important; + border-radius: 0 !important; + margin-bottom: 40px; } + +.card-orange { + border: 0 !important; + border-left: 5px solid #cf242a !important; + border-radius: 0 !important; + margin-bottom: 40px; } + +.card-blue { + border: 0 !important; + border-left: 5px solid #3e489f !important; + border-radius: 0 !important; + margin-bottom: 40px; } + +.card-white { + border: 0 !important; + border-left: 5px solid white !important; + border-radius: 0 !important; + padding: 0 30px 0 30px !important; } + +.text-purple { + color: #714099 !important; } + +.text-pink { + color: #c12766 !important; } + +.text-orange { + color: #cf242a !important; } + +.text-blue { + color: #3e489f !important; } + +.text-green { + color: #78932c !important; } + +.text-white { + color: white !important; } + +h5 { + font-weight: bold; } + +h6 { + font-weight: bold; } + +.btn-icon { + margin-left: 10px; } + +.feature-img { + text-align: center; + padding: 20px; + vertical-align: middle; } + +.sitemap { + background-color: grey; + color: white !important; + padding: 50px; } + +.sitemap a { + color: white; + text-decoration: none; } + +.sitemap li { + list-style-type: none; } + +.sitemap ul { + padding: 0px; } + +.users { + background-color: #78932c; + padding: 50px; + text-align: center; } + +.users .container { + background-color: #78932c; + margin-bottom: 20px; } + +.user-logo { + padding: 20px; } + +.features { + background-color: white; + color: grey; + padding-top: 30px; + padding-bottom: 30px; } + +.features .container .card { + background: none; } + +.features .narative { + color: white; + background-color: grey; } + +.feature-purple { + background-color: #714099; } + +.feature-pink { + background-color: #c12766; } + +.feature-blue { + background-color: #714099; } + +.feature-orange { + background-color: #714099; } + +.card-title-purple { + padding-top: 10px; + border-top: 5px solid #714099; } + +.card-title-pink { + padding-top: 10px; + border-top: 5px solid #c12766; } + +.card-title-orange { + padding-top: 10px; + border-top: 5px solid #cf242a; } + +.navbar { + border-bottom: 1px solid black; } diff --git a/_site/index.html b/_site/index.html index d115ed6..ce5646b 100644 --- a/_site/index.html +++ b/_site/index.html @@ -4,7 +4,7 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> - <title>Jekyll and Bootstrap</title> + <title>ActiveMQ</title> <link rel="stylesheet" href="/css/main.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"; integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script> @@ -12,6 +12,7 @@ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"; integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"; integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> + <body> <nav class="navbar navbar-expand-lg navbar-light fixed-top"> @@ -75,7 +76,314 @@ </div> </div> +<div class="container"> + <!-- Narative --> + <div class="row"> + <div class="col-sm-12 narative"> + <div class="card"> + <div class="card-body narative"> + <span>From brokers to clients ActiveMQ has everything required to build scalable, fault tolerant, messaging infrastructure. Proven + resilience, standards based technologies and super fast performance.</span> + </div> + </div> </div> - + </div> + <!-- Projects --> + <div class="row"> + <div class="col-lg-3 col-md-6"> + <div class="card card-purple"> + <div class="card-body"> + <h5 class="card-title text-purple">Artemis</h5> + <h6>BROKER + JMS CLIENT</h6> + <p>Artemis is ActiveMQ's next generation message broker</p> + <ul> + <li>Event driven core engine</li> + <li>Multi protocol support</li> + <li>Built in data replication</li> + </ul> + <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + <button style="margin-top: 10px" href="#" class="btn btn-warning">Download Latest<i class="fa-download fa btn-icon"></i></button> + </div> + </div> + </div> + <div class="col-lg-3 col-md-6"> + <div class="card card-pink"> + <div class="card-body"> + <h5 class="card-title text-pink">ActiveMQ</h5> + <h6>BROKER + JMS CLIENT</h6> + <p>Artemis is ActiveMQ's next generation message broker</p> + <ul> + <li>Event driven core engine</li> + <li>Multi protocol support</li> + <li>Built in data replication</li> + </ul> + <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + <button style="margin-top: 10px" href="#" class="btn btn-secondary">Download Latest<i class="fa-download fa btn-icon"></i></button> + </div> + </div> + </div> + <div class="col-lg-3 col-md-6"> + <div class="card card-orange"> + <div class="card-body"> + <h5 class="card-title text-orange">NMS</h5> + <h6>DOT NET CLIENT</h6> + <p>Artemis is ActiveMQ's next generation message broker</p> + <ul> + <li>Event driven core engine</li> + <li>Multi protocol support</li> + <li>Built in data replication</li> + </ul> + <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + <button style="margin-top: 10px" href="#" class="btn btn-success">Download Latest<i class="fa-download fa btn-icon"></i></button> + </div> + </div> + </div> + <div class="col-lg-3 col-md-6"> + <div class="card card-blue"> + <div class="card-body"> + <h5 class="card-title text-blue">CMS</h5> + <h6>C++ CLIENT</h6> + <p>Artemis is ActiveMQ's next generation message broker</p> + <ul> + <li>Event driven core engine</li> + <li>Multi protocol support</li> + <li>Built in data replication</li> + </ul> + <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + <button style="margin-top: 10px" href="#" class="btn btn-info">Download Latest<i class="fa-download fa btn-icon"></i></button> + </div> + </div> + </div> + </div> + +</div> + +<!-- Features --> +<div class="row narative-alt"> + <div class="col-12"> + <div class="container"> + <!-- Narative 2 --> + <div class="row"> + <div class="col-sm-12 narative-alt"> + <div class="card"> + <div class="card-body narative-alt"> + <span>Create messaging infrastructure for any environment! Internet of Things, Cloud Messaging, Micro Services or Enterprise, + we have all the bells and whistles required. Read about some of our core features below.</span> + </div> + </div> + </div> + </div> + </div> + </div> +</div> + +<!-- Feature 1 --> +<div class="row features"> + <div class="col-12"> + <div class="container"> + <div class="row"> + <div class="col-sm-12 col-md-4"> + <div style="padding: 10px;" class="card card-white"> + <h5 style="maring-left: 10px" class="card-title card-title-purple text-purple"> + PROTOCOL TRANSLATION + </h5> + <h6> + SEND IN ONE PROTOCOL RECIEVE IN ANOTHER + </h6> + <div class="card-body"> + <div class="row"> + <div class="col-sm-12 col-lg-12 feature-img"> + <img src="assets/img/features/protocol-translation.png"></img> + </div> + <div class="col-sm-12 col-lg-12 feature-narative"> + <p>Applications and deployment environments are varied + by their very nature. Use protocols that best suit your specific + applications and let ActiveMQ do the work of integrating the + specific tecnologies for you.</p> + + <p>Produce telemetry data using MQTT for devices with limited + resources. Process via AMQP or JMS in your enterprise application.</p> + </div> + <div class="row"> + <div class="col-sm-12"> + <button style="margin-top: 10px" href="#" class="btn btn-warning">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="col-sm-12 col-md-4"> + <div style="padding: 10px" class="card card-white feature-purple"> + <h5 style="maring-left: 10px" class="card-title card-title-pink text-pink"> + BUILT IN REPLICATION + </h5> + <h6> + SEND IN ONE PROTOCOL RECIEVE IN ANOTHER + </h6> + <div class="card-body"> + <div class="row"> + <div class="col-sm-12 col-lg-12 feature-img"> + <img src="assets/img/features/protocol-translation.png"></img> + </div> + <div class="col-sm-12 col-lg-12 feature-narative"> + <p>Applications and deployment environments are varied + by their very nature. Use protocols that best suit your specific + applications and let ActiveMQ do the work of integrating the + specific tecnologies for you.</p> + + <p>Produce telemetry data using MQTT for devices with limited + resources. Process via AMQP or JMS in your enterprise application.</p> + </div> + <div class="row"> + <div class="col-sm-12"> + <button style="margin-top: 10px" href="#" class="btn btn-secondary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="col-sm-12 col-md-4"> + <div style="padding: 10px" class="card card-white feature-purple"> + <h5 style="maring-left: 10px" class="card-title card-title-orange text-orange"> + BUILT IN REPLICATION + </h5> + <h6> + SEND IN ONE PROTOCOL RECIEVE IN ANOTHER + </h6> + <div class="card-body"> + <div class="row"> + <div class="col-sm-12 col-lg-12 feature-img"> + <img src="assets/img/features/protocol-translation.png"></img> + </div> + <div class="col-sm-12 col-lg-12 feature-narative"> + <p>Applications and deployment environments are varied + by their very nature. Use protocols that best suit your specific + applications and let ActiveMQ do the work of integrating the + specific tecnologies for you.</p> + + <p>Produce telemetry data using MQTT for devices with limited + resources. Process via AMQP or JMS in your enterprise application.</p> + </div> + </div> + <div class="row"> + <div class="col-sm-12"> + <button style="margin-top: 10px" href="#" class="btn btn-success">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> + +<div class="users row"> + <div class="col-sm-12"> + <div class="container"> + <div class="row"> + <div class="col-sm-12"> + <h2 style="margin-bottom: 20px; color: white">OUR USERS</h2> + </div> + <div class="row"> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + <div class="user-logo col-sm-4 col-md-2"> + <img src="assets/img/customers/igindex.png"/> + </div> + </div> + </div> + </div> + </div> +</div> + + + </div> + <div class="row sitemap"> + <div class="col-sm-12"> + <div class="container"> + <div class="row"> + <div class="col-sm-12 col-md-6"> + <div class="row"> + <div class="col-sm-4"> + <h5>Projects</h5> + <ul> + <li><a href="#">Artemis</a></li> + <li><a href="#">ActiveMQ</a></li> + <li><a href="#">NMS</a></li> + <li><a href="#">CMS</a></li> + </ul> + </div> + <div class="col-sm-4"> + <h5>Community</h5> + <ul> + <li><a href="#">Artemis</a></li> + <li><a href="#">ActiveMQ</a></li> + <li><a href="#">NMS</a></li> + <li><a href="#">CMS</a></li> + </ul> + </div> + <div class="col-sm-4"> + <h5>Getting Started</h5> + <ul> + <li><a href="#">Artemis</a></li> + <li><a href="#">ActiveMQ</a></li> + <li><a href="#">NMS</a></li> + <li><a href="#">CMS</a></li> + </ul> + </div> + </div> + </div> + <div class="col-sm-6"> + <div class="row"> + <div style="text-align: center; margin-bottom: 30px; margin-top: 30px;" class="col-sm-6"> + Apache ActiveMQ is an open source project licensed under Apache License 2.0. + </div> + <div class="col-sm-6"> + <div > + <img class="float-left" style="max-height: 100px" src="assets/img/main-logo.png"/> + <img class="float-right" style="max-height: 80px" src="assets/img/apache-logo.png"/> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> + </body> </html> diff --git a/assets/img/apache-logo.png b/assets/img/apache-logo.png new file mode 100644 index 0000000..f3b0ef9 Binary files /dev/null and b/assets/img/apache-logo.png differ diff --git a/assets/img/customers/igindex.png b/assets/img/customers/igindex.png new file mode 100644 index 0000000..b4f01e0 Binary files /dev/null and b/assets/img/customers/igindex.png differ diff --git a/assets/img/features/protocol-translation.png b/assets/img/features/protocol-translation.png new file mode 100644 index 0000000..d95c9cb Binary files /dev/null and b/assets/img/features/protocol-translation.png differ diff --git a/assets/img/main-logo.png b/assets/img/main-logo.png index cba87aa..aa20089 100644 Binary files a/assets/img/main-logo.png and b/assets/img/main-logo.png differ diff --git a/css/custom/_variables.scss b/css/custom/_variables.scss index d94c1b1..48969ad 100644 --- a/css/custom/_variables.scss +++ b/css/custom/_variables.scss @@ -1,2 +1,13 @@ -$primary: #78932c; // green -$secondary: #c12766; +// Override Bootstrap Defaults +$primary: #78932c; // Green +$secondary: #c12766; // Pink +$success: #cf242a; // Orange +$warning: #714099; // Purple +$info: #3e489f; // Blue + +// ActiveMQ Variables +$green: #78932c; // Green +$pink: #c12766; // Pink +$orange: #cf242a; // Orange +$purple: #714099; // Purple +$blue: #3e489f; // Blue diff --git a/css/main.scss b/css/main.scss index 86f9324..1ce945d 100644 --- a/css/main.scss +++ b/css/main.scss @@ -13,12 +13,22 @@ ul.navbar-nav { .content { margin-top: 60px; + width: 100%; +} + +.container { + padding: 0 10px 0 10px; +} + +body { + width: 100%; } .slider { background-color: $primary; margin: auto; text-align: left !important; + margin-bottom: 20px; } .logo { @@ -58,6 +68,11 @@ a.get-started:hover { background-color: white; } +.navbar { + display: block; +position: fixed; +} + .nav { border-bottom: 1px solid black; } @@ -90,3 +105,189 @@ table.slider { .slider-lg { height: 400px } + +.narative-alt { + font-size: 1.2rem; + color: white; + padding: 10px !important; + background-color: grey; +} + +.narative { + font-size: 1.2rem; + color: grey; + padding: 10px !important; + background-color: white; +} + +.feature-narative { + font-size: 1rem; + padding: 0px !important; +} + +.card { + border: 0 !important; + border-radius: 0 !important; +} +// Cards +.card-purple { + border-left: 5px solid $purple !important; + margin-bottom: 40px; +} + +.card-pink { + border: 0 !important; + border-left: 5px solid $pink !important; + border-radius: 0 !important; + margin-bottom: 40px; +} + +.card-orange { + border: 0 !important; + border-left: 5px solid $orange !important; + border-radius: 0 !important; + margin-bottom: 40px; +} + +.card-blue { + border: 0 !important; + border-left: 5px solid $blue !important; + border-radius: 0 !important; + margin-bottom: 40px; +} + +.card-white { + border: 0 !important; + border-left: 5px solid white !important; + border-radius: 0 !important; + padding: 0 30px 0 30px !important; +} + + +.text-purple { + color: $purple !important; +} + +.text-pink { + color: $pink !important; +} + +.text-orange { + color: $orange !important; +} + +.text-blue { + color: $blue !important; +} + +.text-green { + color: $green !important; +} + +.text-white { + color: white !important; +} + +h5 { + font-weight: bold; +} + +h6 { + font-weight: bold; +} + +.btn-icon { + margin-left: 10px; +} + +.feature-img { + text-align: center; + padding: 20px; + vertical-align: middle +} + +.sitemap { + background-color: grey; + color: white !important; + padding: 50px; +} + +.sitemap a { + color: white; + text-decoration: none; +} + +.sitemap li { + list-style-type: none; +} + +.sitemap ul { + padding: 0px; +} + +.users { + background-color: $green; + padding: 50px; + text-align: center; +} + +.users .container { + background-color: $green; + margin-bottom: 20px; +} + +.user-logo { + padding: 20px; +} + +.features { + background-color: white; + color: grey; + padding-top: 30px; + padding-bottom: 30px; +} + +.features .container .card { + background: none; +} + + +.features .narative { + color: white; + background-color: grey; +} + +.feature-purple { + background-color: $purple; +} + +.feature-pink { + background-color: $pink; +} + +.feature-blue { + background-color: $purple; +} + +.feature-orange { + background-color: $purple; +} + +.card-title-purple { + padding-top: 10px; + border-top: 5px solid $purple; +} + +.card-title-pink { + padding-top: 10px; + border-top: 5px solid $pink; +} + +.card-title-orange { + padding-top: 10px; + border-top: 5px solid $orange; +} + +.navbar { + border-bottom: 1px solid black; +} diff --git a/index.html b/index.html index 424ab30..7895ef9 100644 --- a/index.html +++ b/index.html @@ -29,3 +29,88 @@ layout: default </div> </div> </div> + +<div class="container"> + <!-- Narative --> + <div class="row"> + <div class="col-sm-12 narative"> + <div class="card"> + <div class="card-body narative"> + <span>From brokers to clients ActiveMQ has everything required to build scalable, fault tolerant, messaging infrastructure. Proven + resilience, standards based technologies and super fast performance.</span> + </div> + </div> + </div> + </div> + <!-- Projects --> + <div class="row"> + <div class="col-lg-3 col-md-6"> + <div class="card card-purple"> + <div class="card-body"> + <h5 class="card-title text-purple">Artemis</h5> + <h6>BROKER + JMS CLIENT</h6> + <p>Artemis is ActiveMQ's next generation message broker</p> + <ul> + <li>Event driven core engine</li> + <li>Multi protocol support</li> + <li>Built in data replication</li> + </ul> + <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + <button style="margin-top: 10px" href="#" class="btn btn-warning">Download Latest<i class="fa-download fa btn-icon"></i></button> + </div> + </div> + </div> + <div class="col-lg-3 col-md-6"> + <div class="card card-pink"> + <div class="card-body"> + <h5 class="card-title text-pink">ActiveMQ</h5> + <h6>BROKER + JMS CLIENT</h6> + <p>Artemis is ActiveMQ's next generation message broker</p> + <ul> + <li>Event driven core engine</li> + <li>Multi protocol support</li> + <li>Built in data replication</li> + </ul> + <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + <button style="margin-top: 10px" href="#" class="btn btn-secondary">Download Latest<i class="fa-download fa btn-icon"></i></button> + </div> + </div> + </div> + <div class="col-lg-3 col-md-6"> + <div class="card card-orange"> + <div class="card-body"> + <h5 class="card-title text-orange">NMS</h5> + <h6>DOT NET CLIENT</h6> + <p>Artemis is ActiveMQ's next generation message broker</p> + <ul> + <li>Event driven core engine</li> + <li>Multi protocol support</li> + <li>Built in data replication</li> + </ul> + <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + <button style="margin-top: 10px" href="#" class="btn btn-success">Download Latest<i class="fa-download fa btn-icon"></i></button> + </div> + </div> + </div> + <div class="col-lg-3 col-md-6"> + <div class="card card-blue"> + <div class="card-body"> + <h5 class="card-title text-blue">CMS</h5> + <h6>C++ CLIENT</h6> + <p>Artemis is ActiveMQ's next generation message broker</p> + <ul> + <li>Event driven core engine</li> + <li>Multi protocol support</li> + <li>Built in data replication</li> + </ul> + <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button> + <button style="margin-top: 10px" href="#" class="btn btn-info">Download Latest<i class="fa-download fa btn-icon"></i></button> + </div> + </div> + </div> + </div> + +</div> + +{% include features.html %} +{% include users.html %}
