diff --git a/assets/images/Ellie Rose/Architecture_Connected_Curves.jpg b/assets/images/Ellie Rose/Architecture_Connected_Curves.jpg new file mode 100644 index 00000000000..56aeeea6024 Binary files /dev/null and b/assets/images/Ellie Rose/Architecture_Connected_Curves.jpg differ diff --git a/assets/images/Ellie Rose/Architecture_Cross_Bar.jpg b/assets/images/Ellie Rose/Architecture_Cross_Bar.jpg new file mode 100644 index 00000000000..efdd811878a Binary files /dev/null and b/assets/images/Ellie Rose/Architecture_Cross_Bar.jpg differ diff --git a/assets/images/Ellie Rose/Architecture_Horseshoe.jpg b/assets/images/Ellie Rose/Architecture_Horseshoe.jpg new file mode 100644 index 00000000000..d6f231c7dda Binary files /dev/null and b/assets/images/Ellie Rose/Architecture_Horseshoe.jpg differ diff --git a/assets/images/Ellie Rose/Architecture_Water_on_Modern.jpg b/assets/images/Ellie Rose/Architecture_Water_on_Modern.jpg new file mode 100644 index 00000000000..af0712fad44 Binary files /dev/null and b/assets/images/Ellie Rose/Architecture_Water_on_Modern.jpg differ diff --git a/assets/images/Ellie Rose/Architecture_White_Light.jpg b/assets/images/Ellie Rose/Architecture_White_Light.jpg new file mode 100644 index 00000000000..d5679f79dc7 Binary files /dev/null and b/assets/images/Ellie Rose/Architecture_White_Light.jpg differ diff --git a/assets/images/Ellie Rose/Sport_Jump.jpg b/assets/images/Ellie Rose/Sport_Jump.jpg new file mode 100644 index 00000000000..d1582de0687 Binary files /dev/null and b/assets/images/Ellie Rose/Sport_Jump.jpg differ diff --git a/assets/images/Ellie Rose/Sport_Next_Hold.jpg b/assets/images/Ellie Rose/Sport_Next_Hold.jpg new file mode 100644 index 00000000000..c0db72fd183 Binary files /dev/null and b/assets/images/Ellie Rose/Sport_Next_Hold.jpg differ diff --git a/assets/images/Ellie Rose/Sport_Race_End.jpg b/assets/images/Ellie Rose/Sport_Race_End.jpg new file mode 100644 index 00000000000..74ce01abea4 Binary files /dev/null and b/assets/images/Ellie Rose/Sport_Race_End.jpg differ diff --git a/assets/images/Ellie Rose/Sport_Sky_Cross.jpg b/assets/images/Ellie Rose/Sport_Sky_Cross.jpg new file mode 100644 index 00000000000..5e39b15d579 Binary files /dev/null and b/assets/images/Ellie Rose/Sport_Sky_Cross.jpg differ diff --git a/assets/images/Ellie Rose/Sport_Tricks_in_the_air.mp4 b/assets/images/Ellie Rose/Sport_Tricks_in_the_air.mp4 new file mode 100644 index 00000000000..a2d592235e4 Binary files /dev/null and b/assets/images/Ellie Rose/Sport_Tricks_in_the_air.mp4 differ diff --git a/assets/images/Ellie Rose/sport_water_tunnel.jpg b/assets/images/Ellie Rose/sport_water_tunnel.jpg new file mode 100644 index 00000000000..df8ff6678a9 Binary files /dev/null and b/assets/images/Ellie Rose/sport_water_tunnel.jpg differ diff --git a/assets/images/Marcel/Architecture_Corner_Room.jpg b/assets/images/Marcel/Architecture_Corner_Room.jpg new file mode 100644 index 00000000000..f5fdf79a85c Binary files /dev/null and b/assets/images/Marcel/Architecture_Corner_Room.jpg differ diff --git a/assets/images/Marcel/Architecture_Dome.jpg b/assets/images/Marcel/Architecture_Dome.jpg new file mode 100644 index 00000000000..648dfa8e982 Binary files /dev/null and b/assets/images/Marcel/Architecture_Dome.jpg differ diff --git a/assets/images/Marcel/Architecture_On_a_hill.jpg b/assets/images/Marcel/Architecture_On_a_hill.jpg new file mode 100644 index 00000000000..989f2bbb7f1 Binary files /dev/null and b/assets/images/Marcel/Architecture_On_a_hill.jpg differ diff --git a/assets/images/Marcel/Architecture_coverr_circle_empty_highway_in_buenos_aires_587740985637.mp4 b/assets/images/Marcel/Architecture_coverr_circle_empty_highway_in_buenos_aires_587740985637.mp4 new file mode 100644 index 00000000000..30a926ad115 Binary files /dev/null and b/assets/images/Marcel/Architecture_coverr_circle_empty_highway_in_buenos_aires_587740985637.mp4 differ diff --git a/assets/images/Marcel/Architecure_Contrast.jpg b/assets/images/Marcel/Architecure_Contrast.jpg new file mode 100644 index 00000000000..2195a5a0d8f Binary files /dev/null and b/assets/images/Marcel/Architecure_Contrast.jpg differ diff --git a/assets/images/Marcel/Travel _Adventure_Door.jpg b/assets/images/Marcel/Travel _Adventure_Door.jpg new file mode 100644 index 00000000000..1312689296b Binary files /dev/null and b/assets/images/Marcel/Travel _Adventure_Door.jpg differ diff --git a/assets/images/Marcel/Travel_Bike_and_Stair.jpg b/assets/images/Marcel/Travel_Bike_and_Stair.jpg new file mode 100644 index 00000000000..e532050dfba Binary files /dev/null and b/assets/images/Marcel/Travel_Bike_and_Stair.jpg differ diff --git a/assets/images/Marcel/Travel_OpenMountain.jpg b/assets/images/Marcel/Travel_OpenMountain.jpg new file mode 100644 index 00000000000..86c5a3c4f7b Binary files /dev/null and b/assets/images/Marcel/Travel_OpenMountain.jpg differ diff --git a/assets/images/Marcel/Travel_SunsetonCanals.jpg b/assets/images/Marcel/Travel_SunsetonCanals.jpg new file mode 100644 index 00000000000..1a94e34a82d Binary files /dev/null and b/assets/images/Marcel/Travel_SunsetonCanals.jpg differ diff --git a/assets/images/Marcel/Travel_Tower.jpg b/assets/images/Marcel/Travel_Tower.jpg new file mode 100644 index 00000000000..954484d2164 Binary files /dev/null and b/assets/images/Marcel/Travel_Tower.jpg differ diff --git a/assets/images/Mimi/.DS_Store b/assets/images/Mimi/.DS_Store new file mode 100644 index 00000000000..5008ddfcf53 Binary files /dev/null and b/assets/images/Mimi/.DS_Store differ diff --git a/assets/images/Mimi/Animals_Rainbow.jpg b/assets/images/Mimi/Animals_Rainbow.jpg new file mode 100644 index 00000000000..6cfc042f843 Binary files /dev/null and b/assets/images/Mimi/Animals_Rainbow.jpg differ diff --git a/assets/images/Mimi/Animals_Wild_Horses_in_the_mountains.mp4 b/assets/images/Mimi/Animals_Wild_Horses_in_the_mountains.mp4 new file mode 100644 index 00000000000..d9c560dfbbc Binary files /dev/null and b/assets/images/Mimi/Animals_Wild_Horses_in_the_mountains.mp4 differ diff --git a/assets/images/Mimi/Event_BenevidesWedding.jpg b/assets/images/Mimi/Event_BenevidesWedding.jpg new file mode 100644 index 00000000000..bf0413ce78a Binary files /dev/null and b/assets/images/Mimi/Event_BenevidesWedding.jpg differ diff --git a/assets/images/Mimi/Event_PintoWedding.jpg b/assets/images/Mimi/Event_PintoWedding.jpg new file mode 100644 index 00000000000..5912d55410f Binary files /dev/null and b/assets/images/Mimi/Event_PintoWedding.jpg differ diff --git a/assets/images/Mimi/Event_SeasideWedding.jpg b/assets/images/Mimi/Event_SeasideWedding.jpg new file mode 100644 index 00000000000..03ed8a4811f Binary files /dev/null and b/assets/images/Mimi/Event_SeasideWedding.jpg differ diff --git a/assets/images/Mimi/Portrait_Background.jpg b/assets/images/Mimi/Portrait_Background.jpg new file mode 100644 index 00000000000..417c982a84f Binary files /dev/null and b/assets/images/Mimi/Portrait_Background.jpg differ diff --git a/assets/images/Mimi/Portrait_Nora.jpg b/assets/images/Mimi/Portrait_Nora.jpg new file mode 100644 index 00000000000..1229f1d0226 Binary files /dev/null and b/assets/images/Mimi/Portrait_Nora.jpg differ diff --git a/assets/images/Mimi/Portrait_Wednesday.jpg b/assets/images/Mimi/Portrait_Wednesday.jpg new file mode 100644 index 00000000000..4dbe4b02e4c Binary files /dev/null and b/assets/images/Mimi/Portrait_Wednesday.jpg differ diff --git a/assets/images/Mimi/Travel_HillsideColor.jpg b/assets/images/Mimi/Travel_HillsideColor.jpg new file mode 100644 index 00000000000..32323aecc29 Binary files /dev/null and b/assets/images/Mimi/Travel_HillsideColor.jpg differ diff --git a/assets/images/Mimi/Travel_Lonesome.jpg b/assets/images/Mimi/Travel_Lonesome.jpg new file mode 100644 index 00000000000..bb6fdc2e921 Binary files /dev/null and b/assets/images/Mimi/Travel_Lonesome.jpg differ diff --git a/assets/images/Nabeel/.DS_Store b/assets/images/Nabeel/.DS_Store new file mode 100644 index 00000000000..5008ddfcf53 Binary files /dev/null and b/assets/images/Nabeel/.DS_Store differ diff --git a/assets/images/Nabeel/Portrait_AfternoonBreak.jpg b/assets/images/Nabeel/Portrait_AfternoonBreak.jpg new file mode 100644 index 00000000000..3bb2ac52aee Binary files /dev/null and b/assets/images/Nabeel/Portrait_AfternoonBreak.jpg differ diff --git a/assets/images/Nabeel/Portrait_Alexandra.jpg b/assets/images/Nabeel/Portrait_Alexandra.jpg new file mode 100644 index 00000000000..cb68ff83388 Binary files /dev/null and b/assets/images/Nabeel/Portrait_Alexandra.jpg differ diff --git a/assets/images/Nabeel/Portrait_Shaw.jpg b/assets/images/Nabeel/Portrait_Shaw.jpg new file mode 100644 index 00000000000..ef96d47ea21 Binary files /dev/null and b/assets/images/Nabeel/Portrait_Shaw.jpg differ diff --git a/assets/images/Nabeel/Portrait_Sunkissed.jpg b/assets/images/Nabeel/Portrait_Sunkissed.jpg new file mode 100644 index 00000000000..564cd62780b Binary files /dev/null and b/assets/images/Nabeel/Portrait_Sunkissed.jpg differ diff --git a/assets/images/Nabeel/Travel_Boat_Wanderer.jpg b/assets/images/Nabeel/Travel_Boat_Wanderer.jpg new file mode 100644 index 00000000000..ed41f74a9bb Binary files /dev/null and b/assets/images/Nabeel/Travel_Boat_Wanderer.jpg differ diff --git a/assets/images/Nabeel/Travel_Bridge_into_Forest.jpg b/assets/images/Nabeel/Travel_Bridge_into_Forest.jpg new file mode 100644 index 00000000000..cd7ac1f3e4c Binary files /dev/null and b/assets/images/Nabeel/Travel_Bridge_into_Forest.jpg differ diff --git a/assets/images/Nabeel/Travel_On_the_Road.jpg b/assets/images/Nabeel/Travel_On_the_Road.jpg new file mode 100644 index 00000000000..6962233f1a9 Binary files /dev/null and b/assets/images/Nabeel/Travel_On_the_Road.jpg differ diff --git a/assets/images/Nabeel/Travel_Outdoor_Baths.jpg b/assets/images/Nabeel/Travel_Outdoor_Baths.jpg new file mode 100644 index 00000000000..58f7dc2482f Binary files /dev/null and b/assets/images/Nabeel/Travel_Outdoor_Baths.jpg differ diff --git a/assets/images/Nabeel/Travel_Road_into_Hill.jpg b/assets/images/Nabeel/Travel_Road_into_Hill.jpg new file mode 100644 index 00000000000..f8daa497283 Binary files /dev/null and b/assets/images/Nabeel/Travel_Road_into_Hill.jpg differ diff --git a/assets/images/Nabeel/Travel_Rock_Mountains.mp4 b/assets/images/Nabeel/Travel_Rock_Mountains.mp4 new file mode 100644 index 00000000000..92de1f6d63d Binary files /dev/null and b/assets/images/Nabeel/Travel_Rock_Mountains.mp4 differ diff --git a/assets/images/Rhode/Animals_Majesty.jpg b/assets/images/Rhode/Animals_Majesty.jpg new file mode 100644 index 00000000000..d06eee63d79 Binary files /dev/null and b/assets/images/Rhode/Animals_Majesty.jpg differ diff --git a/assets/images/Rhode/Animals_Puppiness.mp4 b/assets/images/Rhode/Animals_Puppiness.mp4 new file mode 100644 index 00000000000..6d50831efe2 Binary files /dev/null and b/assets/images/Rhode/Animals_Puppiness.mp4 differ diff --git a/assets/images/Rhode/Event_Emcee.jpg b/assets/images/Rhode/Event_Emcee.jpg new file mode 100644 index 00000000000..b553079359e Binary files /dev/null and b/assets/images/Rhode/Event_Emcee.jpg differ diff --git a/assets/images/Rhode/Event_KeyboardCheck.jpg b/assets/images/Rhode/Event_KeyboardCheck.jpg new file mode 100644 index 00000000000..4ed239031fd Binary files /dev/null and b/assets/images/Rhode/Event_KeyboardCheck.jpg differ diff --git a/assets/images/Rhode/Event_ProductPitch.jpg b/assets/images/Rhode/Event_ProductPitch.jpg new file mode 100644 index 00000000000..1f612804aee Binary files /dev/null and b/assets/images/Rhode/Event_ProductPitch.jpg differ diff --git a/assets/images/Rhode/Event_VentureConference.jpg b/assets/images/Rhode/Event_VentureConference.jpg new file mode 100644 index 00000000000..7b9f1974d3e Binary files /dev/null and b/assets/images/Rhode/Event_VentureConference.jpg differ diff --git a/assets/images/Rhode/Fashion_Melody_Red_on_Stripes.jpg b/assets/images/Rhode/Fashion_Melody_Red_on_Stripes.jpg new file mode 100644 index 00000000000..531ff86aa88 Binary files /dev/null and b/assets/images/Rhode/Fashion_Melody_Red_on_Stripes.jpg differ diff --git a/assets/images/Rhode/Fashion_Wings.jpg b/assets/images/Rhode/Fashion_Wings.jpg new file mode 100644 index 00000000000..8b34274ba5d Binary files /dev/null and b/assets/images/Rhode/Fashion_Wings.jpg differ diff --git a/assets/images/Rhode/Sport_2000_with_8.jpg b/assets/images/Rhode/Sport_2000_with_8.jpg new file mode 100644 index 00000000000..9b9dd1b6098 Binary files /dev/null and b/assets/images/Rhode/Sport_2000_with_8.jpg differ diff --git a/assets/images/Rhode/Sport_Butterfly.jpg b/assets/images/Rhode/Sport_Butterfly.jpg new file mode 100644 index 00000000000..d7072b8a43b Binary files /dev/null and b/assets/images/Rhode/Sport_Butterfly.jpg differ diff --git a/assets/images/Tracy/Art_Mine.jpg b/assets/images/Tracy/Art_Mine.jpg new file mode 100644 index 00000000000..35d8031f871 Binary files /dev/null and b/assets/images/Tracy/Art_Mine.jpg differ diff --git a/assets/images/Tracy/Art_Purple_light.jpg b/assets/images/Tracy/Art_Purple_light.jpg new file mode 100644 index 00000000000..02153b641e0 Binary files /dev/null and b/assets/images/Tracy/Art_Purple_light.jpg differ diff --git a/assets/images/Tracy/Art_Triangle_Man.jpg b/assets/images/Tracy/Art_Triangle_Man.jpg new file mode 100644 index 00000000000..0234e0629a9 Binary files /dev/null and b/assets/images/Tracy/Art_Triangle_Man.jpg differ diff --git a/assets/images/Tracy/Art_Wooden_Horse_Sculpture.mp4 b/assets/images/Tracy/Art_Wooden_Horse_Sculpture.mp4 new file mode 100644 index 00000000000..91791cc73a4 Binary files /dev/null and b/assets/images/Tracy/Art_Wooden_Horse_Sculpture.mp4 differ diff --git a/assets/images/Tracy/Event_18thAnniversary.jpg b/assets/images/Tracy/Event_18thAnniversary.jpg new file mode 100644 index 00000000000..1a9d7128271 Binary files /dev/null and b/assets/images/Tracy/Event_18thAnniversary.jpg differ diff --git a/assets/images/Tracy/Event_Sparklers.jpg b/assets/images/Tracy/Event_Sparklers.jpg new file mode 100644 index 00000000000..8a8ea04c942 Binary files /dev/null and b/assets/images/Tracy/Event_Sparklers.jpg differ diff --git a/assets/images/Tracy/Event_WeddingGazebo.jpg b/assets/images/Tracy/Event_WeddingGazebo.jpg new file mode 100644 index 00000000000..3851ba5ed32 Binary files /dev/null and b/assets/images/Tracy/Event_WeddingGazebo.jpg differ diff --git a/assets/images/Tracy/Fashion_Pattern_on_Pattern.jpg b/assets/images/Tracy/Fashion_Pattern_on_Pattern.jpg new file mode 100644 index 00000000000..856f2bd5d3d Binary files /dev/null and b/assets/images/Tracy/Fashion_Pattern_on_Pattern.jpg differ diff --git a/assets/images/Tracy/Fashion_Urban_Jungle.jpg b/assets/images/Tracy/Fashion_Urban_Jungle.jpg new file mode 100644 index 00000000000..c623ed12b7b Binary files /dev/null and b/assets/images/Tracy/Fashion_Urban_Jungle.jpg differ diff --git a/assets/images/Tracy/Fashion_Yellow_Beach.jpg b/assets/images/Tracy/Fashion_Yellow_Beach.jpg new file mode 100644 index 00000000000..d7ac076640b Binary files /dev/null and b/assets/images/Tracy/Fashion_Yellow_Beach.jpg differ diff --git a/assets/photographers/EllieRoseWilkens.jpg b/assets/photographers/EllieRoseWilkens.jpg new file mode 100644 index 00000000000..85b4e021200 Binary files /dev/null and b/assets/photographers/EllieRoseWilkens.jpg differ diff --git a/assets/photographers/MarcelNikolic.jpg b/assets/photographers/MarcelNikolic.jpg new file mode 100644 index 00000000000..a96a86ed8cb Binary files /dev/null and b/assets/photographers/MarcelNikolic.jpg differ diff --git a/assets/photographers/MimiKeel.jpg b/assets/photographers/MimiKeel.jpg new file mode 100644 index 00000000000..5df25f8502f Binary files /dev/null and b/assets/photographers/MimiKeel.jpg differ diff --git a/assets/photographers/NabeelBradford.jpg b/assets/photographers/NabeelBradford.jpg new file mode 100644 index 00000000000..acffb7a5fbb Binary files /dev/null and b/assets/photographers/NabeelBradford.jpg differ diff --git a/assets/photographers/RhodeDubois.jpg b/assets/photographers/RhodeDubois.jpg new file mode 100644 index 00000000000..17f4e8a4300 Binary files /dev/null and b/assets/photographers/RhodeDubois.jpg differ diff --git a/assets/photographers/TracyGalindo.jpg b/assets/photographers/TracyGalindo.jpg new file mode 100644 index 00000000000..306a6766fdb Binary files /dev/null and b/assets/photographers/TracyGalindo.jpg differ diff --git a/css/photographer.css b/css/photographer.css index 81854c023b9..eb0e4d5416b 100644 --- a/css/photographer.css +++ b/css/photographer.css @@ -2,10 +2,88 @@ display: none; } -.photograph-header { +.photograph_header { background-color: #FAFAFA; height: 300px; margin: 0 100px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.text_container { + display: flex; + flex-direction: column; + gap: 19px; + padding-left: 50px; +} + +.photographer_main_title { + color: var(--secondary); + font-family: var(--photographer-main-title-font-family); + font-size: var(--photographer-main-title-font-size); + font-style: var(--photographer-main-title-font-style); + font-weight: var(--photographer-main-title-font-weight); + line-height: var(--photographer-main-title-line-height); +} + +.city_of_country_of { + color: var(--primary); + font-family: var(--city-of-country-of-font-family); + font-size: var(--city-of-country-of-font-size); + font-style: var(--city-of-country-of-font-style); + font-weight: var(--city-of-country-of-font-weight); + line-height: var(--city-of-country-of-line-height); +} + +.photographer_tagline { + color: var(--dark-grey); + font-family: var(--photographer-tagline-font-family); + font-size: var(--photographer-tagline-font-size); + font-style: var(--photographer-tagline-font-style); + font-weight: var(--photographer-tagline-font-weight); + line-height: var(--photographer-tagline-line-height); +} + +.img_wrapper { + height: 200px; + width: 200px; +} + +.img_wrapper img { + height: 100%; + width: 100%; + object-fit: cover; + border-radius: 50%; +} + +.filter { + display: flex; + gap: 25px; + align-items: center; + margin-left: 100px; +} + +.filter_title { + color: var(--black); + font-family: var(--photographer-filter-title-font-family); + font-size: var(--photographer-filter-title-font-size); + font-style: var(--photographer-filter-title-font-style); + font-weight: var(--photographer-filter-title-font-weight); + line-height: var(--photographer-filter-title-line-height); +} + +.dropdown_menu { + font-size: 20px; + font-weight: bold; + color: white; + padding: 11px; + width: 170px; + height: 70px; + border: none; + background-color: #901C1C; + border-radius: 5px; + cursor: pointer; } .contact_button { @@ -55,6 +133,10 @@ form { align-items: flex-start; } +form legend { + display: none; +} + form label { color: #312E2E; font-size: 36px; @@ -73,4 +155,10 @@ form input { height: 68px; border: none; border-radius: 5px; -} \ No newline at end of file + font-family: 'DM sans', sans-serif; + font-size: 24px; + font-weight: 400; + font-style: normal; + line-height: normal; + color: var(--black); +} diff --git a/css/style.css b/css/style.css index e4dafd3521b..7fb5a8d954b 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,77 @@ @import url("photographer.css"); +:root { + --primary: #901C1C; + --secondary: #d3573c; + --black: #000000; + --light-black: #757575; + --dark-grey: #525252; + + --main-title-font-family: 'DM sans', sans-serif; + --main-title-font-size: 36px; + --main-title-font-style: normal; + --main-title-font-weight: 400; + --main-title-line-height: normal; + + --photographer-name-font-family: 'DM sans', sans-serif; + --photographer-name-font-size: 36px; + --photographer-name-font-style: normal; + --photographer-name-font-weight: 400; + --photographer-name-line-height: normal; + + --city-country-font-family: 'DM sans', sans-serif; + --city-country-font-size: 13px; + --city-country-font-style: normal; + --city-country-font-weight: 400; + --city-country-line-height: normal; + + --tagline-font-family: 'DM sans', sans-serif; + --tagline-font-size: 10px; + --tagline-font-style: normal; + --tagline-font-weight: 400; + --tagline-line-height: normal; + + --price-font-family: 'DM sans'; + --price-font-size: 9px; + --price-font-style: normal; + --price-font-weight: 400; + --price-line-height: normal; + +/* ------------------ PHOTOGRAPHER PAGE -------------------------------- */ + + --photographer-main-title-font-family: 'DM sans', sans-serif; + --photographer-main-title-font-size: 64px; + --photographer-main-title-font-style: normal; + --photographer-main-title-font-weight: 400; + --photographer-main-title-line-height: normal; + + --city-of-country-of-font-family: 'DM sans', sans-serif; + --city-of-country-of-font-size: 24px; + --city-of-country-of-font-style: normal; + --city-of-country-of-font-weight: 400; + --city-of-country-of-line-height: normal; + + --photographer-tagline-font-family: 'DM sans', sans-serif; + --photographer-tagline-font-size: 18px; + --photographer-tagline-font-style: normal; + --photographer-tagline-font-weight: 400; + --photographer-tagline-line-height: normal; + + --photographer-filter-title-font-family: 'DM sans', sans-serif; + --photographer-filter-title-font-size: 18px; + --photographer-filter-title-font-style: normal; + --photographer-filter-title-font-weight: 700; + --photographer-filter-title-line-height: normal; +} + + +* { + margin: 0; + padding: 0; +} + body { font-family: "DM Sans", sans-serif; - margin: 0; } @@ -14,8 +83,13 @@ header { height: 90px; } -h1 { - color: #901C1C; +.main_title { + color: var(--primary); + font-family: var(--main-title-font-family); + font-size: var(--main-title-font-size); + font-style: var(--main-title-font-style); + font-weight: var(--main-title-font-weight); + line-height: var(--main-title-line-height); margin-right: 100px; } @@ -40,11 +114,66 @@ h1 { } .photographer_section article h2 { - color: #D3573C; - font-size: 36px; + color: var(--secondary); + font-family: var(--main-title-font-family); + font-size: var(--main-title-font-size); + font-style: var(--main-title-font-style); + font-weight: var(--main-title-font-weight); + line-height: var(--main-title-line-height); } -.photographer_section article img { +.portrait_wrapper { height: 200px; width: 200px; -} \ No newline at end of file +} + +.photographer_section article img { + height: 100%; + width: 100%; + object-fit: cover; + border-radius: 50%; +} + +.section_under_name { + display: flex; + flex-direction: column; + gap: 3px; + justify-content: center; + align-items: center; +} + +.city_country { + color: var(--primary); + font-family: var(--city-country-font-family); + font-size: var(--city-country-font-size); + font-style: var(--city-country-font-style); + font-weight: var(--city-country-font-weight); + line-height: var(--city-country-line-height); +} + +.tagline { + color: var(--black); + font-family: var(--tagline-font-family); + font-size: var(--tagline-font-size); + font-style: var(--tagline-font-style); + font-weight: var(--tagline-font-weight); + line-height: var(--tagline-line-height); +} + +.price { + text-align: center; + color: var(--light-black); + font-family: var(--price-font-family); + font-size: var(--price-font-size); + font-style: var(--price-font-style); + font-weight: var(--price-font-weight); + line-height: var(--price-line-height); +} + +footer { + display: flex; + align-items: center; + justify-content: center; + padding-top: 200px; +} + diff --git a/index.html b/index.html index 7927da414a0..7ab8d209ca8 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,25 @@ Fisheye -
- -

Nos photographes

+
+ +

Nos photographes

+ + + + + diff --git a/photographer.html b/photographer.html index d85fc10fe89..6526a7ce5b2 100644 --- a/photographer.html +++ b/photographer.html @@ -1,37 +1,82 @@ - - - - - - Fisheye - photographe - - -
- -
-
-
- + + + + + + + Fisheye - photographe + + + +
+ +
+ +
+
+
+

+

+

-
-
-
-
-

Contactez-moi

- -
-
-
- - -
- -
-
-
- - - - + + +
+ +
+
+
+

Trier par

+ +
+
+
+ media +
+

+ +
+ +
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/scripts/pages/index.js b/scripts/pages/index.js index 42895574b83..e6effce84c4 100644 --- a/scripts/pages/index.js +++ b/scripts/pages/index.js @@ -1,46 +1,55 @@ - async function getPhotographers() { - // Ceci est un exemple de données pour avoir un affichage de photographes de test dès le démarrage du projet, - // mais il sera à remplacer avec une requête sur le fichier JSON en utilisant "fetch". - let photographers = [ - { - "name": "Ma data test", - "id": 1, - "city": "Paris", - "country": "France", - "tagline": "Ceci est ma data test", - "price": 400, - "portrait": "account.png" - }, - { - "name": "Autre data test", - "id": 2, - "city": "Londres", - "country": "UK", - "tagline": "Ceci est ma data test 2", - "price": 500, - "portrait": "account.png" - }, - ] - // et bien retourner le tableau photographers seulement une fois récupéré - return ({ - photographers: [...photographers, ...photographers, ...photographers]}) - } +async function getData() { - async function displayData(photographers) { - const photographersSection = document.querySelector(".photographer_section"); + const response = await fetch ("/data/photographers.json") + return await response.json() +} + +async function displayData(photographers) { + const photographersSection = document.querySelector(".photographer_section"); - photographers.forEach((photographer) => { - const photographerModel = photographerTemplate(photographer); - const userCardDOM = photographerModel.getUserCardDOM(); - photographersSection.appendChild(userCardDOM); - }); - } + photographers.forEach((photographer) => { - async function init() { - // Récupère les datas des photographes - const { photographers } = await getPhotographers(); + const userCardDOM = new UserCardFactory().createFromPhotographer(photographer) + photographersSection.appendChild(userCardDOM); + }); +} + +async function init() { + // Récupère les datas des photographes + const { photographers } = await getData(); // déstructuration avec les accolades, pour récup uniquement photographers displayData(photographers); + } + + init(); + +class UserCardFactory { + + createFromPhotographer(photographerData) { + + const {name, id, city, country, tagline, price, portrait} = photographerData + return new UserCard(name, id, city, country, tagline, price, portrait).create() } +} + + +/* +class MediaFactory { + +constructor(data, type) { + if (type === 'photo') { + return new MediaPhoto(data) + } else if (type === 'video') { + return new MediaVideo(data) + } else { + throw 'Unknown type format' + } +} +au lieu d'appeler la classe directement, j'appelle MediaFactory */ + +/* class media globale path ou source et 2 sous classes mediavideo avec attribut video et mediaimage + attribut src qui change en fonction de l'attribut image ou video + pour le dom, factory avec 2 methodes preview : soit image , soit video + - init(); - +*/ + diff --git a/scripts/pages/photographer.js b/scripts/pages/photographer.js index cee76db76f8..028a800fd99 100644 --- a/scripts/pages/photographer.js +++ b/scripts/pages/photographer.js @@ -1 +1,128 @@ -//Mettre le code JavaScript lié à la page photographer.html \ No newline at end of file +//Mettre le code JavaScript lié à la page photographer.html + +function getIdFromUrl() { + const idOfPhotographer = new URLSearchParams(window.location.search).get('id') + return idOfPhotographer +} + +async function loadPhotographerContent () { + + async function getData() { + + const response = await fetch ("/data/photographers.json") + return await response.json() + } + + const { photographers } = await getData() + const filteredPhotographer = photographers.find((photographer) => photographer.id == getIdFromUrl()) // utiliser find à la place de filter + + const { name, city, country, tagline, price, portrait } = filteredPhotographer + + + const photographHeader = document.querySelector(".photograph_header") + const textContainer = document.querySelector(".text_container") + textContainer.style.order = "-1" + + const nameOf = document.querySelector(".photographer_main_title") + nameOf.textContent = name + + const cityOfCountryOf = document.querySelector(".city_of_country_of") + const tagLineOf = document.querySelector(".photographer_tagline") + + const priceOf = document.createElement("p") + priceOf.textContent = price + + const portraitOf = document.querySelector(".portrait_of_photographer") + // refaire propremeent + portraitOf.setAttribute("src", `/assets/photographers/${name.replace(' ', '').replace('-', '')}.jpg`) + portraitOf.setAttribute("alt", "portrait du photographe "+ `${name}` ) + + cityOfCountryOf.textContent = city +', ' + country + tagLineOf.textContent = tagline + + photographHeader.appendChild(textContainer) + photographHeader.appendChild(imgWrapper) + textContainer.appendChild(nameOf) + textContainer.appendChild(cityOfCountryOf) + textContainer.appendChild(tagLineOf) + imgWrapper.appendChild(portraitOf) + +} + +loadPhotographerContent() + +// renvoyer une erreur + + + /* on ajoute l'id à l'URL avec setAttribute href + on récupère l'id avec new URLSearchParams(window.location.search).get('id') + on fetch sur le json et on filtre les photograpes avec l'id */ + + +// gestion de la modale avec POO , méthodes pour ouvrir, fermer, récupérer les inputs et les logger +class Modal { + constructor(modal, form, contactBtn, submitBtn, closeBtn) { + this.modal = document.querySelector(modal); + this.form = document.querySelector(form); + this.contactBtn = document.querySelector(contactBtn); + this.submitBtn = document.querySelector(submitBtn); + this.closeBtn = document.querySelector(closeBtn); + } + + openModal() { + this.contactBtn.addEventListener("click", () => { + this.modal.style.display = "block"; + + const elementsToHide = document.querySelectorAll("body > *:not(#contact_modal)"); + elementsToHide.forEach((element) => { + element.setAttribute("aria-hidden", "true"); + }); + }); + } + + closeModal() { + this.closeBtn.addEventListener("click", () => { + this.modal.style.display = "none"; + + const elementsToHide = document.querySelectorAll("body > *:not(#contact_modal)"); + elementsToHide.forEach((element) => { + element.setAttribute("aria-hidden", "false"); + }); + }); + } + + getFormValues() { + const formValues = {}; + for (let i = 0; i < this.form.elements.length; i++) { + const element = this.form.elements[i]; + formValues[element.name] = element.value; + } + return formValues; + } + + getLogForm() { + this.form.addEventListener("submit", (event) => { + event.preventDefault() + console.log(this.getFormValues()); + this.modal.style.display = "none" + + }); + } + + init() { + this.openModal() + this.closeModal() + this.getFormValues() + this.getLogForm() + } +} + +const newModal = new Modal("#contact_modal", "form", ".contact_button", ".submit_button", "#close_button"); +newModal.init() + +// création de la classe pour la Lightbox en se basant sur la modale précédente +class Lightbox { + constructor( ) { + + } +} \ No newline at end of file diff --git a/scripts/templates/photographer.js b/scripts/templates/photographer.js index f177ca1a8a7..a591069788a 100644 --- a/scripts/templates/photographer.js +++ b/scripts/templates/photographer.js @@ -1,17 +1,93 @@ -function photographerTemplate(data) { - const { name, portrait } = data; +class UserCard { + constructor(name, id, city, country, tagline, price, portrait) { - const picture = `assets/photographers/${portrait}`; + this.name = name + this._id = id + this.city = city + this.country = country + this.tagline = tagline + this.price = price + this.portrait = portrait + } - function getUserCardDOM() { - const article = document.createElement( 'article' ); - const img = document.createElement( 'img' ); + get id() { + return this._id + } + + createLink() { + const linkTo = document.createElement('a') + linkTo.setAttribute('href', 'photographer.html?id='+ this._id) // récuperer l'id dans l'url pour le searchParams + linkTo.classList.add('link_to') + return linkTo + } + + createImageElement() { + const portraitWrapper = document.createElement('div') + portraitWrapper.classList.add('portrait_wrapper') + portraitWrapper.setAttribute('role', 'presentation') + // portraitWrapper.setAttribute('tabindex', '0') + portraitWrapper.setAttribute('id', this.id) + + const img = document.createElement('img'); + const picture = `assets/photographers/${this.portrait}` img.setAttribute("src", picture) - const h2 = document.createElement( 'h2' ); - h2.textContent = name; - article.appendChild(img); + img.setAttribute('alt', 'photo de profil du Photographe '+this.name) + + portraitWrapper.appendChild(img); + return portraitWrapper; + } + + createTitleElement() { + const h2 = document.createElement('h2'); + h2.textContent = this.name; + return h2 + } + + createCityCountryElement() { + const span = document.createElement('span') + span.classList.add('city_country') + span.setAttribute('role', 'label') + span.textContent = this.city +', '+ this.country + return span + } + + createTagLineElement() { + const p = document.createElement('p') + p.classList.add('tagline') + p.setAttribute('role', 'label') + p.textContent = this.tagline + return p + } + + createPriceElement() { + const p2 = document.createElement('p') + p2.classList.add('price') + p2.setAttribute('role', 'label') + p2.textContent = this.price+'€/jour' + return p2 + } + + create() { + const article = document.createElement('article'); + const section = document.createElement('section'); + section.classList.add('section_under_name'); + + const portraitWrapper = this.createImageElement(); + const h2 = this.createTitleElement(); + const span = this.createCityCountryElement(); + const p = this.createTagLineElement(); + const p2 = this.createPriceElement(); + const linkTo = this.createLink(); + + article.appendChild(linkTo) + linkTo.appendChild(portraitWrapper); article.appendChild(h2); - return (article); + article.appendChild(section); + section.appendChild(span); + section.appendChild(p); + section.appendChild(p2); + return article; } - return { name, picture, getUserCardDOM } -} \ No newline at end of file + +} + diff --git a/scripts/utils/contactForm.js b/scripts/utils/contactForm.js index 9180380082c..ed49c6101c8 100644 --- a/scripts/utils/contactForm.js +++ b/scripts/utils/contactForm.js @@ -1,9 +1,13 @@ function displayModal() { const modal = document.getElementById("contact_modal"); modal.style.display = "block"; + console.log(modal) } function closeModal() { const modal = document.getElementById("contact_modal"); modal.style.display = "none"; + console.log(modal+'2') } + +// afficher et fermer la modale du formulaire