From 33411597db4cc8201ceeb98717446c7e19a70c7d Mon Sep 17 00:00:00 2001 From: Igor Date: Sat, 29 Jun 2019 20:53:52 -0300 Subject: [PATCH] Setting up project --- .eslintrc.json | 16 + .gitignore | 6 + .prettierrc | 3 + dist/App.d36a57b6.js | 26014 ++++++++++++++++++++++++++++++++++ dist/App.d36a57b6.js.map | 1 + dist/index.html | 17 + dist/style.e308ff8e.css | 325 + dist/style.e308ff8e.css.map | 1 + dist/style.e308ff8e.js | 396 + dist/style.e308ff8e.js.map | 1 + package.json | 21 + src/App.js | 40 + src/Pet.js | 18 + src/index.html | 17 + src/style.css | 322 + 15 files changed, 27198 insertions(+) create mode 100644 .eslintrc.json create mode 100644 .gitignore create mode 100644 .prettierrc create mode 100644 dist/App.d36a57b6.js create mode 100644 dist/App.d36a57b6.js.map create mode 100644 dist/index.html create mode 100644 dist/style.e308ff8e.css create mode 100644 dist/style.e308ff8e.css.map create mode 100644 dist/style.e308ff8e.js create mode 100644 dist/style.e308ff8e.js.map create mode 100644 package.json create mode 100644 src/App.js create mode 100644 src/Pet.js create mode 100644 src/index.html create mode 100644 src/style.css diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..63443aa --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,16 @@ +{ + "extends": ["eslint:recommended", "prettier", "prettier/react"], + "plugins": [], + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "env": { + "es6": true, + "browser": true, + "node": true + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0eca86f --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +node_modules/ +.cache/ +.dist/ +coverage/ +.vscode/ +.env \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..544138b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/dist/App.d36a57b6.js b/dist/App.d36a57b6.js new file mode 100644 index 0000000..7579c14 --- /dev/null +++ b/dist/App.d36a57b6.js @@ -0,0 +1,26014 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles +parcelRequire = (function (modules, cache, entry, globalName) { + // Save the require from previous bundle to this closure if any + var previousRequire = typeof parcelRequire === 'function' && parcelRequire; + var nodeRequire = typeof require === 'function' && require; + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = typeof parcelRequire === 'function' && parcelRequire; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error('Cannot find module \'' + name + '\''); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = cache[name] = new newRequire.Module(name); + + modules[name][0].call(module.exports, localRequire, module, module.exports, this); + } + + return cache[name].exports; + + function localRequire(x){ + return newRequire(localRequire.resolve(x)); + } + + function resolve(x){ + return modules[name][1][x] || x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [function (require, module) { + module.exports = exports; + }, {}]; + }; + + var error; + for (var i = 0; i < entry.length; i++) { + try { + newRequire(entry[i]); + } catch (e) { + // Save first error but execute all entries + if (!error) { + error = e; + } + } + } + + if (entry.length) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(entry[entry.length - 1]); + + // CommonJS + if (typeof exports === "object" && typeof module !== "undefined") { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === "function" && define.amd) { + define(function () { + return mainExports; + }); + + // + + +
+ not rendered +
+ + + diff --git a/dist/style.e308ff8e.css b/dist/style.e308ff8e.css new file mode 100644 index 0000000..dc9de4f --- /dev/null +++ b/dist/style.e308ff8e.css @@ -0,0 +1,325 @@ +* { + box-sizing: border-box; + color: #333; +} + +body { + background-color: #81a69b; + background-image: url(http://static.frontendmasters.com/resources/2019-05-02-complete-intro-react-v5/image-background.png); + margin: 0; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +.search-params { + width: 1100px; + margin: 0 auto; +} + +.search-params form { + background-color: #d9c148; + width: 360px; + margin: 0px 25px 0px 0px; + padding: 35px 15px 15px 15px; + border-radius: 5px; + float: left; +} + +.search { + background-color: #d9c148; + width: 715px; + padding: 15px; + border-radius: 9px; + float: left; + margin-bottom: 25px; +} + +.details { + width: 1100px; + margin: 0 auto; + background-color: #d9c148; + padding: 15px; + border-radius: 9px; + margin-bottom: 25px; +} + +.pet { + width: 100%; + height: 130px; + display: block; + overflow: hidden; + margin: 25px 0; + border-bottom: #bf9b2f 1px solid; +} + +.pet img { + width: 100px; + min-height: 100px; +} + +.info { + float: left; + width: 80%; + height: 100px; + padding-top: 10px; + flex-direction: column; + justify-content: space-around; +} + +.image-container { + clip-path: circle(50% at 50% 50%); + width: 100px; + height: 100px; + float: left; + margin: 0px 20px 0px 10px; +} + +.pet h1 { + white-space: nowrap; + font-weight: normal; + font-size: 30px; + color: #bf3334; + width: 95%; + overflow: hidden; + margin: 0; + text-overflow: ellipsis; +} + +header > a, +#root > div > h1 { + display: inline-block; + background-image: url(http://static.frontendmasters.com/resources/2019-05-02-complete-intro-react-v5/image-logo.png); + width: 279px; + height: 76px; + overflow: hidden; + text-indent: -9999px; +} + +.pet h2 { + white-space: nowrap; + font-weight: normal; + font-size: 20px; + margin: 0; + text-overflow: ellipsis; +} + +header a { + color: #bf3334; + font-size: 3px; + text-decoration: none; + font-weight: bold; + display: block; + padding-bottom: 10px; +} + +header { + display: flex; + align-content: center; + justify-content: space-between; + width: 1100px; + margin: 0 auto; + padding: 20px 0px 0px 0px; +} + +.details p { + line-height: 1.5; + padding: 0px 15px; +} + +.details h1 { + text-align: center; + color: #bf3334; + font-size: 60px; + margin: 5px 0px; +} + +.details h2 { + text-align: center; + margin: 5px 0px 20px 0px; +} + +.carousel { + display: flex; + justify-content: space-around; + align-items: center; + height: 400px; + margin-top: 8px; +} + +.carousel > img { + max-width: 45%; + max-height: 400px; +} + +.carousel-smaller { + width: 50%; +} + +.carousel-smaller > img { + width: 100px; + height: 100px; + border-radius: 50%; + display: inline-block; + margin: 15px; + cursor: pointer; + border: 2px solid #333; +} + +.carousel-smaller > img.active { + border-color: #ad343e; + opacity: 0.6; +} + +.search-params label { + display: block; + width: 60px; +} + +.search-params input, +.search-params select { + margin-bottom: 30px; + font-size: 18px; + height: 30px; + width: 325px; +} + +.search-params button, +#modal button, +.details button { + background-color: #ad343e; + padding: 5px 25px; + color: white; + font-size: 18px; + border: #333 1px solid; + border-radius: 5px; + display: block; + margin: 0 auto; + cursor: pointer; +} + +.search-params button:hover { + background-color: #122622; +} + +.search-params button:active { + background-color: #5f1d22; +} + +.search-params button:focus { + border: 1px solid cornflowerblue; +} + +#modal { + background-color: rgba(0, 0, 0, 0.9); + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: 10; + display: flex; + justify-content: center; + align-items: center; +} + +#modal:empty { + display: none; +} + +#modal > div { + background-color: white; + max-width: 500px; + padding: 15px; + border-radius: 5px; + text-align: center; +} + +#modal .buttons button { + display: inline-block; + margin-right: 15px; +} + +@media only screen and (max-width: 1129px) { + header { + display: flex; + align-content: center; + justify-content: space-between; + width: 95%; + margin: 0 auto; + padding: 20px 0px 0px 0px; + } + + .search-params { + width: 95%; + } + + .search-params form { + margin-bottom: 20px; + } + + .search { + width: 55%; + padding: 15px; + border-radius: 9px; + float: left; + margin-bottom: 25px; + } + + .details { + width: 95%; + margin: 0 auto; + padding: 15px; + border-radius: 9px; + margin-bottom: 25px; + } + + .info { + width: 65%; + } + + .info h1 { + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .info h2 { + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media only screen and (max-width: 945px) { + .search-params { + width: 95%; + } + + .search { + width: 100%; + } +} + +@media only screen and (max-width: 600px) { + .pet { + height: 200px; + } + + .info { + width: 100%; + text-align: center; + } + + .image-container { + margin: 0 auto; + float: none; + } + .carousel-smaller > img { + width: 60px; + height: 60px; + } +} + + +/*# sourceMappingURL=/style.e308ff8e.css.map */ \ No newline at end of file diff --git a/dist/style.e308ff8e.css.map b/dist/style.e308ff8e.css.map new file mode 100644 index 0000000..f3b2e4a --- /dev/null +++ b/dist/style.e308ff8e.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"style.e308ff8e.css","sourceRoot":"../src","sourcesContent":["* {\n box-sizing: border-box;\n color: #333;\n}\n\nbody {\n background-color: #81a69b;\n background-image: url(http://static.frontendmasters.com/resources/2019-05-02-complete-intro-react-v5/image-background.png);\n margin: 0;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.search-params {\n width: 1100px;\n margin: 0 auto;\n}\n\n.search-params form {\n background-color: #d9c148;\n width: 360px;\n margin: 0px 25px 0px 0px;\n padding: 35px 15px 15px 15px;\n border-radius: 5px;\n float: left;\n}\n\n.search {\n background-color: #d9c148;\n width: 715px;\n padding: 15px;\n border-radius: 9px;\n float: left;\n margin-bottom: 25px;\n}\n\n.details {\n width: 1100px;\n margin: 0 auto;\n background-color: #d9c148;\n padding: 15px;\n border-radius: 9px;\n margin-bottom: 25px;\n}\n\n.pet {\n width: 100%;\n height: 130px;\n display: block;\n overflow: hidden;\n margin: 25px 0;\n border-bottom: #bf9b2f 1px solid;\n}\n\n.pet img {\n width: 100px;\n min-height: 100px;\n}\n\n.info {\n float: left;\n width: 80%;\n height: 100px;\n padding-top: 10px;\n flex-direction: column;\n justify-content: space-around;\n}\n\n.image-container {\n clip-path: circle(50% at 50% 50%);\n width: 100px;\n height: 100px;\n float: left;\n margin: 0px 20px 0px 10px;\n}\n\n.pet h1 {\n white-space: nowrap;\n font-weight: normal;\n font-size: 30px;\n color: #bf3334;\n width: 95%;\n overflow: hidden;\n margin: 0;\n text-overflow: ellipsis;\n}\n\nheader > a,\n#root > div > h1 {\n display: inline-block;\n background-image: url(http://static.frontendmasters.com/resources/2019-05-02-complete-intro-react-v5/image-logo.png);\n width: 279px;\n height: 76px;\n overflow: hidden;\n text-indent: -9999px;\n}\n\n.pet h2 {\n white-space: nowrap;\n font-weight: normal;\n font-size: 20px;\n margin: 0;\n text-overflow: ellipsis;\n}\n\nheader a {\n color: #bf3334;\n font-size: 3px;\n text-decoration: none;\n font-weight: bold;\n display: block;\n padding-bottom: 10px;\n}\n\nheader {\n display: flex;\n align-content: center;\n justify-content: space-between;\n width: 1100px;\n margin: 0 auto;\n padding: 20px 0px 0px 0px;\n}\n\n.details p {\n line-height: 1.5;\n padding: 0px 15px;\n}\n\n.details h1 {\n text-align: center;\n color: #bf3334;\n font-size: 60px;\n margin: 5px 0px;\n}\n\n.details h2 {\n text-align: center;\n margin: 5px 0px 20px 0px;\n}\n\n.carousel {\n display: flex;\n justify-content: space-around;\n align-items: center;\n height: 400px;\n margin-top: 8px;\n}\n\n.carousel > img {\n max-width: 45%;\n max-height: 400px;\n}\n\n.carousel-smaller {\n width: 50%;\n}\n\n.carousel-smaller > img {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n display: inline-block;\n margin: 15px;\n cursor: pointer;\n border: 2px solid #333;\n}\n\n.carousel-smaller > img.active {\n border-color: #ad343e;\n opacity: 0.6;\n}\n\n.search-params label {\n display: block;\n width: 60px;\n}\n\n.search-params input,\n.search-params select {\n margin-bottom: 30px;\n font-size: 18px;\n height: 30px;\n width: 325px;\n}\n\n.search-params button,\n#modal button,\n.details button {\n background-color: #ad343e;\n padding: 5px 25px;\n color: white;\n font-size: 18px;\n border: #333 1px solid;\n border-radius: 5px;\n display: block;\n margin: 0 auto;\n cursor: pointer;\n}\n\n.search-params button:hover {\n background-color: #122622;\n}\n\n.search-params button:active {\n background-color: #5f1d22;\n}\n\n.search-params button:focus {\n border: 1px solid cornflowerblue;\n}\n\n#modal {\n background-color: rgba(0, 0, 0, 0.9);\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n z-index: 10;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n#modal:empty {\n display: none;\n}\n\n#modal > div {\n background-color: white;\n max-width: 500px;\n padding: 15px;\n border-radius: 5px;\n text-align: center;\n}\n\n#modal .buttons button {\n display: inline-block;\n margin-right: 15px;\n}\n\n@media only screen and (max-width: 1129px) {\n header {\n display: flex;\n align-content: center;\n justify-content: space-between;\n width: 95%;\n margin: 0 auto;\n padding: 20px 0px 0px 0px;\n }\n\n .search-params {\n width: 95%;\n }\n\n .search-params form {\n margin-bottom: 20px;\n }\n\n .search {\n width: 55%;\n padding: 15px;\n border-radius: 9px;\n float: left;\n margin-bottom: 25px;\n }\n\n .details {\n width: 95%;\n margin: 0 auto;\n padding: 15px;\n border-radius: 9px;\n margin-bottom: 25px;\n }\n\n .info {\n width: 65%;\n }\n\n .info h1 {\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .info h2 {\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n@media only screen and (max-width: 945px) {\n .search-params {\n width: 95%;\n }\n\n .search {\n width: 100%;\n }\n}\n\n@media only screen and (max-width: 600px) {\n .pet {\n height: 200px;\n }\n\n .info {\n width: 100%;\n text-align: center;\n }\n\n .image-container {\n margin: 0 auto;\n float: none;\n }\n .carousel-smaller > img {\n width: 60px;\n height: 60px;\n }\n}\n"]} \ No newline at end of file diff --git a/dist/style.e308ff8e.js b/dist/style.e308ff8e.js new file mode 100644 index 0000000..1400897 --- /dev/null +++ b/dist/style.e308ff8e.js @@ -0,0 +1,396 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles +parcelRequire = (function (modules, cache, entry, globalName) { + // Save the require from previous bundle to this closure if any + var previousRequire = typeof parcelRequire === 'function' && parcelRequire; + var nodeRequire = typeof require === 'function' && require; + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = typeof parcelRequire === 'function' && parcelRequire; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error('Cannot find module \'' + name + '\''); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = cache[name] = new newRequire.Module(name); + + modules[name][0].call(module.exports, localRequire, module, module.exports, this); + } + + return cache[name].exports; + + function localRequire(x){ + return newRequire(localRequire.resolve(x)); + } + + function resolve(x){ + return modules[name][1][x] || x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [function (require, module) { + module.exports = exports; + }, {}]; + }; + + var error; + for (var i = 0; i < entry.length; i++) { + try { + newRequire(entry[i]); + } catch (e) { + // Save first error but execute all entries + if (!error) { + error = e; + } + } + } + + if (entry.length) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(entry[entry.length - 1]); + + // CommonJS + if (typeof exports === "object" && typeof module !== "undefined") { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === "function" && define.amd) { + define(function () { + return mainExports; + }); + + // + + diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..6883887 --- /dev/null +++ b/src/style.css @@ -0,0 +1,322 @@ +* { + box-sizing: border-box; + color: #333; +} + +body { + background-color: #81a69b; + background-image: url(http://static.frontendmasters.com/resources/2019-05-02-complete-intro-react-v5/image-background.png); + margin: 0; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +.search-params { + width: 1100px; + margin: 0 auto; +} + +.search-params form { + background-color: #d9c148; + width: 360px; + margin: 0px 25px 0px 0px; + padding: 35px 15px 15px 15px; + border-radius: 5px; + float: left; +} + +.search { + background-color: #d9c148; + width: 715px; + padding: 15px; + border-radius: 9px; + float: left; + margin-bottom: 25px; +} + +.details { + width: 1100px; + margin: 0 auto; + background-color: #d9c148; + padding: 15px; + border-radius: 9px; + margin-bottom: 25px; +} + +.pet { + width: 100%; + height: 130px; + display: block; + overflow: hidden; + margin: 25px 0; + border-bottom: #bf9b2f 1px solid; +} + +.pet img { + width: 100px; + min-height: 100px; +} + +.info { + float: left; + width: 80%; + height: 100px; + padding-top: 10px; + flex-direction: column; + justify-content: space-around; +} + +.image-container { + clip-path: circle(50% at 50% 50%); + width: 100px; + height: 100px; + float: left; + margin: 0px 20px 0px 10px; +} + +.pet h1 { + white-space: nowrap; + font-weight: normal; + font-size: 30px; + color: #bf3334; + width: 95%; + overflow: hidden; + margin: 0; + text-overflow: ellipsis; +} + +header > a, +#root > div > h1 { + display: inline-block; + background-image: url(http://static.frontendmasters.com/resources/2019-05-02-complete-intro-react-v5/image-logo.png); + width: 279px; + height: 76px; + overflow: hidden; + text-indent: -9999px; +} + +.pet h2 { + white-space: nowrap; + font-weight: normal; + font-size: 20px; + margin: 0; + text-overflow: ellipsis; +} + +header a { + color: #bf3334; + font-size: 3px; + text-decoration: none; + font-weight: bold; + display: block; + padding-bottom: 10px; +} + +header { + display: flex; + align-content: center; + justify-content: space-between; + width: 1100px; + margin: 0 auto; + padding: 20px 0px 0px 0px; +} + +.details p { + line-height: 1.5; + padding: 0px 15px; +} + +.details h1 { + text-align: center; + color: #bf3334; + font-size: 60px; + margin: 5px 0px; +} + +.details h2 { + text-align: center; + margin: 5px 0px 20px 0px; +} + +.carousel { + display: flex; + justify-content: space-around; + align-items: center; + height: 400px; + margin-top: 8px; +} + +.carousel > img { + max-width: 45%; + max-height: 400px; +} + +.carousel-smaller { + width: 50%; +} + +.carousel-smaller > img { + width: 100px; + height: 100px; + border-radius: 50%; + display: inline-block; + margin: 15px; + cursor: pointer; + border: 2px solid #333; +} + +.carousel-smaller > img.active { + border-color: #ad343e; + opacity: 0.6; +} + +.search-params label { + display: block; + width: 60px; +} + +.search-params input, +.search-params select { + margin-bottom: 30px; + font-size: 18px; + height: 30px; + width: 325px; +} + +.search-params button, +#modal button, +.details button { + background-color: #ad343e; + padding: 5px 25px; + color: white; + font-size: 18px; + border: #333 1px solid; + border-radius: 5px; + display: block; + margin: 0 auto; + cursor: pointer; +} + +.search-params button:hover { + background-color: #122622; +} + +.search-params button:active { + background-color: #5f1d22; +} + +.search-params button:focus { + border: 1px solid cornflowerblue; +} + +#modal { + background-color: rgba(0, 0, 0, 0.9); + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: 10; + display: flex; + justify-content: center; + align-items: center; +} + +#modal:empty { + display: none; +} + +#modal > div { + background-color: white; + max-width: 500px; + padding: 15px; + border-radius: 5px; + text-align: center; +} + +#modal .buttons button { + display: inline-block; + margin-right: 15px; +} + +@media only screen and (max-width: 1129px) { + header { + display: flex; + align-content: center; + justify-content: space-between; + width: 95%; + margin: 0 auto; + padding: 20px 0px 0px 0px; + } + + .search-params { + width: 95%; + } + + .search-params form { + margin-bottom: 20px; + } + + .search { + width: 55%; + padding: 15px; + border-radius: 9px; + float: left; + margin-bottom: 25px; + } + + .details { + width: 95%; + margin: 0 auto; + padding: 15px; + border-radius: 9px; + margin-bottom: 25px; + } + + .info { + width: 65%; + } + + .info h1 { + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .info h2 { + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media only screen and (max-width: 945px) { + .search-params { + width: 95%; + } + + .search { + width: 100%; + } +} + +@media only screen and (max-width: 600px) { + .pet { + height: 200px; + } + + .info { + width: 100%; + text-align: center; + } + + .image-container { + margin: 0 auto; + float: none; + } + .carousel-smaller > img { + width: 60px; + height: 60px; + } +}