クロスオリジンのためのテスト

index.1.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>harukinトップページ</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <script src="./jquery-3.3.1.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <script>
+        $(function () {
+            $("#frame").load("https://plus.haruk.in/channel/info-server");
+        });
+
+    </script>
+</head>
+
+<body>
+    <main>
+        <div class="circle">
+            <img src="./picture/28 - 1.png" class="circleimage" alt="">
+        </div>
+        <h1>haruk.inのトップページへようこそ！</h1>
+        <div class="box">
+            <h1>test</h1>
+            <h2>test</h2>
+        </div>
+        <div id="frame"></div>
+    </main>
+</body>
+
+</html>

index.html

@@ -1,12 +1,25 @@
+<!DOCTYPE html>
 <html>
 
 <head>
-    <title>test</title>
+    <title>harukinトップページ</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <script src="./jquery-3.3.1.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="./style.css">
 </head>
 
 <body>
-    <header></header>
-    <main>testtest</main>
+    <main>
+        <div class="circle">
+            <img src="./picture/28 - 1.png" class="circleimage" alt="">
+        </div>
+        <h1>haruk.inのトップページへようこそ！</h1>
+        <div class="box">
+            <h1>test</h1>
+            <h2>test</h2>
+        </div>
+    </main>
 </body>
 
 </html>

style.css

@@ -0,0 +1,29 @@
+html{
+    background:  url("./picture/background.png")center center / cover no-repeat fixed;
+    color: aliceblue;
+}
+main{
+    text-align: center;
+}
+.circle{
+    width: 20vw;
+    height: 20vw;
+    max-height:20%;
+    border-radius: 50%;
+    background-color: rgb(252, 241, 229);
+    object-fit: cover;
+    margin:auto;
+    box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
+}
+.circleimage{
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+}
+.box{
+    width:95%;
+    background-color: rgb(255, 255, 255);
+    margin: auto;
+    border-radius: 3%;
+    color: black;
+}