From 0c09742cb954179cdbc87fd878a3b5aa004019e0 Mon Sep 17 00:00:00 2001 From: Emre Date: Thu, 17 Nov 2022 23:19:06 +0100 Subject: [PATCH] Vue de la page login presque terminer mais non fonctionnel :white_check_mark: --- src/Vue/Images/Logo.png | Bin 0 -> 11196 bytes src/Vue/css/reset.css | 82 +++++++++++++++++ src/Vue/css/style.css | 192 ++++++++++++++++++++++++++++++++++++++++ src/index.html | 73 +++++++++++++++ 4 files changed, 347 insertions(+) create mode 100644 src/Vue/Images/Logo.png create mode 100644 src/Vue/css/reset.css create mode 100644 src/Vue/css/style.css create mode 100644 src/index.html diff --git a/src/Vue/Images/Logo.png b/src/Vue/Images/Logo.png new file mode 100644 index 0000000000000000000000000000000000000000..2a88f48bc766f960ef4b735d676a2032a57bddd3 GIT binary patch literal 11196 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 literal 0 HcmV?d00001 diff --git a/src/Vue/css/reset.css b/src/Vue/css/reset.css new file mode 100644 index 0000000..567ae4d --- /dev/null +++ b/src/Vue/css/reset.css @@ -0,0 +1,82 @@ +/*** + The new CSS reset - version 1.7.2 (last updated 23.6.2022) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + */ + *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Reapply the pointer cursor for anchor tags */ +a, button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-width: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Safari - solving issue when using user-select:none on the text input doesn't working */ +input, textarea { + -webkit-user-select: auto; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. + - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ +:where([contenteditable]:not([contenteditable="false"])) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable="true"]) { + -webkit-user-drag: element; +} \ No newline at end of file diff --git a/src/Vue/css/style.css b/src/Vue/css/style.css new file mode 100644 index 0000000..be7d5b7 --- /dev/null +++ b/src/Vue/css/style.css @@ -0,0 +1,192 @@ +@import url("reset.css"); + +@import url('https://fonts.googleapis.com/css2?family-Poppins:wght@400;600&display-swap'); + +body { + font-family: 'Poppinq', sans-serif; + min-height: 100vh; + background: linear-gradient(to right, #ffffff,#38B6FF); + display: flex; + align-items: center; + justify-content: center; +} + +.model { + width: 450px; + background: rgba(255,255,255, .5); + padding: 4rem; + border-radius: 10px; + border-radius: relative; +} + +.model::before { + content: ''; + position: absolute; + background: rgba(255,255,255, .15); + inset: 0; + transform: rotate(-5deg); + z-index: -1; +} + +.main-logo { + margin-bottom: 2rem; +} + +.main-logo img { + width: 200px; +} + +.main-logo, .login-card-header,.login-card-footer { + text-align: center; +} + +.model a{ + text-decoration: none; + color: #35339a; +} + +.model a:hover { + text-decoration: underline; +} + +.login-card-header { + margin-bottom: 2rem; +} + +.login-card-header h1 { + font-size: 2rm; + font-weight: 600; + margin-bottom: .5rem; +} + +.login-card-header h1 + div { + font-size: calc(1rem * .8); + opacity: .8; +} + +.login-card-form { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.login-card-form .form-item { + position: relative; +} + +.login-card-form .form-item .form-item-icon { + position: absolute; + top:.82rem; + left: 1.4rem; + font-size: 1.3rem; + opacity: .4; +} + +.login-card-form .checkbox{ + display: flex; + align-items: center; + gap: 7px; +} + +.login-card-form .form-item-other { + display: flex; + align-items: center; + justify-content: space-between; + font-size: calc(1rem*.8); + margin-bottom: .5rem; +} + +.login-card-footer { + margin-top: 1.5rem; + font-size: calc(1rem*.8); +} + +.model input[type="text"], +.model input[type="password"], +.model input[type="email"] { + border: none; + outline: none; + background: rgba(255,255,255,.3); + padding: 1rem 1.5rem; + padding-left: calc(1rem * 3.5); + border-radius: 100px; + width: 100%; + transition: background .5s; +} + +.model input:focus { + background: white; +} + +.model input[type="checkbox"] { + width: 16px; + height: 16px; + accent-color: black; +} + +.model button { + background: #38b6ff; + color: white; + padding: 1rem; + border-radius: 100px; + text-transform: uppercase; + letter-spacing: 2px; + transition: background .5s; +} + +.login-card-form button:hover { + background-color: rgba(84,192,255,.85); + cursor: pointer; +} + +.social { + display: flex; + flex-direction: column; + gap: 1.5rem; + text-align: center; + margin-top: 3rem; +} + +.social > div { + opacity: .8; + text-transform: uppercase; + letter-spacing: 1px; + font-size: calc(1rem * .8); +} + +.lesLogo { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.lesLogo a { + display: flex; + align-items: center; + justify-content: center; + color: black; + width: 50px; + height: 50px; + background: rgba(255, 255, 255, .6); + border-radius: 100px; + transition: all .5s; +} + +.lesLogo a:hover { + background: white; + transform: scale(1.1); +} + +/* Responsive */ + +@media (max-width: 768px) { + body { + padding: 2rem 0; + } + + .login-card { + width: 300px; + padding: 2rem; + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..e2766dd --- /dev/null +++ b/src/index.html @@ -0,0 +1,73 @@ + + + + + + + Login Page + + + + + +
+
+ + + + +
+ +
+ + + \ No newline at end of file