diff --git a/Bilder/Dive portrait grey.jpg b/Bilder/Dive portrait grey.jpg new file mode 100644 index 00000000..84122e10 Binary files /dev/null and b/Bilder/Dive portrait grey.jpg differ diff --git a/Bilder/Icons/Button_CV_white.png b/Bilder/Icons/Button_CV_white.png new file mode 100644 index 00000000..f642bfe1 Binary files /dev/null and b/Bilder/Icons/Button_CV_white.png differ diff --git a/Bilder/Icons/Button_CV_yellow.png b/Bilder/Icons/Button_CV_yellow.png new file mode 100644 index 00000000..ac592cb4 Binary files /dev/null and b/Bilder/Icons/Button_CV_yellow.png differ diff --git a/Bilder/Icons/Button_Contact_white.png b/Bilder/Icons/Button_Contact_white.png new file mode 100644 index 00000000..474c11ba Binary files /dev/null and b/Bilder/Icons/Button_Contact_white.png differ diff --git a/Bilder/Icons/Button_Contact_yellow.png b/Bilder/Icons/Button_Contact_yellow.png new file mode 100644 index 00000000..1a1eeff6 Binary files /dev/null and b/Bilder/Icons/Button_Contact_yellow.png differ diff --git a/Bilder/Icons/Button_Dive_yellow.png b/Bilder/Icons/Button_Dive_yellow.png new file mode 100644 index 00000000..961378f2 Binary files /dev/null and b/Bilder/Icons/Button_Dive_yellow.png differ diff --git a/Bilder/Icons/Button_FB_white.png b/Bilder/Icons/Button_FB_white.png new file mode 100644 index 00000000..b2751b95 Binary files /dev/null and b/Bilder/Icons/Button_FB_white.png differ diff --git a/Bilder/Icons/Button_FB_yellow.png b/Bilder/Icons/Button_FB_yellow.png new file mode 100644 index 00000000..03b0b1d6 Binary files /dev/null and b/Bilder/Icons/Button_FB_yellow.png differ diff --git a/Bilder/Icons/Button_IG_white.png b/Bilder/Icons/Button_IG_white.png new file mode 100644 index 00000000..a928f86c Binary files /dev/null and b/Bilder/Icons/Button_IG_white.png differ diff --git a/Bilder/Icons/Button_IG_yellow.png b/Bilder/Icons/Button_IG_yellow.png new file mode 100644 index 00000000..29eb023b Binary files /dev/null and b/Bilder/Icons/Button_IG_yellow.png differ diff --git a/Bilder/Icons/Button_IN_white.png b/Bilder/Icons/Button_IN_white.png new file mode 100644 index 00000000..e1f018e6 Binary files /dev/null and b/Bilder/Icons/Button_IN_white.png differ diff --git a/Bilder/Icons/Button_IN_yellow.png b/Bilder/Icons/Button_IN_yellow.png new file mode 100644 index 00000000..078b82bc Binary files /dev/null and b/Bilder/Icons/Button_IN_yellow.png differ diff --git a/Bilder/Icons/Button_Language_yellow.png b/Bilder/Icons/Button_Language_yellow.png new file mode 100644 index 00000000..1f0db682 Binary files /dev/null and b/Bilder/Icons/Button_Language_yellow.png differ diff --git a/Bilder/Icons/Button_Skills_yellow.png b/Bilder/Icons/Button_Skills_yellow.png new file mode 100644 index 00000000..ba1e69cc Binary files /dev/null and b/Bilder/Icons/Button_Skills_yellow.png differ diff --git a/Bilder/Icons/Button_Video_white.png b/Bilder/Icons/Button_Video_white.png new file mode 100644 index 00000000..0962ca26 Binary files /dev/null and b/Bilder/Icons/Button_Video_white.png differ diff --git a/Bilder/Icons/Button_Video_yellow.png b/Bilder/Icons/Button_Video_yellow.png new file mode 100644 index 00000000..20c7897e Binary files /dev/null and b/Bilder/Icons/Button_Video_yellow.png differ diff --git a/Bilder/Logo/Logo_neu_purple.png b/Bilder/Logo/Logo_neu_purple.png new file mode 100644 index 00000000..01893e51 Binary files /dev/null and b/Bilder/Logo/Logo_neu_purple.png differ diff --git a/Bilder/Logo_yellow_freigestellt.png b/Bilder/Logo_yellow_freigestellt.png new file mode 100644 index 00000000..23a6aea3 Binary files /dev/null and b/Bilder/Logo_yellow_freigestellt.png differ diff --git a/Bilder/Portrait_grey.jpg b/Bilder/Portrait_grey.jpg new file mode 100644 index 00000000..815c07c3 Binary files /dev/null and b/Bilder/Portrait_grey.jpg differ diff --git a/Bilder/Poster Dolphins.png b/Bilder/Poster Dolphins.png new file mode 100644 index 00000000..50882b5d Binary files /dev/null and b/Bilder/Poster Dolphins.png differ diff --git a/Bilder/Poster Raja Ampat.png b/Bilder/Poster Raja Ampat.png new file mode 100644 index 00000000..aa2454d0 Binary files /dev/null and b/Bilder/Poster Raja Ampat.png differ diff --git a/Bilder/Poster Tulamben.png b/Bilder/Poster Tulamben.png new file mode 100644 index 00000000..3973b8e1 Binary files /dev/null and b/Bilder/Poster Tulamben.png differ diff --git a/Bilder/purple_jellyfish.jpg b/Bilder/purple_jellyfish.jpg new file mode 100644 index 00000000..4349610d Binary files /dev/null and b/Bilder/purple_jellyfish.jpg differ diff --git a/Bilder/purple_jellyfish_divider.jpeg b/Bilder/purple_jellyfish_divider.jpeg new file mode 100644 index 00000000..a53c693d Binary files /dev/null and b/Bilder/purple_jellyfish_divider.jpeg differ diff --git a/Bilder/purple_jellyfish_schmal.jpg b/Bilder/purple_jellyfish_schmal.jpg new file mode 100644 index 00000000..c7a7cded Binary files /dev/null and b/Bilder/purple_jellyfish_schmal.jpg differ diff --git a/Dive portrait grey.jpg b/Dive portrait grey.jpg new file mode 100644 index 00000000..84122e10 Binary files /dev/null and b/Dive portrait grey.jpg differ diff --git a/Icons/Button_CV_white.png b/Icons/Button_CV_white.png new file mode 100644 index 00000000..f642bfe1 Binary files /dev/null and b/Icons/Button_CV_white.png differ diff --git a/Icons/Button_CV_yellow.png b/Icons/Button_CV_yellow.png new file mode 100644 index 00000000..ac592cb4 Binary files /dev/null and b/Icons/Button_CV_yellow.png differ diff --git a/Icons/Button_Contact_white.png b/Icons/Button_Contact_white.png new file mode 100644 index 00000000..474c11ba Binary files /dev/null and b/Icons/Button_Contact_white.png differ diff --git a/Icons/Button_Contact_yellow.png b/Icons/Button_Contact_yellow.png new file mode 100644 index 00000000..1a1eeff6 Binary files /dev/null and b/Icons/Button_Contact_yellow.png differ diff --git a/Icons/Button_Dive_yellow.png b/Icons/Button_Dive_yellow.png new file mode 100644 index 00000000..961378f2 Binary files /dev/null and b/Icons/Button_Dive_yellow.png differ diff --git a/Icons/Button_FB_white.png b/Icons/Button_FB_white.png new file mode 100644 index 00000000..b2751b95 Binary files /dev/null and b/Icons/Button_FB_white.png differ diff --git a/Icons/Button_FB_yellow.png b/Icons/Button_FB_yellow.png new file mode 100644 index 00000000..03b0b1d6 Binary files /dev/null and b/Icons/Button_FB_yellow.png differ diff --git a/Icons/Button_IG_white.png b/Icons/Button_IG_white.png new file mode 100644 index 00000000..a928f86c Binary files /dev/null and b/Icons/Button_IG_white.png differ diff --git a/Icons/Button_IG_yellow.png b/Icons/Button_IG_yellow.png new file mode 100644 index 00000000..29eb023b Binary files /dev/null and b/Icons/Button_IG_yellow.png differ diff --git a/Icons/Button_IN_white.png b/Icons/Button_IN_white.png new file mode 100644 index 00000000..e1f018e6 Binary files /dev/null and b/Icons/Button_IN_white.png differ diff --git a/Icons/Button_IN_yellow.png b/Icons/Button_IN_yellow.png new file mode 100644 index 00000000..078b82bc Binary files /dev/null and b/Icons/Button_IN_yellow.png differ diff --git a/Icons/Button_Language_yellow.png b/Icons/Button_Language_yellow.png new file mode 100644 index 00000000..1f0db682 Binary files /dev/null and b/Icons/Button_Language_yellow.png differ diff --git a/Icons/Button_Skills_yellow.png b/Icons/Button_Skills_yellow.png new file mode 100644 index 00000000..ba1e69cc Binary files /dev/null and b/Icons/Button_Skills_yellow.png differ diff --git a/Icons/Button_Video_white.png b/Icons/Button_Video_white.png new file mode 100644 index 00000000..0962ca26 Binary files /dev/null and b/Icons/Button_Video_white.png differ diff --git a/Icons/Button_Video_yellow.png b/Icons/Button_Video_yellow.png new file mode 100644 index 00000000..20c7897e Binary files /dev/null and b/Icons/Button_Video_yellow.png differ diff --git a/Logo/Logo_neu_purple.png b/Logo/Logo_neu_purple.png new file mode 100644 index 00000000..01893e51 Binary files /dev/null and b/Logo/Logo_neu_purple.png differ diff --git a/My Portfolio Website b/My Portfolio Website new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/My Portfolio Website @@ -0,0 +1 @@ + diff --git a/My Website/Video/Tulamben_2023.mp4 b/My Website/Video/Tulamben_2023.mp4 new file mode 100644 index 00000000..8da72cae Binary files /dev/null and b/My Website/Video/Tulamben_2023.mp4 differ diff --git a/My Website_V2/Bilder/Dive portrait grey.jpg b/My Website_V2/Bilder/Dive portrait grey.jpg new file mode 100644 index 00000000..84122e10 Binary files /dev/null and b/My Website_V2/Bilder/Dive portrait grey.jpg differ diff --git a/My Website_V2/Bilder/Fishies.png b/My Website_V2/Bilder/Fishies.png new file mode 100644 index 00000000..d5348fe3 Binary files /dev/null and b/My Website_V2/Bilder/Fishies.png differ diff --git a/My Website_V2/Bilder/Icons/Button_CV_white.png b/My Website_V2/Bilder/Icons/Button_CV_white.png new file mode 100644 index 00000000..f642bfe1 Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_CV_white.png differ diff --git a/My Website_V2/Bilder/Icons/Button_CV_yellow.png b/My Website_V2/Bilder/Icons/Button_CV_yellow.png new file mode 100644 index 00000000..ac592cb4 Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_CV_yellow.png differ diff --git a/My Website_V2/Bilder/Icons/Button_Contact_white.png b/My Website_V2/Bilder/Icons/Button_Contact_white.png new file mode 100644 index 00000000..474c11ba Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_Contact_white.png differ diff --git a/My Website_V2/Bilder/Icons/Button_Contact_yellow.png b/My Website_V2/Bilder/Icons/Button_Contact_yellow.png new file mode 100644 index 00000000..1a1eeff6 Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_Contact_yellow.png differ diff --git a/My Website_V2/Bilder/Icons/Button_Dive_yellow.png b/My Website_V2/Bilder/Icons/Button_Dive_yellow.png new file mode 100644 index 00000000..961378f2 Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_Dive_yellow.png differ diff --git a/My Website_V2/Bilder/Icons/Button_FB_white.png b/My Website_V2/Bilder/Icons/Button_FB_white.png new file mode 100644 index 00000000..b2751b95 Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_FB_white.png differ diff --git a/My Website_V2/Bilder/Icons/Button_FB_yellow.png b/My Website_V2/Bilder/Icons/Button_FB_yellow.png new file mode 100644 index 00000000..03b0b1d6 Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_FB_yellow.png differ diff --git a/My Website_V2/Bilder/Icons/Button_IG_white.png b/My Website_V2/Bilder/Icons/Button_IG_white.png new file mode 100644 index 00000000..a928f86c Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_IG_white.png differ diff --git a/My Website_V2/Bilder/Icons/Button_IG_yellow.png b/My Website_V2/Bilder/Icons/Button_IG_yellow.png new file mode 100644 index 00000000..29eb023b Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_IG_yellow.png differ diff --git a/My Website_V2/Bilder/Icons/Button_IN_white.png b/My Website_V2/Bilder/Icons/Button_IN_white.png new file mode 100644 index 00000000..e1f018e6 Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_IN_white.png differ diff --git a/My Website_V2/Bilder/Icons/Button_IN_yellow.png b/My Website_V2/Bilder/Icons/Button_IN_yellow.png new file mode 100644 index 00000000..078b82bc Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_IN_yellow.png differ diff --git a/My Website_V2/Bilder/Icons/Button_Language_yellow.png b/My Website_V2/Bilder/Icons/Button_Language_yellow.png new file mode 100644 index 00000000..1f0db682 Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_Language_yellow.png differ diff --git a/My Website_V2/Bilder/Icons/Button_Skills_yellow.png b/My Website_V2/Bilder/Icons/Button_Skills_yellow.png new file mode 100644 index 00000000..ba1e69cc Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_Skills_yellow.png differ diff --git a/My Website_V2/Bilder/Icons/Button_Video_white.png b/My Website_V2/Bilder/Icons/Button_Video_white.png new file mode 100644 index 00000000..0962ca26 Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_Video_white.png differ diff --git a/My Website_V2/Bilder/Icons/Button_Video_yellow.png b/My Website_V2/Bilder/Icons/Button_Video_yellow.png new file mode 100644 index 00000000..20c7897e Binary files /dev/null and b/My Website_V2/Bilder/Icons/Button_Video_yellow.png differ diff --git a/My Website_V2/Bilder/Logo/Logo_neu_purple.png b/My Website_V2/Bilder/Logo/Logo_neu_purple.png new file mode 100644 index 00000000..ad1993b3 Binary files /dev/null and b/My Website_V2/Bilder/Logo/Logo_neu_purple.png differ diff --git a/My Website_V2/Bilder/Logo/Logo_neu_white.png b/My Website_V2/Bilder/Logo/Logo_neu_white.png new file mode 100644 index 00000000..5a540189 Binary files /dev/null and b/My Website_V2/Bilder/Logo/Logo_neu_white.png differ diff --git a/My Website_V2/Bilder/Logo/Logo_neu_yellow.png b/My Website_V2/Bilder/Logo/Logo_neu_yellow.png new file mode 100644 index 00000000..4223d949 Binary files /dev/null and b/My Website_V2/Bilder/Logo/Logo_neu_yellow.png differ diff --git a/My Website_V2/Bilder/Logo/Logo_purple_yellow.png b/My Website_V2/Bilder/Logo/Logo_purple_yellow.png new file mode 100644 index 00000000..953308b0 Binary files /dev/null and b/My Website_V2/Bilder/Logo/Logo_purple_yellow.png differ diff --git a/My Website_V2/Bilder/Pools.png b/My Website_V2/Bilder/Pools.png new file mode 100644 index 00000000..03af8442 Binary files /dev/null and b/My Website_V2/Bilder/Pools.png differ diff --git a/My Website_V2/Bilder/Portrait_grey.jpg b/My Website_V2/Bilder/Portrait_grey.jpg new file mode 100644 index 00000000..815c07c3 Binary files /dev/null and b/My Website_V2/Bilder/Portrait_grey.jpg differ diff --git a/My Website_V2/Bilder/Spreadsheets.png b/My Website_V2/Bilder/Spreadsheets.png new file mode 100644 index 00000000..3ccef457 Binary files /dev/null and b/My Website_V2/Bilder/Spreadsheets.png differ diff --git a/My Website_V2/Bilder/leapfs_purple2.jpg b/My Website_V2/Bilder/leapfs_purple2.jpg new file mode 100644 index 00000000..ad2bae8a Binary files /dev/null and b/My Website_V2/Bilder/leapfs_purple2.jpg differ diff --git a/My Website_V2/index.html b/My Website_V2/index.html new file mode 100644 index 00000000..b5bc81de --- /dev/null +++ b/My Website_V2/index.html @@ -0,0 +1,513 @@ + + + + + + MY PAGE + + + + + +
+ +
+ +
+ + +
+
+

