diff --git a/index.html b/index.html new file mode 100644 index 0000000..50a882a --- /dev/null +++ b/index.html @@ -0,0 +1,63 @@ + + + + + + Document + + + +
+
+ +
+
+ +
+

This is the place holder for an image

+
+
+
+
+

Some random Information.

+ + + +
+
+

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 know? All i know is that it looks nice.

+

-Thor, God of Thunder

+
+
+ + +
+
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..318308c --- /dev/null +++ b/style.css @@ -0,0 +1,239 @@ +* { + margin: 0; + +} +html, body { + height: 100%; +} + +body{ + font-family: sans-serif ; + + + + +} +ul{ + list-style: none +} +.upper{ + background-color: #1F2937; + padding: 20px; + flex: 1; + padding-bottom: 100px; + font-family:sans-serif; + padding-bottom: 150px; + flex-wrap: wrap; + +} +.header{ + display: flex; + padding: 20px; + +} +.top{ + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + padding: 0px; + + +} +.logon{ + font-size: 24px; + color: #f9faf8; + font-weight: bold; +} +.cat{display: flex; + margin-right: 0; + justify-content: end; + margin-left: 800px; + align-items: end; + gap: 16px; +} +.logo{ + color: #E5E7EB; +} +a{ + font-size: 18px; + color: #E5E7EB; + text-decoration: none; +} +.hero{ + display: flex; + justify-content: space-between; + margin-top: 70px; + flex: 1; + margin-left: 90px; + margin-right: 90px; +} +.hero li{ + display: flex; +} +.awesome{ + font-size: 48px; + font-weight: bold; + color: #f9faf8; + +} +.awesome{ + width: 500px; +} +.para{ + font-size: 18px; + color: #E5E7EB; + width: 500px; + + +} +button{ + background-color: #3882F6; + color: #f9faf8; + border: #3882F6; + border-radius: 6px 4px; + padding: 8px 18px; + margin-top: 12px; + font-weight: bold; + font-size: 18px; + width: 140px; + height: 40px; +} +.place{ + display: flex; + justify-content: center; + align-items: center; + gap: 1px; + padding: 0px; + width: 520px; + height: 250px; + background-color: grey; + margin-right: 190px; +} + +.image{ + color: #E5E7EB; +} +.random{ + display: flex; + flex-direction: column; + margin-top: 50px; + +} +.random p{ + + font-size: 36px; + color: #1F2937; + font-weight: bold; + display: flex; + justify-content: center; + +} +.blank{ + + display: flex; + flex-direction: row; + justify-content: center; + padding: 20px; + + +} +.sat{ + margin: 20px; + padding: 20px; + border: 4px solid #3882F6; + border-radius: 10%; + width: 150px; + height: 140px; +} +.text{ + color:rgb(53, 52, 52); + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + padding-top: 0px; + + + + +} +.text li{ + margin: 20px; + margin-top: -29px; + padding: 20px; + padding-top: 0px; + width: 160px; + text-align: center; +} +.quote{ + background-color: #E5E7EB; + font-size: 36px; + font-style: italic; + color: #1F2937; + font-weight: 100; + padding: 100px; + text-align: justify; + + + +} +.quote p{ + margin: 80px; + margin-top: 0px; + margin-bottom: -10px; +} +.small{ + font-style: normal; + font-size: 25px; + display: flex; + justify-content: end; + margin-top: -70px; + flex-wrap: wrap; + padding: 20px; + font-weight: bold; + +} +.sign{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color: #3882F6; + margin-left: 150px; + margin-right: 150px; + padding: 20px; + margin-top: 100px; + margin-bottom: 100px; + border-radius: 8px 6px ; +} +.action{ + color: #E5E7EB; + font-size: 26px; + font-weight: bold; + +} +.pat{ + color: #E5E7EB; +} +.sign{ + display: flex; + justify-content: center; + flex-direction: row; + gap: 100px; +} +.up{ + border: 3px solid #E5E7EB; + border-radius: 6px 8px; + width: 120px; + color: #E5E7EB; + font-size: 17px; + font-weight: bold; +} +.footer{ + background-color: #1F2937; + color: #E5E7EB; + padding: 30px; + display: flex; + justify-content: center; +} \ No newline at end of file