From 09bda9fbfd8e60e1726a0a95e990054efc418b7d Mon Sep 17 00:00:00 2001 From: Ajdj100 Date: Wed, 29 Mar 2023 14:06:44 -0400 Subject: [PATCH] finally started building out the personnel files. Need to add the content sections still, and finish the header to include the rank image and tab image, as well as add the scripts to get from database.... whew yeah its nowhere near done --- Profile Page/profile.html | 80 +++++++++++++++++++++++--- Profile Page/styles2.css | 116 +++++++++++++++++++++++++++++++++++++- 2 files changed, 186 insertions(+), 10 deletions(-) diff --git a/Profile Page/profile.html b/Profile Page/profile.html index 653aca4..9529083 100644 --- a/Profile Page/profile.html +++ b/Profile Page/profile.html @@ -1,12 +1,76 @@ - - - Profile Page - - - -

Profile Page

- + + + Profile Page + + + + + +
+
+
+ +
+
+

Name:

+

Rank:

+

Unit:

+
+
+ + +
+
+ +
+ hello +
+ +
+ hello2 +
+ +
+ hello3 +
+
+ + \ No newline at end of file diff --git a/Profile Page/styles2.css b/Profile Page/styles2.css index 40cbb95..4299629 100644 --- a/Profile Page/styles2.css +++ b/Profile Page/styles2.css @@ -1,8 +1,13 @@ /* General styling */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + body { font-family: Arial, sans-serif; background-color: #F2F2F2; - padding: 20px; } h1 { @@ -26,6 +31,45 @@ p { line-height: 1.5; } + + +/* NAVBAR */ + +.navbar { + background-color: #333333; + height: 80px; + display: flex; + justify-content: space-around; + align-items: center; + box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); + } + + .nav-links { + display: flex; + justify-content: center; + align-items: center; + list-style: none; + margin: 0; + padding: 0; + } + + .nav-links li { + margin: 0 10px; + } + + .nav-links li a { + color: #ffffff; + text-decoration: none; + font-size: 18px; + font-weight: bold; + transition: color 0.3s ease-in-out; + } + + .nav-links li a:hover { + color: #4CAF50; + } + + /* Main items */ .main-items { display: flex; @@ -66,4 +110,72 @@ p { .item p { margin-bottom: 0; -} \ No newline at end of file +} + +#profileWrapper { + width: 800px; + margin: auto; + padding: 50px; + box-shadow: -5px 0 5px rgba(0, 0, 0, 0.5), 5px 0 5px rgba(0, 0, 0, 0.5); +} + +.subnav { + background-color: transparent; + height: fit-content; + display: flex; + justify-content: center; + align-items: center; + padding-top: 60px; + } + + .subnav-Header { + color: #333333; + font-size: 20px; + font-weight: bold; + display: flex; + justify-content: center; + } + + .subnav-links { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + list-style: none; + margin: 0; + padding: 0; + } + + .subnav-links li { + display: flex; + margin: 0 10px; + padding: 0 30px 0 30px; + } + + .subnav-links li a { + color: #363636; + text-decoration: none; + font-size: 16px; + font-weight: bold; + transition: color 0.3s ease-in-out; + } + + .subnav-links li a.active { + color: #4CAF50; + } + + /* Center the subNavContainer */ + .subNavContainer { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + } + + .content { + display: none; + } + + .shown { + display: flex !important; + } \ No newline at end of file