For my web application's landing page, I created the design using HTML and CSS. Typically, I first design it on scratchpad.io before implementing it into my STS IDE. However, when I run the application, the output of the page appears different from the HTML design that I created (it looks fine when opened directly from my local directory).
My CSS file is linked externally in the application like the other pages (which display correctly).
Any insights on why this discrepancy might be happening? I can provide links to show both outputs, even though they contain the same code.
Expected design: https://i.sstatic.net/xpUmR.jpg
Actual output within the application: https://i.sstatic.net/g6LIJ.jpg
Appreciate any help!
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Landing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link type="text/css" rel="stylesheet" href="../styles/landingStyle.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="top-right links">
<a href="/account/login">Login</a> <a href="/account/signup">Register</a>
</div>
<div class="content">
<img src="../styles/ysplanding.jpg" class="brand_logo" style="width:100%;">
<div class="title m-b-md">
<div class="nowrap">
Yorkshire Sculpture Park<br> Employee Portal
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body, html {
margin: 0 auto;
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100%;
position: fixed;
}
.img {
border-radius: 50%;
position: absolute;
width: 100%;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
center: 50px;
top: 20px;
}
.content {
text-align: center;
position: absolute;
opacity: 0.9;
positon: relative;
padding-top: 2px;
height: 500px;
width: 100%;
max-width: 100%;
word-break: break-word;
}
.title {
font-size: 90px;
position: fixed !important;
}
.m-b-md {
text-shadow: 2px 2px #636b6f;
font-weight: 300;
text-align: center;
position: absolute;
text-align: center;
margin-bottom: 4;
top: 40%;
bottom: 2%;
right: 5px;
left: 600px;
position: absolute;
transform: translate(-50%,-50%);
color: white;
width: 100%;
max-width: 100%;
word-break: break-word;
}
.links>a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 800;
letter-spacing: .2rem;
text-decoration: none;
text-transform: uppercase;
}
.nowrap {
white-space: nowrap;
}