diff --git a/projects/card/index.html b/projects/card/index.html index 0795d41..9ccb38d 100644 --- a/projects/card/index.html +++ b/projects/card/index.html @@ -1,20 +1,34 @@ - - - - Document - - + + + +Document + -
- -
+
+ +
- - - diff --git a/projects/card/style.css b/projects/card/style.css index 1875727..aff149e 100644 --- a/projects/card/style.css +++ b/projects/card/style.css @@ -1,22 +1,49 @@ -*{ - margin: 0; - padding: 0; +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100.. 900&display=swap'); +* { +margin: 0; +padding: 0; } -body{ - font-family: 'Open Sans', sans-serif; +body {} +.header { width: 100%; +box-sizing: border-box; font-family: "Montserrat"; +box-shadow: 0px 4px 7px #81818140; } - -.container{ - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100vh; - padding: 20px; - background-color: #15638F; - +.menu { +display: flex; +align-items: center; padding-inline: 40px; height: 100px; } +.menu url { +list-style-type: none; display: flex; +} +.menu li:not(:last-child) { margin-right: 40px; +} +.menu link { color: black; +text-decoration: none; font-weight: 300; font-size: 16px; +line-height: 19.5px; letter-spacing: -0.015em; +} +.menu link:hover { color: #05A88D; +} +.menu logo { margin-left: auto; margin-right: auto; +text-decoration: none; font-weight: 700; font-size: 24px; +line-height: 29.26px; letter-spacing: -0.015em; - - - +color: #05A88D; +} +.menu signup { margin-right: 40px; +padding: 12.5px 21.5px; background: white; +border: solid 1px #05A88D; border-radius: 3px; +font-weight: 300; font-size: 16px; line-height: 19.5px; +letter-spacing: -0.015em; font-family: "Montserrat"; color: #05A88D; +cursor: pointer; +} +.menu signup:hover { background: #05A88D; color: white; +} +.menu login { +padding: 12.5px 21.5px; background: white; border-radius: 3px; +font-weight: 300; font-size: 16px; line-height: 19.5px; +letter-spacing: -0.015em; font-family: "Montserrat"; color: #05A88D; +border: solid 1px white; cursor: pointer; +} +.menu login:hover { +border: solid 1px #05A88D; +} diff --git a/projects/footer/index.html b/projects/footer/index.html index 3a710f9..6ab42b9 100644 --- a/projects/footer/index.html +++ b/projects/footer/index.html @@ -1,26 +1,36 @@ - - - - Document - - + + + +Document + -
-
- -
+
+
+ +
- - - - - - - diff --git a/projects/footer/style.css b/projects/footer/style.css index 736de24..5db0597 100644 --- a/projects/footer/style.css +++ b/projects/footer/style.css @@ -1,21 +1,51 @@ -*{ - margin: 0; - padding: 0; +@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900 &display=swap'); +* { +margin: 0; +padding: 0; } -html,body{ - font-family: 'Exo 2', sans-serif; - height: 100%; +html, body { +font-family: 'Exo 2', sans-serif; height: 100%; } -.wrapper { - display: flex; - flex-direction: column; - min-height: 100%; +.wrapper { display: flex; +flex-direction: column; min-height: 100%; } -.main { - flex: 1 0 auto; +.main { flex: 1 0 auto; } +.footer { +flex: 0 0 auto; padding: 40px; +background-color: #05A88D; } -.footer{ - flex: 0 0 auto; +.footer top { +border-bottom: 2px solid white; +display: flex; +justify-content: space-between; +} +.footer left { +max-width: 437px; margin-bottom: 40px; +} +.logo { +font-size: 28px; line-height: 33.6px; color: #F1E67D; font-weight: 700; +} +.text { +margin-top: 40px; font-size: 12px; line-height: 14.4px; +letter-spacing: -0.015em; color: white; +font-weight: 300; +} +.contact { +margin-top: 18px; font-weight: 700; font-size: 14px; line-height: 16.8px; +letter-spacing: -0.015em; color: white; +margin-bottom: 16px; +} +.phone { +font-weight: 700; font-size: 24px; line-height: 28.8px; +letter-spacing: -0.015em; color: #F1E67D; +} +.address { +margin-top: 16px; font-weight: 300; font-size: 12px; line-height: 14.4px; +letter-spacing: -0.015em; color: white; } - +.footer bottom { +font-weight: 300; font-size: 12px; line-height: 14.4px; +letter-spacing: -1.5%; color: #ffffff; +margin-top: 40px; +} diff --git a/projects/header/index.html b/projects/header/index.html index 276b02a..dd32122 100644 --- a/projects/header/index.html +++ b/projects/header/index.html @@ -1,21 +1,34 @@ - - - - - - - Document - - - - -
- -
- - - - - + + + + + + +Document + + + + +
+
+
+ +
+
+
+Pragser Wildsee, Italy +
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod +tempor incididunt ut labore +et dolore magna aliqua. Ut enim ad minim veniam. +
+ +
+
+
+ + \ No newline at end of file diff --git a/projects/header/style.css b/projects/header/style.css index 4677eae..09e9bd6 100644 --- a/projects/header/style.css +++ b/projects/header/style.css @@ -1,13 +1,56 @@ -*{ - margin: 0; - padding: 0; -} - -body{ - -} - -.header{ - width: 100%; - box-sizing: border-box; -} +@import +url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900 &display=swap'); +* { +margin: 0; +padding: 0; +} +body { +font-family: 'Exo 2', sans-serif; +} +.container { +display: flex; +justify-content: center; +align-items: center; +width: 100%; +height: 100vh; +background-color: #15638F; +} +.card { +width: 200px; +background-color: white; +border-radius: 10px; +box-shadow: 0px 0xp 7px rgba(0, 0, 0, 30%); +} +.card__image img { +width: 100%; +height: 100%; +border-radius: 10px 10px 0px 0px; +} +.card__content { +padding: 17.5px; +} +.card__title { +font-size: 12px; +font-weight: 700; +line-height: 16.34px; +margin-bottom: 17.5px; +} +.card__text { +font-weight: 300; +font-size: 10px; +margin-bottom: 17.5px; +} +.card__btn { +width: 98px; +height: 27px; +border-radius: 50px; +border: none; +background-color: #2797B2; +font-size: 10px; +font-weight: 700; +line-height: 13.62px; +color: white; +} +.card__btn:hover { +background-color: #2489a3; +} \ No newline at end of file