From 188e9734bd10da7431e4e656fd6afbbbb075d9f5 Mon Sep 17 00:00:00 2001 From: Kanishk Date: Thu, 18 Nov 2021 14:54:58 +0530 Subject: [PATCH 1/7] Added Sign In and Sign Up pages --- Sign-In Form/Assets/favicon-round.ico | Bin 0 -> 16958 bytes Sign-In Form/Log-Style.css | 730 +++++++++++++++++++++++++ Sign-In Form/LogIn.html | 40 ++ Sign-In Form/SignUp.html | 47 ++ Sign-In Form/sign-Style.css | 737 ++++++++++++++++++++++++++ 5 files changed, 1554 insertions(+) create mode 100644 Sign-In Form/Assets/favicon-round.ico create mode 100644 Sign-In Form/Log-Style.css create mode 100644 Sign-In Form/LogIn.html create mode 100644 Sign-In Form/SignUp.html create mode 100644 Sign-In Form/sign-Style.css diff --git a/Sign-In Form/Assets/favicon-round.ico b/Sign-In Form/Assets/favicon-round.ico new file mode 100644 index 0000000000000000000000000000000000000000..da0df175a9d56a276b3a45265f8b141f0da8f7e7 GIT binary patch literal 16958 zcmeI4%TE(Q9LL9+z)d-MzyjUvTJVAN!~qXJNa(wbiHXK=@MMTb;$31IP7PQ3q6Li? z(&)uMfSAUU@n{-P96Vu*4eH zvpf5(GM|)h`u_I5rW6ZKr8w_YeqQQ0P=hB(dWHw$p5fPV&rmt;vGe%MRo*dvwZt_D zY*2>0h72@VP1BPlyoxR9bv#daN465)VV>{|@w4J58yI%jf(@Q)>bA{vz&ZsceX5r9 zDfy(&!IRz*eqQ`FcK8H4XmzS=+M$%s`84HIcTzrucMHF62c@_J8$2})^iV-*pVOB1 zYcXh^@~gb-`1N@~pBrLMrDW=OSP5L~OZ%^_rvn;K`@5IFW<0E`j-P#pny{sxnV_q0 zCE)r98}MG?H|EBV?b;v{7_+SeMsu0KDDO3X!v^RF#g@lHCOEbP;l0Xl*dW$Q$Ik?> z&q8>w^XqehQk-qZ2HD^Z7i1@E5q?}3>Dt)P{lRMJmMt5)na_r9aI5ee;~)=x>RbT! zxz*53ZZ&?x26Oes!D?uH0PSD2Fn|8q12f+Ul!mZA4^nsVPec)|mf~|#bf0u~=yVF^!ngHxmYmwVr7Jj1-ObG*ke@R0A zrGNYr1qt~J#J?7qu)m2+aM}2cF+l8(SMKK@dj5q-_xy|Z;N(YS*WUqz z<$eEA;g|jWm)!3^vypL|Z12BSb(^|=b(4AhgNy)vTL0Ry`uY#%{IYh;`WM+ilJ(C; zVm)pHztrpBWE1#5ys+x}H~M~E{|DmF1a<$H&sOvQ0DB((fT#Mu=zYMN{!cDqYjm@c z{~OxADgQTNBa8SyR@Zq2SEJej{;xTw<8+_5diF^BN2T?D7IsF8BWjJK`T2yUq!=W;EhoX1g)|1>7Btf2p-m7sfy3!QYU7b1g?Z z-x2>q@o#fo5dSu3cDzqBcA@ykgl9N<4)KpswD}P~&SvUvW?IC*4s<&H6}(3L>rwwz zGg;axE9n`kjejnf5dTbN=<(0BKAY{-@htPA?siC{@$X-e_B}+zzw7VkJ6T`O`Nl* { + box-sizing: border-box; +} + +header { + overflow: hidden; +} + +p { + font-family: var(--font-family-primary); +} + + +/* Styling for page translation popup */ + +address, +span, +.phone, +.email, +.mt-2 { + color: #ffffff; + font-weight: 100; +} + +.secondary-title span { + color: #000000; +} + +.noload { + display: none; +} + +.loadElement { + display: block; +} + + +/* global styling */ + +.far, +.fas, +.fab { + padding-left: 5px; + padding-right: 5px; +} + +.text-light { + color: var(--light); +} + +.text-secondary { + color: var(--dark); +} + +.text-dark { + color: var(--dark); +} + +.text-primary { + color: var(--primary-color); +} + +.bg-light { + background-color: var(--light); +} + +.bg-shadow { + background-color: var(--secondary); +} + +.container { + max-width: 1200px; + height: 90px; + padding: 0 15px; + padding-bottom: 5%; + margin: auto; +} + +.img-fluid { + width: 100% +} + +.text-title { + font-family: var(--font-family-title); + font-weight: 150; + transition: all 0.2s ease-in-out; +} + +.text-title:hover { + font-size: 28px; +} + +.col-3 .text-title:hover { + font-size: 20px; +} + +.secondary-title { + font-family: sans-serif; +} + +.display-1 { + font-size: 22px; +} + +.display-2 { + font-size: 16px; +} + +.display-3 { + font-size: 14px; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.btn { + padding: 15px 20px; + border: none; + background-color: rgb(194, 194, 194); +} + +.btn-primary { + border-radius: 4px; + background-color: rgb(238, 49, 49); +} + +.content { + font-family: var(--font-family-primary); +} + +.object-fit { + max-height: 120px; + height: 80px; + width: 80px; + object-fit: fill; +} + +.d-flex { + display: flex; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.justify-content-center { + justify-content: center; +} + +.justify-content-between { + justify-content: space-between; +} + +.mt-2 { + margin-top: 10px; +} + +.mt-3 { + margin-top: 50px; +} + +.mb-3 { + margin-bottom: 30px; +} + +.m-0 { + margin: 0; +} + +.mt-l { + margin-left: 130px; +} + +.px-1 { + padding-left: 5px; + padding-right: 5px; +} + +.px-2 { + padding-left: 20px; + padding-right: 20px; +} + +.py-1 { + padding-top: 10px; + padding-bottom: 10px; +} + +.py-2 { + padding-top: 20px; + padding-bottom: 20px; +} + +.py-3 { + padding-top: 30px; + padding-bottom: 30px; +} + +.thumbnail { + width: 100%; + height: 500px; + object-fit: cover; +} + +.rounded { + height: 120px; + width: 120px; + object-fit: fill; + border-radius: 99px; +} + +.shadow { + box-shadow: rgba(32, 47, 131, 0.781) 0 8px 24px; + overflow: visible; +} + + +/* Navigation Menu */ + +.navbar { + position: relative; + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px; + overflow: visible; +} + +.nav-brand { + font-family: var(--font-family-title); + font-weight: bold; + align-self: center; + font-size: 32px; +} + +.collapse { + align-self: center; +} + +.nav-link { + font-size: 18px; + margin: 12px; + color: var(--dark); + font-family: var(--font-family-primary); +} + +.search-box { + display: inline; + padding-right: 12px; + margin-right: 10px; +} + +.toggle-button { + font-size: 21px; + background-color: transparent; + border: none; + position: absolute; + right: 0; + margin: 8px 10px; + display: none; +} + +.toggle-button:focus { + outline: none; +} + +.dropdown { + display: inline-block; +} + +.dropdownBtn { + background: transparent; + border: none; + font-size: 18px; + font-family: inherit; + color: var(--dark); +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); + z-index: 1; + transition: none; +} + +.dropdown-content button { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; + transition: none; + font-family: inherit; + border: none; + background: transparent; + width: 100%; +} + +.dropdown-content button:hover { + cursor: pointer; + background: #bab9b6; +} + +.dropdown:hover .dropdown-content { + display: block; +} + + +/* Main Section */ + +#site-main { + margin-top: 8em; + overflow: hidden; +} + +#posts { + margin-bottom: 5em; +} + +.grid { + margin: 0 auto; +} + +.grid .grid-item { + width: calc(20% - 20px); + margin-bottom: 3em; + box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.8); + border-radius: 10px; + border: 5px solid #ffffff; + background: #ffffff; + transition: all 0.2s ease-in-out; +} + +.grid .grid-arc-item { + width: calc(20% - 34px); +} + +.grid .grid-item:hover { + box-shadow: 10px 10px 12px 0 rgba(0, 0, 0, 0.8); +} + +.overflow-img .img-fluid { + border-radius: 10px; +} + + +/* Swiper Slide Overlay styling */ + +.slider-img-wrapper { + position: relative; + width: 100%; +} + +.slider-img-wrapper img { + display: block; + width: 100%; + height: auto; +} + +.slider-img-overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + width: 100%; + opacity: 0; + transition: .5s ease; + background-color: #525252; +} + +.slider-img-wrapper:hover .slider-img-overlay { + opacity: 0.7; +} + +.overlay-text { + color: #ffffff; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + font-family: var(--font-family-title); + font-size: var(--fsize-larger); +} + +/* form */ + /* Bordered form */ + form { + margin-left: 500px; + margin-top: 100px; + width: 500px; + } + + /* Full-width inputs */ + input[type=text], input[type=password] { + border-radius: 12px; + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; + } + + input[type=email]{ + border-radius: 12px; + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; + } + + .fname { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; + } + + /* Set a style for all buttons */ + button { + border-radius: 12px; + background-color: var(--primary-color); + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: 100%; + } + + /* Add a hover effect for buttons */ + button:hover { + opacity: 0.8; + } + + /* Extra style for the cancel button (red) */ + .signupbtn { + margin-left: 160px; + width: 100px; + background-color: var(--primary-color); + } + + /* Center the avatar image inside this container */ + .imgcontainer { + text-align: center; + margin: 24px 0 12px 0; + } + + /* Avatar image */ + img.avatar { + width: 40%; + border-radius: 50%; + } + + /* Add padding to containers */ + .containerForm { + padding: 40px; + } + + /* The "Forgot password" text */ + span.psw { + float: right; + padding-top: 16px; + } + + /* Change styles for span and cancel button on extra small screens */ + @media screen and (max-width: 300px) { + span.psw { + display: block; + float: none; + } + .cancelbtn { + width: 100%; + } + } +/* footer */ + +#footer { + padding-top: 4em; + background-color: rgb(255, 38, 0); +} + +#footer .feature-post .flex-item { + margin-bottom: 10px; +} + +#footer .tags a { + border-radius: 40px; + padding: 10px 20px; + font-size: 15px; +} + +#footer .copyrights { + padding: 10px 0; + border-top: 2px solid var(--light); +} + + +/* article page */ + +#post { + padding: 0 2em; + margin-bottom: 4em; +} + +.post-footer .post-author { + position: relative; + margin-top: 4em; + background-color: rgb(204, 204, 204); +} + +.post-footer .post-author::after { + background-color: rgb(226, 218, 218); + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4em; + z-index: 0; +} + +.post-footer .post-author .author-avatar { + margin: 0 auto; + margin-bottom: 1em; + position: inherit; + z-index: 1; +} + +.post-footer .post-comments .reply { + padding-left: 7em; +} + +.form-control { + width: 100%; + border: 2px solid var(--border); + padding: 1em; + font-size: 18px; + margin-right: 10px; + font-family: var(--font-family-primary); +} + +.title-secondary a { + color: #000000; + text-decoration: underline; +} + + +/* sidebar page(not used) */ + +#sidebar .categories a { + padding: 1em 3em; + font-size: 18px; + margin-bottom: 1em; + background-color: var(--light); + border-radius: 99px; +} + +#sidebar .categories a:hover { + background-color: var(--primary-color); + color: var(--light); +} + + +/* sticky */ + +.sticky { + position: fixed; + top: 0; + z-index: 99; + width: 100% +} + + +/* Articles only */ + +.author-avatar img { + transition: all 0.2s ease-in-out; +} + +.author-avatar img:hover { + transform: scale(1.5); +} + +.form-control:hover, +.submitBtn { + cursor: not-allowed; +} + + +/* Media Queries for responsive deign */ + +.row { + display: flex; +} + +.col-3 { + flex: 0 0 33.3333%; + max-width: 33.3333%; + padding-right: 35px; +} + +.col-8 { + flex: 0 0 70%; + max-width: 70%; +} + +.col-4 { + flex: 0 0 30%; + max-width: 30%; +} + +@media(max-width: 1024px) { + .row { + flex-wrap: wrap; + } + .col-3 { + flex: 0 0 50%; + max-width: 50%; + } + .col-8 { + flex: 0 0 100%; + max-width: 100%; + } + .col-4 { + flex: 0 0 100%; + max-width: 100%; + } +} + +@media(max-width: 992px) { + .navbar { + flex-direction: column; + } + #site-main { + margin-top: 14em; + } +} + +@media(max-width: 768px) { + .grid .grid-item { + width: calc(50% - 100px) + } + .col-3 { + flex: 0 0 100%; + max-width: 100%; + } +} + +@media(max-width: 574px) { + .toggle-button { + display: initial; + } + .collapse { + max-height: 0; + overflow: hidden; + transition: all 0.8s cubic-bezier(0.51, -0.15, 0, 0.98); + } + .collapse .nav-link { + display: block; + text-align: center; + float: left; + } + #google_translate_element { + display: inline-block; + } + .search-box { + border-right: none; + } + .collapse-toggle { + max-height: 500px; + } + .grid .grid-item { + width: calc(100% - 20px) + } + #site-main { + margin-top: 6em; + } +} \ No newline at end of file diff --git a/Sign-In Form/LogIn.html b/Sign-In Form/LogIn.html new file mode 100644 index 0000000..540cf6a --- /dev/null +++ b/Sign-In Form/LogIn.html @@ -0,0 +1,40 @@ + + + + + + Blog Français + + + + + + + + + +
+
+ + + + + + + + + +

Create an Account

+ +
+
+ \ No newline at end of file diff --git a/Sign-In Form/SignUp.html b/Sign-In Form/SignUp.html new file mode 100644 index 0000000..5ad794e --- /dev/null +++ b/Sign-In Form/SignUp.html @@ -0,0 +1,47 @@ + + + + + + Blog Français + + + + + + + + + +
+
+ + +
+ + +
+ + + + + + + + + + + + +

Already a user?

+ +
+
+ \ No newline at end of file diff --git a/Sign-In Form/sign-Style.css b/Sign-In Form/sign-Style.css new file mode 100644 index 0000000..5f392d2 --- /dev/null +++ b/Sign-In Form/sign-Style.css @@ -0,0 +1,737 @@ +/* Imports */ + +@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); + +/* root styling */ + +:root { + --light: #004ef7; + --secondary: #adb5bd; + --dark: #000000; + --primary-color: #fa0000; + --secondary-color: #2ec4b6; + --border: #e9ecef; + --fsize-larger: 25px; + --font-family-primary: 'Montserrat', sans-serif; + --font-family-title: 'Rockwell' +} + +* { + scroll-behavior: smooth; +} + +body { + background-color: rgb(226, 218, 218); + font-family: var(--font-family-primary); + padding: 0; + margin: 0; +} + +a { + text-decoration: none; + color: white; +} + +*>* { + box-sizing: border-box; +} + +header { + overflow: hidden; +} + +p { + font-family: var(--font-family-primary); +} + + +/* Styling for page translation popup */ + +address, +span, +.phone, +.email, +.mt-2 { + color: #ffffff; + font-weight: 100; +} + +.secondary-title span { + color: #000000; +} + +.noload { + display: none; +} + +.loadElement { + display: block; +} + + +/* global styling */ + +.far, +.fas, +.fab { + padding-left: 5px; + padding-right: 5px; +} + +.text-light { + color: var(--light); +} + +.text-secondary { + color: var(--dark); +} + +.text-dark { + color: var(--dark); +} + +.text-primary { + color: var(--primary-color); +} + +.bg-light { + background-color: var(--light); +} + +.bg-shadow { + background-color: var(--secondary); +} + +.container { + max-width: 1200px; + height: 90px; + padding: 0 15px; + padding-bottom: 5%; + margin: auto; +} + +.img-fluid { + width: 100% +} + +.text-title { + font-family: var(--font-family-title); + font-weight: 150; + transition: all 0.2s ease-in-out; +} + +.text-title:hover { + font-size: 28px; +} + +.col-3 .text-title:hover { + font-size: 20px; +} + +.secondary-title { + font-family: sans-serif; +} + +.display-1 { + font-size: 22px; +} + +.display-2 { + font-size: 16px; +} + +.display-3 { + font-size: 14px; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.btn { + padding: 15px 20px; + border: none; + background-color: rgb(194, 194, 194); +} + +.btn-primary { + border-radius: 4px; + background-color: rgb(238, 49, 49); +} + +.content { + font-family: var(--font-family-primary); +} + +.object-fit { + max-height: 120px; + height: 80px; + width: 80px; + object-fit: fill; +} + +.d-flex { + display: flex; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.justify-content-center { + justify-content: center; +} + +.justify-content-between { + justify-content: space-between; +} + +.mt-2 { + margin-top: 10px; +} + +.mt-3 { + margin-top: 50px; +} + +.mb-3 { + margin-bottom: 30px; +} + +.m-0 { + margin: 0; +} + +.mt-l { + margin-left: 175px; +} + +.mt-ll { + margin-left: 135px; +} + +.px-1 { + padding-left: 5px; + padding-right: 5px; +} + +.px-2 { + padding-left: 20px; + padding-right: 20px; +} + +.py-1 { + padding-top: 10px; + padding-bottom: 10px; +} + +.py-2 { + padding-top: 20px; + padding-bottom: 20px; +} + +.py-3 { + padding-top: 30px; + padding-bottom: 30px; +} + +.thumbnail { + width: 100%; + height: 500px; + object-fit: cover; +} + +.rounded { + height: 120px; + width: 120px; + object-fit: fill; + border-radius: 99px; +} + +.shadow { + box-shadow: rgba(32, 47, 131, 0.781) 0 8px 24px; + overflow: visible; +} + + +/* Navigation Menu */ + +.navbar { + position: relative; + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px; + overflow: visible; +} + +.nav-brand { + font-family: var(--font-family-title); + font-weight: bold; + align-self: center; + font-size: 32px; +} + +.collapse { + align-self: center; +} + +.nav-link { + font-size: 18px; + margin: 12px; + color: var(--dark); + font-family: var(--font-family-primary); +} + +.search-box { + display: inline; + padding-right: 12px; + margin-right: 10px; +} + +.toggle-button { + font-size: 21px; + background-color: transparent; + border: none; + position: absolute; + right: 0; + margin: 8px 10px; + display: none; +} + +.toggle-button:focus { + outline: none; +} + +.dropdown { + display: inline-block; +} + +.dropdownBtn { + background: transparent; + border: none; + font-size: 18px; + font-family: inherit; + color: var(--dark); +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); + z-index: 1; + transition: none; +} + +.dropdown-content button { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; + transition: none; + font-family: inherit; + border: none; + background: transparent; + width: 100%; +} + +.dropdown-content button:hover { + cursor: pointer; + background: #bab9b6; +} + +.dropdown:hover .dropdown-content { + display: block; +} + + +/* Main Section */ + +#site-main { + margin-top: 8em; + overflow: hidden; +} + +#posts { + margin-bottom: 5em; +} + +.grid { + margin: 0 auto; +} + +.grid .grid-item { + width: calc(20% - 20px); + margin-bottom: 3em; + box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.8); + border-radius: 10px; + border: 5px solid #ffffff; + background: #ffffff; + transition: all 0.2s ease-in-out; +} + +.grid .grid-arc-item { + width: calc(20% - 34px); +} + +.grid .grid-item:hover { + box-shadow: 10px 10px 12px 0 rgba(0, 0, 0, 0.8); +} + +.overflow-img .img-fluid { + border-radius: 10px; +} + + +/* Swiper Slide Overlay styling */ + +.slider-img-wrapper { + position: relative; + width: 100%; +} + +.slider-img-wrapper img { + display: block; + width: 100%; + height: auto; +} + +.slider-img-overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + width: 100%; + opacity: 0; + transition: .5s ease; + background-color: #525252; +} + +.slider-img-wrapper:hover .slider-img-overlay { + opacity: 0.7; +} + +.overlay-text { + color: #ffffff; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + font-family: var(--font-family-title); + font-size: var(--fsize-larger); +} + +/* form */ + /* Bordered form */ + form { + margin-left: 500px; + margin-top: 20px; + width: 500px; + } + + /* Full-width inputs */ + input[type=text], input[type=password] { + border-radius: 12px; + width: 100%; + padding: 12px 20px; + margin: 8px 0; + + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; + } + + input[type=email]{ + border-radius: 12px; + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; + } + + /* Set a style for all buttons */ + button { + border-radius: 12px; + background-color: var(--primary-color); + color: white; + padding: 14px 20px; + margin: 8px 0; + margin-left: 120px; + border: none; + cursor: pointer; + width: 50%; + } + + /* Add a hover effect for buttons */ + button:hover { + opacity: 0.8; + } + + /* Extra style for the cancel button (red) */ + .loginbtn { + margin-top: 0px; + margin-left: 185px; + width: 100px; + background-color: var(--primary-color); + } + + /* Center the avatar image inside this container */ + .imgcontainer { + text-align: center; + margin: 24px 0 12px 0; + } + + .flexboxContainer{ + display: flex; + flex-direction: row; + justify-content: center; + justify-content: space-evenly; + align-items: center; + } + + /* Avatar image */ + img.avatar { + width: 40%; + border-radius: 50%; + } + + /* Add padding to containers */ + .containerForm { + margin-top: 70px; + padding: 20px; + } + + /* The "Forgot password" text */ + span.psw { + float: right; + padding-top: 16px; + } + + /* Change styles for span and cancel button on extra small screens */ + @media screen and (max-width: 300px) { + span.psw { + display: block; + float: none; + } + .cancelbtn { + width: 100%; + } + } +/* footer */ + +#footer { + padding-top: 4em; + background-color: rgb(255, 38, 0); +} + +#footer .feature-post .flex-item { + margin-bottom: 10px; +} + +#footer .tags a { + border-radius: 40px; + padding: 10px 20px; + font-size: 15px; +} + +#footer .copyrights { + padding: 10px 0; + border-top: 2px solid var(--light); +} + + +/* article page */ + +#post { + padding: 0 2em; + margin-bottom: 4em; +} + +.post-footer .post-author { + position: relative; + margin-top: 4em; + background-color: rgb(204, 204, 204); +} + +.post-footer .post-author::after { + background-color: rgb(226, 218, 218); + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4em; + z-index: 0; +} + +.post-footer .post-author .author-avatar { + margin: 0 auto; + margin-bottom: 1em; + position: inherit; + z-index: 1; +} + +.post-footer .post-comments .reply { + padding-left: 7em; +} + +.form-control { + width: 100%; + border: 2px solid var(--border); + padding: 1em; + font-size: 18px; + margin-right: 10px; + font-family: var(--font-family-primary); +} + +.title-secondary a { + color: #000000; + text-decoration: underline; +} + + +/* sidebar page(not used) */ + +#sidebar .categories a { + padding: 1em 3em; + font-size: 18px; + margin-bottom: 1em; + background-color: var(--light); + border-radius: 99px; +} + +#sidebar .categories a:hover { + background-color: var(--primary-color); + color: var(--light); +} + + +/* sticky */ + +.sticky { + position: fixed; + top: 0; + z-index: 99; + width: 100% +} + + +/* Articles only */ + +.author-avatar img { + transition: all 0.2s ease-in-out; +} + +.author-avatar img:hover { + transform: scale(1.5); +} + +.form-control:hover, +.submitBtn { + cursor: not-allowed; +} + + +/* Media Queries for responsive deign */ + +.row { + display: flex; +} + +.col-3 { + flex: 0 0 33.3333%; + max-width: 33.3333%; + padding-right: 35px; +} + +.col-8 { + flex: 0 0 70%; + max-width: 70%; +} + +.col-4 { + flex: 0 0 30%; + max-width: 30%; +} + +@media(max-width: 1024px) { + .row { + flex-wrap: wrap; + } + .col-3 { + flex: 0 0 50%; + max-width: 50%; + } + .col-8 { + flex: 0 0 100%; + max-width: 100%; + } + .col-4 { + flex: 0 0 100%; + max-width: 100%; + } +} + +@media(max-width: 992px) { + .navbar { + flex-direction: column; + } + #site-main { + margin-top: 14em; + } +} + +@media(max-width: 768px) { + .grid .grid-item { + width: calc(50% - 100px) + } + .col-3 { + flex: 0 0 100%; + max-width: 100%; + } +} + +@media(max-width: 574px) { + .toggle-button { + display: initial; + } + .collapse { + max-height: 0; + overflow: hidden; + transition: all 0.8s cubic-bezier(0.51, -0.15, 0, 0.98); + } + .collapse .nav-link { + display: block; + text-align: center; + float: left; + } + #google_translate_element { + display: inline-block; + } + .search-box { + border-right: none; + } + .collapse-toggle { + max-height: 500px; + } + .grid .grid-item { + width: calc(100% - 20px) + } + #site-main { + margin-top: 6em; + } +} \ No newline at end of file From 58c15511ed9d0bf564b69a13e5f59bc249a8edfd Mon Sep 17 00:00:00 2001 From: Kanishk Date: Thu, 18 Nov 2021 15:02:22 +0530 Subject: [PATCH 2/7] fixed styling errors --- Sign-In Form/Log-Style.css | 2 +- Sign-In Form/sign-Style.css | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/Sign-In Form/Log-Style.css b/Sign-In Form/Log-Style.css index c7c12cb..9e22b63 100644 --- a/Sign-In Form/Log-Style.css +++ b/Sign-In Form/Log-Style.css @@ -494,7 +494,7 @@ span, /* Center the avatar image inside this container */ .imgcontainer { text-align: center; - margin: 24px 0 12px 0; + margin: 24px 0 12px; } /* Avatar image */ diff --git a/Sign-In Form/sign-Style.css b/Sign-In Form/sign-Style.css index 5f392d2..5fc13d2 100644 --- a/Sign-In Form/sign-Style.css +++ b/Sign-In Form/sign-Style.css @@ -483,7 +483,6 @@ span, /* Extra style for the cancel button (red) */ .loginbtn { - margin-top: 0px; margin-left: 185px; width: 100px; background-color: var(--primary-color); @@ -492,7 +491,7 @@ span, /* Center the avatar image inside this container */ .imgcontainer { text-align: center; - margin: 24px 0 12px 0; + margin: 24px 0 12px; } .flexboxContainer{ From 699e65d4eb07f1afb62a09d6e54373104e3cb6cd Mon Sep 17 00:00:00 2001 From: HEENA MALHOTRA Date: Thu, 18 Nov 2021 21:10:51 +0530 Subject: [PATCH 3/7] styled for more devices --- Sign-In Form/Log-Style.css | 3 +-- Sign-In Form/sign-Style.css | 20 ++++---------------- index.html | 1 + 3 files changed, 6 insertions(+), 18 deletions(-) diff --git a/Sign-In Form/Log-Style.css b/Sign-In Form/Log-Style.css index 9e22b63..fe6edd3 100644 --- a/Sign-In Form/Log-Style.css +++ b/Sign-In Form/Log-Style.css @@ -432,8 +432,7 @@ span, /* form */ /* Bordered form */ form { - margin-left: 500px; - margin-top: 100px; + margin: auto; width: 500px; } diff --git a/Sign-In Form/sign-Style.css b/Sign-In Form/sign-Style.css index 5fc13d2..03cfe74 100644 --- a/Sign-In Form/sign-Style.css +++ b/Sign-In Form/sign-Style.css @@ -24,7 +24,7 @@ body { background-color: rgb(226, 218, 218); font-family: var(--font-family-primary); padding: 0; - margin: 0; + margin: auto; } a { @@ -436,8 +436,8 @@ span, /* form */ /* Bordered form */ form { - margin-left: 500px; - margin-top: 20px; + margin:auto; + width: 500px; } @@ -488,12 +488,6 @@ span, background-color: var(--primary-color); } - /* Center the avatar image inside this container */ - .imgcontainer { - text-align: center; - margin: 24px 0 12px; - } - .flexboxContainer{ display: flex; flex-direction: row; @@ -502,15 +496,9 @@ span, align-items: center; } - /* Avatar image */ - img.avatar { - width: 40%; - border-radius: 50%; - } - /* Add padding to containers */ .containerForm { - margin-top: 70px; + margin: auto; padding: 20px; } diff --git a/index.html b/index.html index db66ab2..b4f34bd 100644 --- a/index.html +++ b/index.html @@ -55,6 +55,7 @@ + Se déconnecter From 5b95ea41ae9bdcb23945df3e76b1c6f568977967 Mon Sep 17 00:00:00 2001 From: Kanishk Date: Fri, 19 Nov 2021 09:50:02 +0530 Subject: [PATCH 4/7] added margin auto and width auto --- Sign-In Form/Log-Style.css | 1 + Sign-In Form/sign-Style.css | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Sign-In Form/Log-Style.css b/Sign-In Form/Log-Style.css index fe6edd3..05b102e 100644 --- a/Sign-In Form/Log-Style.css +++ b/Sign-In Form/Log-Style.css @@ -270,6 +270,7 @@ span, font-weight: bold; align-self: center; font-size: 32px; + width: auto; } .collapse { diff --git a/Sign-In Form/sign-Style.css b/Sign-In Form/sign-Style.css index 03cfe74..72bed2e 100644 --- a/Sign-In Form/sign-Style.css +++ b/Sign-In Form/sign-Style.css @@ -436,8 +436,7 @@ span, /* form */ /* Bordered form */ form { - margin:auto; - + margin:auto; width: 500px; } From 85633c2e69884fb322117ab939882ad0a60ca07a Mon Sep 17 00:00:00 2001 From: Kanishk Date: Fri, 19 Nov 2021 10:38:32 +0530 Subject: [PATCH 5/7] added width auto to navbar and container --- Sign-In Form/Log-Style.css | 3 ++- Sign-In Form/sign-Style.css | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/Sign-In Form/Log-Style.css b/Sign-In Form/Log-Style.css index 05b102e..9c81d6b 100644 --- a/Sign-In Form/Log-Style.css +++ b/Sign-In Form/Log-Style.css @@ -103,7 +103,7 @@ span, } .container { - max-width: 1200px; + max-width: auto; height: 90px; padding: 0 15px; padding-bottom: 5%; @@ -263,6 +263,7 @@ span, justify-content: center; padding: 10px; overflow: visible; + width: auto; } .nav-brand { diff --git a/Sign-In Form/sign-Style.css b/Sign-In Form/sign-Style.css index 72bed2e..47a9049 100644 --- a/Sign-In Form/sign-Style.css +++ b/Sign-In Form/sign-Style.css @@ -103,7 +103,7 @@ span, } .container { - max-width: 1200px; + max-width: auto; height: 90px; padding: 0 15px; padding-bottom: 5%; From caff674aadcad10cde9da6afe2dc4e69f5b8ad12 Mon Sep 17 00:00:00 2001 From: Kanishk Date: Fri, 19 Nov 2021 10:46:26 +0530 Subject: [PATCH 6/7] Fixed link in sign up --- Sign-In Form/SignUp.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sign-In Form/SignUp.html b/Sign-In Form/SignUp.html index 5ad794e..c85b662 100644 --- a/Sign-In Form/SignUp.html +++ b/Sign-In Form/SignUp.html @@ -41,7 +41,7 @@

Already a user?

- + \ No newline at end of file From 278116ae471caa5be8de452ed915dede28499cac Mon Sep 17 00:00:00 2001 From: Kanishk Date: Fri, 19 Nov 2021 10:52:08 +0530 Subject: [PATCH 7/7] fixed link in SignUp --- Sign-In Form/SignUp.html | 2 +- Sign-In Form/sign-Style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Sign-In Form/SignUp.html b/Sign-In Form/SignUp.html index c85b662..cc3e8f1 100644 --- a/Sign-In Form/SignUp.html +++ b/Sign-In Form/SignUp.html @@ -38,7 +38,7 @@ - +

Already a user?

diff --git a/Sign-In Form/sign-Style.css b/Sign-In Form/sign-Style.css index 47a9049..ea84119 100644 --- a/Sign-In Form/sign-Style.css +++ b/Sign-In Form/sign-Style.css @@ -103,7 +103,7 @@ span, } .container { - max-width: auto; + width: auto; height: 90px; padding: 0 15px; padding-bottom: 5%;