Hi! I'm Eliane.

+ +

+ Marketing Manager +
+ & +
+ PADI Open Water Scuba Instructor +

+
+
+ Portait +
+
+
+ + +
+
+

About me

+
+

+ I'm a marketing manager with several years of experience in + coordinating large-scale crossmedia projects. I'm also a passionate + coral conservationist looking for a position where I can combine my + marketing and diving skills. Preferably training conservation-minded + divers or combining instructing and dive centre management. +

+
+

❤ Let's get connected ❤

+ +
+
+
+ + +
+
+
+

Experience

+
+
+
+
+
Marketing Manager
+
Axon Lab AG, Baden | July 2023 - today
+
    +
  • + Design, development and implementation of communication + activities (mailings, brochures, flyers, promotional material, + etc.) +
    • +
  • Planning of online marketing activities
    • +
  • Organisation of trade fairs and congresses
    • +
+
+
+
+
+
Coral Restoration Internship
+
Blue Corner Conservation, Nusa Lembongan | March 2023
+
    +
  • + Coral reef ecology, reef monitoring and coral restoration +
    • +
+
+
+
+
+
PADI Instructor Development Course & Research Assistant
+
+ Institue for Marine Research & Instructor Development + Philippines, Dauin | October 2022 - February 2023 +
+
    +
  • Leading courses and research dives
    • +
  • Data analysis using CPCe, EventMeasure, ImageJ
    • +
  • 3D reef modellin SVS, reef impact protocols
    • +
