diff --git a/Daily Journal/app.js b/Daily Journal/app.js new file mode 100644 index 00000000..ddee3f78 --- /dev/null +++ b/Daily Journal/app.js @@ -0,0 +1,80 @@ +//jshint esversion:6 + +const express = require("express"); +const bodyParser = require("body-parser"); +const ejs = require("ejs"); +const mongoose = require('mongoose'); + +const homeStartingContent = "Lacus vel facilisis volutpat est velit egestas dui id ornare. Semper auctor neque vitae tempus quam. Sit amet cursus sit amet dictum sit amet justo. Viverra tellus in hac habitasse. Imperdiet proin fermentum leo vel orci porta. Donec ultrices tincidunt arcu non sodales neque sodales ut. Mattis molestie a iaculis at erat pellentesque adipiscing. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Odio euismod lacinia at quis risus sed vulputate odio ut. Cursus mattis molestie a iaculis at erat pellentesque adipiscing."; +const aboutContent = "Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Non diam phasellus vestibulum lorem sed. Platea dictumst quisque sagittis purus sit. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Mauris in aliquam sem fringilla. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim ut tellus elementum sagittis vitae. Mauris ultrices eros in cursus turpis massa tincidunt dui."; +const contactContent = "Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc sed augue lacus. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Pulvinar elementum integer enim neque. Ultrices gravida dictum fusce ut placerat orci nulla. Mauris in aliquam sem fringilla ut morbi tincidunt. Tortor posuere ac ut consequat semper viverra nam libero."; + +const app = express(); + +app.set('view engine', 'ejs'); + +app.use(bodyParser.urlencoded({extended: true})); +app.use(express.static("public")); + +mongoose.connect("mongodb://localhost:27017/blogDB", {useNewUrlParser: true}); + +const postSchema = { + title: String, + content: String +}; + +const Post = mongoose.model("Post", postSchema); + +app.get("/", function(req, res){ + + Post.find({}, function(err, posts){ + res.render("home", { + startingContent: homeStartingContent, + posts: posts + }); + }); +}); + +app.get("/compose", function(req, res){ + res.render("compose"); +}); + +app.post("/compose", function(req, res){ + const post = new Post({ + title: req.body.postTitle, + content: req.body.postBody + }); + + + post.save(function(err){ + if (!err){ + res.redirect("/"); + } + }); +}); + +app.get("/posts/:postId", function(req, res){ + + const requestedPostId = req.params.postId; + + Post.findOne({_id: requestedPostId}, function(err, post){ + res.render("post", { + title: post.title, + content: post.content + }); + }); + +}); + +app.get("/about", function(req, res){ + res.render("about", {aboutContent: aboutContent}); +}); + +app.get("/contact", function(req, res){ + res.render("contact", {contactContent: contactContent}); +}); + + +app.listen(3000, function() { + console.log("Server started on port 3000"); +}); diff --git a/Daily Journal/package-lock.json b/Daily Journal/package-lock.json new file mode 100644 index 00000000..7fe3e9ca --- /dev/null +++ b/Daily Journal/package-lock.json @@ -0,0 +1,634 @@ +{ + "name": "ejs-challenge", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "accepts": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", + "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", + "requires": { + "mime-types": "~2.1.18", + "negotiator": "0.6.1" + } + }, + "array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" + }, + "async": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz", + "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==", + "requires": { + "lodash": "^4.17.10" + } + }, + "bluebird": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz", + "integrity": "sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA==" + }, + "body-parser": { + "version": "1.18.3", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz", + "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=", + "requires": { + "bytes": "3.0.0", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "~1.1.2", + "http-errors": "~1.6.3", + "iconv-lite": "0.4.23", + "on-finished": "~2.3.0", + "qs": "6.5.2", + "raw-body": "2.3.3", + "type-is": "~1.6.16" + } + }, + "bson": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/bson/-/bson-1.0.9.tgz", + "integrity": "sha512-IQX9/h7WdMBIW/q/++tGd+emQr0XMdeZ6icnT/74Xk9fnabWn+gZgpE+9V+gujL3hhJOoNrnDVY7tWdzc7NUTg==" + }, + "bytes": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", + "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" + }, + "content-disposition": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", + "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" + }, + "content-type": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" + }, + "cookie": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", + "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" + }, + "cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" + }, + "destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" + }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" + }, + "ejs": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz", + "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==" + }, + "encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" + }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + }, + "etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" + }, + "express": { + "version": "4.16.3", + "resolved": "http://registry.npmjs.org/express/-/express-4.16.3.tgz", + "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", + "requires": { + "accepts": "~1.3.5", + "array-flatten": "1.1.1", + "body-parser": "1.18.2", + "content-disposition": "0.5.2", + "content-type": "~1.0.4", + "cookie": "0.3.1", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "~1.1.2", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "1.1.1", + "fresh": "0.5.2", + "merge-descriptors": "1.0.1", + "methods": "~1.1.2", + "on-finished": "~2.3.0", + "parseurl": "~1.3.2", + "path-to-regexp": "0.1.7", + "proxy-addr": "~2.0.3", + "qs": "6.5.1", + "range-parser": "~1.2.0", + "safe-buffer": "5.1.1", + "send": "0.16.2", + "serve-static": "1.13.2", + "setprototypeof": "1.1.0", + "statuses": "~1.4.0", + "type-is": "~1.6.16", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + }, + "dependencies": { + "body-parser": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", + "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", + "requires": { + "bytes": "3.0.0", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "~1.1.1", + "http-errors": "~1.6.2", + "iconv-lite": "0.4.19", + "on-finished": "~2.3.0", + "qs": "6.5.1", + "raw-body": "2.3.2", + "type-is": "~1.6.15" + } + }, + "iconv-lite": { + "version": "0.4.19", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", + "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" + }, + "qs": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", + "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" + }, + "raw-body": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", + "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", + "requires": { + "bytes": "3.0.0", + "http-errors": "1.6.2", + "iconv-lite": "0.4.19", + "unpipe": "1.0.0" + }, + "dependencies": { + "depd": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", + "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" + }, + "http-errors": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", + "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", + "requires": { + "depd": "1.1.1", + "inherits": "2.0.3", + "setprototypeof": "1.0.3", + "statuses": ">= 1.3.1 < 2" + } + }, + "setprototypeof": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", + "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" + } + } + }, + "statuses": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", + "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" + } + } + }, + "finalhandler": { + "version": "1.1.1", + "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", + "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", + "requires": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "~2.3.0", + "parseurl": "~1.3.2", + "statuses": "~1.4.0", + "unpipe": "~1.0.0" + }, + "dependencies": { + "statuses": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", + "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" + } + } + }, + "forwarded": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", + "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" + }, + "fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" + }, + "http-errors": { + "version": "1.6.3", + "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", + "requires": { + "depd": "~1.1.2", + "inherits": "2.0.3", + "setprototypeof": "1.1.0", + "statuses": ">= 1.4.0 < 2" + } + }, + "iconv-lite": { + "version": "0.4.23", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", + "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==", + "requires": { + "safer-buffer": ">= 2.1.2 < 3" + } + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + }, + "ipaddr.js": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz", + "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4=" + }, + "kareem": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.3.0.tgz", + "integrity": "sha512-6hHxsp9e6zQU8nXsP+02HGWXwTkOEw6IROhF2ZA28cYbUk4eJ6QbtZvdqZOdD9YPKghG3apk5eOCvs+tLl3lRg==" + }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + }, + "lodash.get": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", + "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=" + }, + "media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" + }, + "memory-pager": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.1.0.tgz", + "integrity": "sha512-Mf9OHV/Y7h6YWDxTzX/b4ZZ4oh9NSXblQL8dtPCOomOtZciEHxePR78+uHFLLlsk01A6jVHhHsQZZ/WcIPpnzg==", + "optional": true + }, + "merge-descriptors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", + "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" + }, + "methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" + }, + "mime": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", + "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" + }, + "mime-db": { + "version": "1.36.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.36.0.tgz", + "integrity": "sha512-L+xvyD9MkoYMXb1jAmzI/lWYAxAMCPvIBSWur0PZ5nOf5euahRLVqH//FKW9mWp2lkqUgYiXPgkzfMUFi4zVDw==" + }, + "mime-types": { + "version": "2.1.20", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.20.tgz", + "integrity": "sha512-HrkrPaP9vGuWbLK1B1FfgAkbqNjIuy4eHlIYnFi7kamZyLLrGlo2mpcx0bBmNpKqBtYtAfGbodDddIgddSJC2A==", + "requires": { + "mime-db": "~1.36.0" + } + }, + "mongodb": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.1.6.tgz", + "integrity": "sha512-E5QJuXQoMlT7KyCYqNNMfAkhfQD79AT4F8Xd+6x37OX+8BL17GyXyWvfm6wuyx4wnzCCPoCSLeMeUN2S7dU9yw==", + "requires": { + "mongodb-core": "3.1.5", + "safe-buffer": "^5.1.2" + }, + "dependencies": { + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + } + } + }, + "mongodb-core": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-3.1.5.tgz", + "integrity": "sha512-emT/tM4ZBinqd6RZok+EzDdtN4LjYJIckv71qQVOEFmvXgT5cperZegVmTgox/1cx4XQu6LJ5ZuIwipP/eKdQg==", + "requires": { + "bson": "^1.1.0", + "require_optional": "^1.0.1", + "safe-buffer": "^5.1.2", + "saslprep": "^1.0.0" + }, + "dependencies": { + "bson": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.0.tgz", + "integrity": "sha512-9Aeai9TacfNtWXOYarkFJRW2CWo+dRon+fuLZYJmvLV3+MiUp0bEI6IAZfXEIg7/Pl/7IWlLaDnhzTsD81etQA==" + }, + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + } + } + }, + "mongoose": { + "version": "5.3.6", + "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.3.6.tgz", + "integrity": "sha512-EuHmtc7T6dIaHANd/A6J7dSSRhw9LVWdiGcmFYzOCdIYWwbrc1k5klN8U57KKeJUPvfhgVCmm6p5L5VueVpSjw==", + "requires": { + "async": "2.6.1", + "bson": "~1.0.5", + "kareem": "2.3.0", + "lodash.get": "4.4.2", + "mongodb": "3.1.6", + "mongodb-core": "3.1.5", + "mongoose-legacy-pluralize": "1.0.2", + "mpath": "0.5.1", + "mquery": "3.2.0", + "ms": "2.0.0", + "regexp-clone": "0.0.1", + "safe-buffer": "5.1.2", + "sliced": "1.0.1" + }, + "dependencies": { + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + } + } + }, + "mongoose-legacy-pluralize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/mongoose-legacy-pluralize/-/mongoose-legacy-pluralize-1.0.2.tgz", + "integrity": "sha512-Yo/7qQU4/EyIS8YDFSeenIvXxZN+ld7YdV9LqFVQJzTLye8unujAWPZ4NWKfFA+RNjh+wvTWKY9Z3E5XM6ZZiQ==" + }, + "mpath": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.5.1.tgz", + "integrity": "sha512-H8OVQ+QEz82sch4wbODFOz+3YQ61FYz/z3eJ5pIdbMEaUzDqA268Wd+Vt4Paw9TJfvDgVKaayC0gBzMIw2jhsg==" + }, + "mquery": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/mquery/-/mquery-3.2.0.tgz", + "integrity": "sha512-qPJcdK/yqcbQiKoemAt62Y0BAc0fTEKo1IThodBD+O5meQRJT/2HSe5QpBNwaa4CjskoGrYWsEyjkqgiE0qjhg==", + "requires": { + "bluebird": "3.5.1", + "debug": "3.1.0", + "regexp-clone": "0.0.1", + "safe-buffer": "5.1.2", + "sliced": "1.0.1" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + } + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "negotiator": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", + "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" + }, + "on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "requires": { + "ee-first": "1.1.1" + } + }, + "parseurl": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", + "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" + }, + "path-to-regexp": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", + "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" + }, + "proxy-addr": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz", + "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==", + "requires": { + "forwarded": "~0.1.2", + "ipaddr.js": "1.8.0" + } + }, + "qs": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", + "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" + }, + "range-parser": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", + "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" + }, + "raw-body": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz", + "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==", + "requires": { + "bytes": "3.0.0", + "http-errors": "1.6.3", + "iconv-lite": "0.4.23", + "unpipe": "1.0.0" + } + }, + "regexp-clone": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/regexp-clone/-/regexp-clone-0.0.1.tgz", + "integrity": "sha1-p8LgmJH9vzj7sQ03b7cwA+aKxYk=" + }, + "require_optional": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz", + "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==", + "requires": { + "resolve-from": "^2.0.0", + "semver": "^5.1.0" + } + }, + "resolve-from": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-2.0.0.tgz", + "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c=" + }, + "safe-buffer": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" + }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "saslprep": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.2.tgz", + "integrity": "sha512-4cDsYuAjXssUSjxHKRe4DTZC0agDwsCqcMqtJAQPzC74nJ7LfAJflAtC1Zed5hMzEQKj82d3tuzqdGNRsLJ4Gw==", + "optional": true, + "requires": { + "sparse-bitfield": "^3.0.3" + } + }, + "semver": { + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz", + "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==" + }, + "send": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", + "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", + "requires": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "~1.6.2", + "mime": "1.4.1", + "ms": "2.0.0", + "on-finished": "~2.3.0", + "range-parser": "~1.2.0", + "statuses": "~1.4.0" + }, + "dependencies": { + "statuses": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", + "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" + } + } + }, + "serve-static": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", + "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", + "requires": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.2", + "send": "0.16.2" + } + }, + "setprototypeof": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", + "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" + }, + "sliced": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz", + "integrity": "sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E=" + }, + "sparse-bitfield": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz", + "integrity": "sha1-/0rm5oZWBWuks+eSqzM004JzyhE=", + "optional": true, + "requires": { + "memory-pager": "^1.0.2" + } + }, + "statuses": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", + "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" + }, + "type-is": { + "version": "1.6.16", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", + "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", + "requires": { + "media-typer": "0.3.0", + "mime-types": "~2.1.18" + } + }, + "unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" + }, + "utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" + }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" + } + } +} diff --git a/Daily Journal/package.json b/Daily Journal/package.json new file mode 100644 index 00000000..8c628dff --- /dev/null +++ b/Daily Journal/package.json @@ -0,0 +1,18 @@ +{ + "name": "ejs-challenge", + "version": "1.0.0", + "description": "", + "main": "app.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "body-parser": "^1.18.3", + "ejs": "^2.6.1", + "express": "^4.16.3", + "lodash": "^4.17.11", + "mongoose": "^5.3.6" + } +} diff --git a/Daily Journal/public/css/styles.css b/Daily Journal/public/css/styles.css new file mode 100644 index 00000000..2465d61e --- /dev/null +++ b/Daily Journal/public/css/styles.css @@ -0,0 +1,40 @@ +html { + min-height: 100%; + position: relative; +} + +.container-fluid { + padding-top: 70px; + padding-bottom: 70px; +} +.navbar { + padding-top: 15px; + padding-bottom: 15px; + border: 0; + border-radius: 0; + margin-bottom: 0; + font-size: 12px; + letter-spacing: 5px; +} +.navbar-nav li a:hover { + color: #1abc9c !important; +} + +.footer-padding { + padding-bottom: 60px; +} + +.footer { + position: absolute; + text-align: center; + bottom: 0; + width: 100%; + height: 60px; + background-color: #1abc9c; +} + +.footer p { + margin-top: 25px; + font-size: 12px; + color: #fff; +} diff --git a/Daily Journal/views/about.ejs b/Daily Journal/views/about.ejs new file mode 100644 index 00000000..6cb31869 --- /dev/null +++ b/Daily Journal/views/about.ejs @@ -0,0 +1,4 @@ +<%- include("partials/header"); -%> +

