jeonckk/test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: jeonckk:b3fafce27a3ae2ff0aa9f3187410e6c631d13715
Branches Tags
jeonckk:main
...
compare: jeonckk:576f447dc8d93290a80ed3f31bc8bbfe97626307
Branches Tags
jeonckk:main

4 Commits
b3fafce27a ... 576f447dc8

Author SHA1 Message Date
JeonCKk
576f447dc8 hohoho 2022-12-30 18:24:52 +09:00
JeonCKk
33b7615cc9 hoho 2022-12-30 18:21:21 +09:00
JeonCKk
809482294e HIHI 2022-12-30 16:51:47 +09:00
JeonCKk
cc33dcb79e Hello 2022-12-30 16:48:03 +09:00
3 changed files with 128 additions and 1 deletions
Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

85
resp.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #4CAF50;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left: 0;}
}
@media screen and (max-width: 400px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<ul class="sidenav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="content">
<h2>Responsive Sidenav Example</h2>
<p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>

44
test.html
View File

@@ -2,9 +2,51 @@
<html> <html>
<head> <head>
<title>Git Test Page</title> <title>Git Test Page</title>
<style>
code{
font-family: Consolas, "courier new";
color: crimson;
background-color: #f1f1f1;
padding: 2px;
font-size: 105%;
}
.myDiv{
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head> </head>
<body> <body>
Hello new Git!! <p><cite>welcome</cite>Hello New Git!!!</p>
<p>the HTML <code>button</code> tag defines a clickable button.</p>
<p>The CSS <code>background-color</code>property defines the background color of an element.</p>
<h1>The datalist element</h1>
<form action="/action_page.php" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
<div class="myDiv">
<h2>This is a heaidng in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body> </body>
</html> </html>