475 resources/css/style.css
View file
@@ -1,4 +1,3 @@
<<<<<<< HEAD
html {
background-color: #EEE;
color: #444;
@@ -471,477 +470,3 @@ footer .footer-nav a:active {
color: #888;
}
/* down from over 500... goal 400 */
=======
html {
background-color: #EEE;
color: #444;
font-size: 16px;
}
section {
font-family: 'montserrat';
font-size: 1rem;
line-height: 1.4rem;
}
h1 {
font-family: 'montserrat';
font-weight: 800;
font-size: 2rem;
line-height: 2.9rem;
margin: auto;
}
h2 {
font-family: 'montserrat';
font-size: 1.10rem;
font-weight: bold;
padding-bottom: .5em;
line-height: 1rem;
}
.container {
max-width: 1050px;
margin: auto;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.headline {
padding: 32px 0;
}
/* header */
header {
background-color: white;
position: fixed;
width: 100%;
box-shadow: 0 -5px 40px rgba(0, 0, 0, 0.2);
}
header .container {
align-items: center;
display: flex;
height: 64px;
justify-content: space-between;
}
/* header bar left side: company name and logo */
/* lion logo */
header .logo img {
height: 2.75rem;
padding-left: 16px;
}
header .logo {
align-items: center;
color: #333;
display: flex;
/* 'colmar' typeface*/
font-family: 'montserrat', sans-serif;
font-size: 1.3rem;
font-weight: bolder;
justify-content: space-between;
padding-left: .08rem;
text-transform: uppercase;
}
/* 'academy' typeface */
header .logo span:nth-child(3) {
color: #aaa;
font-size: 1.3rem;
font-weight: lighter;
letter-spacing: 0.03rem;
text-transform: uppercase;
}
/* header bar right nav */
header nav li {
display: inline-block;
font-family: helvetica, 'sans-serif';
flex-grow: 1;
padding: 12px 8px;
}
header nav a {
text-decoration: none;
background-color: white;
border-radius: .15rem;
color: #333;
margin: 0 -.5rem;
padding: 1rem .5rem;
transition: background-color 200ms ease-in;
transition-delay: 75ms;
}
header nav a:hover {
background-color: #ddd;
border-radius: .15rem;
color: black;
margin: 0 -.5rem;
padding: 1rem .5rem;
transition: background-color 300ms ease-in;
transition-delay: 75ms;
}
header #mobile-header{
align-items: center;
display: none;
padding: 0 24px;
text-align: center;
}
/* changes to nav menu for mobile layout */
@media only screen and (max-width: 600px) {
header {
position: static;
}
header #desktop-header {
display: none;
}
header #mobile-header {
display: block;
}
}
/* -left size: 3/5- -right size 2/5- ratio column */
/* left side */
.left-child {
flex: 3;
padding: 32px 24px;
}
.left-child img,
.left-child video {
width: 100%;
}
/* right side */
.right-child {
flex-direction: column;
display: flex;
flex: 2;
padding: 2px;
vertical-align: center;
}
.right-column {
align-items: center;
display: flex;
justify-content: space-between;
margin-left: .1em;
width: 100%;
transition: background-color 200ms ease-in;
}
.right-column img.mobile {
display: none;
}
.right-column:hover {
background-color: #ddd;
border-top: 0;
color: black;
transition: background-color 200ms ease-in;
transition-delay: 45ms;
}
.right-column img {
width: 35%;
padding: 16px;
}
/* section id 'learn' */
#learn-something {
padding-top: 64px;
background-color: #ddd;
margin: 0 auto;
}
#learn-something h1 { /* juuust a little bigger */
font-size: 2.4rem;
text-align: left;
line-height: 2.7rem;
}
#learn-something h2 {
line-height: 1.8rem;
font-size: 1.36rem;
}
#learn-something .container {
display: flex;
}
#learn-something .right-child {
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
height: auto;
}
#learn-something li {
padding-left: 24px;
margin: 18px 0;
}
#learn-something button { /* Start here */
background-color: #333;
border: 0;
border-radius: .12rem;
color: #ddd;
font-size: 1rem;
max-width: 80%;
padding: 13px;
text-align: center;
text-decoration: none;
transition: all 250ms ease-in;
}
#learn-something button:hover { /* Start here: */
background-color: #888;
color: white;
transition: all 400ms ease 0s;
transition-delay: 150ms;
}
#learn-something button:active {
background-color: #888;
}
@media only screen and (max-width: 800px) {
#learn-something .container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#learn-something .left-child {
padding: 0;
}
#learn-something .right-child {
width: 100%;
}
#learn-something .container .right-child {;
align-items: center;
margin: 32px0;
padding-left: 0;
}
}
@media only screen and (min-width: 600px) {
#learn-something button {
width: 100%;
}
#learn-something button:hover {
opacity: .7;
}
#learn-something button:active {
opacity: .7;
}
}
@media only screen and (max-width: 600px) {
#learn-something {
padding-top: 0;
}
}
/* doesnt hurt to keep practicing */
#keep-practicing {
display: flex;
justify-content: space-between;
}
/* keep practicing - left */
#keep-practicing .left-child li {
padding: 0 0 12px 0;
}
#keep-practicing .content {
padding: 16px 1px 16px0;
width: 100%;
}
#keep-practicing .content a {
color: dodgerblue;
display: block;
font-size: 14px;
text-decoration: none;
padding-top: .9rem;
transition: color 200ms ease-in;
}
#keep-practicing .content a:hover {
color: lightskyblue;
transition: color 200ms ease-in;
}
#keep-practicing .content a:active {
color: dodgerblue
transition: color 200ms ease-in;
}
/* keep practicing - right */
#keep-practicing .right-child {
align-items: center;
border-left: 0.1em solid #ddd;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 16px 0 32px 0;
}
/* column styling specific to this section */
#keep-practicing .right-column:first-child {
border-top: .22em solid #eee;
margin-top: -.44em;
}
#keep-practicing .right-column {
padding-top: .22em;
border-top: .22em double #ddd;
}
/* ~~~~~~~~~~~~~~ */
#keep-practicing .lecture {
background-color: #ddd;
}
/* doesnt hurt to keep practicing - mobile changes */
@media only screen and (max-width: 600px) {
#keep-practicing .left-child {
display: none;
}
#keep-practicing .right-child {
align-items: center;
border-left: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 16px 16px 32px 16px;
}
#keep-practicing .second-info {
border-bottom:0;
border-top:0;
margin: 16px0;
}
#keep-practicing .right-column {
align-items: center;
border: none;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
#keep-practicing .right-column img.desktop {
display: none;
}
#keep-practicing .right-column img.mobile {
display: flex;
width: 100%;
}

