diff --git a/box-model1.html b/box-model1.html index 4dc0c72..c1f21f7 100644 --- a/box-model1.html +++ b/box-model1.html @@ -1,57 +1,52 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - - - - - + + + + + Box Model 1 + + + + +

Box Model Visual

+
+
+ Inner div +
+ +
+ Inner div2 +
+
- - - \ No newline at end of file diff --git a/box-model2.html b/box-model2.html index 4dc0c72..832013b 100644 --- a/box-model2.html +++ b/box-model2.html @@ -1,57 +1,52 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - - - - - + + + + + Box Model 2 + + + + +

Box Model Visual

+
+
+ Inner div +
+ +
+ Inner div2 +
+
- - - \ No newline at end of file diff --git a/css/style.css b/css/style.css deleted file mode 100644 index d17d83a..0000000 --- a/css/style.css +++ /dev/null @@ -1,9 +0,0 @@ -body { - background-color: navy; -} - - -object { - height: 100vh; - width: 100vh; -} diff --git a/img/data_storage_2_2.png b/img/data_storage_2_2.png new file mode 100644 index 0000000..757d1dd Binary files /dev/null and b/img/data_storage_2_2.png differ diff --git a/img/desktop_analytics_2.png b/img/desktop_analytics_2.png new file mode 100644 index 0000000..6c794c9 Binary files /dev/null and b/img/desktop_analytics_2.png differ diff --git a/img/files_2.png b/img/files_2.png new file mode 100644 index 0000000..5f6ad61 Binary files /dev/null and b/img/files_2.png differ diff --git a/img/monitor_coding_2.png b/img/monitor_coding_2.png new file mode 100644 index 0000000..af0c121 Binary files /dev/null and b/img/monitor_coding_2.png differ diff --git a/img/monitor_settings_2.png b/img/monitor_settings_2.png new file mode 100644 index 0000000..cbbc35c Binary files /dev/null and b/img/monitor_settings_2.png differ diff --git a/img/server_2_2.png b/img/server_2_2.png new file mode 100644 index 0000000..872615a Binary files /dev/null and b/img/server_2_2.png differ diff --git a/img/server_3.png b/img/server_3.png new file mode 100644 index 0000000..d002b4a Binary files /dev/null and b/img/server_3.png differ diff --git a/img/server_safe_2.png b/img/server_safe_2.png new file mode 100644 index 0000000..a2d0fae Binary files /dev/null and b/img/server_safe_2.png differ diff --git a/img/undraw.png b/img/undraw.png new file mode 100644 index 0000000..f80668d Binary files /dev/null and b/img/undraw.png differ diff --git a/login-interface.html b/login-interface.html new file mode 100644 index 0000000..561e310 --- /dev/null +++ b/login-interface.html @@ -0,0 +1,57 @@ + + + Layout Master + + + + + + +
+

LOGIN PAGE

+
+ +
+
+ +

User Login

+
+
+ +
+ +
+ +

Forgot Password?

+
+
+ + +
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a150fba --- /dev/null +++ b/style.css @@ -0,0 +1,150 @@ +body { + margin: auto 0; + font-family: Arial; +} + +.zone { + /*padding:30px 50px; + margin:40px 60px;*/ + cursor:pointer; + /*display:inline-block;*/ + color:#FFF; + font-size:2em; + border-radius:4px; + border:1px solid #bbb; + transition: all 0.3s linear; +} + +.zone:hover { + -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; + -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; + -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; + box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; +} + +.box:hover { + -webkit-transform: rotate(-7deg); + -moz-transform: rotate(-7deg); + -o-transform: rotate(-7deg); + transform: rotate(-7deg); +} + +/*NAV*/ +.sticky { + position: fixed; + top: 0; + width: 100%; +} +.main-nav { + display: flex; + list-style: none; + font-size: 0.7em; + margin: 0; +} + +@media only screen and (max-width:600px) { + .main-nav { + font-size: 0.5em; + padding: 0; + } +} + +.push { + margin-left: auto; +} +li { + padding: 20px; +} + +a { + color: #f5f5f6; + text-decoration: none; +} + + +/*COVER*/ +.container { + display: flex; + align-items: center; + justify-content: center; + height: 60vh; +} + +.cover { + width: 30rem; +} + +/*GRID*/ +.grid-wrapper { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); +} + +.box > img { + width: 100%; +} + +.box { + background-color: #444; + padding: 130px; + margin: 20px; +} + +footer { + text-align: center; +} + + +/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/ +/*********************************************************************** + * Green Background + **********************************************************************/ +.green{ + background: #56B870; /* Old browsers */ + background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */ + background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */ +} + +/*********************************************************************** + * Red Background + **********************************************************************/ +.red{ + background: #C655BE; /* Old browsers */ + background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */ + background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */ +} + +/*********************************************************************** + * Yellow Background + **********************************************************************/ +.yellow{ + background: #F3AAAA; /* Old browsers */ + background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */ + background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */ +} + +/*********************************************************************** + * Blue Background + **********************************************************************/ +.blue{ + background: #7abcff; /* Old browsers */ + background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */ + background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */ +}