diff --git a/css/style.css b/css/style.css index e69de29..64521be 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,249 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:100,300,700'); + +* { + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5 { + font-family: "Roboto Condensed"; +} + +h1 { + font-size: 9em; + text-align: center; + text-transform: uppercase; +} + +h2 { + color: white; + text-shadow: #020819 8px -20px 9px; + font-size: 5em; + text-align: center; + text-transform: uppercase; + line-height: 4em; +} + +h3 { + font-size: 4.2em; + text-align: center; +} + +h4 { + font-size: 1.5em; + letter-spacing: 0.4px; + margin-bottom: 15px; +} + +h5 { + font-size: 1.2em; +} + +body { + font-family: "Roboto"; + font-size: 10px; + line-height: 3.5em; + font-weight: 300; +} + +.nav-bar { + color: white; + background-color: rgb(25, 33, 41); + padding: 14px 0 14px 0; + height: 40px; +} + +.nav-bar-ul { + width: 1200px; + margin: 0 auto; +} + +.nav-bar-li { + float: left; + list-style-type: none; + text-align: center; + width: 33%; +} + +.nav-bar-item { + color: white; + font-size: 2em; + text-decoration: none; +} + +.header { + height: 650px; + background-image: url("https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironhack-skydive-background.jpg"); + background-repeat: no-repeat; + background-position: 0 0; + background-size: cover; + padding-top: 50px; + position: relative; +} + +.quote { + font-size: 2.5em; + position: absolute; + left: 10%; + bottom: 15vh; + +} + +.col { + float: left; +} + +.col-3 { + width: 30%; +} + +.col-middle { + margin-left: 5%; + margin-right: 5%; +} + +.clearfix { + clear: both; +} + +.dark-background { + background-color: rgb(25, 33, 41); + color: white; +} + +.container { + width: 1200px; + margin: 0 auto; + padding: 75px 0; +} + +#general-information .text { + font-size: 2em; + font-weight: 100; + text-align: center; + margin: 20px 0; +} + +.link-btn { + background-color: rgb(67,163,230); + color: white; + font-family: "Roboto Condensed"; + font-size: 2em; + letter-spacing: 0.5px; + text-align: center; + text-decoration: none; + display: block; + width: 150px; + margin: 40px auto 0 auto; + padding: 14px 20px 14px 20px; + border: 2px solid rgba(0,0,0,0.5); +} + +.service-box { + font-size: 1.7em; + text-align: center; + border: 2px solid #eee; + border-radius: 20px; + box-sizing: border-box; + box-shadow: 2px 2px 10px 0 #eee; + margin: 50px 5% 0 5%; + padding: 20px; + width: 40% +} + +.service-image { + font-size: 1.7em; + width: 125px; + text-align: center; +} + +#team .section-text { + font-size: 1.9em; + text-align: center; + width: 60%; + margin: 10px auto; +} + +#team hr { + margin: 20px auto 30px; + width: 40%; +} + +#team .member-name { + font-size: 1.5em; + font-weight: 700; + display: block; + text-align: center; +} + +.schedule-table { + margin: 0 auto 40px auto; + font-size: 1.5em; +} + +.schedule-table th, +.schedule-table td { + border-bottom: 1px solid black; + padding: 5px 10px; +} + +.slot-form-container { + width: 40%; + margin: 18px auto 0 auto; + font-size: 1.5em; + text-align: center; +} + +label { + display: block; + margin-bottom: 5px; + line-height: 15px; + +} + +.slot-form-container input, +.slot-form-container select { + height: 20px; + outline: none; + padding: 3px; + width: 100%; +} + +.slot-form-container button { + color: black; + background: white; + border: 1px solid black; + padding: 9px; + margin-top: 15px; +} + +.footer { + font-size: 1.9em; + text-align: center; + padding: 0; + width: 100%; +} + +.footer .map-frame { + height: 375px; + float: right; + width: 60%; +} + +.footer .address { + font-style: normal; + font-size: 0.8em; + margin-bottom: 30px; + line-height: 1.5; + +} + +.footer .footer-link { + color: rgb(67, 163, 230); + text-decoration: none; +} + +.footer .follow-us-item { + list-style-type: none; + line-height: 1.5; +} \ No newline at end of file diff --git a/index.html b/index.html index b8b04c7..46d11cb 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,200 @@ -