From ce503564d9a3bcaac15ac02cc93844aafe570644 Mon Sep 17 00:00:00 2001 From: rgumaste Date: Sun, 2 Jun 2024 19:52:54 +0900 Subject: [PATCH] build a responsive navigation that has two different views for mobile and desktop --- .idea/.gitignore | 8 +++++ .idea/misc.xml | 6 ++++ .idea/modules.xml | 8 +++++ .idea/starter-joey-thinkful.iml | 9 ++++++ .idea/vcs.xml | 6 ++++ index.html | 4 ++- style.css | 57 +++++++++++++++++++++++++++++++++ 7 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/starter-joey-thinkful.iml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..639900d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..67c167a --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/starter-joey-thinkful.iml b/.idea/starter-joey-thinkful.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/starter-joey-thinkful.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 177fa30..2cac6a3 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,12 @@
-

Name

+

Joey Thinkful

diff --git a/style.css b/style.css index e69de29..7e00d55 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,57 @@ +body { + margin: 0; +} + +header { + background-color: #0B1C51; + margin-bottom: 40px; +} + +header h1 { + color: #fff; + text-align: center; + margin: 0; + padding-top: 20px; +} + +header nav { + display: flex; + justify-content: center; +} + +header nav ul { + display: flex; + padding-left: 0; + list-style: none; +} + +header nav ul li a { + color: #fff; + text-decoration: none; + margin: 0 20px 0 0; +} + +header nav ul li:last-child a { + margin-right: 0; +} + +@media all and (min-width: 600px) { + header { + display: flex; + justify-content: space-between; + padding: 0 30px; + } + + header h1 { + margin: 14px 0; + padding-top: 0; + } + + header nav { + margin-top: 8px; + } + + header nav ul li a:hover { + color: #bdbdbd; + } +} \ No newline at end of file