From 8eab00d4c27dc42c6896709a3949bee1e6f7c1b5 Mon Sep 17 00:00:00 2001 From: crisner Date: Sun, 25 Mar 2018 19:57:32 +0530 Subject: [PATCH 1/2] Fix - Combine stylesheets, Update custom stylesheet link --- assets/css/main.css | 254 ++++++++++++++++++++++++++++++++++++++++++++ books.html | 6 +- index.html | 3 +- quotes.html | 6 +- 4 files changed, 262 insertions(+), 7 deletions(-) create mode 100644 assets/css/main.css diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..a1c2e29 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,254 @@ +/* Global */ +body { + font-family: 'Yanone Kaffeesatz', sans-serif; + background-image: url('../images/back.png'); +} + +/* Header */ +.navbar { + top: 0; + opacity: 100%; + -webkit-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; + padding: 0.2rem 1rem !important; +} +.navbar-brand { + font-family: 'Pacifico', 'cursive'; + font-size: 1.3rem; +} +a.nav-link { + font-size: 20px; +} +.hide-nav { + top: -54px; + opacity: 0; +} + +/* Hero Banner */ +.banner { + text-align: center; + position: relative; +} + +video { + width: 100%; + right: 0; + left: 0; + z-index: -100; + position: relative; + display: block; +} + +div.centered { + position: absolute; + top: 50%; + left: 50%; + margin-top: 20px; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + + +h1.mid-poster { + color: antiquewhite; + font-family: 'Lobster', 'Anton', + sans-serif; + font-size: 90px; +} + +/* Main content */ +h1.main-heading { + padding-top: 66px; + text-align: center; + font-family: 'Pacifico', cursive; + font-size: 50px; +} + +.section-1 { + margin-top: 15px; +} + +.title { + display: block; + margin: auto; + text-align: center; + font-family: 'Limelight', 'cursive'; +} + +.main-image{ + width: 150px; + border-radius: 50%; + float: left; + margin-right: 2em; + margin-bottom: 0.5em; + shape-outside: circle(); +} + +.section-content p { + display: block; + padding: 10px 15px 0px 15px; + text-align: justify; + font-weight: bold; + letter-spacing: 0.05em; +} + +#intro { + text-align: center; + margin-top: 20px; + font-weight: bold; + font-size: 18px; +} + +/* Books */ +#books { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.book { + width: 30%; + margin: 10px; + text-align: center; + border: 2px solid grey; + -webkit-box-shadow: 9px 11px 29px -9px rgba(0, 0, 0, 0.75); + box-shadow: 9px 11px 29px -9px rgba(0, 0, 0, 0.75); + border-radius: 10px; +} + +.book p { + text-align: justify; + padding: 10px; + font-size: 18px; +} + +.book h2 { + font-family: 'IBM Plex Serif', serif; +} + +div.book img { + width: 200px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +/* Quotes */ +#Quotes { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + +} + +.quote { + width: 30%; + margin: 10px; + text-align: center; + border: 2px solid grey; + -webkit-box-shadow: 9px 11px 29px -9px rgba(0, 0, 0, 0.75); + box-shadow: 9px 11px 29px -9px rgba(0, 0, 0, 0.75); + border-radius: 10px; + height: 30%; + float: left; +} + +.quote p { + text-align: justify; + padding: 10px; + font-size: 18px; +} + +.quote h2 { + font-family: 'IBM Plex Serif', serif; +} + +div.quote img { + width: 200px; + height: 300px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +/* Footer */ +footer { + background-color: rgba(0,0,0,.9); + text-align: center; + padding: 15px; +} + +.footerImage { + padding-right: 4px; + border-radius: 5%; +} + +.social a { + position: relative; + display: inline-block; + color: transparent; + text-align: center; + text-decoration: none; + margin-right: 30px; +} +.social a:before, +.social a:after { + content: ""; + display: block; + position: absolute; + background: transparent; + top: 0; bottom: 0; left: 0; right: 0; + -webkit-transition: .5s all; + transition: .5s all; + color: white; +} +.social a:hover:after { + -webkit-transform: scale(1.5); + transform: scale(1.5); + border: 3px solid white; + border-radius: 7%; +} +.social a:hover:before { + -webkit-transform: scale(1.5); + transform: scale(1.5); + -webkit-transition: .5s all; + transition: .5s all; + opacity: 0; + border: 3px solid white; + border-radius: 7%; +} + +/* Media queries */ +@media screen and (max-width: 560px) { + h1.mid-poster { + font-size: 50px; + } + .book { + display: block; + width: 100%; + margin: 5px 10px 5px 10px; + } + .quote { + display: block; + width: 100%; + margin: 5px 10px 5px 10px; + } +} \ No newline at end of file diff --git a/books.html b/books.html index cb9e5fc..2683f35 100644 --- a/books.html +++ b/books.html @@ -8,8 +8,8 @@ - - + + @@ -41,7 +41,7 @@ -

Books by Stephen Hawking

+

Books by Stephen Hawking

Professor Stephen Hawking had the knack to make books on challenging scientific topics and make the readers fall for his perception about the universe.

diff --git a/index.html b/index.html index dd2a3b4..4642fa5 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,9 @@ - + + diff --git a/quotes.html b/quotes.html index 7ff8c6c..1baf66b 100644 --- a/quotes.html +++ b/quotes.html @@ -8,8 +8,8 @@ - - + + @@ -42,7 +42,7 @@
-

Quotes by Stephen Hawking

+

Quotes by Stephen Hawking

When Stephen Hawking was diagnosed with motor neurone disease at age 21, doctors thought he'd only survive a few more years. But the theoretical physicist defied the odds: Hawking, who passed away yesterday, lived to be 76. Here are 11 quotes from the director of research and founder of the Centre for Theoretical Cosmology at Cambridge and author of A Brief History of Time.

From ca2ffd4bdf43ef6f15c553442a49f65b4e1e644b Mon Sep 17 00:00:00 2001 From: crisner Date: Sun, 25 Mar 2018 22:04:48 +0530 Subject: [PATCH 2/2] Fix- Updated stylesheet to main --- assets/css/main.css | 81 ++++++++++++++++++++++++++++++++++++++++++--- books.html | 2 +- index.html | 3 +- quotes.html | 2 +- 4 files changed, 81 insertions(+), 7 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index a1c2e29..d3e4b44 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,6 +1,15 @@ /* Global */ body { font-family: 'Yanone Kaffeesatz', sans-serif; + background-image: url("../images/milky-way-2695569_1920.jpg"); + background-attachment: fixed; + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +body.bg { + background: none; background-image: url('../images/back.png'); } @@ -65,14 +74,18 @@ h1.main-heading { } .section-1 { - margin-top: 15px; + margin: 15px 10px 5px 10px; + padding: 10px; + border: 3px solid white; + border-radius: 10px; } .title { display: block; margin: auto; text-align: center; - font-family: 'Limelight', 'cursive'; + font-family: 'Limelight', 'cursive'; + color: white; } .main-image{ @@ -88,8 +101,63 @@ h1.main-heading { display: block; padding: 10px 15px 0px 15px; text-align: justify; - font-weight: bold; - letter-spacing: 0.05em; + font-weight: bolder; + letter-spacing: 0.08em; + color: white; + font-size: 1.3em; +} + +/* Stories */ +div.box { + text-align: center; + background: linear-gradient(to bottom right, #669999 0%, #ffffff 100%); + border-radius: 7px; + margin: 24px; + padding: 36px 24px 40px 24px; + box-shadow: 7px 7px 21px -1px rgba(0,0,0,0.75); + position: relative; + -webkit-transition: all 200ms ease-in; + -webkit-transform: scale(1); + -ms-transition: all 200ms ease-in; + -ms-transform: scale(1); + -moz-transition: all 200ms ease-in; + -moz-transform: scale(1); + transition: all 200ms ease-in; + transform: scale(1); + +} +div.box:hover { + z-index: 2; + -webkit-transition: all 200ms ease-in; + -webkit-transform: scale(1.05); + -ms-transition: all 200ms ease-in; + -ms-transform: scale(1.05); + -moz-transition: all 200ms ease-in; + -moz-transform: scale(1.05); + transition: all 200ms ease-in; + transform: scale(1.05); +} + +div.box label p, +.box p { + text-align: justify; + color: black; + font-family: 'Carrois Gothic SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + line-height: 20px; + font-size: 18px; +} +div.boxicon { + width: 100%; +} + +.card-title { + font-family: 'Shrikhand', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',-apple-system, BlinkMacSystemFont, sans-serif; + color: black; + padding-top: 7px; +} + +.card-footer{ + margin-top: 5px; } #intro { @@ -241,11 +309,16 @@ footer { h1.mid-poster { font-size: 50px; } + div.box { + margin: 20px 0px 20px 0px; + } + .book { display: block; width: 100%; margin: 5px 10px 5px 10px; } + .quote { display: block; width: 100%; diff --git a/books.html b/books.html index 5bc3463..13911e6 100644 --- a/books.html +++ b/books.html @@ -12,7 +12,7 @@ - +