About

+

<%= aboutContent %>

+<%- include("partials/footer"); -%> diff --git a/Daily Journal/views/compose.ejs b/Daily Journal/views/compose.ejs new file mode 100644 index 00000000..f2e2cd8d --- /dev/null +++ b/Daily Journal/views/compose.ejs @@ -0,0 +1,14 @@ + +<%- include("partials/header"); -%> +

Compose

+
+
+ + + + +
+ +
+ +<%- include("partials/footer"); -%> diff --git a/Daily Journal/views/contact.ejs b/Daily Journal/views/contact.ejs new file mode 100644 index 00000000..f8d33ef7 --- /dev/null +++ b/Daily Journal/views/contact.ejs @@ -0,0 +1,4 @@ +<%- include("partials/header"); -%> +

Contact

+

<%= contactContent %>

+<%- include("partials/footer"); -%> diff --git a/Daily Journal/views/home.ejs b/Daily Journal/views/home.ejs new file mode 100644 index 00000000..a0319d3a --- /dev/null +++ b/Daily Journal/views/home.ejs @@ -0,0 +1,20 @@ + +<%- include("partials/header"); -%> + +

Home

+

<%= startingContent %>

+ + + <% posts.forEach(function(post){ %> + +

<%=post.title%>

+

+ <%=post.content.substring(0, 100) + " ..."%> + Read More +

+ + + <% }) %> + + +<%- include("partials/footer"); -%> diff --git a/Daily Journal/views/partials/footer.ejs b/Daily Journal/views/partials/footer.ejs new file mode 100644 index 00000000..9a7bfa66 --- /dev/null +++ b/Daily Journal/views/partials/footer.ejs @@ -0,0 +1,9 @@ + + + + + + + diff --git a/Daily Journal/views/partials/header.ejs b/Daily Journal/views/partials/header.ejs new file mode 100644 index 00000000..f3dd5bb8 --- /dev/null +++ b/Daily Journal/views/partials/header.ejs @@ -0,0 +1,24 @@ + + + + + + Daily Journal + + + + + + +
diff --git a/Daily Journal/views/post.ejs b/Daily Journal/views/post.ejs new file mode 100644 index 00000000..aae04b21 --- /dev/null +++ b/Daily Journal/views/post.ejs @@ -0,0 +1,10 @@ + +<%- include("partials/header"); -%> + + +

