If at all possible what I'd like to do is split the page into 3 sections and and have each button take up an entire section so its easy to click.
I have these set up how I thought it would work displaying the buttons like so:
Last
Next
Stop
What I end up with is completely wrong for some reason. It displays Last and Stop on the bottom over the page ontop of one another.
Code:
#keyframes hue {
0% {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(-360deg);
-webkit-filter: hue-rotate(-360deg);
}
}
.canvas-container{
position: relative;
width: 100%;
height: 100%;
}
#freq {
background: linear-gradient(#ff0088, red);
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
body {
background:#000;
overflow: hidden;
}
#freq.animateHue, body.animateHue {
animation-name: hue;
animation-duration: 500s;
animation-delay: 1s;
animation-iteration-count: infinite;
-webkit-animation-name: hue;
-webkit-animation-duration: 500s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
}
#title, #artist, #album {
position: relative;
text-align: center;
width: 100%;
z-index: 999;
font-weight: 100;
font-family: "Roboto", sans-serif;
/*font-size: 100px;*/
color: #fff;
visibility: hidden;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
margin-bottom: 15px;
}
#song_info_wrapper {
position: absolute;
width: 100%;
text-align: center;
}
#title {
font-size: 10vw;
}
#artist {
font-size: 3vw;
}
#album {
font-size: 3vw;
/*font-size: 40px;*/
margin-bottom: 0;
}
input, #loading {
position: absolute;
top: 45%;
left: 40%;
display: block;
z-index: 999;
}
#songName {
position: absolute;
top: 80%;
right: 19%;
display: block;
z-index: 999;
width: 100%;
font-weight: 100;
font-family: "Roboto", sans-serif;
/*font-size: 100px;*/
color: #fff;
letter-spacing: -.05em;
text-shadow: 0px 0px 10px rgba(20, 20, 20, 20);
margin-bottom: 15px;
font-size: 3vw;
}
#c1, #c2 {
width: 33%;
}
#c3 {
width: auto;
}
#playSampleButton {
padding: 10px 25px;
font-size: 13vw;
height: 100%;
width: 100%;
color: #fff;
font-family: "Roboto", sans-serif;
z-index: 999;
position: relative;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
margin: auto;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
#buttonSmall {
padding: 10px 25px;
font-size: 10vw;
height: 100%;
width: 100%;
color: #fff;
font-family: "Roboto", sans-serif;
z-index: 999;
position: absolute;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
#buttonStop {
padding: 10px 25px;
font-size: 10vw;
height: 100%;
width: 100%;
color: #fff;
font-family: "Roboto", sans-serif;
z-index: 999;
position: absolute;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
#loading {
display: inline-block;
top: 44px;
left: 110px;
font-family: "Roboto", sans-serif;
font-size: 12px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#media screen and (min-width: 1000px) {
#title {
font-size: 100px;
}
#artist, #album {
font-size: 40px;
}
}
#media screen and (max-width: 500px) {
#artist, #album {
font-weight: 300;
font-size: 4vw;
}
}
#media screen and (max-width: 436px) {
#artist, #album {
font-weight: 300;
font-size: 4.5vw;
}
#title {
}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content='IE=8' http-equiv='X-UA-Compatible'>
<title>Frequcency analysis using HTML5 Audio and Web Audio API</title>
<meta name="viewport" content="width=device-width">
<!-- Das favicon.ico und das apple-touch-icon.png in das root Verzeichnis -->
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="src/bufferloader.js"></script>
<script src="src/id3-minimized.js"></script>
<script src="src/audiovisualisierung.js"></script>
</head>
<body>
<p class="songName" id="songName"></p>
<span id="loading"></span>
<div id="song_info_wrapper">
</div>
<div class="canvas-container">
<canvas id="freq" width="1024" height="525"></canvas>
<div id="c3">
<button id="playSampleButton" type="button" onClick="playNext()">Next</button>
</div>
<div id="c1">
<button id="buttonSmall" type="button" onClick="playLast()">Last</button>
</div>
<br />
<br />
<div id="c2">
<button id="buttonStop" type="button" onClick="playStop()">Stop</button>
</div>
</div>
</body>
</html>
The problem is your button heights and the heights of the divs they are in. First, you have not given the c1/c2/c3 containers a height, so setting the button height to 100% will not work - they are 100% of undefined.
Below, I did not completely solve this for you, but I did over-ride the heights for these elements and you can see the difference (you'll need to look at the demo "Full Page" (link at top-right) to see it...).
#c1, #c2, #c3{height:30vh !important;}
#playSampleButton,
#buttonSmall,
#buttonStop{height:20vh !important;}
html, body{width: 100%;height:100%;margin:0px;}
.canvas-container{position:relative;width:100%;height:100vh;}
#freq{background:linear-gradient(#ff0088, red);position:absolute;left:0;right:0;margin:0 auto;}
body{background:#000;overflow:hidden;}
#freq.animateHue, body.animateHue{animation-name:hue;animation-duration:500s;animation-delay:1s;animation-iteration-count:infinite;-webkit-animation-name:hue;-webkit-animation-duration:500s;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;}
#title, #artist, #album{position:relative;text-align:center;width:100%;z-index:999;font-weight:100;font-family:"Roboto", sans-serif;font-size:100px;color:#fff;visibility:hidden;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);margin-bottom:15px;}
#song_info_wrapper{position:absolute;width:100%;text-align:center;}
#title{font-size:10vw;}
#artist{font-size:3vw;}
#album{font-size:3vw;font-size:40px;margin-bottom:0;}
input, #loading{position:absolute;top:45%;left:40%;display:block;z-index:999;}
#songName{position:absolute;top:80%;right:19%;display:block;z-index:999;width:100%;font-weight:100;font-family:"Roboto", sans-serif;font-size:100px;color:#fff;letter-spacing:-.05em;text-shadow:0px 0px 10px rgba(20, 20, 20, 20);margin-bottom:15px;font-size:3vw;}
#c1, #c2{width:33%;}
#c3{width:auto;}
#playSampleButton{padding:10px 25px;font-size:13vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:relative;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);margin:auto;background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;}
#buttonSmall{padding:10px 25px;font-size:10vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:absolute;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;}
#buttonStop{padding:10px 25px;font-size:10vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:absolute;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;}
#loading{display:inline-block;top:44px;left:110px;font-family:"Roboto", sans-serif;font-size:12px;}
#keyframes hue{
0%{filter:hue-rotate(0deg);-webkit-filter:hue-rotate(0deg);}
100%{filter:hue-rotate(-360deg);-webkit-filter:hue-rotate(-360deg);}
}
#media screen and (min-width:1000px){
#title{font-size:100px;}
#artist, #album{font-size:40px;}
}
#media screen and (max-width:500px){
#artist, #album{font-weight:300;font-size:4vw;}
}
#media screen and (max-width:436px){
#artist, #album{font-weight:300;font-size:4.5vw;}
#title{}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content='IE=8' http-equiv='X-UA-Compatible'>
<title>Frequcency analysis using HTML5 Audio and Web Audio API</title>
<meta name="viewport" content="width=device-width">
<!-- Das favicon.ico und das apple-touch-icon.png in das root Verzeichnis -->
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="src/bufferloader.js"></script>
<script src="src/id3-minimized.js"></script>
<script src="src/audiovisualisierung.js"></script>
</head>
<body>
<p class="songName" id="songName"></p>
<span id="loading"></span>
<div id="song_info_wrapper">
</div>
<div class="canvas-container">
<canvas id="freq" width="1024" height="525"></canvas>
<div id="c3">
<button id="playSampleButton" type="button" onClick="playNext()">Next</button>
</div>
<div id="c1">
<button id="buttonSmall" type="button" onClick="playLast()">Last</button>
</div>
<br />
<br />
<div id="c2">
<button id="buttonStop" type="button" onClick="playStop()">Stop</button>
</div>
</div>
</body>
</html>
Related
im having issues with my login page, so im trying to make the page responsive to the mobile version, but there's some problems:
1.When the page turn to the mobile version, the login box shrinks but the left side of it just goes over the the screen, same goes to the top part of it.
2.The footer won't stick to the bottom of the page.
3.Is there a way to create some space around the login box when it shrinks?
I included a picture of when the page turn to the mobile version, and its the exact appearance i got when i open it from my LenovoA2010 which is 480x854 pixels wide :
Picture Here!
Sorry if i wasn't clear enough, this is my first question here and i just started learning Front-End Web Development like about 2 weeks ago, feeling real noob here.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ebe682;
}
.login-content {
display: block;
justify-content: flex-start;
align-items: center;
text-align: center;
}
form {
width: 380px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: whitesmoke;
text-align: center;
border-radius: 14px;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
.avatar {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: -50px;
background: whitesmoke;
border-radius: 90%;
}
form>h1 {
color: #18191a;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 3px;
margin-top: 30px;
}
form>h3 {
color: #18191a;
font-weight: normal;
letter-spacing: normal;
margin-top: 8px;
margin-bottom: 30px;
}
form input[type="text"],
form input[type="password"] {
border: 2px solid #18191a;
background: none;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
width: 200px;
outline: none;
color: #18191a;
border-radius: 24px;
transition: 0.5s;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
width: 280px;
border-color: #b0b3b8;
}
form input[type="submit"] {
border: none;
background: #18191a;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
outline: none;
color: whitesmoke;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
width: 200px;
}
form input[type="submit"]:hover {
background: #3a3b3c;
}
a {
width: 200px;
display: block;
margin: 20px auto;
text-decoration: none;
color: #18191a;
}
a:hover {
color: #3a3b3c;
text-decoration: underline;
}
footer {
background: #E4DD56;
color: #18191a;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 1em;
box-shadow: 0 0 10px #777;
}
/* Mobile Styles */
#media only screen and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #ebe682;
/* Blue */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-content">
<form action="" method="">
<img class="avatar" src="resources/icons/user-avatar-filled.svg" alt="">
<h1>Sign In</h1>
<h3>to continue to Onyi</h3>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
<hr>
Forgot password?
</form>
</div>
<footer>
© 2021 Company, Inc
</footer>
</body>
</html>
since you gave the white box a fixed 380px width it will not react to screen change what you can do instead is to use max-width with width to get what you want
.your-form{
max-width: 380px;
width: 100%;
}
this way you tell your box to expand as much as it wants but never go beyond 380px. this way you get a nice responsive form
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ebe682;
}
.login-content {
display: block;
justify-content: flex-start;
align-items: center;
text-align: center;
padding: 20px;
}
form {
max-width: 380px;
width: 100%;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: whitesmoke;
text-align: center;
border-radius: 14px;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
.avatar {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: -50px;
background: whitesmoke;
border-radius: 90%;
}
form>h1 {
color: #18191a;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 3px;
margin-top: 30px;
}
form>h3 {
color: #18191a;
font-weight: normal;
letter-spacing: normal;
margin-top: 8px;
margin-bottom: 30px;
}
form input[type="text"],
form input[type="password"] {
border: 2px solid #18191a;
background: none;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
width: 200px;
outline: none;
color: #18191a;
border-radius: 24px;
transition: 0.5s;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
width: 280px;
border-color: #b0b3b8;
}
form input[type="submit"] {
border: none;
background: #18191a;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
outline: none;
color: whitesmoke;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
width: 200px;
}
form input[type="submit"]:hover {
background: #3a3b3c;
}
a {
width: 200px;
display: block;
margin: 20px auto;
text-decoration: none;
color: #18191a;
}
a:hover {
color: #3a3b3c;
text-decoration: underline;
}
footer {
background: #E4DD56;
color: #18191a;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 1em;
box-shadow: 0 0 10px #777;
}
/* Mobile Styles */
#media only screen and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #ebe682;
/* Blue */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-content">
<form action="" method="">
<img class="avatar" src="resources/icons/user-avatar-filled.svg" alt="">
<h1>Sign In</h1>
<h3>to continue to Onyi</h3>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
<hr>
Forgot password?
</form>
</div>
<footer>
© 2021 Company, Inc
</footer>
</body>
</html>
i am working on chat application i want to make the button to be responsive for all the screen width below i added the code for the reference
Try shrinking the page width-wise and you'll see my issue. How can I keep the button size and position as close to the same as desktop as possible when resizing the screen? I'm stumped.
Pen: https://codepen.io/trjwaugh/pen/QWvypQJ
//FONTS
$heading-font: 'Roboto', sans-serif;
$main-font: 'Open Sans', sans-serif;
//COLORS
$btn-blue: #35A7FF;
* {
padding: 0;
margin: 0;
}
#header__chat {
position: absolute;
top: 30%;
left: 40%;
transform: translate(-50%, -50%);
width: 50vw;
max-width: 1000px;
display: flex;
padding: 20px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
animation: 5s;
}
#header__btn {
position: absolute;
top: 30%;
left: 72%;
transform: translate(-50%, -50%);
width: 6vw;
display: flex;
padding: 30px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
background-color: $btn-blue;
color: white;
align-items: center;
h2{
font-size: 2vw;
padding: 10px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
text-transform: uppercase;
}
}
h1 {
font-size: 5vw;
font-family: $heading-font;
}
h2 {
font-size: 2vw;
font-family: $heading-font;
}
.typing {
width: 12ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
<html lang="en">
<!--- Required Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Hello, I'm Tim. A Frontend Web Developer, always curious, learning and growing my skills in web design, data, analytics and software in general.">
<!--- CSS -->
<link rel="stylesheet" href="css/style.css">
<head>
<style>#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght#400;500;700&display=swap');</style>
</head>
<body>
<div id="header__chat">
<h1 class="typing">Text Goes Here.</h1>
</div>
<div id="header__btn">
<h2>Send</h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js" integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/script.js"></script>
</body>
</html>
By using media queries adjust the padding , width, height of button according to screen size
#media only screen and (max-width: 600px) {
#header__btn {
position: absolute;
top: 30%;
left: 75%;
transform: translate(-50%, -50%);
background-color: #35A7FF;
color: white;
align-items: center;
width: 50px;
height: 30px;
padding: 25px;
border-radius: 50px;
}
}
please refer this w3 schools media queires to clearly understand what is media queries
here i attached the reference image on changing css
I'm trying to make the image change in the background to fill the screen and cover the original background image when a link is hovered over. So far I've only ended up with three results:
Link1: Image is confined within the list item (but it seems like the aspect ratio is preserved).
Link2: Image preserves ratio but doesn't fill up the screen.
Link3: Image fills up the screen but is stretched out.
I'm also trying to overlay a linear gradient on each image for my ideal effect, but it doesn't seem to work since the images aren't background images. Any help would be highly appreciated.
#import url('https://fonts.googleapis.com/css?family=Montserrat:bold');
body {
padding: 0;
background-image: url("https://images.pexels.com/photos/261899/pexels-photo-261899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
section {
width: 100%;
}
h1 {
font-family: 'Heebo', sans-serif;
font-size: 500%;
text-transform: uppercase;
color: #ffffff;
}
h2 {
font-family: 'Heebo', sans-serif;
text-transform: uppercase;
color: #ffffff;
}
p {
font-family: 'Merriweather', serif;
font-size: 150%;
color: #ffffff;
}
ul {
width: 100%;
margin: 0;
margin-left: 1em;
padding: 0;
}
ul li {
list-style: none;
width: 25%;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
transition: 1.5s;
opacity: 0;
}
ul li a:hover+img {
opacity: 1;
}
a:link {
font-size: 1000%;
font-family: 'Heebo', sans-serif;
color: #ffffff;
text-decoration: none;
}
a.link1:hover {
text-shadow: -5px 0 sienna, 0 5px salmon, 5px 0 salmon, 0 -5px salmon;
background-image: url(https://images.pexels.com/photos/947785/pexels-photo-947785.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: auto;
}
}
a.link2:hover {
text-shadow: -5px 0 teal, 0 5px moccasin, 5px 0 moccasin, 0 -5px moccasin;
}
a.link3:hover {
text-shadow: -5px 0 navy, 0 5px coral, 5px 0 coral, 0 -5px coral;
}
.special {
display: inline;
text-shadow: -4px 0 teal, 0 4px teal, 4px 0 salmon, 0 -4px salmon;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- IMPORTED FONTS -->
<link href="https://fonts.googleapis.com/css?family=Heebo:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>
<body>
<div class="container">
<br><br>
<h1>Hi! I'm
<div class="special">Angelina.</div>
</h1>
<h2>Get to know me as a</h2>
<section>
<ul>
<li><a class="link1" href="student.html">Student</a></li>
<li><a class="link2" href="maker.html">Maker</a><img src="https://images.pexels.com/photos/1110357/pexels-photo-1110357.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style='height: 100%; width: 100%; object-fit: contain'></li>
<li><a class="link3" href="volunteer.html">Volunteer</a><img src="https://images.pexels.com/photos/4839/nature-river-waterfall.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
</ul>
</section>
</div>
</body>
</html>
You should go for background-image instead of <img> element to get your desired result. Here is solution for you.
<html lang="en">
<head>
<title>TEST</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- IMPORTED FONTS -->
<link href="https://fonts.googleapis.com/css?family=Heebo:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>
<body>
<div class="container">
<br><br>
<h1>Hi! I'm
<div class="special">Angelina.</div>
</h1>
<h2>Get to know me as a</h2>
<section>
<ul>
<li class="link1">Student
<span class="bgimg" style="background-image:url(https://images.pexels.com/photos/947785/pexels-photo-947785.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></span></li>
<li class="link2">Maker
<span class="bgimg" style="background-image:url(https://images.pexels.com/photos/1110357/pexels-photo-1110357.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></span></li>
<li class="link3">Volunteer
<span class="bgimg" style="background-image:url(https://images.pexels.com/photos/4839/nature-river-waterfall.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);"></span></li>
</ul>
</section>
</div>
</body>
</html>
And CSS,
#import url('https://fonts.googleapis.com/css?family=Montserrat:bold');
* {
margin: 0;
padding: 0;
}
body {
padding: 0;
background-image: url("https://images.pexels.com/photos/261899/pexels-photo-261899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
section {
width: 100%;
}
h1 {
font-family: 'Heebo', sans-serif;
font-size: 500%;
text-transform: uppercase;
color: #ffffff;
}
h2 {
font-family: 'Heebo', sans-serif;
text-transform: uppercase;
color: #ffffff;
}
p {
font-family: 'Merriweather', serif;
font-size: 150%;
color: #ffffff;
}
ul {
width: 100%;
margin: 0;
margin-left: 1em;
padding: 0;
}
ul li {
list-style: none;
width: 25%;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
transition: 1.5s;
opacity: 0;
}
ul li a:hover+img {
opacity: 1;
}
a:link {
font-size: 1000%;
font-family: 'Heebo', sans-serif;
color: #ffffff;
text-decoration: none;
}
a.link1:hover {
text-shadow: -5px 0 sienna, 0 5px salmon, 5px 0 salmon, 0 -5px salmon;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: auto;
}
}
a.link2:hover {
text-shadow: -5px 0 teal, 0 5px moccasin, 5px 0 moccasin, 0 -5px moccasin;
}
a.link3:hover {
text-shadow: -5px 0 navy, 0 5px coral, 5px 0 coral, 0 -5px coral;
}
.special {
display: inline;
text-shadow: -4px 0 teal, 0 4px teal, 4px 0 salmon, 0 -4px salmon;
}
body {
position: relative;
}
.bgimg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
display: none;
z-index: -1;
}
.link1:hover .bgimg,
.link2:hover .bgimg,
.link3:hover .bgimg {
display: block;
}
Please try this code:
I have minor change HTML and css code.
#import url('https://fonts.googleapis.com/css?family=Montserrat:bold');
body {
padding: 0;
margin: 0;
background-image: url("https://images.pexels.com/photos/261899/pexels-photo-261899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
.container {
position: relative;
overflow: hidden;
min-height: 100vh;
}
section { width: 100%; }
h1 {
font-family: 'Heebo', sans-serif;
font-size: 500%;
text-transform: uppercase;
color: #ffffff;
}
h2 {
font-family: 'Heebo', sans-serif;
text-transform: uppercase;
color: #ffffff;
}
p {
font-family: 'Merriweather', serif;
font-size: 150%;
color: #ffffff;
}
ul {
width: 100%;
margin: 0;
margin-left: 1em;
padding: 0;
}
ul li {
list-style: none;
width: 25%;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100vh;
min-height:100vh;
z-index: -2;
transition: 1.5s;
opacity: 0;
}
ul li a:hover+img {
opacity: 1;
}
a:link {
font-size: 1000%;
font-family: 'Heebo', sans-serif;
color: #ffffff;
text-decoration: none;
}
a.link1:hover {
text-shadow: -5px 0 sienna, 0 5px salmon, 5px 0 salmon, 0 -5px salmon;
background-image: url(https://images.pexels.com/photos/947785/pexels-photo-947785.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: auto;
}
a.link2:hover {
text-shadow: -5px 0 teal, 0 5px moccasin, 5px 0 moccasin, 0 -5px moccasin;
}
a.link3:hover {
text-shadow: -5px 0 navy, 0 5px coral, 5px 0 coral, 0 -5px coral;
}
.special {
display: inline;
text-shadow: -4px 0 teal, 0 4px teal, 4px 0 salmon, 0 -4px salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- IMPORTED FONTS -->
<link href="https://fonts.googleapis.com/css?family=Heebo:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<div class="container">
<br><br>
<h1>Hi! I'm
<div class="special">Angelina.</div>
</h1>
<h2>Get to know me as a</h2>
<section>
<ul>
<li><a class="link1" href="student.html">Student</a></li>
<li><a class="link2" href="maker.html">Maker</a><img src="https://images.pexels.com/photos/1110357/pexels-photo-1110357.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style='height:100%; width: 100%; object-fit: cover'></li>
<li><a class="link3" href="volunteer.html">Volunteer</a><img src="https://images.pexels.com/photos/4839/nature-river-waterfall.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
</ul>
</section>
</div>
That's an awesome question! CSS is expected to style elements based on where they are located on the DOM and not based on what they contain ... there is a concept of :has selector (https://developer.mozilla.org/en-US/docs/Web/CSS/:has) but probably will never be implemented.
And if I understood the question, you basically had it working (with a neat trick). I just fixed this section of your code:
section img {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: -2;
transition: 1.5s;
opacity: 0;
}
check this fiddle: https://jsfiddle.net/etdmxy2e/
Edited:
I created a cleaner fiddle, using your cool trick, that also addresses the image ratio issue using background-image instead of img: https://jsfiddle.net/L8tspdz6/
I am new html css,I am pretty confused with notification bar this should be responsive to adopt full screen when it is in mobile.But I tried it is not expanding .
But for me it is not working
HTML Markup
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/InterestPage.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header>
<div class="innerwrapper">
<h1>Feel Hunt</h1>
<div class="otherOptions">
<div class="notificationdiv">
<div class="notifyCoun">
<p>3</p>
</div>
<svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#303030;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#303030;}
</style><g class="st0" id="Padding__x26__Artboard"/><g id="Icons"><g><path class="st1" d="M12.44998,29.25c0.4714-1.86041,0.98683-3.71044,1.39399-5.58655 c0.20076-0.92508,0.37522-1.85624,0.50479-2.79409c0.12749-0.92277,0.12761-1.86938,0.32255-2.78069 c0.17715-0.82819,0.41986-1.62416,0.79385-2.38678c0.72808-1.48468,1.84795-2.76857,3.21698-3.69551 c1.54611-1.04685,3.39019-1.61638,5.25786-1.61638c2.6,0,4.96,1.06,6.66999,2.76999 c1.1685,1.1685,1.95078,2.64423,2.40368,4.22483c0.48483,1.69205,0.49984,3.44094,0.81387,5.16177 c0.41544,2.27656,1.13475,4.46739,1.71247,6.7034"/><path class="st1" d="M36.75998,35.78003H11.24002c-0.35004,0-0.60004-0.33002-0.5-0.67004L12.44998,29.25h23.09003 l1.71997,5.85999C37.36002,35.45001,37.11002,35.78003,36.75998,35.78003z"/><path class="st1" d="M22.39999,35.86509V36.32c0,0.71,0.58,1.29,1.29,1.29h0.93c0.71,0,1.29-0.58,1.29-1.29v-0.43993"/><path class="st1" d="M21.00458,13.27578c-1.74433,0.9948-3.03389,2.64047-3.76966,4.84763"/><line class="st1" x1="16.98094" x2="16.84722" y1="20.13664" y2="21.16766"/></g></g></svg>
//this is notifcation panel DIV
<div class="notificationPanel">
this should be full screen
</div>
</div>
<div class="profilePicDrop">
<img src="./img/sky-night-space-trees%20(4).jpeg" alt="">
<div class="getDisplayNone dropDown">
vdvdv
</div>
</div>
</div>
</div>
</header>
</body>
</html>
Homepage.scss
#import "utils/_reset";
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
#import "utils/_variables";
body{
background: #EEEEEE;
}
header{
width: 100%;
position: fixed;
height:50px;
top:0;
left:0;
right: 0;
background: #ffffff;
box-shadow: 0px 11px 32px -1px rgba(0,0,0,.04);
.innerwrapper{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 75%;
margin: 0 auto;
}
h1{
color: #393e46;
font-family: $FontStyle;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 400;
a{
padding: 5px;
border: 1px solid #393e46;
text-decoration: none;
color: #393e46;
font-size: 13px;
transition: all 100ms ease-in-out;
&:hover{
background:#393e46 ;
color: #ffffff;
}
}
}
.otherOptions{
margin-left: auto;
display: flex;
align-items: center;
.profilePicDrop{
width: 25px;
height:25px;
position: relative;
margin-left: 12px;
img{
width: 25px;
height:25px;
border-radius: 50px;
}
.dropDown{
width: 150px;
height:150px;
background: #ffffff;
position: absolute;
right: 5px;
top:35px;
border-radius: 5px;
box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.1);
}
}
}
}
.getDisplayNone{
display: none;
}
.getDropMenuIn{
animation: PopIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.getOutDropMenu{
animation: PopOut;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.notificationdiv{
margin-top: 5px;
position: relative;
svg{
width: 30px;
height:30px;
}
.notifyCoun{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: #E74C3C;
width: 17.5px;
height:17.5px;
border-radius: 50px;
box-shadow: 0px 4px 14px 0px rgba(231,77,60,0.3);
p{
font-size: 12px;
font-family: $FontStyle;
color: #ffffff;
font-weight: 300;
}
}
&:hover{
cursor: pointer;
}
}
//this is notification panel css
.notificationPanel{
position: absolute;
top: 50px;
left: 0;
right: 0;
background: #ffffff;
width: 100%;
}
#keyframes PopIn {
from{
transform: scale(0.8);
opacity: 0.5;
transform-origin: 150px -5px;
}to{
transform: scale(1);
opacity: 1;
visibility: visible;
}
}
#keyframes PopOut {
from{
opacity: 1;
}to{
opacity: 0.1;
visibility: hidden;
transform: scale(0.5);
transform-origin: 150px -5px;
}
}
Try removing position: relative from your .notificationdiv. Because your absolute element will take 100% of his first relative parent.
https://codepen.io/OliviaPaquay/pen/mwbQEj Demo here, remove line 10.
I created two buttons that I would like to place under my input login boxes. I want it to be responsive so I used the absolute value but when I move them, the buttons suddenly overlap! Any solutions? Here is my index and stylesheet:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0px;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}
<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
</form>
<div>
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</header>
</body>
</html>
Try this...
There is no relation between position:absolute and responsive design.
Since you intend to do this with absolute, Just place your button div into the form.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn{
margin-top:30px;
font-size: 14px !important;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}
<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
<div>
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</form>
</header>
</body>
</html>
Edit: This is for your comment. Also i recommend you to make use of Media queries for responsive layout.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.login {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
max-width: 420px;
top: 30%;
left: 0;
right: 0px;
height: auto;
font-size: 20pt;
margin: 0px auto;
padding: 15px;
}
#space-password {
padding-top: 20px;
}
html {
color: whitesmoke;
font-weight: 100;
font-family: 'Lato', 'Arial', sans-serif;
text-rendering: optimizeLegibility;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(hero.jpeg);
}
input {
border-radius: 50px;
height: 38px;
width: 100%;
color: aliceblue;
border: 2px solid #999;
background-color: #34495e;
box-sizing: border-box;
padding-left: 14px;
padding-right: 14px;
margin-top: 5px;
font-size: 17px;
font-family: 'Lato', 'Arial', sans-serif;
}
.btn {
margin-top: 30px;
font-size: 14px !important;
}
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
/*This padding and border radius round border and define how big it is */
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link,
.btn-full:visited {
background-color: #3498db;
/* From flat UI colors */
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover,
.btn:active {
background-color: #7cbde8;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #3498db;
/* Fixed issue of text disipearing in color and borders being different color for both full and ghost */
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #3498db;
color: #fff;
}
.btns {
position: absolute;
/* Turns the the text box to absolute from static (allows free control of placement) */
width: 100%;
top: 300px;
left: 15%;
right: 0px;
height: auto;
font-size: 14pt;
margin: 0px auto;
padding: 15px;
}
<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p>
<br>
<input type="text" name="Apple ID">
<br>
<p id="space-password">Password:</p>
<br>
<input type="password" name="Password">
</form>
<div class="btns">
<a class="btn btn-full" href="#">Login</a>
<a class="btn btn-ghost" href="#">Don't have an acount? Sign up!</a>
</div>
</header>
</body>
</html>
Instead of using <a></a> tag to create buttons you can use <button></button> tag to create button. This will avoid the overlapping of buttons.
<!DOCTYPE>
<html lan="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<title>Welcome-Sign in</title>
</head>
<body>
<header>
<form class="login">
<p>Apple ID:</p><br>
<input type="text" name="Apple ID"><br>
<p id="space-password">Password:</p><br>
<input type="password" name="Password">
</form>
<div>
<button class="btn btn-full" >Login</button>
<button class="btn btn-ghost">Don't have an acount? Sign up! </button>
</div>
</header>
</body>