Google-Front-End-Weekend-Projects · crisner · Mar 25, 2018 · Mar 25, 2018 · Mar 25, 2018
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -0,0 +1,327 @@
+/* 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');
+}
+
+/* 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: 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';
+    color: white;
+}
+
+.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: 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 {
+    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;
+    }
+    div.box {
+        margin: 20px 0px 20px 0px;
+    }
+
+    .book {
+        display: block;
+        width: 100%;
+        margin: 5px 10px 5px 10px;
+    }
+
+    .quote {
+        display: block;
+        width: 100%;
+        margin: 5px 10px 5px 10px;
+    }
+}
diff --git a/books.html b/books.html
@@ -8,11 +8,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0" />
     <link href="https://fonts.googleapis.com/css?family=Anton|Lobster|Pacifico|Yanone+Kaffeesatz|IBM+Plex+Serif" rel="stylesheet">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="assets/css/custom_style.css">
-    <link rel="stylesheet" href="assets/css/books.css">
+    <!-- Custom stylesheets -->
+    <link rel="stylesheet" type="text/css" href="assets/css/main.css">
 </head>
 
-<body>
+<body class="bg">
     <nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
 
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -41,7 +41,7 @@
             </form>
         </div>
     </nav>
-    <h1>Books by Stephen Hawking</h1>
+    <h1 class="main-heading">Books by Stephen Hawking</h1>
     <p id="intro">
         Professor Stephen Hawking had the knack to make books on challenging scientific topics and make the readers fall for his perception about the universe.
     </p>

diff --git a/index.html b/index.html
@@ -7,8 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0" />
     <link rel="icon" href="https://png.icons8.com/color/48/000000/physics.png" type="image/png" sizes="16x16 32x32">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="./assets/css/custom_style.css">
     <link href="https://fonts.googleapis.com/css?family=Anton|Lobster|Pacifico|Limelight|Oswald|Yanone+Kaffeesatz|Carrois+Gothic+SC|Shrikhand" rel="stylesheet">
+    <!-- Custom stylesheets -->
+    <link rel="stylesheet" type="text/css" href="assets/css/main.css">
 </head>
 
 <body>

diff --git a/quotes.html b/quotes.html
@@ -8,11 +8,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0" />
     <link href="https://fonts.googleapis.com/css?family=Anton|Lobster|Pacifico|Yanone+Kaffeesatz|IBM+Plex+Serif" rel="stylesheet">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="assets/css/custom_style.css">
-    <link rel="stylesheet" href="assets/css/quotes.css">
+    <!-- Custom stylesheets -->
+    <link rel="stylesheet" type="text/css" href="assets/css/main.css">
 </head>
 
-<body>
+<body class="bg">
     <nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
 
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -42,7 +42,7 @@
         </div>
     </nav>
     <div class="container-fluid">
-        <h1>Quotes by Stephen Hawking</h1>
+        <h1 class="main-heading">Quotes by Stephen Hawking</h1>
         <p id="intro">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.</p>
         <div id="Quotes">
             <div class="quote">