Skip to content

Footer glide upwards when pointer hovers the footer #4

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

Open
conorcode wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Footer glide upwards when pointer hovers the footer #4

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
195d66f
Footer glide upwards when pointer hovers the footer
Sep 27, 2019
b4b78bd
after merge upstream
Oct 5, 2019
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
168 changes: 83 additions & 85 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,160 +1,158 @@
* {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}

body {
font-family: system-ui, BlinkMacSystemFont, Roboto, arial, sans-serif;
font-size: 12px;
font-family: system-ui, BlinkMacSystemFont, Roboto, arial, sans-serif;
font-size: 12px;
}
/*Google logo is a background image of a h1 block*/
h1#logo {
height: 92px;
width: 272px;
background: url("images/googlelogo_color_272x92dp.png") top left no-repeat;
background-size: 100%;
margin: 0 auto;
height: 92px;
width: 272px;
background: url("images/googlelogo_color_272x92dp.png") top left no-repeat;
background-size: 100%;
margin: 0 auto;
}
/*the container for the center contents*/
#mainContainer {
width: 580px;
margin: 150px auto 0;
text-align: center;
width: 580px;
margin: 150px auto 0;
text-align: center;
}

/*search box I added an ID { "searchBox" }*/
input[type="text"] {
height: 44px;
border: 1px solid rgba(223, 225, 229);
font-size: 16px;
border-radius: 24px;
box-sizing: border-box;
width: 44px;
color: #444;
background-color: white;
margin: 25px 0 25px 0;
text-indent: 2.6em;
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
transition: width .5s ease-in-out;
height: 44px;
border: 1px solid rgba(223, 225, 229);
font-size: 16px;
border-radius: 24px;
box-sizing: border-box;
width: 44px;
color: #444;
background-color: white;
margin: 25px 0 25px 0;
text-indent: 2.6em;
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
transition: width 0.5s ease-in-out;
}
/*still refers to search box*/
input[type="text"]:hover {
width: 584px;
width: 584px;
}
/*still refers to search box*/
input[type="text"]:focus {
width: 584px;
width: 584px;
}
/*refers to google search button*/

input[type="submit"] {
background-color: rgba(242, 242, 242);
padding: 10px 15px;
font-size: 13px;
border: none;
color: rgba(85, 89, 93);
margin: 4px;
border-radius: 4px;
cursor: pointer;
background-color: rgba(242, 242, 242);
padding: 10px 15px;
font-size: 13px;
border: none;
color: rgba(85, 89, 93);
margin: 4px;
border-radius: 4px;
cursor: pointer;
}

small {
display: block;
margin: 20px 0 0;
font-size: 12px
display: block;
margin: 20px 0 0;
font-size: 12px;
}

nav#header {
padding: 20px;
display: flex;
justify-content: space-between;
padding: 20px;
display: flex;
justify-content: space-between;
}

nav ul {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}

.app-icon {
width: 45%;
margin-right: -15px;
transition: 0.15s;
width: 45%;
margin-right: -15px;
transition: 0.15s;
}
/*this changes the opacity of icon with transition of 0.15s */
.app-icon:hover {
opacity: 0.5;
}
opacity: 0.5;
}

nav ul li{
display: inline-block;
nav ul li {
display: inline-block;
}
/* this changes the appearance of link when visited and not visited */
nav#header ul li a:link,
nav#header ul li a:visited {
color: #555;
text-decoration: none;
padding: 10px;
color: black;
font-size: 13px;
color: #555;
text-decoration: none;
padding: 10px;
color: black;
font-size: 13px;
}
/* sign-in button*/
nav#header ul li #signIn {
background-color: rgba(62, 129, 251);
padding: 5px 10px;
border-radius: 2px;
color: white;
background-color: rgba(62, 129, 251);
padding: 5px 10px;
border-radius: 2px;
color: white;
}
/* This is the sign in button change */
#signIn:hover{
filter: brightness(115%);
background-color: rgba(72, 133, 237, 0.865);
box-shadow: 0 0 5px 1px #4884eb;
#signIn:hover {
filter: brightness(115%);
background-color: rgba(72, 133, 237, 0.865);
box-shadow: 0 0 5px 1px #4884eb;
}


/* underlines links on pointer hover */
nav#header ul li a:hover {
text-decoration: underline;
color: #333;
text-decoration: underline;
color: #333;
}

footer {
position: fixed;
bottom: -28px;
background-color: rgba(239, 239, 239);
padding: 12px 0;
width: 100%;
transition: transform 0.2s ease-in-out;
cursor: pointer;
position: fixed;
bottom: -28px;
background-color: rgba(239, 239, 239);
padding: 12px 0;
width: 100%;
transition: transform 0.2s ease-in-out;
cursor: pointer;
}

footer:hover, footer.slide {
transform: translateY(-28px);
footer:hover,
footer.slide {
transform: translateY(-28px);
}

footer nav {
padding: 0 12px;
padding: 0 12px;
}

footer nav ul li {
padding: 0 12px;
padding: 0 12px;
}

footer nav ul li a{
color: rgba(85, 89, 93);
text-decoration: none;
footer nav ul li a {
color: rgba(85, 89, 93);
text-decoration: none;
}

footer nav ul li a:hover {
text-decoration: underline;
text-decoration: underline;
}

footer nav ul {
float: left;
float: left;
}

footer nav ul#rightLinks {
float: right;
float: right;
}