You have the ability to create external links without any issues. Below is the CSS code snippet that I implemented on my own webpage. It accomplishes exactly what you are looking for. To achieve this, you will need to utilize media queries.
Refer to the CSS Code below for guidance. Specifically pay attention to the media queries (@media) section related to the container class.
Scan through the comments within the code as they provide valuable insights.
This is an excerpt from my main.css file
/*________________________________________________________________________________
Wrapper
__________________________________________________________________________________*/
.wrapper{
width: 100%;
height: 100vh;
border: 1px solid var(--ColGrey80);
box-sizing: border-box;
display: flex;
justify-content:center;
align-items: center;
overflow-x: hidden;
overflow-y: hidden;
}
/*________________________________________________________________________________
Container
__________________________________________________________________________________*/
/* Applies up to 600px - Mostly for Mobile Devices */
.container{
width: 100%;
height: 100vh;
background: var(--ColPastelGreen);
}
/* Applies from 600px and beyond - Primarily for Laptops */
@media only screen and (min-width:600px){
.container{
max-width: 450px;
height: 80vh;
border: 1px solid var(--ColAppHighlight);
border-radius: 10px;
background: var(--ColWhite);
}
}
HTML Snippet Below:
Use this code example to understand how to link your css file with your html file. Observe the tag where 'index.css' & 'main.css' are included. These references signify external css files being utilized.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crogress</title>
<link rel="shortcut icon" href="lib/images/c.png" type="image/x-icon">
<link rel="stylesheet" href="lib/main.css">
<link rel="stylesheet" href="lib/index.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div id="header">
<h1 id="title">Crogress</h1>
<p id="signin">Sign in</p>
</div>
<form id="form">
<div id="inputFields">
<input type="text" name="userName" id="userName" class="textbox" autocomplete="off" value="User Name">
<input type="text" name="password" id="password" class="textbox" autocomplete="off" value="Password">
<div id="error"></div>
</div>
<div id="footer">
<a id="create" href="http://">Create Account</a>
<button type="button" onclick="authenticate();">Sign in</button>
</div>
</form>
</div>
</div>
<script src="lib/index.js"></script>
</body>
</html>