Skip to content

Commit c1a9d2c

Browse files
wlgswlgs
committed
small changes + zad8 done
1 parent cb1defa commit c1a9d2c

File tree

3 files changed

+205
-1
lines changed

3 files changed

+205
-1
lines changed

‎lab2/zad4/style.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ body{
99
flex-direction: row;
1010
width:100%;
1111
flex-wrap: wrap;
12-
border: 2px solid red;
1312
justify-content: space-around;
1413
}
1514

‎lab2/zadanie8/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div class="page-container">
12+
<header class="title">
13+
EKSCYTUJACE MIEJSCA
14+
</header>
15+
16+
<main class="main-container">
17+
<div class="main-text-container">
18+
<article class="main-article">
19+
<p class="main-article-title">TEKST 1</p>
20+
<p class="main-article-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ratione maxime, a nesciunt, tenetur impedit ipsam sit hic iusto velit fuga harum deleniti qui odio quasi cum quia error commodi!</p>
21+
</article>
22+
<article class="main-article">
23+
<p class="main-article-title">TEKST 2</p>
24+
<p class="main-article-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, sint accusamus minima consequuntur obcaecati quia. Quae vel, incidunt illum voluptas soluta amet quaerat consectetur ea corrupti, facilis laboriosam quam et!</p>
25+
</article>
26+
27+
<div class="more-info-container">
28+
<a href="#" class=more-info>
29+
Więcej →
30+
</a>
31+
<div class="bar"></div>
32+
</div>
33+
34+
</div>
35+
36+
37+
38+
<div class="main-photos-container">
39+
<picture>
40+
<source media="(max-width: 1410px)" srcset="nat-1.jpg">
41+
<img src="nat-1-large.jpg" alt="" id="img1">
42+
</picture>
43+
<picture>
44+
<source media="(max-width: 1410px)" srcset="nat-2.jpg">
45+
<img src="nat-2-large.jpg" alt="" id="img2">
46+
</picture>
47+
<picture>
48+
<source media="(max-width: 1410px)" srcset="nat-3.jpg">
49+
<img src="nat-3-large.jpg" alt="" id="img3">
50+
</picture>
51+
52+
53+
</div>
54+
</main>
55+
</div>
56+
57+
</body>
58+
</html>

‎lab2/zadanie8/style.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
2+
.page-container{
3+
margin-left:2%;
4+
margin-right:2%;
5+
font-family: 'Montserrat', sans-serif;
6+
background-color: #f7f7f7
7+
}
8+
header.title{
9+
display: flex;
10+
font-size: 48px;
11+
width:auto;
12+
color:#5fca74;
13+
justify-content: center;
14+
font-weight: bold;
15+
padding-top:5%;
16+
padding-bottom:5%;
17+
}
18+
19+
main.main-container{
20+
display:flex;
21+
width:100%;
22+
flex-direction: row;
23+
height:auto;
24+
25+
}
26+
27+
28+
main .main-text-container{
29+
display:flex;
30+
flex-direction: column;
31+
flex-basis:50%;
32+
margin-left:10px;
33+
}
34+
35+
36+
article.main-article .main-article-content{
37+
line-height: 1.6;
38+
}
39+
40+
article .main-article-title{
41+
font-weight: bold;
42+
font-size: 18px;
43+
margin-bottom:30px;
44+
}
45+
46+
a.more-info{
47+
font-weight: bold;
48+
color: lightgreen;
49+
}
50+
51+
.more-info-container{
52+
margin-top:20px;
53+
}
54+
55+
.bar{
56+
width:75px;
57+
height:3px;
58+
background-color: lightgreen;
59+
margin-top:5px;
60+
margin-bottom:10px;
61+
62+
}
63+
64+
main .main-photos-container{
65+
position:relative;
66+
display:flex;
67+
flex-basis:60%;
68+
margin-left: 6%;
69+
}
70+
71+
72+
73+
.main-photos-container img{
74+
height:250px;
75+
-webkit-box-shadow: 0px 0px 21px 3px rgba(66, 68, 90, 1);
76+
-moz-box-shadow: 0px 0px 21px 3px rgba(66, 68, 90, 1);
77+
box-shadow: 0px 0px 21px 3px rgba(66, 68, 90, 1);
78+
79+
}
80+
81+
img#img1{
82+
position:absolute;
83+
z-index:0;
84+
transition:0.3s ease-in-out transform;
85+
}
86+
87+
img#img2{
88+
position:absolute;
89+
z-index:0;
90+
top:50px;
91+
left:300px;
92+
transition:0.3s ease-in-out transform;
93+
}
94+
95+
img#img3{
96+
position:absolute;
97+
z-index:0;
98+
top:120px;
99+
left:180px;
100+
transition:0.3s ease-in-out transform;
101+
}
102+
103+
img#img1:hover, img#img2:hover, img#img3:hover{
104+
z-index:1;
105+
106+
transform: scale(1.1);
107+
transition:0.3s ease-in-out transform;
108+
109+
outline:#5fca74 15px solid;
110+
outline-style: round;
111+
outline-offset: 15px;
112+
113+
}
114+
115+
116+
a{
117+
text-decoration: none;
118+
color: inherit;
119+
}
120+
121+
@media screen and (max-width:1410px){
122+
main.main-container{
123+
flex-direction: column;
124+
height:700px;
125+
align-items: center;
126+
127+
}
128+
main .main-photos-container{
129+
width:0;
130+
padding-right: 480px;
131+
}
132+
.main-photos-container img{
133+
height:150px;
134+
}
135+
136+
img#img2{
137+
z-index:0;
138+
top:0;
139+
left:250px;
140+
}
141+
142+
img#img3{
143+
top:50px;
144+
left:120px;
145+
}
146+
147+
}

0 commit comments

Comments
 (0)