From 1ae45583f50bcfd0df12cf651e602541a5a843c8 Mon Sep 17 00:00:00 2001 From: Arian Date: Thu, 16 May 2024 21:01:52 +0200 Subject: [PATCH] FEATURE: DONE REQUIREMENTS ABOUT CSS --- css/style.css | 145 ++++++++++++++++++++++++++++++++++ index.html | 213 +++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 355 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index e69de29..f7d8fa6 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,145 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:100,300,700'); + +/* Custom variables */ + +:root { + --color-dark-blue: rgb(25, 33, 41); + --color-blue: rgb(67, 163, 230); + --color-white-text: rgb(255, 255, 255); + --color-black-text: rgb(0, 0, 0); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + size: 10px; + line-height: 3.5em; + font-weight: 300; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Roboto Condensed', sans-serif; +} + +h1 { + font-size: 9em; + text-align: center; + text-transform: uppercase; +} + +h2 { + font-size: 5em; + text-align: center; + text-transform: uppercase; +} +h3 { + font-size: 4.2em; + text-align: center; + line-height: 1em; +} +h4 { + font-size: 1.5em; + letter-spacing: 0, 4px; + line-height: 1em; +} + +h5 { + font-size: 1.2em; + line-height: 1em; +} + +.nav-bar { + background-color: var(--color-dark-blue); +} + +.nav-bar a { + color: var(--color-white-text); + text-decoration: none; + font-size: 2em; +} + +.header { + min-height: 650px; + background-image: url('https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironhack-skydive-background.jpg'); + background-position: 0 0; + background-repeat: none; + background-size: cover; + + & h2 { + color: var(--color-white-text); + text-shadow: #020819 8px -20px 9px; + } + + & .quote { + font-size: 2.5em; + } +} + +.dark-background { + background-color: var(--color-dark-blue); + color: var(--color-white-text); +} + +.text p { + font-size: 2em; + font-weight: 100; + text-align: center; +} + +.link-btn a { + background-color: var(--color-blue); + color: var(--color-white-text); + font-family: 'Roboto Condensed', sans-serif; + font-size: 2em; + letter-spacing: 0.5px; + text-align: center; + text-decoration: none; +} + +.service-box { + font-size: 1.7em; + text-align: center; +} + +.service-box img { + width: 125px; +} + +#team .section-text { + font-size: 1.9em; + text-align: center; +} +#team .section-name { + font-size: 1.5em; + font-weight: 700; +} + +#team img { + max-width: 250px; + height: 180px; +} + +.footer { + font-size: 1.9em; + text-align: center; + & a { + color: var(--color-blue); + text-decoration: none; + } + & ul { + list-style-type: none; + padding: 0; + } +} + +.address { + font-size: 0.8em; + font-style: normal; +} diff --git a/index.html b/index.html index b8b04c7..23294d7 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,221 @@ + + Ironskydive + - - - + + + + +
+

+ ironhack-skydive-logo + IronSkydive +

+

+ Let the trip begin +

+ +
+ + +
+
+

+ Hello ! +

+ Learn More +

+ Welcome to IronSkydive, the best adventure you will ever have. +

+
+
+

+ About us +

+ Watch Video +

+ We like a lot programmiing websites, but we also love to practice sport +

+
+
+

+ Wanna join? +

+ Register +

+ Join our fitness program to be in good shape while learning. +

+
+
+ +
+

+ How do we structure the day? +

+
+ training-logo +

+ 1. Training +

+

+ We teach all the necessary things to jump from the plane without any king of problem +

+
+
+ get-ready-logo +

+ 2. Get ready +

+

+ You are already prepared, you just need the suit and a parachute. All sizes available +

+
+
+ fly-logo +

+ 3. Fly +

+

+ You are ready, and the plane is waitiing for us in the hangar. Let's fly! +

+
+
+ jump-logo +

+ 4. Jump! +

+

+ You have done the most complicated. Just one step left...jump! +

+
+
+ +
+

Team

+

Our team collectively has 75 years of experience. Odds are, when you jump out of the + plane with these + professionals, you won't go splat.

+
+
+
+

+ Harold Rothstein +

+ photo-about-Harold-Rothstein +
+
+

+ Susan Phillips +

+ photo-about-Susan-Phillips +
+
+

+ Taylor Roberts +

+ photo-about-Taylor-Roberts +
+
+
+ +
+

+ Schedule +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimeMondayTuesdayWednesdayThursdayFridaySaturday
+ 9:00 - 11:00 + XXX
12:00 - 14:00XX
15:00 - 17:00XXXX
+

+ Schedule a Time Slot +

+
+ + + + \ No newline at end of file