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

Update style.css #3

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update style.css #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
127 changes: 118 additions & 9 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
body {
font-family: "Lato", sans-serif;
color: #6b1a22;
margin: 0;
}


h2 {
font-size: 26px;
font-weight: 400;
Expand All @@ -31,9 +33,6 @@ section.alternate-background {
color: #ecdbc9;
}

main img {
width: 100px;
}

/* --- Groups & Items --- */

Expand All @@ -47,8 +46,8 @@ main img {
margin: 10px;
}

.item-double {
flex: 2;
img {
width: 100%;
}

/* ------- Navigation ------- */
Expand All @@ -65,7 +64,15 @@ header {
color: #ecdbc9;
}

header nav ul li {
header nav {
display: flex;
justify-content: center;
}

header nav ul {
display:flex;
padding-left: 0;
list-style: none;
list-style-type: none;
}

Expand All @@ -75,23 +82,41 @@ header nav ul li a {
padding: 0 20px 0 0;
}

header nav ul li a:hover {
color: #bdbdbd;
text-decoration: none;
header nav ul li:last-child a {
/* Removes the margin to the right of the last anchor tag
so that the nav appears centered. */
padding-right: 0;
}



/* ------- Join Form ------- */


.form-group {
display: flex;
flex-direction: column;
align-items: center;
}

form {
border: 2px solid #6b1a22;
padding: 10px;
}

.form-row {
display:flex;
justify-content: space-between;
}

form label {
display: flex;
font-weight: bold;
}

form select,
form input {
display: flex;
margin-bottom: 20px;
width: 180px;
}
Expand All @@ -105,6 +130,7 @@ form button {
width: 100%;
}


/* ------- Footer ------- */

footer {
Expand All @@ -118,3 +144,86 @@ footer p {
}

/* ------- Media Query ------- */

@media all and (max-width: 330px) {
.logo {
font-family: "Tangerine", cursive;
font-size: 30px;
color: #ecdbc9;
}

.input-box {
width: 10px;
}

header nav ul li a {
color: #ecdbc9;
text-decoration: none;
padding: 0 20px 0 0;
font-size: 10px;
}


}




@media all and (min-width: 480px) {
header {
/* Changes the default setting from `block` to `flex`. */
display: flex;
/* Pushes the items (the title and nav) to the far sides of the
browser with space between them. */
justify-content: space-between;
/* Adds 0 pixels padding top and bottom, and 30 pixels padding
left and right. */
padding: 0 30px;
}

.logo {
font-family: "Tangerine", cursive;
font-size: 52px;
color: #ecdbc9;
}

header h1 {
/* Sets 14 pixels of margin above and below the `h1` and sets
0 pixels of margin to the left and right. */
margin: 14px 0;
/* Removes or sets 0 pixels of padding above the `h1`. */
padding-top: 0;
}

header nav {
/*
Pushes the navigation container down by 8 pixels to make it
present a little better visually within the space.
*/
margin-top: 8px;
}
/* Users cannot hover on mobile devices, so that is why you
implement this behavior only for larger screens. */
header nav ul li a:hover {
/* Targets the change when a user holds the pointer over the anchor tag
(link) within the list items within the unordered list that
is within the navigation that is within the header. */
color: #bdbdbd;
}

.form-group {
display: flex;
flex-direction: row;
align-items: center;
}

.group {
display: flex;
flex-direction: row;
align-items: flex-start;
}

.item-double {
flex: 2;
}
}