Skip to content

tasks done #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
marazmlab wants to merge 6 commits into
base: master
Choose a base branch
from
Open

tasks done #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fe5fec2
Initial commit done
marazmlab Aug 8, 2024
c082642
done
marazmlab Aug 21, 2024
31e1274
delete bugs
marazmlab Aug 21, 2024
147c3bb
initial-done
marazmlab Aug 22, 2024
8c8fbbe
initial commit
marazmlab Aug 24, 2024
96d4b88
initial commit
marazmlab Aug 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion 01/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,8 @@
height: 0;
border: 150px solid #dcdcdc;
border-right-color: transparent;
border-bottom-color: transparent;
border-bottom-color: transparent;

shape-outside: polygon(100% 0, 0 0, 0 100%);
margin-right: 10px;
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

}
34 changes: 32 additions & 2 deletions 02/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,25 @@
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgb(51, 50, 50);
}

body {
display: grid;
grid-template-columns: 1fr;
}

.a, .b, .c {
border: 3px solid transparent;
min-height: 50px;
min-height: 50vh;

display: flex;
justify-content: center;
align-items: center;
}

.a {
border-color: #ffffba
border-color: #ffffba ;
}

.b {
Expand All @@ -23,4 +29,28 @@

.c {
border-color: #baffc9;
order: 1;
}

@media (min-width: 600px) {

body {
margin: auto;
grid-template-columns: 1fr 1fr ;
max-width: 1200px;
}

.a {
grid-column-start: 1;
grid-column-end: 3;
}

.b {
order: 3;
}

Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍





}
Binary file added 03/assets/ship-8170663_1280-desktop.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 03/assets/ship-8170663_1280-mobile.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 03/assets/ship-8170663_1280-tablet.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 03/assets/ship-8170663_1280.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 28 additions & 3 deletions 03/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,37 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>devmentor.pl - HTML & CSS: RWD - #03</title>
<link rel="stylesheet" href="./styles/global.css">
<link rel="stylesheet" href="./styles/mobile.css">
<link rel="stylesheet" media="(min-width: 600px)" href="./styles/tablet.css">
<link rel="stylesheet" media="(min-width: 1200px)" href="./styles/desktop.css">
</head>
<body>

<main class="t">T</main>
<header class="p">P</header>
<side class="v">V</side>
<main class="t">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis quaerat accusantium porro error dicta consequuntur iure facere exercitationem, nisi earum consequatur, fugit velit autem molestiae ex rerum! Unde soluta aperiam repellat, in repellendus voluptates cum corporis quia sint alias illo, at accusamus nisi tempore, libero maxime. Vero, veritatis impedit laudantium natus magni temporibus debitis perspiciatis culpa ratione! Quae voluptatibus hic ut natus quidem molestias consequatur quibusdam autem quaerat eaque. Eaque ullam magni iure reprehenderit explicabo, omnis impedit corporis tempore consequuntur reiciendis illum dolore sunt possimus blanditiis id deleniti. Nobis eaque, in tempore, maxime commodi, repudiandae minus exercitationem voluptates labore nihil molestias porro blanditiis culpa quod cum. Aperiam dolorem consequuntur quaerat iure earum accusamus recusandae doloribus modi rerum laudantium eligendi corporis repellendus in quam enim facere, optio incidunt fuga obcaecati deleniti dolore vel officiis ratione neque. Tempora magni temporibus ullam officiis saepe minus voluptate facere. Adipisci id omnis ut provident eum.</p>
</main>

<header class="p">
<picture>
<source
srcset="/assets/ship-8170663_1280-desktop.jpg"
media="(min-width: 1200px)"
>
<source
srcset="/assets/ship-8170663_1280-tablet.jpg"
media="(min-width: 600px)"
>
<source
srcset="/assets/ship-8170663_1280-mobile.jpg"
>
<img src="/assets/ship-8170663_1280.jpg" alt="">
</picture>
</header>

<side class="v">
<iframe width="560" height="315" src="https://www.youtube.com/embed/3djZ6rgdHhE?si=CbMM7PBV_ui9zOTW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</side>
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


</body>
</html>
9 changes: 9 additions & 0 deletions 03/styles/desktop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
body {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

.t {
grid-row: 2 / 3;
grid-column: 1 / 3;
}
9 changes: 8 additions & 1 deletion 03/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@
box-sizing: border-box;
}

body {
display: grid;
max-width: 1400px;
margin: auto;
}


.p, .t, .v {
border: 3px solid transparent;
min-height: 50px;
Expand All @@ -14,7 +21,7 @@
}

.p {
border-color: #ffffba
border-color: #e2321a
}

.t {
Expand Down
34 changes: 34 additions & 0 deletions 03/styles/mobile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@

body {
grid-template-columns: 1fr;
}

.p, .t, .v {
max-width: 100vw;
}

.p {
order: -1;

}

img {
max-width: 100%;
max-height: 100%;
}

.v {
height: 0;
padding-bottom: calc(315 / 560 *100%) ;
position: relative;
width: 100%;
height: 100%;
}

iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

15 changes: 15 additions & 0 deletions 03/styles/tablet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
body {
grid-template-columns: 51vw 1fr;
grid-template-rows: 50vh 50vh;
}

.t {
grid-row: 1 / 3;
grid-column: 2 / 3;
}

.p , .v {
min-width: 200px;
max-width: 50vw ;
}

Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

44 changes: 33 additions & 11 deletions 04/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,46 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>devmentor.pl - HTML & CSS: RWD - #04</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav>
<ul>
<li>
<a href="#">start</a>
<nav class="navbar">

<div class="header__logo logo">
<a class="logo__link" href="#">MRZM</a>
</div>

<label for="menu-switcher">
<div class="header__hamburger"></div>
</label>
<input type="checkbox" id="menu-switcher">

<ul class="navbar__list">

<li class="navbar__item">
<a class="navbar__link" href="#">Start</a>
</li>
<li>
<a href="#">oferta</a>
<ul>
<li><a href="">strony internetowe</a></li>
<li><a href="">pozycjonowanie stron www</a></li>

<li class="navbar__item">
<a class="navbar__link oferta " href="#">Oferta ></a>

<ul class="navbar__list navbar__list--sublist">
<li class="navbar__item navbar__item--subitem">
<a class="navbar__link navbar__link--sublink" href="">Strony internetowe</a>
</li>
<li class="navbar__item navbar__item--subitem">
<a class="navbar__link navbar__link--sublink" href="">Pozycjonowanie stron www</a>
</li>
</ul>

</li>
<li>
<a href="#">kontakt</a>

<li class="navbar__item">
<a class="navbar__link" href="#">Kontakt</a>
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

</li>

</ul>
</nav>

Expand Down
89 changes: 89 additions & 0 deletions 04/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}

main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit;}

