feat(style): simple card

2024-11-09 22:49:17 +01:00 · 2024-11-09 22:49:17 +01:00 · 892858567f
commit 892858567f
parent f616d8f24e
8 changed files with 235 additions and 9 deletions
--- a/dist/styles.css
+++ b/dist/styles.css
@ -0,0 +1,131 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v5.0.1 | 20191019
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}
+
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+  display: none;
+}
+
+body {
+  line-height: 1;
+}
+
+menu, ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+body {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+main {
+  width: 50%;
+  background: mediumpurple;
+  padding: 2rem;
+  border-radius: 32px;
+  box-shadow: 0px 0px 70px 2px rgba(0, 0, 0, 0.75);
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+.presentation {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+.presentation__information {
+  display: flex;
+  margin-right: 1rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.presentation figure {
+  display: inline;
+}
+.presentation figure img {
+  height: 128px;
+  border-radius: 32px;
+  box-shadow: 0px 0px 50px -20px rgba(0, 0, 0, 0.75);
+}
+.presentation h2, .presentation p {
+  display: inline;
+}
+
+.links {
+  display: flex;
+  margin-top: 2rem;
+  width: 100%;
+  gap: 1rem;
+}
+.links .link {
+  display: block;
+  background: purple;
+  width: 33%;
+  padding: 1em;
+  border-radius: 16px;
+}
+.links a {
+  display: block;
+  color: black;
+  text-decoration: none;
+  text-align: center;
+}
+
+/*# sourceMappingURL=styles.css.map */