<%=title%>

+

<%=content%>

+ + + +<%- include("partials/footer"); -%> diff --git a/Daily Journal/views/test.ejs b/Daily Journal/views/test.ejs new file mode 100644 index 00000000..0fe972d3 --- /dev/null +++ b/Daily Journal/views/test.ejs @@ -0,0 +1,15 @@ +<%- include("partials/header"); -%> +

Home

+

<%= startingContent %>

+ + + <% posts.forEach(function(post){ %> + +

<%=post.title%>

+

+ <%=post.content.substring(0, 100) + " ..."%> + Read More +

+ + + <% }) %> diff --git a/buttons/button.css b/buttons/button.css new file mode 100644 index 00000000..a3c881d5 --- /dev/null +++ b/buttons/button.css @@ -0,0 +1,808 @@ +body { + background: #e0e5ec; + } + h1 { + position: relative; + text-align: center; + color: #353535; + font-size: 50px; + font-family: "Cormorant Garamond", serif; + } + + p { + font-family: 'Lato', sans-serif; + font-weight: 300; + text-align: center; + font-size: 18px; + color: #676767; + } + .frame { + width: 90%; + margin: 40px auto; + text-align: center; + } + button { + margin: 20px; + } + .custom-btn { + width: 130px; + height: 40px; + color: #fff; + border-radius: 5px; + padding: 10px 25px; + font-family: 'Lato', sans-serif; + font-weight: 500; + background: transparent; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + display: inline-block; + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + outline: none; + } + + /* 1 */ + .btn-1 { + background: rgb(6,14,131); + background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%); + border: none; + } + .btn-1:hover { + background: rgb(0,3,255); + background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%); + } + + /* 2 */ + .btn-2 { + background: rgb(96,9,240); + background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%); + border: none; + + } + .btn-2:before { + height: 0%; + width: 2px; + } + .btn-2:hover { + box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), + -4px -4px 6px 0 rgba(116, 125, 136, .5), + inset -4px -4px 6px 0 rgba(255,255,255,.2), + inset 4px 4px 6px 0 rgba(0, 0, 0, .4); + } + + + /* 3 */ + .btn-3 { + background: rgb(0,172,238); + background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); + width: 130px; + height: 40px; + line-height: 42px; + padding: 0; + border: none; + + } + .btn-3 span { + position: relative; + display: block; + width: 100%; + height: 100%; + } + .btn-3:before, + .btn-3:after { + position: absolute; + content: ""; + right: 0; + top: 0; + background: rgba(2,126,251,1); + transition: all 0.3s ease; + } + .btn-3:before { + height: 0%; + width: 2px; + } + .btn-3:after { + width: 0%; + height: 2px; + } + .btn-3:hover{ + background: transparent; + box-shadow: none; + } + .btn-3:hover:before { + height: 100%; + } + .btn-3:hover:after { + width: 100%; + } + .btn-3 span:hover{ + color: rgba(2,126,251,1); + } + .btn-3 span:before, + .btn-3 span:after { + position: absolute; + content: ""; + left: 0; + bottom: 0; + background: rgba(2,126,251,1); + transition: all 0.3s ease; + } + .btn-3 span:before { + width: 2px; + height: 0%; + } + .btn-3 span:after { + width: 0%; + height: 2px; + } + .btn-3 span:hover:before { + height: 100%; + } + .btn-3 span:hover:after { + width: 100%; + } + + /* 4 */ + .btn-4 { + background-color: #4dccc6; + background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%); + line-height: 42px; + padding: 0; + border: none; + } + .btn-4:hover{ + background-color: #89d8d3; + background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%); + } + .btn-4 span { + position: relative; + display: block; + width: 100%; + height: 100%; + } + .btn-4:before, + .btn-4:after { + position: absolute; + content: ""; + right: 0; + top: 0; + box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9), + -4px -4px 6px 0 rgba(116, 125, 136, .2), + inset -4px -4px 6px 0 rgba(255,255,255,.9), + inset 4px 4px 6px 0 rgba(116, 125, 136, .3); + transition: all 0.3s ease; + } + .btn-4:before { + height: 0%; + width: .1px; + } + .btn-4:after { + width: 0%; + height: .1px; + } + .btn-4:hover:before { + height: 100%; + } + .btn-4:hover:after { + width: 100%; + } + .btn-4 span:before, + .btn-4 span:after { + position: absolute; + content: ""; + left: 0; + bottom: 0; + box-shadow: 4px 4px 6px 0 rgba(255,255,255,.9), + -4px -4px 6px 0 rgba(116, 125, 136, .2), + inset -4px -4px 6px 0 rgba(255,255,255,.9), + inset 4px 4px 6px 0 rgba(116, 125, 136, .3); + transition: all 0.3s ease; + } + .btn-4 span:before { + width: .1px; + height: 0%; + } + .btn-4 span:after { + width: 0%; + height: .1px; + } + .btn-4 span:hover:before { + height: 100%; + } + .btn-4 span:hover:after { + width: 100%; + } + + /* 5 */ + .btn-5 { + width: 130px; + height: 40px; + line-height: 42px; + padding: 0; + border: none; + background: rgb(255,27,0); + background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%); + } + .btn-5:hover { + color: #f0094a; + background: transparent; + box-shadow:none; + } + .btn-5:before, + .btn-5:after{ + content:''; + position:absolute; + top:0; + right:0; + height:2px; + width:0; + background: #f0094a; + box-shadow: + -1px -1px 5px 0px #fff, + 7px 7px 20px 0px #0003, + 4px 4px 5px 0px #0002; + transition:400ms ease all; + } + .btn-5:after{ + right:inherit; + top:inherit; + left:0; + bottom:0; + } + .btn-5:hover:before, + .btn-5:hover:after{ + width:100%; + transition:800ms ease all; + } + + + /* 6 */ + .btn-6 { + background: rgb(247,150,192); + background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%); + line-height: 42px; + padding: 0; + border: none; + } + .btn-6 span { + position: relative; + display: block; + width: 100%; + height: 100%; + } + .btn-6:before, + .btn-6:after { + position: absolute; + content: ""; + height: 0%; + width: 1px; + box-shadow: + -1px -1px 20px 0px rgba(255,255,255,1), + -4px -4px 5px 0px rgba(255,255,255,1), + 7px 7px 20px 0px rgba(0,0,0,.4), + 4px 4px 5px 0px rgba(0,0,0,.3); + } + .btn-6:before { + right: 0; + top: 0; + transition: all 500ms ease; + } + .btn-6:after { + left: 0; + bottom: 0; + transition: all 500ms ease; + } + .btn-6:hover{ + background: transparent; + color: #76aef1; + box-shadow: none; + } + .btn-6:hover:before { + transition: all 500ms ease; + height: 100%; + } + .btn-6:hover:after { + transition: all 500ms ease; + height: 100%; + } + .btn-6 span:before, + .btn-6 span:after { + position: absolute; + content: ""; + box-shadow: + -1px -1px 20px 0px rgba(255,255,255,1), + -4px -4px 5px 0px rgba(255,255,255,1), + 7px 7px 20px 0px rgba(0,0,0,.4), + 4px 4px 5px 0px rgba(0,0,0,.3); + } + .btn-6 span:before { + left: 0; + top: 0; + width: 0%; + height: .5px; + transition: all 500ms ease; + } + .btn-6 span:after { + right: 0; + bottom: 0; + width: 0%; + height: .5px; + transition: all 500ms ease; + } + .btn-6 span:hover:before { + width: 100%; + } + .btn-6 span:hover:after { + width: 100%; + } + + /* 7 */ + .btn-7 { + background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%); + line-height: 42px; + padding: 0; + border: none; + } + .btn-7 span { + position: relative; + display: block; + width: 100%; + height: 100%; + } + .btn-7:before, + .btn-7:after { + position: absolute; + content: ""; + right: 0; + bottom: 0; + background: rgba(251,75,2,1); + box-shadow: + -7px -7px 20px 0px rgba(255,255,255,.9), + -4px -4px 5px 0px rgba(255,255,255,.9), + 7px 7px 20px 0px rgba(0,0,0,.2), + 4px 4px 5px 0px rgba(0,0,0,.3); + transition: all 0.3s ease; + } + .btn-7:before{ + height: 0%; + width: 2px; + } + .btn-7:after { + width: 0%; + height: 2px; + } + .btn-7:hover{ + color: rgba(251,75,2,1); + background: transparent; + } + .btn-7:hover:before { + height: 100%; + } + .btn-7:hover:after { + width: 100%; + } + .btn-7 span:before, + .btn-7 span:after { + position: absolute; + content: ""; + left: 0; + top: 0; + background: rgba(251,75,2,1); + box-shadow: + -7px -7px 20px 0px rgba(255,255,255,.9), + -4px -4px 5px 0px rgba(255,255,255,.9), + 7px 7px 20px 0px rgba(0,0,0,.2), + 4px 4px 5px 0px rgba(0,0,0,.3); + transition: all 0.3s ease; + } + .btn-7 span:before { + width: 2px; + height: 0%; + } + .btn-7 span:after { + height: 2px; + width: 0%; + } + .btn-7 span:hover:before { + height: 100%; + } + .btn-7 span:hover:after { + width: 100%; + } + + /* 8 */ + .btn-8 { + background-color: #f0ecfc; + background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%); + line-height: 42px; + padding: 0; + border: none; + } + .btn-8 span { + position: relative; + display: block; + width: 100%; + height: 100%; + } + .btn-8:before, + .btn-8:after { + position: absolute; + content: ""; + right: 0; + bottom: 0; + background: #c797eb; + /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), + -4px -4px 6px 0 rgba(116, 125, 136, .2), + inset -4px -4px 6px 0 rgba(255,255,255,.5), + inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/ + transition: all 0.3s ease; + } + .btn-8:before{ + height: 0%; + width: 2px; + } + .btn-8:after { + width: 0%; + height: 2px; + } + .btn-8:hover:before { + height: 100%; + } + .btn-8:hover:after { + width: 100%; + } + .btn-8:hover{ + background: transparent; + } + .btn-8 span:hover{ + color: #c797eb; + } + .btn-8 span:before, + .btn-8 span:after { + position: absolute; + content: ""; + left: 0; + top: 0; + background: #c797eb; + /*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), + -4px -4px 6px 0 rgba(116, 125, 136, .2), + inset -4px -4px 6px 0 rgba(255,255,255,.5), + inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/ + transition: all 0.3s ease; + } + .btn-8 span:before { + width: 2px; + height: 0%; + } + .btn-8 span:after { + height: 2px; + width: 0%; + } + .btn-8 span:hover:before { + height: 100%; + } + .btn-8 span:hover:after { + width: 100%; + } + + + /* 9 */ + .btn-9 { + border: none; + transition: all 0.3s ease; + overflow: hidden; + } + .btn-9:after { + position: absolute; + content: " "; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #1fd1f9; + background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%); + transition: all 0.3s ease; + } + .btn-9:hover { + background: transparent; + box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), + -4px -4px 6px 0 rgba(116, 125, 136, .2), + inset -4px -4px 6px 0 rgba(255,255,255,.5), + inset 4px 4px 6px 0 rgba(116, 125, 136, .3); + color: #fff; + } + .btn-9:hover:after { + -webkit-transform: scale(2) rotate(180deg); + transform: scale(2) rotate(180deg); + box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), + -4px -4px 6px 0 rgba(116, 125, 136, .2), + inset -4px -4px 6px 0 rgba(255,255,255,.5), + inset 4px 4px 6px 0 rgba(116, 125, 136, .3); + } + + /* 10 */ + .btn-10 { + background: rgb(22,9,240); + background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%); + color: #fff; + border: none; + transition: all 0.3s ease; + overflow: hidden; + } + .btn-10:after { + position: absolute; + content: " "; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + transition: all 0.3s ease; + -webkit-transform: scale(.1); + transform: scale(.1); + } + .btn-10:hover { + color: #fff; + border: none; + background: transparent; + } + .btn-10:hover:after { + background: rgb(0,3,255); + background: linear-gradient(0deg, rgba(2,126,251,1) 0%, rgba(0,3,255,1)100%); + -webkit-transform: scale(1); + transform: scale(1); + } + + /* 11 */ + .btn-11 { + border: none; + background: rgb(251,33,117); + background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%); + color: #fff; + overflow: hidden; + } + .btn-11:hover { + text-decoration: none; + color: #fff; + } + .btn-11:before { + position: absolute; + content: ''; + display: inline-block; + top: -180px; + left: 0; + width: 30px; + height: 100%; + background-color: #fff; + animation: shiny-btn1 3s ease-in-out infinite; + } + .btn-11:hover{ + opacity: .7; + } + .btn-11:active{ + box-shadow: 4px 4px 6px 0 rgba(255,255,255,.3), + -4px -4px 6px 0 rgba(116, 125, 136, .2), + inset -4px -4px 6px 0 rgba(255,255,255,.2), + inset 4px 4px 6px 0 rgba(0, 0, 0, .2); + } + + + @-webkit-keyframes shiny-btn1 { + 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } + 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } + 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } + 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } + } + + + /* 12 */ + .btn-12{ + position: relative; + right: 20px; + bottom: 20px; + border:none; + box-shadow: none; + width: 130px; + height: 40px; + line-height: 42px; + -webkit-perspective: 230px; + perspective: 230px; + } + .btn-12 span { + background: rgb(0,172,238); + background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); + display: block; + position: absolute; + width: 130px; + height: 40px; + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + border-radius: 5px; + margin:0; + text-align: center; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: all .3s; + transition: all .3s; + } + .btn-12 span:nth-child(1) { + box-shadow: + -7px -7px 20px 0px #fff9, + -4px -4px 5px 0px #fff9, + 7px 7px 20px 0px #0002, + 4px 4px 5px 0px #0001; + -webkit-transform: rotateX(90deg); + -moz-transform: rotateX(90deg); + transform: rotateX(90deg); + -webkit-transform-origin: 50% 50% -20px; + -moz-transform-origin: 50% 50% -20px; + transform-origin: 50% 50% -20px; + } + .btn-12 span:nth-child(2) { + -webkit-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); + transform: rotateX(0deg); + -webkit-transform-origin: 50% 50% -20px; + -moz-transform-origin: 50% 50% -20px; + transform-origin: 50% 50% -20px; + } + .btn-12:hover span:nth-child(1) { + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + -webkit-transform: rotateX(0deg); + -moz-transform: rotateX(0deg); + transform: rotateX(0deg); + } + .btn-12:hover span:nth-child(2) { + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + color: transparent; + -webkit-transform: rotateX(-90deg); + -moz-transform: rotateX(-90deg); + transform: rotateX(-90deg); + } + + + /* 13 */ + .btn-13 { + background-color: #89d8d3; + background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%); + border: none; + z-index: 1; + } + .btn-13:after { + position: absolute; + content: ""; + width: 100%; + height: 0; + bottom: 0; + left: 0; + z-index: -1; + border-radius: 5px; + background-color: #4dccc6; + background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%); + box-shadow: + -7px -7px 20px 0px #fff9, + -4px -4px 5px 0px #fff9, + 7px 7px 20px 0px #0002, + 4px 4px 5px 0px #0001; + transition: all 0.3s ease; + } + .btn-13:hover { + color: #fff; + } + .btn-13:hover:after { + top: 0; + height: 100%; + } + .btn-13:active { + top: 2px; + } + + + /* 14 */ + .btn-14 { + background: rgb(255,151,0); + border: none; + z-index: 1; + } + .btn-14:after { + position: absolute; + content: ""; + width: 100%; + height: 0; + top: 0; + left: 0; + z-index: -1; + border-radius: 5px; + background-color: #eaf818; + background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%); + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5); + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + transition: all 0.3s ease; + } + .btn-14:hover { + color: #000; + } + .btn-14:hover:after { + top: auto; + bottom: 0; + height: 100%; + } + .btn-14:active { + top: 2px; + } + + /* 15 */ + .btn-15 { + background: #b621fe; + border: none; + z-index: 1; + } + .btn-15:after { + position: absolute; + content: ""; + width: 0; + height: 100%; + top: 0; + right: 0; + z-index: -1; + background-color: #663dff; + border-radius: 5px; + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + transition: all 0.3s ease; + } + .btn-15:hover { + color: #fff; + } + .btn-15:hover:after { + left: 0; + width: 100%; + } + .btn-15:active { + top: 2px; + } + + + /* 16 */ + .btn-16 { + border: none; + color: #000; + } + .btn-16:after { + position: absolute; + content: ""; + width: 0; + height: 100%; + top: 0; + left: 0; + direction: rtl; + z-index: -1; + box-shadow: + -7px -7px 20px 0px #fff9, + -4px -4px 5px 0px #fff9, + 7px 7px 20px 0px #0002, + 4px 4px 5px 0px #0001; + transition: all 0.3s ease; + } + .btn-16:hover { + color: #000; + } + .btn-16:hover:after { + left: auto; + right: 0; + width: 100%; + } + .btn-16:active { + top: 2px; + } \ No newline at end of file diff --git a/buttons/button.html b/buttons/button.html new file mode 100644 index 00000000..f74fcf7d --- /dev/null +++ b/buttons/button.html @@ -0,0 +1,39 @@ + + + + + + + + + Document + + + + + +

Animation Buttons

+

Hover us and enjoy the satisfying animation designs!

+
+ + + + + + + + + + + + + + + + +

+ Designed by vivek

+
+ + + \ No newline at end of file