diff --git a/Animated profile card/style.css b/Animated profile card/style.css index 96bd724..7791c4b 100644 --- a/Animated profile card/style.css +++ b/Animated profile card/style.css @@ -1,9 +1,16 @@ +:root { + --color-1 : #F7F7F7; + --color-2: #FCC61D; + --color-3: #C59560; + --color-4 : #3338A0; +} /* center card */ body { margin: 0; font-family: tahoma; height: 100vh; - background: #f5f5f5; + /* background: #f5f5f5; */ + background-color: var(--color-4); display: flex; justify-content: center; align-items: center; @@ -39,7 +46,7 @@ body { width: 100%; height: 0; border-radius: 50%; - background-color: #1f1b1b; + background-color: var(--color-3); position: absolute; bottom: 135%; right: 0; @@ -58,7 +65,7 @@ body { width: 100%; height: 100%; border-radius: 50%; - background-color: #1f1b1b; + background-color: var(--color-2); position: absolute; top: 0; left: 0%; @@ -74,7 +81,7 @@ body { transition: all 0.9s ease 0s; } .card:hover .picture img { - box-shadow: 0 0 0 14px #f7f5ec; + box-shadow: 0 0 0 14px var(--color-1); transform: scale(0.7); } @@ -89,7 +96,7 @@ body { .card .main-content .title { display: block; font-size: 15px; - color: #1f1b1b; + color: var(--color-4); text-transform: capitalize; margin: 5px 37px 0; } @@ -108,7 +115,7 @@ body { width: 100%; padding: 0; margin: 0; - background-color: #1f1f1b; + background-color: var(--color-3); position: absolute; /* 3.5 */ bottom: -100px; @@ -138,8 +145,8 @@ body { /* 3.4 */ .card .social li a:hover { - color: #3e3b44; - background-color: #f7f5ec; + color: var(--color-3); + background-color: var(--color-4); transition: 0.5s; } @@ -169,9 +176,10 @@ body { /* 4.4 */ .skills ul li:hover { - background-color: #1f1b1b; - color: #fff; + background-color: var(--color-3); + color: var(--color-4); cursor: pointer; - transition: 0.5s; + transform: scale(1.1); + transition: 0.1s ease-in-out; } \ No newline at end of file diff --git a/Responsive login form/index.html b/Responsive login form/index.html index 3432753..98bd09e 100644 --- a/Responsive login form/index.html +++ b/Responsive login form/index.html @@ -8,7 +8,7 @@ Login form - +
@@ -16,11 +16,11 @@

Sign Into Account

- +
- +
diff --git a/Responsive login form/style.css b/Responsive login form/style.css index 2bcb392..802ad43 100644 --- a/Responsive login form/style.css +++ b/Responsive login form/style.css @@ -7,119 +7,107 @@ box-sizing: border-box; } +body { + background-color: rgb(197, 233, 255); +} + .contact-container { - background-image: url(images/bg.svg); - background-size: cover; + width: 100vw; height: 100vh; + display: flex; + align-items: center; + justify-content: center; + /* padding: 15%; */ } - -.right { - position: absolute; - width: 360px; - left: 60%; - height: 580px; - top: calc(50% - 580px / 2); - background: #ffffff; - border-radius: 25px; +.right{ + width: 40%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 1rem; + font-size: 1rem; text-align: center; } - -.title { - font-family: Sansation; - font-style: normal; - font-weight: bold; - font-size: 25px; - line-height: 145px; - align-items: center; - font-family: "Sansation", sans-serif; - color: #5754dd; +.title{ + font-size: 3em; + display: inline-block; + line-height: 1em; + font-family: 'Scheherazade New', sans-serif; + /* padding-block: .5em; */ + } - -.logo { - width: 120px; - height: 120px; - margin-top: -40px; +.logo{ + width: 30%; } - -input[type="email"], -input[type="password"] { - border: none; - outline: none; - background: none; - font-size: 20px; - color: #85b6ff; - padding: 20px 10px 20px 5px; - border: 2px solid #568aee; - width: 280px; - height: 45px; - margin: 15px; - border-radius: 25px; - box-sizing: border-box; - text-align: center; - overflow: hidden; - font-family: "Scheherazade New", serif; +.form-container{ + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 1rem; + border-radius: 15px } +.username, .password{ + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: .5rem; + border-radius: 10px; + border: 2px solid black; + padding: .5rem; -input[type="checkbox"] { - vertical-align: middle; - margin-right: 3px; - margin-bottom: 3px; - font-weight: bold; - height: 18px; - width: 18px; } - -::placeholder { - color: #85b6ff; - font-size: 18px; +.username input, .password input{ + width: 100%; + height: 2em; + border: none; + background: transparent; } - -.icon { - position: absolute; - padding: 24px 32px; - height: 75px; - width: 90px; +input::placeholder{ + height: 1em; + color: gray; + border: none; + outline: none; + background: transparent; } - -.keepme { - margin: 15px; - color: #71a1bd; - font-family: "Scheherazade New", serif; - font-weight: bold; +.keepme{ + width: 100%;; + display: flex; + align-items: center; + justify-content: center; + gap: .5rem; +; } - -button { - width: 260px; - height: 45px; - left: 1273px; - top: 780px; - font-family: "Sansation", sans-serif; - font-style: normal; - font-weight: bold; - font-size: 20px; - line-height: 28px; - cursor: pointer; - color: #ffffff; +button{ + width: 100%; + font-size: 1em; + font-weight: 400; + /* padding-inline: 5em; */ + padding-block: 1em; + border-radius: 10px; border: none; - background: rgba(135, 113, 224, 0.89); - border-radius: 25px; -} - -.link { - text-align: center; - display: block; - margin: 18px; - color: #71a1bd; - font-family: "Scheherazade New", serif; - font-weight: bold; - text-decoration: none; + background-color: rgb(38, 140, 199); + color: white; + cursor: pointer; +; } - -@media only screen and (max-width: 700px) { - .contact-container { - background: linear-gradient(138.56deg, #318adc 23.44%, #88183a 89.5%); - } - .right { - left: calc(68% - 500px / 2); +@media (max-width: 968px) { + .right{ + width: 40%; + font-size: .8rem; + gap: 2em; } + } +@media (max-width: 768px) { + .right{ + width: 60%; + font-size: .6rem; + gap: 2em; + +} \ No newline at end of file