Created
June 3, 2024 23:14
-
-
Save sc137/7880e3fe098cda9515554127ab202f7a to your computer and use it in GitHub Desktop.
Use this html page whenever a lab asks you to upload code and show your completed webpage.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>CISN 71 - Lab</title> | |
<style> | |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); | |
body { | |
font-family: 'Roboto', sans-serif; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
margin: 0; | |
background-color: #121212; | |
color: #f4f4f9; | |
position: relative; | |
overflow: hidden; | |
} | |
h1 { | |
font-size: 2.5em; | |
color: #ffcc00; | |
margin-bottom: 20px; | |
} | |
footer { | |
position: absolute; | |
bottom: 20px; | |
width: 100%; | |
text-align: center; | |
font-size: 0.9em; | |
color: #bbbbbb; | |
} | |
.image { | |
max-width: 100%; | |
height: auto; | |
margin-bottom: 20px; | |
border-radius: 10px; | |
} | |
.container { | |
text-align: center; | |
background: #1e1e1e; | |
padding: 40px; | |
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); | |
border-radius: 10px; | |
max-width: 600px; | |
margin: auto; | |
position: relative; | |
z-index: 1; | |
} | |
.container::before { | |
content: ''; | |
position: absolute; | |
top: -2px; | |
left: -2px; | |
right: -2px; | |
bottom: -2px; | |
background: linear-gradient(45deg, #0d1b2a, #1b263b, #415a77, #778da9); | |
background-size: 400% 400%; | |
animation: gradient 5s infinite; | |
border-radius: 12px; | |
z-index: -1; | |
} | |
@keyframes gradient { | |
0% { | |
background-position: 0% 50%; | |
} | |
50% { | |
background-position: 100% 50%; | |
} | |
100% { | |
background-position: 0% 50%; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<img src="https://s3-us-west-1.amazonaws.com/files.3cmedia/u_673/21986/CISN_71.png" alt="Course Image" class="image"> | |
<h1>LAB NAME</h1> | |
<h2>YOUR NAME</h2> | |
<p>MM/DD/YY</p> | |
</div> | |
<footer>© CISN 71 - Intro to Cloud Computing. All rights reserved.</footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment