Layout.

├── img ├── files_2.png ├── undraw.png ├── server_2_2.png ├── server_3.png ├── server_safe_2.png ├── data_storage_2_2.png ├── monitor_coding_2.png ├── desktop_analytics_2.png └── monitor_settings_2.png ├── index.html ├── style.css └── README.md /img/files_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/ResponsiveTemplate/HEAD/img/files_2.png -------------------------------------------------------------------------------- /img/undraw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/ResponsiveTemplate/HEAD/img/undraw.png -------------------------------------------------------------------------------- /img/server_2_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/ResponsiveTemplate/HEAD/img/server_2_2.png -------------------------------------------------------------------------------- /img/server_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/ResponsiveTemplate/HEAD/img/server_3.png -------------------------------------------------------------------------------- /img/server_safe_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/ResponsiveTemplate/HEAD/img/server_safe_2.png -------------------------------------------------------------------------------- /img/data_storage_2_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/ResponsiveTemplate/HEAD/img/data_storage_2_2.png -------------------------------------------------------------------------------- /img/monitor_coding_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/ResponsiveTemplate/HEAD/img/monitor_coding_2.png -------------------------------------------------------------------------------- /img/desktop_analytics_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/ResponsiveTemplate/HEAD/img/desktop_analytics_2.png -------------------------------------------------------------------------------- /img/monitor_settings_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alejandroq12/ResponsiveTemplate/HEAD/img/monitor_settings_2.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layout. 5 | 6 | 7 | 8 | 16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: auto 0; 3 | font-family: Arial; 4 | } 5 | 6 | .zone { 7 | /* padding:30px 50px; 8 | margin:40px 60px; */ 9 | cursor:pointer; 10 | /* display:inline-block; */ 11 | color:#FFF; 12 | font-size:2em; 13 | border-radius:4px; 14 | border:1px solid #bbb; 15 | transition: all 0.3s linear; 16 | } 17 | 18 | .zone:hover { 19 | -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; 20 | -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; 21 | -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; 22 | box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px; 23 | } 24 | 25 | .box:hover { 26 | -webkit-transform: rotate(-7deg); 27 | -moz-transform: rotate(-7deg); 28 | -o-transform: rotate(-7deg); 29 | transform: rotate(-7deg); 30 | } 31 | 32 | /* NAV */ 33 | .sticky { 34 | position: fixed; 35 | top: 0; 36 | width: 100%; 37 | } 38 | .main-nav { 39 | display: flex; 40 | list-style: none; 41 | font-size: 0.7em; 42 | margin: 0; 43 | } 44 | 45 | @media only screen and (max-width: 600px){ 46 | .main-nav { 47 | font-size: 0.5em; 48 | padding: 0; 49 | 50 | } 51 | } 52 | 53 | 54 | .push { 55 | margin-left: auto; 56 | 57 | } 58 | 59 | li { 60 | padding: 20px; 61 | } 62 | 63 | a { 64 | color: #f5f5f6; 65 | text-decoration: none; 66 | } 67 | 68 | /* Cover */ 69 | 70 | .container { 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | height: 50vh; 75 | } 76 | 77 | .cover { 78 | width: 30rem; 79 | } 80 | 81 | /* GRID */ 82 | .grid-wrapper { 83 | display: grid; 84 | gap: 20px; 85 | grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) 86 | 87 | } 88 | 89 | .box > img { 90 | width: 100%; 91 | } 92 | 93 | .box { 94 | background-color: #444; 95 | padding: 130px; 96 | margin: 20px; 97 | } 98 | 99 | footer { 100 | text-align: center; 101 | } 102 | 103 | 104 | 105 | /*https://paulund.co.uk/how-to-create-shiny-css-buttons*/ 106 | /*********************************************************************** 107 | * Green Background 108 | **********************************************************************/ 109 | .green{ 110 | background: #56B870; /* Old browsers */ 111 | background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */ 112 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */ 113 | background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */ 114 | background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */ 115 | background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */ 116 | background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */ 117 | } 118 | 119 | /*********************************************************************** 120 | * Red Background 121 | **********************************************************************/ 122 | .red{ 123 | background: #C655BE; /* Old browsers */ 124 | background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */ 125 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */ 126 | background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */ 127 | background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */ 128 | background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */ 129 | background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */ 130 | } 131 | 132 | /*********************************************************************** 133 | * Yellow Background 134 | **********************************************************************/ 135 | .yellow{ 136 | background: #F3AAAA; /* Old browsers */ 137 | background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */ 138 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */ 139 | background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */ 140 | background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */ 141 | background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */ 142 | background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */ 143 | } 144 | 145 | /*********************************************************************** 146 | * Blue Background 147 | **********************************************************************/ 148 | .blue{ 149 | background: #7abcff; /* Old browsers */ 150 | background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */ 151 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */ 152 | background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */ 153 | background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */ 154 | background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */ 155 | background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */ 156 | } 157 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ResponsiveTemplate 2 | This is a responsive template that we can use for projects. Feel free to use it. 3 | 4 | 5 | 6 | 30 | 31 |

32 | 33 | logo

34 |
35 | 36 |

Microverse README Template

37 | 38 |

79 |

Client

80 |

React.js

83 |

84 | 85 |

86 |

Server

87 |

Express.js

90 |

91 | 92 |

93 |

Database

94 |

PostgreSQL

97 |

98 | 99 | 100 | 101 | ### Key Features 102 | 103 | > Describe between 1-3 key features of the application. 104 | 105 | - **[key_feature_1]** 106 | - **[key_feature_2]** 107 | - **[key_feature_3]** 108 | 109 |

(back to top)

110 | 111 | 112 | 113 | ## 🚀 Live Demo 114 | 115 | > Add a link to your deployed project. 116 | 117 | - [Live Demo Link](https://yourdeployedapplicationlink.com) 118 | 119 |

(back to top)

120 | 121 | 122 | 123 | ## 💻 Getting Started 124 | 125 | > Describe how a new developer could make use of your project. 126 | 127 | To get a local copy up and running, follow these steps. 128 | 129 | ### Prerequisites 130 | 131 | In order to run this project you need: 132 | 133 | 140 | 141 | ### Setup 142 | 143 | Clone this repository to your desired folder: 144 | 145 | 153 | 154 | ### Install 155 | 156 | Install this project with: 157 | 158 | 166 | 167 | ### Usage 168 | 169 | To run the project, execute the following command: 170 | 171 | 178 | 179 | ### Run tests 180 | 181 | To run tests, run the following command: 182 | 183 | 190 | 191 | ### Deployment 192 | 193 | You can deploy this project using: 194 | 195 | 202 | 203 |

(back to top)

204 | 205 | 206 | 207 | ## 👥 Authors 208 | 209 | > Mention all of the collaborators of this project. 210 | 211 | 👤 **Author1** 212 | 213 | - GitHub: [@githubhandle](https://github.com/githubhandle) 214 | - Twitter: [@twitterhandle](https://twitter.com/twitterhandle) 215 | - LinkedIn: [LinkedIn](https://linkedin.com/in/linkedinhandle) 216 | 217 | 👤 **Author2** 218 | 219 | - GitHub: [@githubhandle](https://github.com/githubhandle) 220 | - Twitter: [@twitterhandle](https://twitter.com/twitterhandle) 221 | - LinkedIn: [LinkedIn](https://linkedin.com/in/linkedinhandle) 222 | 223 |

(back to top)

224 | 225 | 226 | 227 | ## 🔭 Future Features 228 | 229 | > Describe 1 - 3 features you will add to the project. 230 | 231 | - [ ] **[new_feature_1]** 232 | - [ ] **[new_feature_2]** 233 | - [ ] **[new_feature_3]** 234 | 235 |

(back to top)

236 | 237 | 238 | 239 | ## 🤝 Contributing 240 | 241 | Contributions, issues, and feature requests are welcome! 242 | 243 | Feel free to check the [issues page](../../issues/). 244 | 245 |

(back to top)

246 | 247 | 248 | 249 | ## ⭐️ Show your support 250 | 251 | > Write a message to encourage readers to support your project 252 | 253 | If you like this project... 254 | 255 |

(back to top)

256 | 257 | 258 | 259 | ## 🙏 Acknowledgments 260 | 261 | > Give credit to everyone who inspired your codebase. 262 | 263 | I would like to thank... 264 | 265 |

(back to top)

266 | 267 | 268 | 269 | ## ❓ FAQ (OPTIONAL) 270 | 271 | > Add at least 2 questions new developers would ask when they decide to use your project. 272 | 273 | - **[Question_1]** 274 | 275 | - [Answer_1] 276 | 277 | - **[Question_2]** 278 | 279 | - [Answer_2] 280 | 281 |

(back to top)

282 | 283 | 284 | 285 | ## 📝 License 286 | 287 | This project is [MIT](./LICENSE) licensed. 288 | 289 | _NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._ 290 | 291 |

(back to top)

292 | --------------------------------------------------------------------------------