feat: add logo + transparent box

This commit is contained in:
Mike 2023-11-06 10:03:59 -05:00
parent 29de4c689e
commit 1a70958fc3
3 changed files with 28 additions and 4 deletions

View file

@ -7,6 +7,12 @@
margin: 0;
}
/* .sidebar {
position: relative;
} */
.form {
width: 60vw;
}
@ -72,9 +78,23 @@
background-repeat: no-repeat;
height: 100%;
}
.logo {
position: relative;
background-color: rgb(22, 72, 99, 0.7);
top: 35vh;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.logo img {
height: 14vh;
}
}
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}

View file

@ -5,18 +5,22 @@
<title>Join Our Awesome Mailing list!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,900&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="logo logo-photo"></div>
<div class="logo logo-text"></div>
<div class="logo logo-text">
<img src="static/logo.png" alt="" srcset="">
</div>
</div>
<div class="form">
<h1 class="call-to-action">Join our mailing list!</h1>
<form action="" method="post">
<form action="" method="#">
<div class="form-input">
<label for="name">NAME</label>
<input type="text" name="name" id="name" placeholder="Enter your name." required>
@ -34,7 +38,7 @@
<input type="password" name="password_confirmation" id="password_confirmation" required
minlength="8">
</div>
<div class="form-input">
<div class="form-button">
<button type="submit">Sign Up</button>
</div>
</form>

BIN
signup_form/static/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 261 KiB