diff --git a/index.html b/index.html
new file mode 100644
index 00000000..9f1011c9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+ Office Shield
+
+
+
+
+
+
+
+
+
+
+
+
+
403
+
access not granted
+
+
+
+
+
+
+
+
+
diff --git a/nc_assets/css/style.css b/nc_assets/css/style.css
new file mode 100644
index 00000000..1616bb31
--- /dev/null
+++ b/nc_assets/css/style.css
@@ -0,0 +1,447 @@
+@font-face {
+ font-family: 'Museo Sans';
+ src: url('../fonts/museo-sans-300-webfont.eot');
+ src: url('../fonts/museo-sans-300-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/museo-sans-300-webfont.woff') format('woff'), url('../fonts/museo-sans-300-webfont.ttf') format('truetype'), url('../fonts/museo-sans-300-webfont.svg#museo-sans-300-webfont') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Museo Sans';
+ src: url('../fonts/museo-sans-300-italic-webfont.eot');
+ src: url('../fonts/museo-sans-300-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/museo-sans-300-italic-webfont.woff') format('woff'), url('../fonts/museo-sans-300-italic-webfont.ttf') format('truetype'), url('../fonts/museo-sans-300-italic-webfont.svg#museo-sans-300-italic-webfont') format('svg');
+ font-weight: normal;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'Museo Sans';
+ src: url('../fonts/museo-sans-700-webfont.eot');
+ src: url('../fonts/museo-sans-700-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/museo-sans-700-webfont.woff') format('woff'), url('../fonts/museo-sans-700-webfont.ttf') format('truetype'), url('../fonts/museo-sans-700-webfont.svg#museo-sans-700-webfont') format('svg');
+ font-weight: bold;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Museo Sans';
+ src: url('../fonts/museo-sans-700-italic-webfont.eot');
+ src: url('../fonts/museo-sans-700-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/museo-sans-700-italic-webfont.woff') format('woff'), url('../fonts/museo-sans-700-italic-webfont.ttf') format('truetype'), url('../fonts/museo-sans-700-italic-webfont.svg#museo-sans-700-italic-webfont') format('svg');
+ font-weight: bold;
+ font-style: italic;
+}
+/**
+ * ------------------------------------------------------ *
+ * Base
+ * ------------------------------------------------------ *
+**/
+ * {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+body {
+ min-width: 300px;
+ height: 100%;
+ margin: 0 auto;
+ font-family: 'Museo Sans', Arial, Helvetica, sans-serif;
+ font-size: 100%;
+ line-height: 1.25;
+ color: #6d6e70;
+ overflow-x: hidden;
+}
+a {
+ text-decoration: none;
+ color: #de3723;
+}
+a:hover {
+ text-decoration: underline;
+}
+img {
+ border: 0;
+}
+/**
+ * ------------------------------------------------------ *
+ * Utilities
+ * ------------------------------------------------------ *
+**/
+.group:before, .group:after {
+ content: "";
+ display: table;
+}
+.group:after {
+ clear: both;
+}
+.group {
+ zoom: 1;
+}
+.center {
+ text-align: center;
+}
+.reset-mt {
+ margin-top: 0 !important;
+}
+.reset-mb {
+ margin-bottom: 0 !important;
+}
+.margin-bottom {
+ margin-bottom: 1em;
+}
+/**
+ * ------------------------------------------------------ *
+ * Styles
+ * ------------------------------------------------------ *
+**/
+.headline {
+ margin: 0 auto 3em;
+}
+h1 {
+ font-size: 2em;
+ line-height: 1.125;
+ margin: 1.25em 0 0;
+}
+h2, h3, .h2 {
+ font-size: 1.5em;
+ margin: 1.25em 0 0;
+ font-weight: normal;
+}
+h4, .h4 {
+ font-size: 1em;
+ line-height: 1.5;
+ margin: 2em 0 0.5em;
+}
+p {
+ margin-top: 0;
+ line-height: 1.5;
+}
+/**
+ * ------------------------------------------------------ *
+ * Content
+ * ------------------------------------------------------ *
+**/
+.wrapper {
+ max-width: 87.5em;
+ padding: 0 1.5em;
+ margin: 0 auto;
+}
+.header {
+ padding: 2em 0 1.5em;
+ border-bottom: 2px solid #8cc1c1;
+}
+.logo {
+ font-size: 0;
+ text-align: center;
+}
+.logo > * {
+ vertical-align: bottom;
+}
+.logo img {
+ height: 28px;
+}
+.logo > div {
+ display: inline-block;
+ margin-right: 1em;
+ font-size: 14px;
+ color: #999;
+}
+.grid-row {
+ width: 100%;
+ margin: 3em auto 3em;
+}
+.flex {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ -moz-flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+.flex.middle {
+ -webkit-align-items: center;
+ -moz-align-items: center;
+ -ms-align-items: center;
+ align-items: center;
+ -webkit-justify-content: center;
+ -moz-justify-content: center;
+ -ms-justify-content: center;
+ justify-content: center;
+}
+.flex.first {
+ -webkit-flex-direction: column-reverse;
+ -moz-flex-direction: column-reverse;
+ -ms-flex-direction: column-reverse;
+ flex-direction: column-reverse;
+}
+.grid-row.four-fifths {
+ width: 100%;
+}
+.aside {
+ width: 300px;
+ -webkit-flex: 1 100%;
+ -moz-flex: 1 100%;
+ -ms-flex: 1 100%;
+ flex: 1 100%;
+ text-align: center;
+}
+.aside img {
+ width: 300px;
+}
+.main {
+ -webkit-flex: 1 100%;
+ -moz-flex: 1 100%;
+ -ms-flex: 1 100%;
+ flex: 1 100%;
+ padding-left: 0;
+}
+.main.fix-left {
+ padding-right: 0;
+}
+.main-all {
+ -webkit-flex: 1 100%;
+ -moz-flex: 1 100%;
+ -ms-flex: 1 100%;
+ flex: 1 100%;
+}
+.headline {
+ text-align: center;
+}
+.headline h1 {
+ margin: 0.25em 0 0;
+ font-size: 1.5em;
+ line-height: 1.125;
+}
+.headline h2 {
+ margin: 0.25em 0 0;
+ font-size: 1.25em;
+ line-height: 1.25;
+}
+ul.default {
+ margin: 0;
+ padding-left: 1em;
+}
+ul.default li {
+ color: #D6D6D6;
+}
+ul.default li p {
+ color: #6d6e70;
+ margin: 0;
+ padding-bottom: 0.25em;
+}
+ul.default li:last-child p {
+ padding-bottom: 0;
+}
+.live-chat {
+ margin: 2em 0 0;
+ padding: 1.5em;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ background-color: #F2F2F2;
+}
+.live-chat .chat-content {
+ -webkit-flex: 1;
+ -moz-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 0;
+}
+.live-chat .chat-content p {
+ position: relative;
+ padding-left: 0;
+ line-height: 1.5;
+ font-weight: bold;
+}
+.live-chat .chat-btn {
+ -webkit-flex: 1 100%;
+ -moz-flex: 1 100%;
+ -ms-flex: 1 100%;
+ flex: 1 100%;
+}
+.live-chat .chat-btn p {
+ margin-bottom: 0;
+ text-align: right;
+}
+.live-chat .btn {
+ width: 100%;
+ margin-top: 1em;
+}
+p.help-block {
+ position: relative;
+ padding-left: 2em;
+ line-height: 1.5;
+}
+.nc-icon {
+ position: absolute;
+ left: 0;
+ top: -5px;
+ width: 30px;
+ height: 30px;
+}
+.nc-icon.icon-info {
+ display: none;
+ background: url('../img/icons/icon-info-hd.png') no-repeat center center;
+ background-size: 100% auto;
+}
+.nc-icon.icon-checkmark {
+ background: url('../img/icons/checkmark-hd.png') no-repeat center center;
+ background-size: 100% auto;
+}
+.nc-icon.icon-start {
+ background: url('../img/pictograms/150/server-red.png') no-repeat center center;
+ background-size: 100% auto;
+}
+.nc-icon.icon-cpanel {
+ background: url('../img/pictograms/150/tools-red.png') no-repeat center center;
+ background-size: 100% auto;
+}
+.nc-icon.icon-mail {
+ background: url('../img/pictograms/150/email-red.png') no-repeat center center;
+ background-size: 100% auto;
+}
+.nc-icon.icon-support {
+ background: url('../img/pictograms/150/support-red.png') no-repeat center center;
+ background-size: 100% auto;
+}
+.nc-icon.icon-news {
+ background: url('../img/pictograms/150/news-red.png') no-repeat center center;
+ background-size: 100% auto;
+}
+.nc-icon.icon-blog {
+ background: url('../img/pictograms/150/browser-red.png') no-repeat center center;
+ background-size: 100% auto;
+}
+.btn {
+ font-size: 1.125em;
+ font-weight: bold;
+ text-align: center;
+ text-decoration: none;
+ color: #fff;
+ padding: 0.5em 1em;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ display: inline-block;
+}
+.btn.green {
+ text-shadow: 0 -1px 1px #6d9796;
+ background: #89c1c0; /* Old browsers */
+ background: -moz-linear-gradient(top, #89c1c0 0%, #6d9796 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #89c1c0), color-stop(100%, #6d9796)); /* Chrome, Safari4+ */
+ background: -webkit-linear-gradient(top, #89c1c0 0%, #6d9796 100%); /* Chrome10+, Safari5.1+ */
+ background: -o-linear-gradient(top, #89c1c0 0%, #6d9796 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #89c1c0 0%, #6d9796 100%); /* IE10+ */
+ background: linear-gradient(to bottom, #89c1c0 0%, #6d9796 100%); /* W3C */
+ /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c1c0', endColorstr='#6d9796', GradientType=0);*/ /* IE6-9 */
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+ border-color: #6c9494;
+}
+.btn.green:hover {
+ text-decoration: none;
+ text-shadow: 0 -1px 1px #4d7e7a;
+ background: #6b9494; /* Old browsers */
+ background: -moz-linear-gradient(top, #6b9494 0%, #4d7e7a 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6b9494), color-stop(100%, #4d7e7a)); /* Chrome, Safari4+ */
+ background: -webkit-linear-gradient(top, #6b9494 0%, #4d7e7a 100%); /* Chrome10+, Safari5.1+ */
+ background: -o-linear-gradient(top, #6b9494 0%, #4d7e7a 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #6b9494 0%, #4d7e7a 100%); /* IE10+ */
+ background: linear-gradient(to bottom, #6b9494 0%, #4d7e7a 100%); /* W3C */
+ /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9494', endColorstr='#4d7e7a', GradientType=0); /* IE6-9 */
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.btn.green:active {
+ background: #4d7e7a; /* Old browsers */
+ background: -moz-linear-gradient(top, #4d7e7a 0%, #6b9494 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d7e7a), color-stop(100%, #6b9494)); /* Chrome, Safari4+ */
+ background: -webkit-linear-gradient(top, #4d7e7a 0%, #6b9494 100%); /* Chrome10+, Safari5.1+ */
+ background: -o-linear-gradient(top, #4d7e7a 0%, #6b9494 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #4d7e7a 0%, #6b9494 100%); /* IE10+ */
+ background: linear-gradient(to bottom, #4d7e7a 0%, #6b9494 100%); /* W3C */
+ /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d7e7a', endColorstr='#6b9494', GradientType=0); /* IE6-9 */
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+@media all and (min-width: 480px) {
+ .headline h1 {
+ font-size: 2em;
+ line-height: 1.125;
+ }
+ .headline h2 {
+ font-size: 1.5em;
+ line-height: 1.25;
+ }
+}
+@media all and (min-width: 640px) {
+ .live-chat {
+ padding: 1.5em 1.5em 1.5em 1.125em;
+ }
+ .live-chat .chat-content {
+ -webkit-flex: 1;
+ -moz-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-right: 1.5em;
+ }
+ .live-chat .chat-content p {
+ padding-left: 2em;
+ }
+ .nc-icon.icon-info {
+ display: block;
+ }
+ .live-chat .chat-btn {
+ -webkit-flex: 0 240px;
+ -moz-flex: 0 240px;
+ -ms-flex: 0 240px;
+ flex: 0 240px;
+ }
+ .live-chat .btn {
+ margin-top: 0;
+ }
+}
+@media all and (min-width: 720px) {
+ .grid-row.four-fifths {
+ width: 80%;
+ }
+}
+@media all and (min-width: 800px) {
+ .wrapper {
+ padding: 0 3em;
+ }
+ .flex.first {
+ -webkit-flex-direction: row;
+ -moz-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
+ .logo {
+ text-align: right;
+ }
+ .grid-row.four-fifths {
+ width: 100%;
+ }
+ .aside {
+ -webkit-flex: 0;
+ -moz-flex: 0;
+ -ms-flex: 0;
+ flex: 0;
+ }
+ .main {
+ -webkit-flex: 1;
+ -moz-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ padding-left: 2em;
+ }
+ .main.fix-left {
+ padding-left: 0;
+ padding-right: 2em;
+ }
+ .headline {
+ text-align: left;
+ }
+ .headline h1 {
+ margin: 1.25em 0 0;
+ }
+}
+@media all and (min-width: 1180px) {
+ .grid-row.four-fifths {
+ width: 80%;
+ }
+}
\ No newline at end of file
diff --git a/nc_assets/fonts/museo-sans-300-italic-webfont.eot b/nc_assets/fonts/museo-sans-300-italic-webfont.eot
new file mode 100644
index 00000000..33fb9a26
Binary files /dev/null and b/nc_assets/fonts/museo-sans-300-italic-webfont.eot differ
diff --git a/nc_assets/fonts/museo-sans-300-italic-webfont.svg b/nc_assets/fonts/museo-sans-300-italic-webfont.svg
new file mode 100644
index 00000000..01ca52cd
--- /dev/null
+++ b/nc_assets/fonts/museo-sans-300-italic-webfont.svg
@@ -0,0 +1,633 @@
+
+
diff --git a/nc_assets/fonts/museo-sans-300-italic-webfont.ttf b/nc_assets/fonts/museo-sans-300-italic-webfont.ttf
new file mode 100644
index 00000000..e1ae021f
Binary files /dev/null and b/nc_assets/fonts/museo-sans-300-italic-webfont.ttf differ
diff --git a/nc_assets/fonts/museo-sans-300-italic-webfont.woff b/nc_assets/fonts/museo-sans-300-italic-webfont.woff
new file mode 100644
index 00000000..24ee07cb
Binary files /dev/null and b/nc_assets/fonts/museo-sans-300-italic-webfont.woff differ
diff --git a/nc_assets/fonts/museo-sans-300-webfont.eot b/nc_assets/fonts/museo-sans-300-webfont.eot
new file mode 100644
index 00000000..d71eac11
Binary files /dev/null and b/nc_assets/fonts/museo-sans-300-webfont.eot differ
diff --git a/nc_assets/fonts/museo-sans-300-webfont.svg b/nc_assets/fonts/museo-sans-300-webfont.svg
new file mode 100644
index 00000000..852e9d58
--- /dev/null
+++ b/nc_assets/fonts/museo-sans-300-webfont.svg
@@ -0,0 +1,593 @@
+
+
diff --git a/nc_assets/fonts/museo-sans-300-webfont.ttf b/nc_assets/fonts/museo-sans-300-webfont.ttf
new file mode 100644
index 00000000..297056af
Binary files /dev/null and b/nc_assets/fonts/museo-sans-300-webfont.ttf differ
diff --git a/nc_assets/fonts/museo-sans-300-webfont.woff b/nc_assets/fonts/museo-sans-300-webfont.woff
new file mode 100644
index 00000000..871f3cef
Binary files /dev/null and b/nc_assets/fonts/museo-sans-300-webfont.woff differ
diff --git a/nc_assets/fonts/museo-sans-500-italic-webfont.eot b/nc_assets/fonts/museo-sans-500-italic-webfont.eot
new file mode 100644
index 00000000..1954a28e
Binary files /dev/null and b/nc_assets/fonts/museo-sans-500-italic-webfont.eot differ
diff --git a/nc_assets/fonts/museo-sans-500-italic-webfont.svg b/nc_assets/fonts/museo-sans-500-italic-webfont.svg
new file mode 100644
index 00000000..8524b6cc
--- /dev/null
+++ b/nc_assets/fonts/museo-sans-500-italic-webfont.svg
@@ -0,0 +1,636 @@
+
+
diff --git a/nc_assets/fonts/museo-sans-500-italic-webfont.ttf b/nc_assets/fonts/museo-sans-500-italic-webfont.ttf
new file mode 100644
index 00000000..4842945d
Binary files /dev/null and b/nc_assets/fonts/museo-sans-500-italic-webfont.ttf differ
diff --git a/nc_assets/fonts/museo-sans-500-italic-webfont.woff b/nc_assets/fonts/museo-sans-500-italic-webfont.woff
new file mode 100644
index 00000000..e51b06a3
Binary files /dev/null and b/nc_assets/fonts/museo-sans-500-italic-webfont.woff differ
diff --git a/nc_assets/fonts/museo-sans-500-webfont.eot b/nc_assets/fonts/museo-sans-500-webfont.eot
new file mode 100644
index 00000000..a79b32c6
Binary files /dev/null and b/nc_assets/fonts/museo-sans-500-webfont.eot differ
diff --git a/nc_assets/fonts/museo-sans-500-webfont.svg b/nc_assets/fonts/museo-sans-500-webfont.svg
new file mode 100644
index 00000000..52369ede
--- /dev/null
+++ b/nc_assets/fonts/museo-sans-500-webfont.svg
@@ -0,0 +1,596 @@
+
+
diff --git a/nc_assets/fonts/museo-sans-500-webfont.ttf b/nc_assets/fonts/museo-sans-500-webfont.ttf
new file mode 100644
index 00000000..f54c54e0
Binary files /dev/null and b/nc_assets/fonts/museo-sans-500-webfont.ttf differ
diff --git a/nc_assets/fonts/museo-sans-500-webfont.woff b/nc_assets/fonts/museo-sans-500-webfont.woff
new file mode 100644
index 00000000..a225179e
Binary files /dev/null and b/nc_assets/fonts/museo-sans-500-webfont.woff differ
diff --git a/nc_assets/fonts/museo-sans-700-italic-webfont.eot b/nc_assets/fonts/museo-sans-700-italic-webfont.eot
new file mode 100644
index 00000000..15e3abfa
Binary files /dev/null and b/nc_assets/fonts/museo-sans-700-italic-webfont.eot differ
diff --git a/nc_assets/fonts/museo-sans-700-italic-webfont.svg b/nc_assets/fonts/museo-sans-700-italic-webfont.svg
new file mode 100644
index 00000000..0b053c78
--- /dev/null
+++ b/nc_assets/fonts/museo-sans-700-italic-webfont.svg
@@ -0,0 +1,640 @@
+
+
diff --git a/nc_assets/fonts/museo-sans-700-italic-webfont.ttf b/nc_assets/fonts/museo-sans-700-italic-webfont.ttf
new file mode 100644
index 00000000..b84fd57f
Binary files /dev/null and b/nc_assets/fonts/museo-sans-700-italic-webfont.ttf differ
diff --git a/nc_assets/fonts/museo-sans-700-italic-webfont.woff b/nc_assets/fonts/museo-sans-700-italic-webfont.woff
new file mode 100644
index 00000000..b53e5a11
Binary files /dev/null and b/nc_assets/fonts/museo-sans-700-italic-webfont.woff differ
diff --git a/nc_assets/fonts/museo-sans-700-webfont.eot b/nc_assets/fonts/museo-sans-700-webfont.eot
new file mode 100644
index 00000000..97f5347e
Binary files /dev/null and b/nc_assets/fonts/museo-sans-700-webfont.eot differ
diff --git a/nc_assets/fonts/museo-sans-700-webfont.svg b/nc_assets/fonts/museo-sans-700-webfont.svg
new file mode 100644
index 00000000..51443581
--- /dev/null
+++ b/nc_assets/fonts/museo-sans-700-webfont.svg
@@ -0,0 +1,602 @@
+
+
diff --git a/nc_assets/fonts/museo-sans-700-webfont.ttf b/nc_assets/fonts/museo-sans-700-webfont.ttf
new file mode 100644
index 00000000..d503e932
Binary files /dev/null and b/nc_assets/fonts/museo-sans-700-webfont.ttf differ
diff --git a/nc_assets/fonts/museo-sans-700-webfont.woff b/nc_assets/fonts/museo-sans-700-webfont.woff
new file mode 100644
index 00000000..e9222d60
Binary files /dev/null and b/nc_assets/fonts/museo-sans-700-webfont.woff differ
diff --git a/nc_assets/img/anon.png b/nc_assets/img/anon.png
new file mode 100644
index 00000000..9da694e0
Binary files /dev/null and b/nc_assets/img/anon.png differ
diff --git a/nc_assets/img/featured/600/ready-to-go.png b/nc_assets/img/featured/600/ready-to-go.png
new file mode 100644
index 00000000..9bfa3631
Binary files /dev/null and b/nc_assets/img/featured/600/ready-to-go.png differ
diff --git a/nc_assets/img/icons/checkmark-hd.png b/nc_assets/img/icons/checkmark-hd.png
new file mode 100644
index 00000000..d057f89f
Binary files /dev/null and b/nc_assets/img/icons/checkmark-hd.png differ
diff --git a/nc_assets/img/icons/icon-info-hd.png b/nc_assets/img/icons/icon-info-hd.png
new file mode 100644
index 00000000..9967dc05
Binary files /dev/null and b/nc_assets/img/icons/icon-info-hd.png differ
diff --git a/nc_assets/img/logos/namecheap-hd.png b/nc_assets/img/logos/namecheap-hd.png
new file mode 100644
index 00000000..4b5a942e
Binary files /dev/null and b/nc_assets/img/logos/namecheap-hd.png differ
diff --git a/nc_assets/img/nc-icon/favicon.ico b/nc_assets/img/nc-icon/favicon.ico
new file mode 100644
index 00000000..22225e1a
Binary files /dev/null and b/nc_assets/img/nc-icon/favicon.ico differ
diff --git a/nc_assets/img/nc-icon/namecheap-icon-114x114.png b/nc_assets/img/nc-icon/namecheap-icon-114x114.png
new file mode 100644
index 00000000..134f2ec3
Binary files /dev/null and b/nc_assets/img/nc-icon/namecheap-icon-114x114.png differ
diff --git a/nc_assets/img/nc-icon/namecheap-icon-120x120.png b/nc_assets/img/nc-icon/namecheap-icon-120x120.png
new file mode 100644
index 00000000..2981467f
Binary files /dev/null and b/nc_assets/img/nc-icon/namecheap-icon-120x120.png differ
diff --git a/nc_assets/img/nc-icon/namecheap-icon-144x144.png b/nc_assets/img/nc-icon/namecheap-icon-144x144.png
new file mode 100644
index 00000000..9b157ba2
Binary files /dev/null and b/nc_assets/img/nc-icon/namecheap-icon-144x144.png differ
diff --git a/nc_assets/img/nc-icon/namecheap-icon-152x152.png b/nc_assets/img/nc-icon/namecheap-icon-152x152.png
new file mode 100644
index 00000000..8c82d1db
Binary files /dev/null and b/nc_assets/img/nc-icon/namecheap-icon-152x152.png differ
diff --git a/nc_assets/img/nc-icon/namecheap-icon-57x57.png b/nc_assets/img/nc-icon/namecheap-icon-57x57.png
new file mode 100644
index 00000000..6b4822fb
Binary files /dev/null and b/nc_assets/img/nc-icon/namecheap-icon-57x57.png differ
diff --git a/nc_assets/img/nc-icon/namecheap-icon-72x72.png b/nc_assets/img/nc-icon/namecheap-icon-72x72.png
new file mode 100644
index 00000000..0b0bc80f
Binary files /dev/null and b/nc_assets/img/nc-icon/namecheap-icon-72x72.png differ
diff --git a/nc_assets/img/nc-icon/namecheap-icon-76x76.png b/nc_assets/img/nc-icon/namecheap-icon-76x76.png
new file mode 100644
index 00000000..829a3587
Binary files /dev/null and b/nc_assets/img/nc-icon/namecheap-icon-76x76.png differ
diff --git a/nc_assets/img/pictograms/150/browser-red.png b/nc_assets/img/pictograms/150/browser-red.png
new file mode 100644
index 00000000..eaca991f
Binary files /dev/null and b/nc_assets/img/pictograms/150/browser-red.png differ
diff --git a/nc_assets/img/pictograms/150/email-red.png b/nc_assets/img/pictograms/150/email-red.png
new file mode 100644
index 00000000..e960e9ce
Binary files /dev/null and b/nc_assets/img/pictograms/150/email-red.png differ
diff --git a/nc_assets/img/pictograms/150/news-red.png b/nc_assets/img/pictograms/150/news-red.png
new file mode 100644
index 00000000..6083f97b
Binary files /dev/null and b/nc_assets/img/pictograms/150/news-red.png differ
diff --git a/nc_assets/img/pictograms/150/server-red.png b/nc_assets/img/pictograms/150/server-red.png
new file mode 100644
index 00000000..727cdd36
Binary files /dev/null and b/nc_assets/img/pictograms/150/server-red.png differ
diff --git a/nc_assets/img/pictograms/150/support-red.png b/nc_assets/img/pictograms/150/support-red.png
new file mode 100644
index 00000000..9bce2c05
Binary files /dev/null and b/nc_assets/img/pictograms/150/support-red.png differ
diff --git a/nc_assets/img/pictograms/150/tools-red.png b/nc_assets/img/pictograms/150/tools-red.png
new file mode 100644
index 00000000..409cd150
Binary files /dev/null and b/nc_assets/img/pictograms/150/tools-red.png differ
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..82b520d5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,79 @@
+// target the elements in the DOM used in the project
+
+/**
+ * svg for the key and keyhole
+ * div nesting the ghost
+ * heading and paragraph
+ */
+const key = document.querySelector(".key");
+const keyhole = document.querySelector(".keyhole");
+const ghost = document.querySelector(".ghost");
+
+const heading = document.querySelector("h1");
+const paragraph = document.querySelector("p");
+
+
+// for the length of the timout, consider the --animation-duration custom property and add a small delay
+// retrieve properties on the root element
+const root = document.querySelector(":root");
+const rootStyles = getComputedStyle(root);
+// retrieve the animation-duration custom property
+// ! this is specified as "40s", in seconds, so parse the number and includ it in milliseconds
+const animationDuration = parseInt(rootStyles.getPropertyValue("--animation-duration"))*1000;
+let keyTimer = animationDuration*9/8;
+
+
+// retrieve the dimensions of the key (to have the key exactly where the cursor would lie)
+const keyBox = key.getBoundingClientRect();
+// console.log(keyBox);
+
+
+// KEY & KEYHOLE ANIMATION
+// include a timeout with the specified time frame
+const timeoutID = setTimeout(() => {
+ // after the specified time, change the cursor as to seemingly grab the key
+ key.parentElement.parentElement.style.cursor = "grab";
+
+ // introduce the key and keyhole svg elements by triggering the paused-by-default animation
+ key.style.animationPlayState = "running";
+ keyhole.style.animationPlayState = "running";
+
+ // ! pointer-events set to none on the key to allow for a mouseover event on the keyhole
+ // the key is indeed used in stead of the normal cursor and would overlap on top of everything
+ key.style.pointerEvents = "none";
+
+ // when the cursor hovers anywhere in the window, call a function to update the position of the key and have it match the cursor
+ window.addEventListener("mousemove", updateKeyPosition);
+
+ // when the cursor hovers on the keyhole, call a function to grant access and remove present listeners
+ keyhole.addEventListener("mouseover", grantAccess);
+
+ clearTimeout(timeoutID);
+}, keyTimer);
+
+
+// define the function which updates the position of the absolute-positioned key according to the mouse coordinates (and the keys own dimensions)
+const updateKeyPosition = (e) => {
+ let x = e.clientX;
+ let y = e.clientY;
+ key.style.left = x - keyBox.width/1.5;
+ key.style.top = y - keyBox.height/2;
+};
+
+// define the function which notifies the user of the grant access
+const grantAccess = () => {
+ // restore the cursor
+ key.parentElement.parentElement.style.cursor = "default";
+
+ // change the text of the heading and paragraph elements
+ heading.textContent = '🎉 yay 🎉';
+ paragraph.textContent = 'access granted';
+
+ // remove the svg elements for the key and keywhole from the flow of the document
+ keyhole.style.display = "none";
+ key.style.display = "none";
+
+ // remove the event listeners, most notably the one on the window
+ window.removeEventListener("mousemove", updateKeyPosition);
+ keyhole.removeEventListener("mouseover", grantAccess);
+};
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..018c7208
--- /dev/null
+++ b/style.css
@@ -0,0 +1,169 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans|Nova+Mono');
+:root {
+ --font-header: 'Nova Mono', monospace;
+ --font-text: 'Open Sans', sans-serif;
+ --color-theme: #F1EEDB;
+ --color-bg: #282B24;
+
+ --animation-sentence: 'You know you\'re supposed to leave, right?';
+ --animation-duration: 40s;
+}
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+body {
+ width: 100%;
+ font-family: var(--font-text);
+ color: var(--color-theme);
+ background: var(--color-bg);
+ overflow: hidden;
+}
+.container {
+ text-align: center;
+ margin: 1rem 0.5rem 0;
+}
+.container h1 {
+ font-family: var(--font-header);
+ font-size: calc(4rem + 2vw);
+ text-transform: uppercase;
+}
+.container p {
+ text-transform: uppercase;
+ letter-spacing: 0.2rem;
+ font-size: 2rem;
+ margin: 1.5rem 0 3rem;
+}
+svg.keyhole {
+ height: 82px;
+ width: 82px;
+ opacity: 0;
+ visibility: hidden;
+ /* define an animation for the keyhole, to introduce it
+ paused by default, run with a timeout in JavaScript
+ */
+ animation: showKey 0.5s 0.5s paused ease-out forwards;
+}
+svg.key {
+ height: 164px;
+ width: 164px;
+ position: absolute;
+ opacity: 0;
+ visibility: hidden;
+ /* define an animation for the keyhole, to introduce it
+ paused by default, run with a timeout in JavaScript
+ */
+ animation: showKey 0.5s 0.5s paused ease-out forwards;
+}
+.ghost {
+ /* border: 1px solid tomato; */
+ position: absolute;
+ bottom: 5px;
+ left: calc(50% - 100px);
+ width: 200px;
+ height: 200px;
+ /* have the ghost move to the right and to the left of the screen, turning to its central position and repeating the animation twice */
+ animation: hoverGhost calc(var(--animation-duration)/2) ease-in-out 2;
+
+}
+/* introduce text through a pseudo element, connected to the animated div */
+.ghost:before {
+ content: var(--animation-sentence);
+ color: var(--color-theme);
+ border-radius: 50%;
+ position: absolute;
+ bottom: 100%;
+ text-align: center;
+ line-height: 2;
+ padding: 1rem;
+ visibility: hidden;
+ opacity: 0;
+ /* have each string of text introduced as the ghost returns from the right edge of the screen, and for the length of time it takes to cover the central portion (a fourth, which becomes an eight as the animation length is half the total duration) */
+ /* the delay for an hypothetical duration of 40s is 7.5s for the first, 27.5s for the second and finally 40s for the last
+ in fractions and with a bit of math it boils down to 3/16, 27/40 and 1
+ // ! remember to include a slight delay in the animation of the key and keyhole
+ */
+ animation:
+ showText calc(var(--animation-duration)/8) calc(var(--animation-duration)*3/16) ease-out forwards,
+ showNewText calc(var(--animation-duration)/8) calc(var(--animation-duration)*27/40) ease-out forwards,
+ showFinalText calc(var(--animation-duration)/8) var(--animation-duration) ease-out forwards;
+
+}
+
+/* define the keyframe animations
+- hoverghost to have the ghost move right, left and then back to its default position
+- showKey to introduce into view the key (and keyhole) svg
+- showText, showNewText, showFinalText to show the different strings (the implementation is quite quirky and primed for optimization)
+ */
+@keyframes hoverGhost {
+ 25% {
+ transform: translateX(20vw);
+ }
+ 75% {
+ transform: translateX(-20vw);
+ }
+}
+
+@keyframes showKey {
+ to {
+ opacity: 1;
+ visibility: visible;
+ }
+}
+
+
+/* alter the text changing the value of the custom property, weary of changing its value when the pseudo element is hidden and changing its value in the last keyframe (as the animation gives this value as per the "forwards" value of the fill-mode property) */
+@keyframes showText {
+ 2% {
+ opacity: 1;
+ visibility: visible;
+ }
+ 98% {
+
+ opacity: 1;
+ visibility: visible;
+ }
+ 99% {
+ --animation-sentence: 'You know you\'re supposed to leave, right?';
+ opacity: 0;
+ visibility: hidden;
+ }
+ 100% {
+ --animation-sentence: 'So much to do, so little time...';
+ }
+}
+@keyframes showNewText {
+ 2% {
+ --animation-sentence: 'So much to do, so little time...';
+ opacity: 1;
+ visibility: visible;
+ }
+ 98% {
+
+ opacity: 1;
+ visibility: visible;
+ }
+ 99% {
+ --animation-sentence: 'So much to do, so little time...';
+ opacity: 0;
+ visibility: hidden;
+ }
+ 100% {
+ --animation-sentence: 'Okay, you seem to care about this. Here\'s a key just for you';
+ }
+}
+@keyframes showFinalText {
+ 2% {
+ opacity: 1;
+ visibility: visible;
+ }
+ 98% {
+ opacity: 1;
+ visibility: visible;
+ }
+ 100% {
+ opacity: 0;
+ visibility: hidden;
+ }
+}
\ No newline at end of file