Skip to content

resolved tasks 1-5 #154

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
marrcelp wants to merge 11 commits into
base: master
Choose a base branch
from
Open

resolved tasks 1-5 #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d9cc9d9
add shape-outside to before element
marrcelp Oct 4, 2024
6ef90af
add grid, create template areas for media
marrcelp Oct 4, 2024
b97ad1b
add styles and html for different devices
marrcelp Oct 4, 2024
6918649
created proper html structure, add styles for mobile devices
marrcelp Oct 6, 2024
90a1e88
add styles for desktop devices, add corrections to index.html and mob…
marrcelp Oct 6, 2024
abf9c3f
add meta theme color to index.html
marrcelp Oct 6, 2024
edcf8b6
created basic html sructure, created css files
marrcelp Oct 7, 2024
1e267fd
add style for header, create navigation for mobile version
marrcelp Oct 7, 2024
e5dde59
add full styles for hero, article and footer section, add corrections…
marrcelp Oct 8, 2024
799e286
add styles for desktop version
marrcelp Oct 8, 2024
bf8b029
add theme color to index.html
marrcelp Oct 8, 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
3 changes: 2 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,6 @@
height: 0;
border: 150px solid #dcdcdc;
border-right-color: transparent;
border-bottom-color: transparent;
border-bottom-color: transparent;
shape-outside: polygon(0 0, 300px 0, 0 300px);
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Oct 10, 2024

Choose a reason for hiding this comment

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

👍

}
35 changes: 34 additions & 1 deletion 02/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,18 @@
box-sizing: border-box;
}

body {
display: grid;
}

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

height: 50vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.a {
Expand All @@ -19,8 +24,36 @@

.b {
border-color: #ffdfba;
grid-row: 2 / 3;
}

.c {
border-color: #baffc9;
}

@media (min-width: 601px) {

body {
grid-template-areas:
"a a"
"c b";
justify-items: center;
}

.a {
grid-area: a;
}

.b {
grid-area: b;
}

.c {
grid-area: c;
}

.a, .b, .c {
max-width: 1200px;

}
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Oct 10, 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/pumpkins-8338100_1920--smaller.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/pumpkins-8338100_1920.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.
16 changes: 13 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,22 @@
<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">
</head>
<body>

<main class="t">T</main>
<header class="p">P</header>
<side class="v">V</side>
<main class="t">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, sit ipsum nostrum aliquam aliquid suscipit fugiat quasi similique cumque, magni velit porro. Assumenda deleniti delectus quo ipsam, et, exercitationem temporibus quidem dolore dolorem pariatur laborum perspiciatis soluta. Error, nihil eligendi! Quae illo quam ducimus laudantium adipisci reiciendis, dolores fugit eum, optio itaque accusamus omnis repellendus ex natus alias qui, nesciunt temporibus? Ab sed perspiciatis cupiditate nostrum nesciunt adipisci omnis beatae ad voluptates, placeat id optio ratione magni, dolore unde modi laborum non corporis laudantium, quam nulla amet eum similique delectus. Quibusdam, corrupti ipsa. Veritatis perferendis magni reiciendis excepturi, vitae dolorum?</main>
<header class="p">
<picture>
<source
srcset="assets/pumpkins-8338100_1920--smaller.jpg"
media="(max-width: 599px)">
<img src="assets/pumpkins-8338100_1920.jpg" alt="pumpkins photo">
</picture>
</header>
<side class="v">
<iframe src="https://www.youtube.com/embed/W_e4hWPPmGQ?si=bHihwJMju_Afjadl" 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 Oct 10, 2024

Choose a reason for hiding this comment

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

👍


</body>
</html>
112 changes: 111 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,10 @@
box-sizing: border-box;
}

body {
display: grid;
}

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

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

.t {
Expand All @@ -23,4 +27,110 @@

.v {
border-color: #baffc9;
height: 0;
padding-bottom: 56.25%;
position: relative;
width: 100%;
}

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

iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

@media (max-width: 599px) {

body {
grid-template-areas:
"p"
"t"
"v";
}

.p {
grid-area: p;
}

.t {
grid-area: t;
}

.v {
grid-area: v;
}
}


@media (min-width: 600px) and (max-width: 1199px) {

body {
grid-template-areas:
"p t"
"v t";
}

.p {
grid-area: p;
}

.t {
grid-area: t;
}

.v {
grid-area: v;
}

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


}

@media (min-width: 1200px) {

body {
grid-template-areas:
"p v"
"t t";
justify-items: center;
max-width: 1400px;
margin: 0 auto;
}

.p {
grid-area: p;
height: 0;
padding-bottom: 56.25%;
position: relative;
width: 100%;
}

.t {
grid-area: t;
}

.v {
grid-area: v;
}
picture {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
}


Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Oct 10, 2024

Choose a reason for hiding this comment

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

👍

}
69 changes: 69 additions & 0 deletions 04/desktop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.navbar {
width: 100%;
background-color: grey;
font-family: 'Courier New', Courier, monospace;
font-weight: 500;
color: white;
}

.navbar__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
max-width: 1200px;
margin: 0 auto;
padding: 0 25px;
}

.menu-toggle {
display: none;
}


.navbar__list {
font-size: 16px;
line-height: 20px;
list-style: none;
display: flex;
}

.link {
text-decoration: none;
color: #333;
color: white;
padding: 27px 25px;
}

.link:hover {
color: skyblue;
}

.navbar__dropdown {
display: none;
position: absolute;
top: 70px;
list-style: none;
background-color: darkgray;
}

.navbar__element--dropdown:hover > .navbar__dropdown {
display: block;
}

.navbar__link--last {
padding-right: 0;
}

.dropdown__link {
text-decoration: none;
display: block;
padding: 10px 10px;
color: white;
}
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Oct 10, 2024

Choose a reason for hiding this comment

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

👍

56 changes: 40 additions & 16 deletions 04/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,50 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="grey">
<link rel="stylesheet" href="./mobile.css" media="(max-width: 760px)">
<link rel="stylesheet" href="./desktop.css" media="(min-width: 761px)">
<title>devmentor.pl - HTML & CSS: RWD - #04</title>
</head>
<body>

<nav>
<ul>
<li>
<a 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>
</ul>
</li>
<li>
<a href="#">kontakt</a>
</li>
</ul>
<nav class="navbar">
<div class="navbar__container">
<div class="logo">LOGO</div>
<input type="checkbox" class="menu-toggle" id="menu-toggle">
<label for="menu-toggle" class="hamburger">
<span class="hamburger__element hamburger__element--first"></span>
<span class="hamburger__element hamburger__element--second"></span>
<span class="hamburger__element hamburger__element--third"></span>
</label>

<ul class="navbar__list">

<li class="navbar__element">
<a class="navbar__link link" href="#">start</a>
</li>

<li class="navbar__element navbar__element--dropdown">
<a class="navbar__link link" href="#">oferta</a>
<ul class="navbar__dropdown dropdown">

<li class="dropdown__element">
<a class="dropdown__link link" href="">strony internetowe</a>
</li>

<li class="dropdown__element">
<a class="dropdown__link link" href="">pozycjonowanie stron www</a>
</li>

</ul>
</li>

<li class="navbar__element">
<a class="navbar__link--last link" href="#">kontakt</a>
</li>

</ul>
</div>
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Oct 10, 2024

Choose a reason for hiding this comment

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

👍

</nav>

</body>
Expand Down
Loading