#keep-practicing .right-column:hover {
background-color: #eee;
border-top: none;
color: black;
padding-top: -.22em;
transition: background-color 200ms ease-in;
transition-delay: 45ms;
}
#keep-practicing .content {
margin-top: 16px;
padding:0;
width: 100%;
}
}
/* start learning */
#start-learning {
background-color: #ddd;
padding-bottom: 32px;
}
#start-learning .list {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0 auto;
width: 80%;
}
#start-learning .list-item {
background-color: #eee;
flex: 30%;
margin: 0 20px 20px 0;
transition: all 300ms ease-in ;
}
#start-learning .list-item:hover {
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 300ms ease-in ;
}
#start-learning .list-item img { /* box image */
width: 100%;
}
#start-learning .list-item li:nth-child(2) { /* 'software engineering' */
font-family: 'montserrat';
font-size: 1.10rem;
font-weight: bold;
line-height: 1rem;
padding: 16px 0 13px 16px;
}
#start-learning .list-item li:nth-child(3) { /* 'courses' */
text-transform: uppercase;
padding: 0 0 5px 16px ;
font-size: .9rem;
}
#start-learning .list-item li:nth-child(4) { /* 'web development...' */
padding: 0 16px 16px 16px;
font-size: .8rem;
line-height: 1.2rem;
}
/* courses mobile changes */
@media only screen and (max-width: 600px) {
#start-learning .list-item {
display: flex;
align-items: center;
padding: 36px 0;
align-items: center;;
width: 100%
}
#start-learning .list-item li:first-child,
#start-learning .list-item li:nth-child(3),
#start-learning .list-item li:nth-child(4) {
display: none;
}
#start-learning .list-item li:nth-child(2) {
font-size: 1.8rem;
line-height: normal;
padding: 0 24px;
}
#start-learning .list {
flex-direction: column;
}
}
/* thesis section */
#thesis-work .flex {
display: flex;
justify-content: space-between;
}
#thesis-work .container {
margin-top: -32px;
}
#thesis-work .first-info {
margin-top: 32px;
}
@media only screen and (max-width: 600px) {
#thesis-work .flex .right-child {
display: none;
}
#thesis-work .flex .left-child {
width: 100%;
padding:0;
}
#thesis-work .flex .left-child p {
display: none;
}
#thesis-work .flex .left-child h6 {
display: none;
}
}
/* footer section */
footer {
border-top: 1px solid #ddd;
background-color: #f3f5f5;
height: 3.5rem;
}
footer p {
padding-left: 24px;
padding-right: 24px;
color: #383838;
}
footer .container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
}
footer nav {
text-align: right;
flex-grow: 1;
}
footer .footer-nav a {
display: inline-block;
padding-right: 16px;
color: #383838;
font-size: .75rem;
cursor: auto;
text-decoration: none;
}
footer .footer-nav a:hover {
color: #888;
}
footer .footer-nav a:active {
color: #888;
}
/* down from over 500... goal 400 */
>>>>>>> 374f0ed81be3f45defc9e8435b0817b8582f24da