+
+
+
+
+
SSI Divemaster & Scientific Diver
+
+ Indo Ocean Project, Nusa Penida | November 2021 - January 2021 +
+
    +
  • Conduct BRUVs and Citizen Science dives
    • +
  • Lead dives
    • +
+
+
+
+
+
Crossmedia Project Manger
+
TX Group, Zurich | November 2014 - August 2022
+
    +
  • + Conception and visualization of advertising and storytelling + strategies +
    • +
  • Customer presentations, media planning, regular reports
    • +
  • Project Managment for larger projects
    • +
+
+
+
+
+
Sales Coordinator
+
Upgrade Solutions, Buchs | November 2012 - October 2014
+
    +
  • + Customer support, order processing and supplier management +
    • +
+
+
+
+
+
+ Advertising Production Manager | Marketing & Sales Support +
+
TRAVEL INSIDE, Zurich | February 2002 - December 2011
+
    +
  • + Planning, coordination and final check of magazines, adverts + and flyers +
    • +
  • Customer presentations, media planning, regular reports
    • +
+
+
+
+
+
Employments in Tourism and Banking
+
Switzerland | 1998 - 2012
+
+
+
+
+
+
+

Education

+
+
+
+
+
+ Bachelor of Science in Business Administration, Major in + Marketing +
+
Fernfachhochschule Schweiz FFHS, Regensdorf | 2014 - 2017
+
    +
  • Blended learning alongside full-time employment
    • +
