英文:
CSS Background Gradient Not Covering the Whole Page Including Scrollable Content
问题
I've translated the provided text. Here's the translation:
我在我的HTML文档中遇到了一个CSS背景渐变的问题。我设计了一个页面，使用线性渐变作为背景，并将其设置在body元素上。我面临的问题是，渐变似乎在屏幕最初结束的地方结束，尽管还有更多内容要滚动查看。结果，当您向下滚动时，似乎会重新开始第二个渐变实例。
这是我的当前CSS（SCSS）代码：
[代码部分不予翻译]
期望的行为是渐变始终覆盖整个屏幕，包括因需要滚动而未能初始显示的内容。我希望避免出现两个渐变实例。实质上，渐变应该适应屏幕的高度，即使是滚动后的高度也要包括在内。
我尝试使用不同的CSS属性和值，如height: auto;和min-height: 100%;，但似乎没有起作用。我还尝试了no-repeat，但这只会显示一个红色矩形。任何帮助将不胜感激！以下是HTML代码，以便您可以复制错误：
[HTML代码部分不予翻译]
英文:
I'm experiencing a problem with a CSS background gradient in my HTML document. I have designed a page that uses a linear gradient as a background, and I've set it on the body element. The issue I'm facing is that the gradient seems to end where the screen ends initially, even though there's more content to scroll through. As a result, when you scroll down, a second instance of the gradient appears to start over again.
Here's my current CSS (SCSS) code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
min-height: 100vh;
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100));
color: whitesmoke;
font-family: 'Poppins', sans-serif;
}
img {
max-width: 28%;
border-radius: 50%;
}
.container {
height: auto;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 0.25fr 3fr;
gap: 3%;
padding: 3%;
box-sizing: border-box;
}
.content-left, .content-right {
display: flex;
align-items: center;
justify-content: center;
}
.slogan {
grid-column: span 2;
font-size: 1.5em;
display: flex;
align-items: top;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.container-form {
height: auto;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30px; // Add space at the bottom
}
input, textarea, select {
border: 2px solid whitesmoke;
background-color: rgba(255, 255, 255, 0.1);
color: whitesmoke;
}
input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) {
border: 2px solid red;
}
input:invalid:focus:not(:placeholder-shown), textarea:invalid:focus:not(:placeholder-shown) {
outline: none;
}
input:invalid:not(:placeholder-shown)::placeholder, textarea:invalid:not(:placeholder-shown)::placeholder {
color: red;
}
#register-form:invalid:not(:placeholder-shown) ~ #popup {
display: block;
}
button, input[type=submit] {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover, input[type=submit]:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.form-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.form-control {
background-color: transparent !important;
color: whitesmoke !important;
border-color: whitesmoke;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#login-button {
background-color: transparent;
border: 2px solid whitesmoke;
color: whitesmoke;
}
#login-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
The expected behavior is for the gradient to always cover the whole screen, including the content that is not initially visible because it has to be scrolled to. I would like to avoid having two instances of the gradient. Essentially, the gradient should adapt to the height of the screen, even the scrolled height.
I've tried using different CSS properties and values such as height: auto; and min-height: 100%; but these didn't seem to work. I also tried no-repeat but what this does is to show a write rectangle instead. Any help would be appreciated!
Here's the HTML in case you need it to replicate the error:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Register</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="../assets/icons/social.png"/>
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/register.css">
</head>
<body>
<div class="container">
<div class="content-left">
<img src="../assets/images/logo.jpeg" alt="logo">
</div>
<div class="content-right">
<h1>Stockify</h1>
</div>
<div class="slogan">
<h2>The smart way</h2>
</div>
<div class="container-form">
<form id="register-form" action="index.html" class="form-container">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number:</label>
<input type="tel" id="phone" name="phone" class="form-control">
</div>
<div class="mb-3">
<label for="subscription" class="form-label">Subscription Plan:</label>
<select id="subscription" name="subscription" class="form-control" required></select>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="button-container">
<button id="login-button" class="btn btn-primary" type="button" onclick="redirectToLogin()">Login</button>
<input type="submit" value="Register" onclick=sendLoginRequest() class="btn btn-primary">
</div>
</form>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
<script src="../javascript/register.js"></script>
<script src="../javascript/cookie.js"></script>
</body>
</html>
Demo in snippet below:
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
min-height: 100vh;
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100));
color: whitesmoke;
font-family: 'Poppins', sans-serif;
}
img {
max-width: 28%;
border-radius: 50%;
}
.container {
height: auto;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 0.25fr 3fr;
gap: 3%;
padding: 3%;
box-sizing: border-box;
}
.content-left,
.content-right {
display: flex;
align-items: center;
justify-content: center;
}
.slogan {
grid-column: span 2;
font-size: 1.5em;
display: flex;
align-items: top;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.container-form {
height: auto;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30px; // Add space at the bottom
}
input,
textarea,
select {
border: 2px solid whitesmoke;
background-color: rgba(255, 255, 255, 0.1);
color: whitesmoke;
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
border: 2px solid red;
}
input:invalid:focus:not(:placeholder-shown),
textarea:invalid:focus:not(:placeholder-shown) {
outline: none;
}
input:invalid:not(:placeholder-shown)::placeholder,
textarea:invalid:not(:placeholder-shown)::placeholder {
color: red;
}
#register-form:invalid:not(:placeholder-shown)~#popup {
display: block;
}
button,
input[type=submit] {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover,
input[type=submit]:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.form-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.form-control {
background-color: transparent !important;
color: whitesmoke !important;
border-color: whitesmoke;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#login-button {
background-color: transparent;
border: 2px solid whitesmoke;
color: whitesmoke;
}
#login-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
<!-- language: lang-html -->
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<div class="container">
<div class="content-left">
<img src="../assets/images/logo.jpeg" alt="logo">
</div>
<div class="content-right">
<h1>Stockify</h1>
</div>
<div class="slogan">
<h2>The smart way</h2>
</div>
<div class="container-form">
<form id="register-form" action="index.html" class="form-container">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number:</label>
<input type="tel" id="phone" name="phone" class="form-control">
</div>
<div class="mb-3">
<label for="subscription" class="form-label">Subscription Plan:</label>
<select id="subscription" name="subscription" class="form-control" required></select>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="button-container">
<button id="login-button" class="btn btn-primary" type="button" onclick="redirectToLogin()">Login</button>
<input type="submit" value="Register" onclick=sendLoginRequest() class="btn btn-primary">
</div>
</form>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
<!-- end snippet -->
答案1
得分: 1
对于这个问题，只需将background-repeat和background-attachment属性设置为no-repeat和fixed。然后，将html和body标签的height属性设置为100%。类似的答案。
html {
height: 100%;
}
body {
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100)) no-repeat;
background-size: cover;
color: whitesmoke;
font-family: 'Poppins', sans-serif;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
英文:
For this issue, just include the background-repeat and background-attachment properties as no-repeat and fixed. Then, set the height property for the html and body tags to 100%. Similar answer
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
html {
height: 100%;
}
body {
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100)) no-repeat;
background-size: cover;
color: whitesmoke;
font-family: 'Poppins', sans-serif;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
img {
max-width: 28%;
border-radius: 50%;
}
.container {
height: auto;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 0.25fr 3fr;
gap: 3%;
padding: 3%;
box-sizing: border-box;
}
.content-left,
.content-right {
display: flex;
align-items: center;
justify-content: center;
}
.slogan {
grid-column: span 2;
font-size: 1.5em;
display: flex;
align-items: top;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.container-form {
height: auto;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30px; // Add space at the bottom
}
input,
textarea,
select {
border: 2px solid whitesmoke;
background-color: rgba(255, 255, 255, 0.1);
color: whitesmoke;
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
border: 2px solid red;
}
input:invalid:focus:not(:placeholder-shown),
textarea:invalid:focus:not(:placeholder-shown) {
outline: none;
}
input:invalid:not(:placeholder-shown)::placeholder,
textarea:invalid:not(:placeholder-shown)::placeholder {
color: red;
}
#register-form:invalid:not(:placeholder-shown)~#popup {
display: block;
}
button,
input[type=submit] {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover,
input[type=submit]:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.form-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.form-control {
background-color: transparent !important;
color: whitesmoke !important;
border-color: whitesmoke;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#login-button {
background-color: transparent;
border: 2px solid whitesmoke;
color: whitesmoke;
}
#login-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
<!-- language: lang-html -->
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<div class="container">
<div class="content-left">
<img src="../assets/images/logo.jpeg" alt="logo">
</div>
<div class="content-right">
<h1>Stockify</h1>
</div>
<div class="slogan">
<h2>The smart way</h2>
</div>
<div class="container-form">
<form id="register-form" action="index.html" class="form-container">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number:</label>
<input type="tel" id="phone" name="phone" class="form-control">
</div>
<div class="mb-3">
<label for="subscription" class="form-label">Subscription Plan:</label>
<select id="subscription" name="subscription" class="form-control" required></select>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="button-container">
<button id="login-button" class="btn btn-primary" type="button" onclick="redirectToLogin()">Login</button>
<input type="submit" value="Register" onclick=sendLoginRequest() class="btn btn-primary">
</div>
</form>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
<!-- end snippet -->
答案2
得分: 1
已添加了一个名为gradient-wrapper的类。
方法一：
使用gradient-wrapper类作为容器，并设置它覆盖整个视口的最小高度，通过linear-gradient属性创建背景渐变。这个容器允许滚动。
方法二：
使用一个名为gradient-background的类，它被添加在独立的容器上，这个容器位于内容容器的后面，使用position: fixed和z-index: -1来定位，并应用渐变背景，以确保它覆盖整个视口。
英文:
Added a gradient-wrapper class
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
margin: 0;
color: whitesmoke;
font-family: 'Poppins', sans-serif;
}
.gradient-wrapper {
min-height: 100vh;
/* Set the wrapper to cover the entire viewport */
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100));
background-attachment: fixed;
/* Fix the background gradient */
overflow: auto;
/* Enable scrolling on the wrapper */
}
.container {
height: 100%;
width: 100vw;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 0.25fr 3fr;
gap: 3%;
padding: 3%;
box-sizing: border-box;
}
img {
max-width: 28%;
border-radius: 50%;
}
.content-left,
.content-right {
display: flex;
align-items: center;
justify-content: center;
}
.slogan {
grid-column: span 2;
font-size: 1.5em;
display: flex;
align-items: top;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.container-form {
height: auto;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30px; // Add space at the bottom
}
input,
textarea,
select {
border: 2px solid whitesmoke;
background-color: rgba(255, 255, 255, 0.1);
color: whitesmoke;
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
border: 2px solid red;
}
input:invalid:focus:not(:placeholder-shown),
textarea:invalid:focus:not(:placeholder-shown) {
outline: none;
}
input:invalid:not(:placeholder-shown)::placeholder,
textarea:invalid:not(:placeholder-shown)::placeholder {
color: red;
}
#register-form:invalid:not(:placeholder-shown)~#popup {
display: block;
}
button,
input[type=submit] {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover,
input[type=submit]:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.form-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.form-control {
background-color: transparent !important;
color: whitesmoke !important;
border-color: whitesmoke;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#login-button {
background-color: transparent;
border: 2px solid whitesmoke;
color: whitesmoke;
}
#login-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
<!-- language: lang-html -->
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<div class="gradient-wrapper">
<div class="container">
<div class="content-left">
<img src="../assets/images/logo.jpeg" alt="logo">
</div>
<div class="content-right">
<h1>Stockify</h1>
</div>
<div class="slogan">
<h2>The smart way</h2>
</div>
<div class="container-form">
<form id="register-form" action="index.html" class="form-container">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number:</label>
<input type="tel" id="phone" name="phone" class="form-control">
</div>
<div class="mb-3">
<label for="subscription" class="form-label">Subscription Plan:</label>
<select id="subscription" name="subscription" class="form-control" required></select>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="button-container">
<button id="login-button" class="btn btn-primary" type="button" onclick="redirectToLogin()">Login</button>
<input type="submit" value="Register" onclick=sendLoginRequest() class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
<!-- end snippet -->
Approach two:
Using a separate container with the class gradient-background is added. It is positioned behind the content container using position: fixed and z-index: -1. The gradient is applied to this container, ensuring it covers the entire viewport.
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
margin: 0;
color: whitesmoke;
font-family: 'Poppins', sans-serif;
}
.gradient-background {
position: fixed;
/* Position the gradient container */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* Place it behind the content container */
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100));
}
.container {
min-height: 100vh;
/* Set the container to cover the entire viewport */
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 0.25fr 3fr;
gap: 3%;
padding: 3%;
box-sizing: border-box;
}
img {
max-width: 28%;
border-radius: 50%;
}
.content-left,
.content-right {
display: flex;
align-items: center;
justify-content: center;
}
.slogan {
grid-column: span 2;
font-size: 1.5em;
display: flex;
align-items: top;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.container-form {
height: auto;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30px; // Add space at the bottom
}
input,
textarea,
select {
border: 2px solid whitesmoke;
background-color: rgba(255, 255, 255, 0.1);
color: whitesmoke;
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
border: 2px solid red;
}
input:invalid:focus:not(:placeholder-shown),
textarea:invalid:focus:not(:placeholder-shown) {
outline: none;
}
input:invalid:not(:placeholder-shown)::placeholder,
textarea:invalid:not(:placeholder-shown)::placeholder {
color: red;
}
#register-form:invalid:not(:placeholder-shown)~#popup {
display: block;
}
button,
input[type=submit] {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover,
input[type=submit]:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.form-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.form-control {
background-color: transparent !important;
color: whitesmoke !important;
border-color: whitesmoke;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#login-button {
background-color: transparent;
border: 2px solid whitesmoke;
color: whitesmoke;
}
#login-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
<!-- language: lang-html -->
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<div class="gradient-background"></div>
<div class="container">
<div class="content-left">
<img src="../assets/images/logo.jpeg" alt="logo">
</div>
<div class="content-right">
<h1>Stockify</h1>
</div>
<div class="slogan">
<h2>The smart way</h2>
</div>
<div class="container-form">
<form id="register-form" action="index.html" class="form-container">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number:</label>
<input type="tel" id="phone" name="phone" class="form-control">
</div>
<div class="mb-3">
<label for="subscription" class="form-label">Subscription Plan:</label>
<select id="subscription" name="subscription" class="form-control" required></select>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="button-container">
<button id="login-button" class="btn btn-primary" type="button" onclick="redirectToLogin()">Login</button>
<input type="submit" value="Register" onclick=sendLoginRequest() class="btn btn-primary">
</div>
</form>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论