working css

2024-05-23 17:39:40 -04:00 · 2024-05-23 17:39:40 -04:00 · ea28ecb36e
commit ea28ecb36e
parent 12d469da05
2 changed files with 64 additions and 1 deletions
--- a/css/shared.css
+++ b/css/shared.css
@ -0,0 +1,57 @@
+:root {
+}
+
+html {
+	height:100vh;
+	width:100vw;
+	background: linear-gradient(45deg, gold 2%, purple);
+	overflow: hidden;
+	margin:0px;
+	animation: gradient 35s linear infinite;
+	background-size: 180% 180%;
+}
+
+body {
+	display flex;
+	color: white;
+	margin: 0px;
+}
+
+
+.artical{
+	width: min(100vw, 55em);
+	margin:auto;
+	text-align: center;
+	padding: 0px;
+}
+
+.artical h1 {
+	margin: auto auto 0px auto;
+}
+
+.artical hr {
+	background: white;
+	border-color: white;
+	border-radius: 3em;
+	height: 0.3em;
+}
+
+.glass{
+	background: rgba(128, 128, 128, 0.35);
+	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+	border-radius: 3em;
+	padding: 1em 2em;
+}
+
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
--- a/index.html
+++ b/index.html
@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 	<head>
+		<link rel="stylesheet" href="css/shared.css">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 	</head>
 	<body>
-		<h1>todo</h1>
+		<div class="glass artical">
+			<h1>hi</h1>
+			<hr>
+			<p>obama killed my wife</p>
+		</div>
 	</body>
 </html>