diff --git a/Dependencies/CSS/cover.css b/Dependencies/CSS/cover.css index 8a89cde..0d6ca21 100644 --- a/Dependencies/CSS/cover.css +++ b/Dependencies/CSS/cover.css @@ -2,21 +2,26 @@ * Globals */ + /* Links */ + a, a:focus, a:hover { - color: #fff; + color: #fff; } + /* Custom default button */ + .btn-secondary, .btn-secondary:hover, .btn-secondary:focus { - color: #333; - text-shadow: none; /* Prevent inheritance from `body` */ - background-color: #fff; - border: .05rem solid #fff; + color: #333; + text-shadow: none; + /* Prevent inheritance from `body` */ + background-color: #fff; + border: .05rem solid #fff; } @@ -26,36 +31,48 @@ a:hover { html, body { - height: 100%; - background-color: #333; + height: 100%; + background-image: url("https://my.mixtape.moe/zobucp.jpg"); + background-position: center; + background-attachment: fixed; + background-size: cover; + } + body { - color: #fff; - text-align: center; - text-shadow: 0 .05rem .1rem rgba(0,0,0,.5); + color: #fff; + text-align: center; + text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); } + /* Extra markup and styles for table-esque vertical and horizontal centering */ + .site-wrapper { - display: table; - width: 100%; - height: 100%; /* For at least Firefox */ - min-height: 100%; - -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5); - box-shadow: inset 0 0 5rem rgba(0,0,0,.5); -} -.site-wrapper-inner { - display: table-cell; - vertical-align: top; -} -.cover-container { - margin-right: auto; - margin-left: auto; + display: table; + width: 100%; + height: 100%; + /* For at least Firefox */ + min-height: 100%; + -webkit-box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); + box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); } +.site-wrapper-inner { + display: table-cell; + vertical-align: top; +} + +.cover-container { + margin-right: auto; + margin-left: auto; +} + + /* Padding for spacing */ + .inner { - padding: 2rem; + padding: 2rem; } @@ -64,42 +81,42 @@ body { */ .masthead { - margin-bottom: 2rem; + margin-bottom: 2rem; } .masthead-brand { - margin-bottom: 0; + margin-bottom: 0; } .nav-masthead .nav-link { - padding: .25rem 0; - font-weight: bold; - color: rgba(255,255,255,.5); - background-color: transparent; - border-bottom: .25rem solid transparent; + padding: .25rem 0; + font-weight: bold; + color: rgba(255, 255, 255, .5); + background-color: transparent; + border-bottom: .25rem solid transparent; } .nav-masthead .nav-link:hover, .nav-masthead .nav-link:focus { - border-bottom-color: rgba(255,255,255,.25); + border-bottom-color: rgba(255, 255, 255, .25); } .nav-masthead .nav-link + .nav-link { - margin-left: 1rem; + margin-left: 1rem; } .nav-masthead .active { - color: #fff; - border-bottom-color: #fff; + color: #fff; + border-bottom-color: #fff; } @media (min-width: 48em) { - .masthead-brand { - float: left; - } - .nav-masthead { - float: right; - } + .masthead-brand { + float: left; + } + .nav-masthead { + float: right; + } } @@ -108,11 +125,12 @@ body { */ .cover { - padding: 0 1.5rem; + padding: 0 1.5rem; } + .cover .btn-lg { - padding: .75rem 1.25rem; - font-weight: bold; + padding: .75rem 1.25rem; + font-weight: bold; } @@ -121,7 +139,7 @@ body { */ .mastfoot { - color: rgba(255,255,255,.5); + color: rgba(255, 255, 255, .5); } @@ -130,31 +148,32 @@ body { */ @media (min-width: 40em) { - /* Pull out the header and footer */ - .masthead { - position: fixed; - top: 0; - } - .mastfoot { - position: fixed; - bottom: 0; - } - /* Start the vertical centering */ - .site-wrapper-inner { - vertical-align: middle; - } - /* Handle the widths */ - .masthead, - .mastfoot, - .cover-container { - width: 100%; /* Must be percentage or pixels for horizontal alignment */ - } + /* Pull out the header and footer */ + .masthead { + position: fixed; + top: 0; + } + .mastfoot { + position: fixed; + bottom: 0; + } + /* Start the vertical centering */ + .site-wrapper-inner { + vertical-align: middle; + } + /* Handle the widths */ + .masthead, + .mastfoot, + .cover-container { + width: 100%; + /* Must be percentage or pixels for horizontal alignment */ + } } @media (min-width: 62em) { - .masthead, - .mastfoot, - .cover-container { - width: 42rem; - } -} + .masthead, + .mastfoot, + .cover-container { + width: 42rem; + } +} \ No newline at end of file diff --git a/Dependencies/credits.txt b/Dependencies/credits.txt new file mode 100644 index 0000000..82d7987 --- /dev/null +++ b/Dependencies/credits.txt @@ -0,0 +1,2 @@ +
Icons made by Madebyoliver from www.flaticon.com is licensed by CC 3.0 BY
+

Cover template for Bootstrap, by @mdo.

\ No newline at end of file diff --git a/Dependencies/icons/favicon.png b/Dependencies/icons/favicon.png new file mode 100644 index 0000000..d3d63eb Binary files /dev/null and b/Dependencies/icons/favicon.png differ diff --git a/index.html b/index.html index da48cc7..cc5d0b5 100644 --- a/index.html +++ b/index.html @@ -1,71 +1,54 @@ - - + + - - - - - Cover Template for Bootstrap - + + + + Digital Photography - - - - - + +
- -
- -
- -
-
-

Cover

- +
+
+
+
+

Photo Atlas

+ +
+
+
+

Digital Photography

+

Harrison's and Rekai's collection of wonderful moments captured with their expertise and eye for detail.

+

Learn more

+
+
+
+

Cover template for Bootstrap, by @mdo.

+
+
-
- -
-

Cover your page.

-

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

-

- Learn more -

-
- -
-
-

Cover template for Bootstrap, by @mdo.

-
-
-
- -
-
- - + - - + + + \ No newline at end of file