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

Jump to bottom

Gfisk #2

Merged
merged 7 commits into from
Dec 12, 2022
Merged

Gfisk #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
de4aa8d
Update styles.css
gfisk777 Dec 7, 2022
62fb167
Update index.html
gfisk777 Dec 9, 2022
0beaf54
Update index.html
gfisk777 Dec 9, 2022
c085ea5
Update styles.css
gfisk777 Dec 9, 2022
23345a6
Update styles.css
gfisk777 Dec 9, 2022
3c69bb5
Update index.html
gfisk777 Dec 9, 2022
c5f4e77
Merge branch 'main' into gfisk
jsong073-UMD Dec 12, 2022
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
29 changes: 8 additions & 21 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,17 @@
<body>
<div class="wrapper">
<div class="header">
<h1>Group 1 - Garrett Fisk, Jaeha Song</h1>
<h1>Spotify Song Tracker</h1>
</div>

<div class="intro">
<h2>On our website you can search and track the top songs that are available on Spotify....</h2>
</div>

<div class="container">
<div class="left_section box">
<div class="header">
<h3>Form Inputs</h3>
<h3>Song Input</h3>
</div>
<form class="box main_form" action="/api">
<div>
Expand All @@ -39,7 +43,7 @@ <h3>Form Inputs</h3>

<div class="right_section box">
<div class="header">
<h2>Chart of songs</h2>
<h3>Chart of songs</h2>
</div>
<!-- <div id="map"></div> -->
<div>
Expand All @@ -51,27 +55,10 @@ <h2>Chart of songs</h2>
</div>
</div>

<footer class="footer">
gfisk777
<a
href="https://github.com/gfisk777/Group1-Project-Base"
target="blank"
>Link to gitHub</a
>
</footer>
<footer class="footer">Group 1 - Garrett Fisk, Jaeha Song</footer>
</div>

<script src="script.js"></script>
</body>
</html>


<!--
This is how to build the CSS-only load animation from loading.io
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>

This is helpful for showing your client-side users when data is loading,
since there's otherwise no sign your app is thinking about something!

Try placing it at the same level in your element tree as your Submit button
-->
120 changes: 56 additions & 64 deletions client/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,13 @@

body {
margin: 0;
padding: 0;
padding: 1em;

font-family: ‘Segoe UI’, Candara, ‘Bitstream Vera Sans’, ‘DejaVu Sans’, ‘Bitsream Vera Sans’, ‘Trebuchet MS’, Verdana, ‘Verdana Ref’, sans-serif;
font-weight: 400;
line-height: 1.5;
background-color: #000000;
background-color: #463c3c;

}


Expand All @@ -39,24 +40,58 @@
text-decoration: none;
}

.header h2,
.header h3 {
margin:0;
padding:0;
padding-bottom: 1.5rem;
}


form {
accent-color: hsla(120, 100%, 50%, 0.482);
}

/*
- These styles use 'class names'
- You can apply them by using the 'class' attribute on your HTML
- like this: <div class="wrapper">
- note that the period vanishes there!
*/
.header {
padding: 10px;
text-align: center;
}

.header h1 {


/* colors */
background-color: #000000;
color: rgb(57, 116, 12);

/* shapes */
border-radius: 6px;
font-size: 2.5rem;
padding: 1.25rem;
margin: 0; /* removing the margin on h1 tags means the header pins to the top if we move */
font-style: italic;
}

.header h3 {
margin:0;
padding:0;
padding-bottom: 1.5rem;
color: #037c0b;
}

.intro {
background-color: #070606;
margin: 20px;
display:flex;
height:fit-content;
justify-content: center;

}

.intro h2 {
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
color: #037c0b;

}

.introdiscription {
font-size:100px;
}

.wrapper {
min-height: 100vh;
Expand All @@ -70,80 +105,37 @@
margin: 0 20px;
display: flex;
justify-content: space-evenly;
align-items: start;
align-items:start;
flex:1;
}

.header {
/* padding-top: 1rem;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1.5rem; */
}


/*
This rule implies that the H1 tag lives within another HTML tag
It "inherits" some rules from the above
Those rules won't apply to an h1 that's outside a block with the class of 'header'
*/

.header h1 {
display: block;
/* this will push other blocks out of the way */

/* colors */
background-color: #66B0FB;
color: #000;

/* shapes */
border: 2px dashed;
border-radius: 6px;
font-size: 1.5rem;
padding: 1.25rem;
margin:0; /* removing the margin on h1 tags means the header pins to the top if we move */


/* box-shadows are fancy */
box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0 0 1px rgb(10 10 10 / 2%);

}


/*
Rules can be combined on a block to apply the 'cascade' in order
So you can use two classnames in a single class attribute
like: <div class="box section">

Rules may combine in unexpected ways - remember that the LAST thing written in this file will have "priority"
And will be what displays in your client
*/

.box {
background-color: #7CC9F4;
background-color: #037c0b;
border: 2px dashed;
border-radius: 4px;
height:fit-content;
padding: 1.5rem;
}

.left_section {
background-color: #2300ae;
background-color: #242424;
flex: 0 1 0;
margin: 1rem;
padding: 1.5rem;
padding: 2.5rem;
width: 90%;
}

.right_section {
background-color: #310bca;
background-color: #242424;

flex: 0 1 auto;
margin: 1rem;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
padding: 2.5rem;
}


Expand Down