techtransthai/www.techtransthai.org
techtransthai/www.techtransthai.org
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

RWD for NavBar

Browse source
This commit is contained in:
Late Night Defender 2024-07-02 03:00:09 +07:00
parent 2bea14b81d
commit 4fb6883950
2 changed files with 36 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -5,15 +5,14 @@
<meta http-equiv="Content-Language" content="th"> <meta http-equiv="Content-Language" content="th">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Home of TechTransThai's available services"> <meta name="description" content="Home of TechTransThai's available services">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechTransThai</title> <title>TechTransThai</title>
<link rel="icon" type="image/png" href="icons/ttt-org.png"> <link rel="icon" type="image/png" href="icons/ttt-org.png">
</head> </head>
<body> <body>
<div class="header" >
<div class="topbar"> <div class="topbar">
<div class="topbar-group">
<div style="display: flex; justify-content: space-between; margin-left: 1cm; margin-right: 1cm;">
<a style="display: flex; align-items: center; text-decoration: none;"> <a style="display: flex; align-items: center; text-decoration: none;">
<img src="icons/ttt-org.png" alt="TTT Logo" width="36" height="36" style="margin-right: 5px;"> <img src="icons/ttt-org.png" alt="TTT Logo" width="36" height="36" style="margin-right: 5px;">
<h4 class="logo">TechTransThai</h4> <h4 class="logo">TechTransThai</h4>
@ -37,7 +36,6 @@
</div> </div>
</div> </div>
</div>
<div class="header" style="margin-top: 2cm;"> <div class="header" style="margin-top: 2cm;">

41
navbar.css
View file

@ -1,9 +1,3 @@
.header {
display: flex;
justify-content: center;
align-items: center;
}
.headerbutton { .headerbutton {
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@ -28,6 +22,39 @@
z-index: 10; z-index: 10;
} }
.topbar-group {
display: flex;
justify-content: space-between;
margin-left: 1cm;
margin-right: 1cm;
}
@media only screen and (max-width: 750px) {
.topbar-group {
display: flex;
align-items: center;
flex-direction: column;
margin-left: 0cm;
margin-right: 0cm;
}
.headerbutton {
border: none;
border-radius: 8px;
justify-content: center;
align-items: center;
text-decoration: none;
display: flex;
font-size: 14px;
margin: 4px 2px;
padding-left: 0.2cm;
padding-right: 0.2cm;
cursor: pointer;
height: 35px;
transition-duration: 0.2s;
}
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.headerbutton { .headerbutton {
@ -61,4 +88,4 @@
border: 1px solid #1f1f1f; border: 1px solid #1f1f1f;
color: #ffffff; color: #ffffff;
} }
} }