diff --git a/css/style.css b/css/style.css index 0871131..22f722e 100644 --- a/css/style.css +++ b/css/style.css @@ -1,79 +1,65 @@ section { - padding: 100px 0; -} + padding: 100px 0; } html, body { - overflow-x: hidden; -} + overflow-x: hidden; } body { font-family: 'Roboto'; font-size: 17px; font-weight: 400; - background-color: #eee; -} + background-color: #eee; } h1 { font-size: 200%; text-transform: uppercase; letter-spacing: 3px; - font-weight: 400; -} -img { max-width: 80%; } + font-weight: 400; } header { background: #3F51B5; color: #FFFFFF; - padding: 150px 0; -} -header p { - font-family: 'Allura'; - color: rgba(255, 255, 255, 0.2); - margin-bottom: 0; - font-size: 60px; - margin-top: -30px; -} + padding: 150px 0; } + header p { + font-family: 'Allura'; + color: rgba(255, 255, 255, 0.2); + margin-bottom: 0; + font-size: 60px; + margin-top: -30px; } .timeline { - position: relative; -} -.timeline::before { - content: ''; - background: #C5CAE9; - width: 5px; - height: 95%; - position: absolute; - left: 50%; - transform: translateX(-50%); -} + position: relative; } + .timeline::before { + content: ''; + background: #C5CAE9; + width: 5px; + height: 95%; + position: absolute; + left: 50%; + transform: translateX(-50%); } .timeline-item { width: 100%; - margin-bottom: 70px; -} -.timeline-item:nth-child(even) .timeline-content { - float: right; - padding: 40px 30px 10px 30px; -} -.timeline-item:nth-child(even) .timeline-content .date { - right: auto; - left: 0; -} -.timeline-item:nth-child(even) .timeline-content::after { - content: ''; - position: absolute; - border-style: solid; - width: 0; - height: 0; - top: 30px; - left: -15px; - border-width: 10px 15px 10px 0; - border-color: transparent #f5f5f5 transparent transparent; -} -.timeline-item::after { - content: ''; - display: block; - clear: both; -} + margin-bottom: 70px; } + .timeline-item:nth-child(even) .timeline-content { + float: right; + padding: 40px 30px 10px 30px; } + .timeline-item:nth-child(even) .timeline-content .date { + right: auto; + left: 0; } + .timeline-item:nth-child(even) .timeline-content::after { + content: ''; + position: absolute; + border-style: solid; + width: 0; + height: 0; + top: 30px; + left: -15px; + border-width: 10px 15px 10px 0; + border-color: transparent #f5f5f5 transparent transparent; } + .timeline-item::after { + content: ''; + display: block; + clear: both; } .timeline-content { position: relative; @@ -81,19 +67,17 @@ header p { padding: 10px 30px; border-radius: 4px; background: #f5f5f5; - box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3); -} -.timeline-content::after { - content: ''; - position: absolute; - border-style: solid; - width: 0; - height: 0; - top: 30px; - right: -15px; - border-width: 10px 0 10px 15px; - border-color: transparent transparent transparent #f5f5f5; -} + box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3); } + .timeline-content::after { + content: ''; + position: absolute; + border-style: solid; + width: 0; + height: 0; + top: 30px; + right: -15px; + border-width: 10px 0 10px 15px; + border-color: transparent transparent transparent #f5f5f5; } .timeline-img { width: 30px; @@ -103,8 +87,7 @@ header p { position: absolute; left: 50%; margin-top: 25px; - margin-left: -15px; -} + margin-left: -15px; } a { background: #3F51B5; @@ -116,66 +99,53 @@ a { margin-top: 10px; display: inline-block; border-radius: 2px; - box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6); -} -a:hover, a:active, a:focus { - background: #32408f; - color: #FFFFFF; - text-decoration: none; -} + box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6); } + a:hover, a:active, a:focus { + background: #32408f; + color: #FFFFFF; + text-decoration: none; } .timeline-card { - padding: 0 !important; -} -.timeline-card p { - padding: 0 20px; -} -.timeline-card a { - margin-left: 20px; -} + padding: 0 !important; } + .timeline-card p { + padding: 0 20px; } + .timeline-card a { + margin-left: 20px; } .timeline-item:nth-child(2) .timeline-img-header { background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1458530970867-aaa3700e966d") center center no-repeat; - background-size: cover; -} + background-size: cover; } .timeline-item:nth-child(5) .timeline-img-header { background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1444093826349-9ce8c622f4f3") center center no-repeat; - background-size: cover; -} + background-size: cover; } .timeline-item:nth-child(6) .timeline-img-header { background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1471479917193-f00955256257") center center no-repeat; - background-size: cover; -} + background-size: cover; } .timeline-item:nth-child(8) .timeline-img-header { background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1466840787022-48e0ec048c8a") center center no-repeat; - background-size: cover; -} + background-size: cover; } .timeline-item:nth-child(10) .timeline-img-header { background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1447639703758-f525f36456bf") center center no-repeat; - background-size: cover; -} + background-size: cover; } .timeline-item:nth-child(11) .timeline-img-header { background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1469429978400-082eec725ad5") center center no-repeat; - background-size: cover; -} + background-size: cover; } .timeline-img-header { height: 200px; position: relative; - margin-bottom: 20px; -} -.timeline-img-header h2 { - color: #FFFFFF; - position: absolute; - bottom: 5px; - left: 20px; -} + margin-bottom: 20px; } + .timeline-img-header h2 { + color: #FFFFFF; + position: absolute; + bottom: 5px; + left: 20px; } + blockquote { margin-top: 30px; color: #757575; border-left-color: #3F51B5; - padding: 0 20px; -} + padding: 0 20px; } .date { background: #FF4081; @@ -184,24 +154,19 @@ blockquote { padding: 10px; position: absolute; top: 0; - right: 0; -} + right: 0; } @media screen and (max-width: 768px) { .timeline::before { - left: 50px; - } + left: 50px; } .timeline .timeline-img { - left: 50px; - } + left: 50px; } .timeline .timeline-content { max-width: 100%; width: auto; - margin-left: 70px; - } + margin-left: 70px; } .timeline .timeline-item:nth-child(even) .timeline-content { - float: none; - } + float: none; } .timeline .timeline-item:nth-child(odd) .timeline-content::after { content: ''; position: absolute; @@ -211,6 +176,10 @@ blockquote { top: 30px; left: -15px; border-width: 10px 15px 10px 0; - border-color: transparent #f5f5f5 transparent transparent; - } -} + border-color: transparent #f5f5f5 transparent transparent; } } +img { + max-width: 100%; + margin-top: 10px; } + +.timeline-img-header { + background: #3F51B5; } diff --git a/scss/style.scss b/scss/style.scss index 9ab65c0..6402e65 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -286,3 +286,8 @@ blockquote { } } +img { max-width: 100%; + margin-top: 10px;} +.timeline-img-header { background: #3F51B5; + + }