feat(style): simple card

1 files changed, 74 insertions, 0 deletions

diff --git a/scss/main.scss b/scss/main.scss
new file mode 100644
index 0000000..60a3a90
--- /dev/null
+++ b/scss/main.scss
@@ -0,0 +1,74 @@
+@use "../node_modules/reset-css/reset.css";
+
+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;
+
+  &__information {
+    display: flex;
+    //width: 100%;
+    margin-right: 1rem;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+  & figure {
+    display: inline;
+    & img {
+      height: 128px;
+      border-radius: 32px;
+      box-shadow: 0px 0px 50px -20px rgba(0,0,0,0.75);
+    }
+  }
+  & h2, p {
+    display: inline;
+  }
+}
+
+.links {
+  display: flex;
+  margin-top: 2rem;
+  width: 100%;
+  gap: 1rem;
+  & .link {
+    display: block;
+    background: purple;
+    width: 33%;
+    padding: 1em;
+    border-radius: 16px;
+  }
+  & a {
+    display: block;
+    color: black;
+    text-decoration: none;
+    text-align: center;
+  }
+}