smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 06:20:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add logo + transparent box

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

20
signup_form/css/style.css
View file

@ -7,6 +7,12 @@
margin: 0; margin: 0;
} }
/* .sidebar {
position: relative;
} */
.form { .form {
width: 60vw; width: 60vw;
} }
@ -72,9 +78,23 @@
background-repeat: no-repeat; background-repeat: no-repeat;
height: 100%; 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 { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Montserrat', sans-serif;
} }

12
signup_form/index.html
View file

@ -5,18 +5,22 @@
<title>Join Our Awesome Mailing list!</title> <title>Join Our Awesome Mailing list!</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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"> <link href="css/style.css" rel="stylesheet">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="sidebar"> <div class="sidebar">
<div class="logo logo-photo"></div> <div class="logo logo-text">
<div class="logo logo-text"></div> <img src="static/logo.png" alt="" srcset="">
</div>
</div> </div>
<div class="form"> <div class="form">
<h1 class="call-to-action">Join our mailing list!</h1> <h1 class="call-to-action">Join our mailing list!</h1>
<form action="" method="post"> <form action="" method="#">
<div class="form-input"> <div class="form-input">
<label for="name">NAME</label> <label for="name">NAME</label>
<input type="text" name="name" id="name" placeholder="Enter your name." required> <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 <input type="password" name="password_confirmation" id="password_confirmation" required
minlength="8"> minlength="8">
</div> </div>
<div class="form-input"> <div class="form-button">
<button type="submit">Sign Up</button> <button type="submit">Sign Up</button>
</div> </div>
</form> </form>

BIN
signup_form/static/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 261 KiB