Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI improvements #57

Merged
merged 6 commits into from
Oct 20, 2023
Merged

UI improvements #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
29ddf5a
UI changes to navbar
Jaimin25 Oct 19, 2023
4067330
UI changes to about and contact page
Jaimin25 Oct 19, 2023
61a170f
changes to bg
Jaimin25 Oct 19, 2023
358a078
Changes to card
Jaimin25 Oct 19, 2023
816e6f2
Merge branch 'main' into UI-improvements
Jaimin25 Oct 20, 2023
7d42251
UI fix, about and contact page
Jaimin25 Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 51 additions & 61 deletions about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,75 @@
body {
background-image: radial-gradient(
circle,
rgba(238, 130, 238, 0.544),
rgba(75, 0, 130, 0.544),
rgba(0, 0, 255, 0.544),
rgba(34, 139, 34, 0.544),
rgba(255, 255, 153, 0.544),
rgba(255, 165, 0, 0.544),
rgb(255, 0, 0, 0.544)
);
}
.about {
width: 100%;
height: fit-content;

display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: inherit;
display: flex;
justify-content: center;
align-items: center;
}
main {
background-color: whitesmoke;
height: fit-content;
width: 40%;
padding: 3rem;
padding-top: 2rem;
padding-right: 2rem;
border-radius: 100px 100px 100px 100px;
margin-bottom: 20px;
background-color: #ffffff;
width: 75%;
height: 100%;
padding: 3rem;
padding-top: 2rem;
padding-right: 2rem;
border-radius: 12px;
margin-bottom: 20px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.heading {
font-size: 40px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 40px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
sans-serif;
}
.aboutinfo {
font-size: 18px;
font-family: cursive;
font-style: italic;
font-size: 18px;
font-family: cursive;
font-style: italic;
}
.navbar-brand {
font-family: "Young Serif", serif;
font-size: 5vh !important;
color: black !important;
font-family: "Young Serif", serif;
font-size: 5vh !important;
color: black !important;
}
.navbar-nav {
color: black;
display: flex;
width: 100%;
justify-content: end;
color: black;
display: flex;
width: 100%;
justify-content: end;
}
.navbar {
color: black;
padding: 1vh 1vw;
color: black;
padding: 1vh 1vw;
}
header {
padding: 20px;
padding: 20px;
}
main {
margin: 70px;
margin: 70px;
}
nav {
display: flex;
justify-content: space-evenly;
display: flex;
justify-content: space-evenly;
}

/* Styles for phones and smaller screens */
@media (max-width: 768px) {
.about {
display: block;
margin: 40px 0px;
}
main {
width: 90%;
margin: 10px;
}
.heading {
font-size: 30px;
}
.navbar-brand {
font-size: 3vh !important;
}
.navbar-nav {
flex-direction: column;
}
.about {
display: flex;
margin: 40px 0px;
}
main {
width: 90%;
margin: 10px;
}
.heading {
font-size: 30px;
}
.navbar-brand {
font-size: 3vh !important;
}
.navbar-nav {
flex-direction: column;
}
}
17 changes: 9 additions & 8 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
Expand All @@ -26,14 +25,16 @@
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>

<!-- Linking Script -->

<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css" />


<script src="./aboutScript.js"></script>
<title>About | SocialHub</title>
</head>
Expand All @@ -42,7 +43,7 @@
<header>

<nav id="mainNavbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#">Social Hub</a>
<a class="navbar-brand" href="./">Social Hub</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Expand Down
9 changes: 0 additions & 9 deletions aboutScript.js
View file
Open in desktop

This file was deleted.

Loading