diff --git a/index.html b/index.html index 840fa67..b939f29 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,77 @@ CodersCamp | Projekt 1 - HTML i CSS - + + +
+ +
+
+ +
+ +
+
+
+
+
+

Lorem Ipsum

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia veniam nesciunt totam hic minus aliquam dicta deserunt quidem a eligendi in obcaecati, at amet ullam iste officiis reprehenderit, distinctio quaerat!Lorem + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam libero illum excepturi, doloremque quo, at sapiente similique rerum, placeat id fugiat laborum aspernatur asperiores. Dolore deserunt temporibus quos odio molestiae? +

+ +
+
+
+ +
+
+
+ +

Lorem, ipsum dolor sit amet consectetur adipisicing elit

+
+ +
+
+
+ +

Lorem, ipsum dolor sit amet consectetur adipisicing elit

+
+
+
+
+ +

Lorem, ipsum dolor sit amet consectetur adipisicing elit

+
+
+ +
-

CodersCamp - projekt 1. Tutaj możesz zacząć swoją zabawę!

+
+
+
+

Lorem Ipsum

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia veniam nesciunt totam hic minus aliquam dicta deserunt quidem a eligendi in obcaecati, at amet ullam iste officiis reprehenderit, distinctio quaerat!Lorem + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam libero illum excepturi, doloremque quo, at sapiente similique rerum, placeat id fugiat laborum aspernatur asperiores. Dolore deserunt temporibus quos odio molestiae? +

+ +
+
+
+
+ +
diff --git a/normalize.css b/normalize.css new file mode 100644 index 0000000..c45a85f --- /dev/null +++ b/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/picture/aboutboxpicture.jpeg b/picture/aboutboxpicture.jpeg new file mode 100644 index 0000000..aba3496 Binary files /dev/null and b/picture/aboutboxpicture.jpeg differ diff --git a/picture/aboutboxpicture.jpg b/picture/aboutboxpicture.jpg new file mode 100644 index 0000000..8df67ea Binary files /dev/null and b/picture/aboutboxpicture.jpg differ diff --git a/picture/black-friday.jpeg b/picture/black-friday.jpeg new file mode 100644 index 0000000..4ed9332 Binary files /dev/null and b/picture/black-friday.jpeg differ diff --git a/picture/cat.png b/picture/cat.png new file mode 100644 index 0000000..5b8700d Binary files /dev/null and b/picture/cat.png differ diff --git a/picture/firstphoto.jpeg b/picture/firstphoto.jpeg new file mode 100644 index 0000000..0af5b74 Binary files /dev/null and b/picture/firstphoto.jpeg differ diff --git a/picture/portfolioImg1.jpeg b/picture/portfolioImg1.jpeg new file mode 100644 index 0000000..bf956aa Binary files /dev/null and b/picture/portfolioImg1.jpeg differ diff --git a/picture/portfolioImg3.jpeg b/picture/portfolioImg3.jpeg new file mode 100644 index 0000000..402709d Binary files /dev/null and b/picture/portfolioImg3.jpeg differ diff --git a/picture/sd.jpg b/picture/sd.jpg new file mode 100644 index 0000000..1d605fd Binary files /dev/null and b/picture/sd.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..ba6e5cf --- /dev/null +++ b/style.css @@ -0,0 +1,113 @@ +*{ + margin: 0 auto; + padding:0; +} +header{ + width: 100%; + height: 8vh; + background-color:#FAF0E6; +} +nav{ + text-align: center; + line-height: 8vh; +} +.firstphoto{ + background-image: url("picture/firstphoto.jpeg"); + background-position: -10%; + width: 100%; + height: 93vh; +} +nav>ul>li{ + list-style-type: none; + display: inline-block; + width: 12vh; + height: 3vh; + margin-right: .5vh; + text-align: center; + +} +nav>ul>li>a{ + text-decoration: none; + color:#000000; + font-size: 2vh; +} +nav>ul>li>a>img{ + display: inline; + width: 4vh; + height: 4vh; + vertical-align: middle; + +} +nav>ul>li>a:hover{ + color:#A9A9A9; +} +#about, #hobby{ + width: 100%; + height: 90vh; + display: flex; + align-items: center; + justify-content: center; +} + .leftBoxes, .rightBoxes{ + width: 44%; + height: 80%; + margin: 5.9vh; + background-color:#FAF0E6; + display: flex; + align-items: center; +} + +#about .leftBoxes, #hobby .rightBoxes{ + height: 60%; + background-image: url("picture/aboutboxpicture.jpeg"); + background-size: 100% 100%; +} + +#rightContent > p, #leftContent > p{ + padding: 5vh; + font-size: 2.5vh; +} +#rightContent, #leftContent{ + text-align: center; +} +#rightContent > button, #leftContent > button{ + text-decoration: none; + background-color: transparent; + border:0; + font-size: 2vh; +} +#portfolio{ + margin-top: 20vh; + width: 100%; + height: 80vh; + background-color:#FAF0E6; +} +.portfolioBoxes{ + width: 33%; + height: 100%; + float: left; + text-align: center; + +} +.imgPortfolioBoxes{ + width: 40vh; + height: 55vh; + margin-top: 2vh; +} +.portfolioImgAndP{ + width: 50vh; + height: 90%; + background-color: #FFFFFF; + margin-top: 4vh; +} +#portfolio .portfolioBoxes .portfolioImgAndP > p{ + margin-top: 2vh; + font-size: 3vh; + width:30vh; +} +.imgPortfolioBoxes, #portfolio .portfolioBoxes > p{ + background-color: #FFFFFF; +} + + +