fcc-challenges/tools-that-love-you/tools_that_love_you.css

335 lines
4.6 KiB
CSS

.id-nav-hack {
margin-top: -16rem;
padding-top: 16rem;
}
body {
width: 100%
}
#header {
background-color: #ffffff;
display: flex;
flex-direction: column;
left: 0;
padding-bottom: 2rem;
position: fixed;
right: 0;
top: 0;
z-index: 998;
}
#logo-container {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 2rem 8rem 0;
}
#image-container {
margin-top: 1rem;
}
#logo-name {
background-color: #69c5f8;
border-radius: 1rem;
font-weight: 800;
padding: 1rem 1rem 0;
text-align: center;
}
#nav-bar {
display: flex;
flex-direction: row;
flex-grow: 1;
font-size: 2rem;
justify-content: space-around;
margin-top: 2rem;
}
#form {
align-items: center;
display: flex;
flex-direction: column;
margin-bottom: 5rem;
padding-top: 13rem;
}
#form label,input {
margin: 1rem auto;
}
#Tools {
display: flex;
flex-direction: column;
margin-bottom: 4rem;
}
#Tools div{
flex-grow: 1;
}
.tool {
display: flex;
}
.tool-icon {
flex: 1;
max-width: 30%;
padding-right: 90px;
}
.tool-desc-container {
flex: 1;
}
.tool-desc-container ul{
list-style: none;
margin-left: -4rem;
}
.tool-icon i {
color: #f89c69;
margin: 4rem 0 4rem 95%;
}
.video {
display: flex;
justify-content: center;
margin-bottom: 3rem;
position: relative;
}
.video-container {
width: 90%;
}
.embed-container {
height: 0;
max-width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.embed-container iframe, .embed-container object, .embed-container embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#purchase {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#purchase div {
text-align: center;
width: 90%;
border-color: #000000;
border-style: solid;
border-width: 1px;
border-radius: 1rem;
box-shadow: 10px 10px;
margin: 2rem;
}
.footer {
margin: 4rem 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-size: 150%;
font-family: monospace;
width: 100%;
}
.footer-l {
font-size: 100%;
}
.footer-lr {
text-align: center;
}
.footer-middle {
flex-direction: row;
}
@media (orientation: landscape) {
#header {
flex-direction: row;
flex-grow: 1;
justify-content: flex-start;
}
#logo-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 2rem 0 0;
width: 230px;
}
#image-container {
margin-right: 25px;
margin-top: 1rem;
}
#nav-bar {
flex-direction: row;
justify-content: space-around;
margin-top: unset;
padding-top: 4rem;
width: auto;
}
#form {
padding-top: 10rem;
}
.id-nav-hack {
margin-top: -10rem;
padding-top: 10rem;
}
.tool-icon {
flex: 1;
max-width: 40%;
padding-right: 90px;
}
.tool-icon i {
color: #F69D65;
margin: 4rem 0 4rem 95%;
}
.footer-l {
min-width: 416px;
}
.footer-lr {
flex-grow: 1;
flex-basis: 0;
}
.footer-middle {
display: flex;
flex-direction: column;
justify-content: unset;
flex-grow: 1;
flex-basis: 0;
}
.footer-middle div {
display: flex;
justify-content: space-around;
}
.video-container {
box-shadow: 10px 10px;
border-radius: 1rem;
width: 400px;
}
#purchase div {
width: 400px;
}
}
@media only screen and (max-width: 768px) {
#form {
margin-bottom: 1rem;
}
#Tools {
margin-bottom: 0;
}
.tool-icon {
max-width: 20%;
}
#purchase {
flex-direction: column;
flex-wrap: nowrap;
justify-content: unset;
align-items: center;
}
.footer {
margin-top: 0;
flex-direction: column;
align-items: center;
justify-content: unset;
}
.footer-middle {
display: flex;
justify-content: space-around;
width: 100%;
flex-direction: unset;
}
.footer-lr {
margin-top: 1rem;
}
.footer-r {
display: flex;
font-size: 75%;
flex-wrap: wrap;
justify-content: center;
}
}
.attachment-full {
position: absolute;
right: 0px;
height: 149px;
width: 149px;
z-index: 999;
}
.githubLabel {
background-color: #00293C;
border: none;
width: 149px;
height: 0px;
position: absolute;
right: 0px;
margin-top: -10px;
z-index: 999;
}
@media (orientation: portrait) {
.footer-l {
font-size: 75%;
}
.attachment-full {
height: 99px;
width: 99px;
}
.githubLabel {
width: 99px;
}
}
@media (orientation: landscape) and (max-height: 400px) {
.attachment-full {
height: 99px;
width: 99px;
}
.githubLabel {
width: 99px;
}
}