diff --git a/css/header.css b/css/header.css
index 7dc263f..3753295 100644
--- a/css/header.css
+++ b/css/header.css
@@ -1,4 +1,5 @@
.header {
+ position: relative;
color: white;
display: flex;
align-items: center;
@@ -26,7 +27,7 @@
box-shadow: white 0 0 30px;
}
-.usericon>img {
+.usericon > img {
width: 100%;
height: 100%;
}
@@ -49,3 +50,9 @@
.time:hover {
text-shadow: white 0 0 20px;
}
+
+@media screen and (max-width: 500px) {
+ .header {
+ flex-direction: column;
+ }
+}
diff --git a/css/icons.css b/css/icons.css
index 1b96f9b..9d56d0e 100644
--- a/css/icons.css
+++ b/css/icons.css
@@ -1,15 +1,17 @@
.icons {
width: 50%;
- height: 20%;
- display: grid;
- grid-template-columns: auto auto auto auto auto auto;
- align-content: center;
- justify-items: center;
+ height: max-content;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ justify-content: space-around;
+ flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border-radius: 10px;
+ padding: 10px 0 10px 0;
}
.icon {
@@ -26,12 +28,18 @@
box-shadow: white 0 0 30px;
}
-.icon>a {
+.icon > a {
width: 100%;
height: 100%;
}
-.icon>a>img {
+.icon > a > img {
width: 100%;
height: 100%;
}
+
+@media screen and (max-width: 500px) {
+ .icons {
+ width: 90%;
+ }
+}
diff --git a/css/search.css b/css/search.css
index 8bf1e17..594c79c 100644
--- a/css/search.css
+++ b/css/search.css
@@ -1,11 +1,21 @@
.searchblock {
- width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ width: max-content;
display: flex;
align-items: center;
justify-content: center;
+ position: relative;
+}
+
+.searchicon {
+ position: absolute;
+ left: 20px;
+ cursor: pointer;
}
#search-in-google {
+ max-width: 500px;
padding: 10px 50px;
font-size: 20px;
margin: 10px;
@@ -19,3 +29,10 @@
#search-in-google:hover {
box-shadow: white 0 0 20px;
}
+
+@media screen and (max-width: 500px) {
+ #search-in-google {
+ max-width: 200px;
+ font-size: 12px;
+ }
+}
diff --git a/index.html b/index.html
index 33824b6..a100234 100644
--- a/index.html
+++ b/index.html
@@ -1,70 +1,100 @@
-
+
-
-
-
-
-
-
-
-
- Dashboard
-
-
- 
+
+
- 
- 
+ 
- 
+ 
+