img {max-width: 100%;}

ul {list-style: none;} /* we'll restore bullets as needed for content */

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

table {border-collapse: separate; border-spacing: 0; text-align: left;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
td img {vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}

input, select {vertical-align: middle;}

pre {white-space: pre-line;}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}

small {font-size: .8rem;}

strong {font-weight: bold;}

sub, sup {font-size: .8rem; line-height: 0; position: relative;}
sup {top: -0.5rem;}
sub {bottom: -0.25rem;}

pre, code, kbd, samp {font-family: monospace, sans-serif;}

label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}

button, input, select, textarea {margin: 0;}

ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}

blockquote {padding: 2rem; border-left: 1px solid #333;}

.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */

h1, h2, h3, h4, h5, h6 {text-wrap: balance}

p {text-wrap: pretty;}

@media (prefers-reduced-motion: no-preference) {
:has(:target) {
scroll-behavior: smooth;
}
}

/* ———— END THE GENERIC RESETS ———— */

:root {
--font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */
--text-color: #333;
--featured-color: #03f;
--featured-color-hover: #69f;
--highlight-color: #fcd700;
}

body {font-size: 16px; font-family: var(--font-system); color: var(--text-color);}

a {color: var(--featured-color);}
a:hover {color: var(--featured-color-hover);}

@media screen and (max-width: 480px) {

}

@media print {

}
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Loading