diff --git a/index.html b/index.html index a559b87..a31f24e 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,15 @@ The Odin Project + -

The Odin Project

-

Projects done by me

+

Web Development Journey with Odin Project

Foundations Path

-
    -
  1. Odin Recipes
    2.  -
  2. Landing Page
    3.  -
+
+ + +
\ No newline at end of file diff --git a/landing-page/index.html b/landing-page/index.html index d9273dd..be2c18c 100644 --- a/landing-page/index.html +++ b/landing-page/index.html @@ -8,19 +8,62 @@
- -
+ +
+
+

This website is awesome

+

This website has some awesome subtext that goes under the main title. It's a smaller font and color is lower in contrast.

+ +
+ the odin project +
-

-
+

Some Random Information.

+
+
+ +

this is some subtext under an illustation or image

+
+
+ +

this is some subtext under an illustation or image

+
+
+ +

this is some subtext under an illustation or image

+
+
+ +

this is some subtext under an illustation or image

+
+
-
+
+

This is an inspiring quote,or a testimonial from a customer. Maybe it's just filling up space, or maybe people will actually read it. Who knows? All I know is that is looks nice

+

- Thor, God of Thunder

+
-
+
+
+

Call to action! It's time!

+

Sign up for our product by clicking that button over here

+
+
+ +
+
+ diff --git a/landing-page/style.css b/landing-page/style.css index 2f8133b..ca9e9a9 100644 --- a/landing-page/style.css +++ b/landing-page/style.css @@ -1,3 +1,169 @@ *{ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 0; + padding: 0; + +} +#section1{ + color: white; + height: 500px; + background-color: #1f2937; +} +#nav{ + display: flex; + justify-content: space-between; + padding: 120px; + padding-top: 8px; + padding-bottom: 12px; + +} +#leftnav{ + align-self: center; + font-size: 24px; + font-weight: 700; +} +#groupnav{ + display:flex; + flex-direction: row; + font-size: 18px; +} +.groupnav{ + margin: 15px; +} +#herosection{ + display: flex; + justify-content: space-between; + justify-self: center; + align-items: center; + padding: 100px; +} +#content{ + flex-basis:50%; +} +#content h3{ + font-size: 48px; +} +#content p{ + font-size:18px; + color:#e5e7eb; + margin-right: 20px; + margin-bottom: 10px; +} +img{ + flex-basis: 1/2; + width: 500px; + height: 200px; +} +button{ + width: 120px; + height: 32px; + padding-bottom:3px; + padding-left: 24px; + padding-right: 24px; + border-radius: 8px; + background-color:#3882f6; + border:none; + font-weight: 500; + color:#e5e7eb; + font-size: 18px; +} +#section2{ + background-color: white; + height: 500px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + +} + +#section2 h4{ + font-weight: bolder; + color: #1f2937; + font-size: 36px; + text-align: center; + padding-top: 40px; + +} +#somerandominfoboxes{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + margin-top: 40px; + margin-bottom: 90px; + +} +.item{ + display: flex; + flex-direction: column; + width: 200px; + justify-content: center; + align-items: center; + text-align: center; +} +.box{ + width: 175px; + height: 175px; + border-color: #3882f6; + border-radius: 8px; + + +} + +.item p{ + font-size: 12px; + width: 175px; +} + +#section3{ + background-color: #E5E7EB; + + height:400px; + padding-left:256px; + padding-right:256px; +} +#quote{ + display: flex; + flex-direction: column; +} + +#quotecontent{ + margin-top: 96px; + font-size: 36px; + font-style: italic; + color: #1f2937; + font-weight: lighter; +} +#author{ + text-align: right; + font-size:24px; + font-weight: bold; +} + +#section4{ + height: 300px; +} + +#calltoaction{ + margin: 150px; + background-color: #3882f6; + color: white; + height: 150px; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + border-radius: 8px; +} + +#ctabuttonsignup{ + border-style: solid; +} + +footer{ + background-color: #1f2937; + padding: 30px; + color: white; + text-align: center; } \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9cbc4e3 --- /dev/null +++ b/style.css @@ -0,0 +1,30 @@ +*{ + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +#projects{ + display: flex; + flex:1; + justify-content: start; + align-items: center; + margin-left: 48px; +} +h4{ + margin-top: 48px; + margin-bottom: 48px; + margin-left: 48px; + text-decoration: underline; +} +#projects button{ + margin: 20px; + background-color: #007BFF; + color: white; + border-radius: 14px; + padding: 30px; + border-color: white; + font-size: large; + font-weight: bold; +} + +button:hover{ + background-color: black; +} \ No newline at end of file