commit 14668850d2ca859353ab0011d528b9131889f38e Author: NetMan <13informatyka14@gmail.com> Date: Fri Dec 29 19:42:25 2023 +0100 Initlal commit, forgot to preserve changes My bad, didn't commit every breakthrough and parts (shrug...) Well then, better luck next time, future me! But the project has been completed, but it looks smallish in the browser, maybe modify it later? In the small simple VS Code browser it looks good and fine diff --git a/01.png b/01.png new file mode 100644 index 0000000..3b4fd2a Binary files /dev/null and b/01.png differ diff --git a/02.png b/02.png new file mode 100644 index 0000000..01a2345 Binary files /dev/null and b/02.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..f1b388d --- /dev/null +++ b/index.html @@ -0,0 +1,92 @@ + + + + + + Document + + + +
+
+ +
+ +
+
+
+ +
+
+
+

This website is awesome

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam, quos, provident unde quaerat cupiditate, recusandae delectus voluptate sapiente. + +
+
+ this is a placeholder for an image +
+
+
+ +
+
+

Information

+
+
+
+ this is some subtext under an illustration or image +
+
+
+ this is some subtext under an illustration or image +
+
+
+ this is some subtext under an illustration or image +
+
+
+ this is some subtext under an illustration or image +
+
+
+
+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, optio earum. Aperiam commodi soluta alias assumenda est velit voluptates? Eligendi sequi voluptate magni tempore amet delectus corporis praesentium. +
+ -Thor, God of Thunder +
+
+ +
+
+
+
+

Call to action! It's time!

+ Lorem ipsum dolor sit amet consectetur adipisicing elit! +
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..837ce5b --- /dev/null +++ b/style.css @@ -0,0 +1,188 @@ +body { + margin: 0; + padding: 0; + flex-direction: column; + display: flex; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + min-height: 100vh; +} + +.enclosure { + display: flex; + justify-content: center; +} + +.enclosure > *{ + width: 1000px; +} + +h1,h2,h3,h4,h5,h6 { + padding: 0; + margin: 0; +} + +.darkblue { + background-color: #1f2937; + color: #fff; +} + +.blue { + background-color: #3882f6; + color: #fff; +} + +.logo { + font-size: 24px; + font-weight: 600; +} + +.header { + display: flex; + justify-content: space-between; + gap: 35px; + padding: 10px 12px; + align-items: center; +} + +.header ul { + list-style: none; + padding: 0; + display: flex; + gap: 15px; +} + +.header a { + color: #fff; + text-decoration: none; +} + + +.nutshell { + display: flex; + padding: 30px; + justify-content: space-around; + gap: 15px; + +} + +.nutshell .text { + flex: 1; +} + + +.nutshell .content { + display: block; + padding: 5px 0 10px 0; +} + + +.nutshell .image { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + background-color: #77777d; +} + +.nutshell button { + display: block; + background-color: #3882f6; + border: none; + color: #fff; + padding: 6px 24px; + border-radius: 5px; + cursor: pointer; +} + +.info { + text-align: center; + padding: 35px 20px; +} + +.info .caption { + margin-bottom: 20px; +} + + +.white { + background-color: white; +} + + +.info .boxes { + display: flex; + justify-content: center; + gap: 10px; +} + +.info .box { + font-size: 0.92rem; + display: flex; + flex-direction: column; + align-items: center; + width: 160px; + +} + +.info .frame { + border: 3px solid #3882f6; + border-radius: 10px; + height: 100px; + width: 100px; +} + +.lightgray { + background-color: lightgray; +} + +.quote { + padding: 70px; +} + +.quote .content { + font-size: 1.6rem; + font-weight: lighter; +} + +.quote .utterer { + width: 100%; + display: inline-block; + text-align: right; +} + +.fillaction { + display: flex; + justify-content: center; + align-items: center; + padding: 65px 85px; +} + +.fillaction .action { + flex: 1; + border-radius: 5px; + padding: 30px 60px; + display: flex; + align-items: center; +} + +.fillaction .text { + flex: 1; +} + +.fillaction button { + background-color: transparent; + border: 2px solid #fff; + display: block; + color: #fff; + padding: 6px 24px; + border-radius: 5px; + cursor: pointer; + width: fit-content; +} + +footer { + height: 100px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file