+
+
+
+
+
Diploma of Tourism Management
+
+ IST International School of Tourism Management, Zurich | 2002 - + 2005 +
+
    +
  • 2 years full-time study
    • +
  • + 1 year internship at Familienherbergen AG, Gelterkinden in + marketing and sales +
    • +
+
+
+
+
+
+
+ + +
+

Languages & Skills

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
German★ ★ ★ ★ ★
English★ ★ ★ ★ ☆
French★ ★ ★ ★ ☆
Italian★ ★ ☆ ☆ ☆
Spanish★ ★ ☆ ☆ ☆
+
+ +
+ + + +
+
+ + + +
+
+ +
+ +
+
+ +
+
+
+ +
+

Fun Facts

+
+ +
+
+
+ Fishies +
+
+

I wave at little fishies and say hi to dogs.

+
+
+
+
+ Spreadsheet +
+
+

+ I love spreadsheets and create one for almost every situation in my + life. +

+
+
+
+
+ Pools +
+
+

Murky pools were my nemesis during my Divemaster training.

+
+
+
+ +
+ +
+
+
+ Get in touch +
+
+ + + +
+ + +
+
+
+
+
+ + +
+
+
+ + Logo Footer +
+
+ Contact + Instagram + Facebook + LinkedIN +
+
+
+
+ + diff --git a/My Website_V2/style.css b/My Website_V2/style.css new file mode 100644 index 00000000..92d0cfd4 --- /dev/null +++ b/My Website_V2/style.css @@ -0,0 +1,804 @@ +@import url("https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;600&display=swap"); + +body { + background-image: url(Bilder/leapfs_purple2.jpg); + background-repeat: repeat; + background-position: top; + background-attachment: fixed; + text-align: left; + margin: 0; +} + +/*Schriften*/ +p { + font-size: 16px; + color: #ffffff; + font-family: "Montserrat", sans-serif; + padding: 20px; + text-align: center; + margin: 0; +} + +h1 { + font-size: 68px; + color: #ffcc48; + font-family: "Delicious Handrawn", cursive; + text-align: center; + padding: 10px 30px; + margin: 0px; + background-image: linear-gradient(to left, #ffcc48, #511d44); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +h2 { + font-size: 24px; + font-weight: 100; + color: #ffffff; + font-family: "Montserrat", sans-serif; + text-align: center; + padding: 5px 30px; + margin: 0px; +} + +h3 { + font-size: 22px; + font-weight: 100; + color: #ffcc48; + font-family: "Montserrat", sans-serif; + text-align: center; + padding: 20px 20px 0px; + margin: 2px; +} + +h4 { + font-size: 16px; + font-weight: 100; + color: #ffffff; + font-family: "Montserrat", sans-serif; + + text-align: center; + margin: 20px 0px 0px 0px; + padding: 0px 20px; +} + +h5 { + font-size: 18px; + font-weight: 100; + color: #ffcc48; + font-family: "Montserrat", sans-serif; + padding: 20px 20px 10px; + text-align: left; + margin: 0; +} + +h6 { + font-size: 16px; + font-weight: 100; + color: #ffffff; + font-family: "Montserrat", sans-serif; + text-align: left; + margin: 0px; + padding: 0px 20px 10px; +} + +/*Tabelle*/ +th, +td { + border: none; + font-family: "Montserrat", sans-serif; + color: #ffffff; + padding: 0px 25px; + font-size: 16px; +} + +table { + display: table; + border-color: #ffcc48; + table-layout: fixed; + padding: 20px; +} + +/*flex boxen*/ + +.flex-intro-wrapper { + display: flex; + flex-direction: column; +} + +.flex-intro { + align-items: center; + justify-content: center; + margin: 0px; + background-color: black; + flex-direction: column; + display: flex; +} + +.flex-portrait { + align-items: center; + margin: 0px; + display: flex; + justify-content: center; + background-color: black; +} + +.flex-about { + text-align: center; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + padding-bottom: 20px; + width: 100%; + display: flex; + flex-direction: column; +} + +.text-about { + max-width: 850px; + display: flex; + align-self: center; +} + +.box { + display: flex; + flex-direction: column; + width: 100%; + background-color: black; + padding: 0px 0px 20px; +} + +.blur { + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + border-radius: 19px; + height: 100%; + width: 100%; +} + +.experience-wrapper { + display: flex; + flex-direction: column; + margin: 10px 20px; + border-radius: 20px; + border: solid 2px #511d44; + background-image: url(Bilder/leapfs_purple2.jpg); + background-repeat: repeat; + background-position: top; + background-attachment: fixed; + object-fit: cover; +} + +.experience-header { + display: flex; + flex-direction: column; + max-width: 100%; + border-radius: 20px; + margin: 0px 20px; + padding-bottom: 20px; +} + +.skills-header { + display: flex; + flex-direction: column; + background-color: black; +} + +.skills-box { + display: flex; + flex-direction: column; + background-color: black; + align-items: center; + padding: 10px 0px 10px; + width: 100%; +} + +.language-box { + display: flex; + flex-direction: row; + width: 50%; +} + +.language-box-outline { + display: flex; + flex-direction: row; + width: 100%; + justify-content: center; +} + +/*---List Experience---*/ +li { + font-size: 16px; + color: #ffffff; + font-family: "Montserrat", sans-serif; + text-align: left; + padding: 5px 20px 5px 0px; +} + +ul { + margin-bottom: 20px; + margin-top: 0px; + color: #ffffff; + font-family: "Montserrat", sans-serif; + font-size: 16px; +} + +/*---List Skills---*/ +.list-skills { + font-size: 16px; + list-style-type: none; + text-align: center; + padding: 5px 0px; +} + +.ul-skills { + padding: 20px 20px; + margin-bottom: 0px; + text-align: center; +} + +/*image*/ +.img-rund { + width: 250px; + max-width: 100%; + border-radius: 50%; + display: flex; + justify-content: center; + margin: 30px 0px; + border: 3px solid #511d44; +} +.img-social { + width: 50px; + max-width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px; +} + +a { + color: #ffffff; + text-decoration: none; + display: flex; + align-content: center; + flex-wrap: wrap; + justify-content: center; +} + +a:hover { + color: #ffffff; +} + +/*social media buttons*/ +.socialmedia { + flex-direction: row; + justify-content: center; + display: flex; + width: 100%; +} + +.button { + text-align: center; + cursor: pointer; + display: flex; +} + +.button-information { + text-align: center; + cursor: pointer; + display: flex; + flex-direction: column; + width: 33%; + justify-content: center; +} + +/*Footer*/ +.Footer { + background-color: black; + display: flex; + flex-direction: row; + width: 100%; + justify-content: space-between; +} + +.Footer-Logo-links { + display: flex; + align-items: center; + padding: 0px 20px; + justify-content: flex-start; +} + +.Footer-Logo-rechts { + display: flex; + align-items: center; + padding: 0px 20px; + justify-content: flex-end; +} + +.img-Footer { + width: 80px; + max-width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + padding: 5px 0px; +} + +.img-social-Footer { + width: 30px; + max-width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px 0px 10px 10px; +} + +/*Trennlinie*/ +hr { + border: none; + margin: 0px; + height: 2px; + background: #511d44; +} + +/*Trennlinie breiter am Seitenkopf*/ +.hr-top { + border: none; + margin: 0px; + height: 90px; + background: black; +} + +/* ---------- Navigation - Hamburger Menu --------------------- */ + +/* ------ Desktop, big screen ------------- */ +#navigation { + display: flex; + justify-content: space-between; +} + +#hamburger-items { + display: flex; +} + +#hamburger-items a { + flex-grow: 1; + padding: 10px 20px; + color: #ffcc48; + text-decoration: none; + text-align: center; + font-family: "Montserrat", sans-serif; + font-weight: strong; + font-size: 18px; +} + +#hamburger-items a:hover { + color: #ffffff; +} + +/*this hides the hamburger on the big screen*/ +#navigation label, +#hamburger { + display: none; +} + +.logo-nav { + display: flex; + justify-content: space-between; + /*flex-direction: row;*/ +} + +.navigation-wrapper { + width: 100%; + background: black; + position: fixed; + z-index: 3; + border-bottom: 2px solid #511d44; +} + +/*-------Tablet ---------------*/ + +@media (min-width: 667px) and (max-width: 1024px) { + #hamburger-items a { + font-size: 16px; + } +} + +/* ------ Mobile ------------- */ + +@media (max-width: 667px) { + #hamburger-items a { + box-sizing: border-box; + display: block; + width: 100%; + border-top: 1px solid #ffffff; + font-size: 16px; + } + + #navigation label { + display: inline-block; + color: #ffcc48; + background: transparent; + font-style: normal; + font-size: 40px; + padding: 20px; + margin: 0px; + } + #hamburger-items { + display: none; + } + #navigation input:checked ~ #hamburger-items { + display: block; + } + + #navigation { + display: block; + } +} + +/*Formular: Leave me a message*/ + +.form-title { + font-size: 40px; + font-family: "Delicious Handrawn", cursive; + text-align: center; + padding: 20px 0px 10px; + background-image: linear-gradient(to left, #ffcc48, #511d44); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +input { + display: flex; + font-size: 16px; + color: white; + margin: 20px 0px 0px; + font-family: "Montserrat", sans-serif; + border-bottom: solid 2px #ffcc48; + border-top: none; + border-left: none; + border-right: none; + background: transparent; + width: 100%; +} + +button { + font-size: 16px; + color: #ffcc48; + margin: 20px 0px 20px; + border-radius: 10px; + background: none; + padding: 10px 40px; + border: solid 2px #ffcc48; +} + +button:hover { + cursor: pointer; + color: #ffffff; + border: solid 2px #ffffff; +} + +label { + display: flex; + flex-direction: column; + align-items: flex-start; + font-family: "Montserrat", sans-serif; + font-size: 16px; + color: white; + margin: 25px 20px 0px; +} + +textarea { + display: flex; + font-size: 16px; + + color: white; + font-family: "Montserrat", sans-serif; + width: 100%; + border-bottom: solid 2px #ffcc48; + border-top: none; + border-left: none; + border-right: none; + background: transparent; +} + +.wrap-contact { + display: flex; + border: solid 2px white; + border-radius: 20px; + margin: 20px; + flex-direction: column; + width: 100%; + max-width: 460px; +} + +.Contact { + text-align: center; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; +} + +.wrap-FLE { + display: flex; + flex-direction: column; +} + +/*Fun Facts /Bilder*/ + +.fun-facts-wrapper { + padding: 20px 20px 30px; + display: flex; + align-content: center; + justify-content: space-around; + gap: 24px; + flex-wrap: wrap; + background: black; +} + +.card { + position: relative; + width: 300px; + height: 300px; + background: #000; + border-radius: 50%; + overflow: hidden; + border: 3px solid #511d44; +} + +.poster { + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.poster::before { + content: ""; + position: absolute; + bottom: -45%; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + transition: 0.5s; +} + +.card:hover .poster::before { + bottom: 0; +} + +.poster img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition: 0.5s; +} + +.card:hover .poster img { + transform: scale(1.1); +} + +.details { + position: absolute; + bottom: -100%; + left: 0; + height: 50%; + padding: 20px; + background: black; + -webkit-backdrop-filter: blur(16px) saturate(120%); + backdrop-filter: blur(16px) saturate(120%); + transition: 0.5s; + color: #ffffff; + z-index: 2; + opacity: 0.8; +} + +.card:hover .details { + bottom: 0; +} + +/*--------------------def responsiveness----------------------------------*/ +/*---Tablet---*/ +@media (min-width: 667px) and (max-width: 1024px) { + .flex-intro { + flex-direction: column; + width: 50%; + } + + .flex-intro-wrapper { + flex-direction: row; + } + + .flex-portrait { + width: 50%; + flex-direction: row; + } + .img-rund { + width: 300px; + } + + .box { + flex-direction: column; + } + + .experience-header { + justify-content: center; + flex-direction: row; + } + + .experience-wrapper-outside { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .experience-wrapper { + width: 300px; + flex-grow: 1; + } + + h1 { + font-size: 72px; + } + h2 { + font-size: 26px; + } + + h3 { + font-size: 24px; + } + + h4 { + font-size: 18px; + } + + h5 { + font-size: 20px; + } + + h6 { + font-size: 16px; + } + + p { + font-size: 16px; + } + .socialmedia { + flex-direction: row; + justify-content: center; + align-self: stretch; + flex-wrap: wrap; + } + .button { + font-size: 14px; + padding: 0px 3px; + } + + td { + font-size: 16px; + padding: 0px 3px; + } + + .hr-top { + height: 80px; + } + + .wrap-FLE { + display: flex; + flex-direction: column; + } + + li { + font-size: 16px; + } +} + +/*---Desktop---*/ +@media (min-width: 1025px) { + .flex-intro { + flex-direction: column; + width: 50%; + } + + .flex-intro-wrapper { + flex-direction: row; + } + + .flex { + flex-direction: row; + } + .flex-portrait { + width: 50%; + flex-direction: row; + } + + .experience-header { + justify-content: center; + flex-direction: row; + } + + .experience-wrapper-outside { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .experience-wrapper { + width: 350px; + flex-grow: 1; + } + + .box { + flex-direction: column; + } + + h1 { + font-size: 90px; + } + h2 { + font-size: 32px; + } + + h3 { + font-size: 28px; + } + + h4 { + font-size: 20px; + } + + h5 { + font-size: 22px; + } + + h6 { + font-size: 18px; + } + + p { + font-size: 18px; + } + + .img-rund { + width: 350px; + } + + .socialmedia { + flex-direction: row; + justify-content: center; + align-self: stretch; + flex-wrap: wrap; + } + + .button { + font-size: 16px; + } + + th, + td { + font-size: 18px; + padding: 0px 25px; + } + .hr-top { + height: 82px; + } + + li { + font-size: 18px; + } + + .list-skills { + font-size: 18px; + } +} diff --git a/My Website_V2/~$pien Code.docx b/My Website_V2/~$pien Code.docx new file mode 100644 index 00000000..bcf2d6b1 Binary files /dev/null and b/My Website_V2/~$pien Code.docx differ diff --git a/Portrait_grey.jpg b/Portrait_grey.jpg new file mode 100644 index 00000000..815c07c3 Binary files /dev/null and b/Portrait_grey.jpg differ diff --git a/README.md b/README.md deleted file mode 100644 index 60f55e53..00000000 --- a/README.md +++ /dev/null @@ -1,13 +0,0 @@ -# Project Name - -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. - -## The problem - -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? - -## View it live - -Have you deployed your project somewhere? Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. diff --git a/index.html b/index.html new file mode 100644 index 00000000..41bb2401 --- /dev/null +++ b/index.html @@ -0,0 +1,334 @@ + + + + + + MY PAGE + + + + + + + +
+ + +
+
+
+

Hi! I'm Eliane.

+ +

+ Marketing Manager +
+ & +
+ Padi Open Water Scuba Instructor +

+
+
+ Portait +
+
+
+ + +
+
+

About me

+

+ Lorem ipsum dolor sit amet. Est itaque tempore et eveniet suscipit qui + corporis dolores qui quod corrupti est velit eius vel sunt + praesentium! Qui nihil dicta At omnis error qui porro quia et + repellendus atque. Et odit rerum At necessitatibus quia sed quaerat + laborum. Sit saepe tenetur et facilis repudiandae sed enim + reprehenderit eum quas assumenda. Sed consequatur deserunt et ipsam + voluptatibus quo officia veniam et galisum consequatur sed odit rerum + sed dolorum fugiat sed tempora adipisci? Aut reiciendis dolores aut + galisum maiores hic odio repellendus ut sunt velit. Aut facilis itaque + ut impedit dolores ex porro corporis. Aut aspernatur quos ut laborum + nulla et maxime provident ut temporibus optio aut adipisci nemo eos + adipisci quae ex laboriosam sint. +

+

Let's get connected

+ +
+
+
+ + +
+
+

Career History

+

January 2000 - January 2001

+

+ Dies ist erstklassiger Platz! Gehe hier näher auf deinen spannenden + Titel ein. Erkläre, worum es in diesem Abschnitt geht, teile einige + Details und genau die richtige Menge an Informationen, um das + Interesse der Leser zu wecken. +

+

January 2000 - January 2001

+

+ Dies ist erstklassiger Platz! Gehe hier näher auf deinen spannenden + Titel ein. Erkläre, worum es in diesem Abschnitt geht, teile einige + Details und genau die richtige Menge an Informationen, um das + Interesse der Leser zu wecken. +

+

January 2000 - January 2001

+

+ Dies ist erstklassiger Platz! Gehe hier näher auf deinen spannenden + Titel ein. Erkläre, worum es in diesem Abschnitt geht, teile einige + Details und genau die richtige Menge an Informationen, um das + Interesse der Leser zu wecken. +

+
+
+

Academic History

+

January 2000 - January 2001

+

+ Dies ist erstklassiger Platz! Gehe hier näher auf deinen spannenden + Titel ein. Erkläre, worum es in diesem Abschnitt geht, teile einige + Details und genau die richtige Menge an Informationen, um das + Interesse der Leser zu wecken. +

+

January 2000 - January 2001

+

+ Dies ist erstklassiger Platz! Gehe hier näher auf deinen spannenden + Titel ein. Erkläre, worum es in diesem Abschnitt geht, teile einige + Details und genau die richtige Menge an Informationen, um das + Interesse der Leser zu wecken. +

+

January 2000 - January 2001

+

+ Dies ist erstklassiger Platz! Gehe hier näher auf deinen spannenden + Titel ein. Erkläre, worum es in diesem Abschnitt geht, teile einige + Details und genau die richtige Menge an Informationen, um das + Interesse der Leser zu wecken. +

+
+
+
+ + +
+
+ +
+
+
+ + +
+

Languages & Skills

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
German★ ★ ★ ★ ★
English★ ★ ★ ★ ☆
French★ ★ ★ ★ ☆
Italian★ ★ ☆ ☆ ☆
Spanish★ ★ ☆ ☆ ☆
+
+
+ + +

+ Dies ist erstklassiger Platz! Gehe hier näher auf deinen spannenden + Titel ein. Erkläre, worum es in diesem Abschnitt geht, teile einige + Details und genau die richtige Menge an Informationen, um das + Interesse der Leser zu wecken. +

+
+
+ + +

+ Dies ist erstklassiger Platz! Gehe hier näher auf deinen spannenden + Titel ein. Erkläre, worum es in diesem Abschnitt geht, teile einige + Details und genau die richtige Menge an Informationen, um das + Interesse der Leser zu wecken. +

+
+
+
+ + +
+
+

Leave me a message

+

+ Hier kommt das Kontaktformular hin. Hier kommt das Kontaktformular + hin. Hier kommt das Kontaktformular hin. Hier kommt das + Kontaktformular hin. Hier kommt das Kontaktformular hin. Hier kommt + das Kontaktformular hin. Hier kommt das Kontaktformular hin. Hier + kommt das Kontaktformular hin. Hier kommt das Kontaktformular hin. + Hier kommt das Kontaktformular hin. Hier kommt das Kontaktformular + hin. Hier kommt das Kontaktformular hin. Hier kommt das + Kontaktformular hin. Hier kommt das Kontaktformular hin. Hier kommt + das Kontaktformular hin. Hier kommt das Kontaktformular hin. Hier + kommt das Kontaktformular hin. Hier kommt das Kontaktformular hin. +

+
+
+
+
+
+
+ + Logo Footer +
+
+ Contact + Instagram + Facebook + LinkedIN +
+
+
+
+ + diff --git a/projects.html b/projects.html new file mode 100644 index 00000000..cd7b7360 --- /dev/null +++ b/projects.html @@ -0,0 +1,102 @@ + + + + + + PROJECTS + + + + + + + +
+ +
+ +
+
+
+

Tulamben

+ +
+
+

Dolphins Red Sea

+ +
+
+

Raja Ampat

+ +
+
+
+
+

Project 4

+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. +

+
+
+

Project 5

+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. +

+
+
+

Project 6

+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. + Nulla consequat massa quis enim. +

+
+ +
+
+ +
+
+
+ + diff --git a/purple_jellyfish.jpg b/purple_jellyfish.jpg new file mode 100644 index 00000000..4349610d Binary files /dev/null and b/purple_jellyfish.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..13937779 --- /dev/null +++ b/style.css @@ -0,0 +1,446 @@ +@import url("https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;600&display=swap"); + +body { + background-image: url(Bilder/purple_jellyfish.jpg); + background-repeat: repeat; + background-position: top; + background-attachment: fixed; + text-align: left; + margin: 0; +} + +/*Schriften*/ +p { + font-size: 16px; + color: #ffffff; + font-family: "Montserrat", sans-serif; + padding: 20px; + text-align: left; + margin: 0; +} + +h5 { + font-size: 16px; + color: #ffffff; + font-family: "Montserrat", sans-serif; + padding: 0px; + text-align: left; + margin: 0; +} + +h1 { + font-size: 68px; + color: #ffcc48ff; + font-family: "Delicious Handrawn", cursive; + text-align: center; + padding: 5px 30px; + margin: 0px; + background-image: linear-gradient(to left, #ffcc48ff, #6422b8); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +h2 { + font-size: 24px; + color: #ffffff; + font-family: "Montserrat", sans-serif; + font-style: SemiBold 600; + text-align: center; + padding: 5px 30px; + margin: 0px; +} + +h3 { + font-size: 22px; + color: #ffcc48ff; + font-family: "Montserrat", sans-serif; + font-style: SemiBold 600; + text-align: center; + padding: 20px 20px 0px; + margin: 2px; +} + +h4 { + font-size: 16px; + color: #ffffff; + font-family: "Montserrat", sans-serif; + font-style: SemiBold 600; + text-align: center; + margin: 20px 0px 0px 0px; + padding: 0px 20px; +} + +/*Tabelle*/ +th, +td { + border: none; + font-family: "Montserrat", sans-serif; + color: #ffffff; + padding: 0px 25px; + font-size: 16px; +} + +table { + display: table; + border-color: #ffcc48; + table-layout: fixed; + padding: 20px; +} + +/*flex boxen*/ + +.flex { + display: flex; + flex-direction: column; +} + +.flex-intro { + align-items: center; + justify-content: center; + margin: 0px; + background-color: black; + flex-direction: column; + display: flex; +} + +.flex-portrait { + align-items: center; + margin: 0px; + display: flex; + justify-content: center; + background-color: black; +} + +.flex-about { + text-align: center; + backdrop-filter: blur(30px); + padding-bottom: 20px; + width: 100%; +} + +.box { + width: 100%; + background-color: black; + padding: 0px 0px 20px; +} + +.skills-header { + display: flex; + flex-direction: column; + background-color: black; +} + +.skills-box { + display: flex; + flex-direction: column; + background-color: black; + align-items: center; + padding: 10px 0px 10px; + width: 100%; +} + +.language-box { + display: flex; + flex-direction: row; + width: 50%; +} + +.language-box-outline { + display: flex; + flex-direction: row; + width: 100%; + justify-content: center; +} + +/*image*/ +.img-rund { + width: 250px; + max-width: 100%; + border-radius: 50%; + display: flex; + justify-content: center; + margin: 30px 0px; + border: 4px solid #ffffff; +} +.img-social { + width: 50px; + max-width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px; +} + +a { + color: #ffffff; + text-decoration: none; + display: flex; + align-content: center; + flex-wrap: wrap; + justify-content: center; +} + +a:hover { + color: #ffcc48; +} + +/*social media buttons*/ +.socialmedia { + flex-direction: row; + justify-content: center; + display: flex; + width: 100%; +} + +.button { + text-align: center; + cursor: pointer; + display: flex; +} + +.button-information { + text-align: center; + cursor: pointer; + display: flex; + flex-direction: column; + width: 33%; + justify-content: center; +} + +/*Footer*/ +.Footer { + background-color: black; + display: flex; + flex-direction: row; + width: 100%; + justify-content: space-between; +} + +.Footer-Logo-links { + display: flex; + max-width: 25%; + align-items: center; + padding: 0px 20px; + justify-content: flex-start; +} + +.Footer-Logo-rechts { + display: flex; + max-width: 70%; + align-items: center; + padding: 0px 20px; + justify-content: flex-end; +} + +.img-Footer { + width: 80px; + max-width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px 0px; +} + +.img-social-Footer { + width: 30px; + max-width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + padding: 10px 0px 10px 10px; +} + +/*Trennlinie mit Farbverlauf*/ +hr { + border: none; + margin: 0px; + height: 4px; + background: linear-gradient(to right, #6422b8, #ffcc48ff); +} + +/*Trennlinie mit Farbverlauf breiter am seitenkopf*/ +.hr-top { + border: none; + margin: 0px; + height: 40px; + background: linear-gradient(to right, #6422b8, #ffcc48ff); +} + +/* ---------- Navigation - Hamburger Menu --------------------- */ + +/* ------ Desktop, big screen ------------- */ +#navigation { + width: 100%; + background: black; + position: fixed; + z-index: 1; /*sorgt dafür, dass Navigation immer im Vordergrund bleibt*/ +} + +#hamburger-items { + display: flex; +} + +#hamburger-items a { + flex-grow: 1; + padding: 10px; + color: #ffffff; + text-decoration: none; + text-align: center; + font-family: "Montserrat", sans-serif; + font-weight: strong; + font-size: 18px; +} + +#hamburger-items a:hover { + color: #ffcc48; +} + +/*this hides the hamburger on the big screen*/ +#navigation label, +#hamburger { + display: none; +} + +/* ------ Tablet & Mobile ------------- */ + +@media (max-width: 667px) { + #hamburger-items a { + box-sizing: border-box; + display: block; + width: 100%; + border-top: 1px solid #ffffff; + font-size: 16px; + } + + #navigation label { + display: inline-block; + color: #6422b8; + background: transparent; + font-style: normal; + font-size: 40px; + padding: 0px 10px; + } + #hamburger-items { + display: none; + } + #navigation input:checked ~ #hamburger-items { + display: block; + } +} + +/*def responsiveness*/ +/*---Tablet---*/ +@media (min-width: 667px) and (max-width: 1024px) { + .flex-intro { + flex-direction: column; + width: 50%; + } + + .flex { + flex-direction: row; + } + .flex-portrait { + width: 50%; + flex-direction: row; + } + .img-rund { + width: 300px; + } + + .box { + width: 50%; + flex-direction: row; + } + + h1 { + font-size: 72px; + } + h2 { + font-size: 26px; + } + + h3 { + font-size: 24px; + } + + h4 { + font-size: 16px; + } + + p { + font-size: 16px; + } + .socialmedia { + flex-direction: row; + justify-content: center; + align-self: stretch; + flex-wrap: wrap; + } + .button { + font-size: 14px; + padding: 0px 3px; + } + + td { + font-size: 16px; + padding: 0px 3px; + } +} + +/*---Desktop---*/ +@media (min-width: 1025px) { + .flex-intro { + flex-direction: column; + width: 50%; + } + + .flex { + flex-direction: row; + } + .flex-portrait { + width: 50%; + flex-direction: row; + } + + h1 { + font-size: 90px; + } + h2 { + font-size: 32px; + } + + h3 { + font-size: 30px; + } + + h4 { + font-size: 18px; + } + + p { + font-size: 18px; + } + + .img-rund { + width: 350px; + } + + .socialmedia { + flex-direction: row; + justify-content: center; + align-self: stretch; + flex-wrap: wrap; + } + + .button { + font-size: 16px; + } + + th, + td { + font-size: 18px; + padding: 0px 25px; + } +}