Skip to content

Commit 7d16a0d

Browse files
nik-mLbnik-mLb
committed
aa
1 parent 765d276 commit 7d16a0d

File tree

6 files changed

+266
-49
lines changed

6 files changed

+266
-49
lines changed

‎projects/card/index.html

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,36 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
87
<link rel="stylesheet" href="style.css">
9-
<!-- Подключите шрифт -->
8+
<title>Document</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1012
</head>
1113
<body>
1214
<div class="container">
13-
<!-- Здесь должен быть ваш код -->
15+
<div class="card">
16+
<div class="card__image">
17+
<img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80">
18+
</div>
19+
<div class="card__content">
20+
<div class="card__title">
21+
<p>Pragser Wildsee, Italy</p>
22+
</div>
23+
<div class="card__text">
24+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
25+
</div>
26+
<a href="#"><button class="card__btn">BOOKING</button></a>
27+
</div>
28+
</div>
1429
</div>
1530
</body>
1631
</html>
1732

1833

1934

2035

36+
37+
38+
39+

‎projects/card/style.css

Lines changed: 58 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,68 @@
11
*{
22
margin: 0;
33
padding: 0;
4-
}
5-
body{
6-
font-family: 'Open Sans', sans-serif;
7-
}
8-
9-
.container{
4+
}
5+
body{
6+
font-family: "Exo 2", sans-serif;
7+
}
8+
9+
.container{
1010
display: flex;
1111
justify-content: center;
1212
align-items: center;
1313
width: 100%;
1414
height: 100vh;
1515
padding: 20px;
1616
background-color: #15638F;
17-
18-
}
19-
20-
21-
22-
17+
}
18+
19+
.card{
20+
border-radius: 10px;
21+
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.3);
22+
background: rgb(255, 255, 255);
23+
width: 200px;
24+
height: 322px;
25+
}
26+
27+
.card__image{
28+
background: url(pietro-de-grandi-T7K4aEPoGGk-unsplash);
29+
width: 200px;
30+
height: 142.36px;
31+
}
32+
33+
img{
34+
width: 100%;
35+
height: 100%;
36+
border-radius: 10px 10px 0px 0px;
37+
}
38+
39+
.card__content{
40+
margin-left: 16px;
41+
}
42+
43+
.card__title{
44+
font-size: 12px;
45+
font-weight: 700;
46+
color: #000000;
47+
margin-top: 15.59px;
48+
margin-bottom: 15.59px;
49+
}
50+
51+
.card__text{
52+
font-size: 10px;
53+
margin-right: 19px;
54+
margin-bottom: 15.11px;
55+
font-weight: 300;
56+
}
57+
58+
.card__btn{
59+
margin: 15.11px 86px 17px 0px;
60+
padding: 6px 23.96px 7.97px 24px;
61+
border: solid;
62+
border-radius: 50px;
63+
background: #2797B2;
64+
cursor: pointer;
65+
color:#FFFFFF;
66+
}
67+
68+

‎projects/footer/index.html

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,29 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
87
<link rel="stylesheet" href="style.css">
9-
<!-- Подключите шрифт -->
8+
<title>Document</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1012
</head>
1113
<body>
1214
<div class="wrapper">
1315
<main class="main"></main>
1416
<footer class="footer">
15-
<!-- Здесь должен быть ваш код -->
16-
</footer>
17+
<div class="footer__top">
18+
<div class="footer__left">
19+
<a href="#" class="logo">COMPANY</a>
20+
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
21+
</div>
22+
<div class="footer__right">
23+
<div class="contact">Как с нами связаться</div>
24+
<a href="#" class="phone">+7 (495) 000-00-00</a>
25+
<div class="address">Москва, ул. Московская, д. 2, стр. 1 </div>
26+
</div>
27+
</div>
28+
<div class="footer__bottom">© 2021 COMPANY All Rights Reserved.</div>
29+
</footer>
1730
</div>
1831
</body>
1932
</html>

‎projects/footer/style.css

Lines changed: 89 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,95 @@
11
*{
22
margin: 0;
33
padding: 0;
4-
}
5-
html,body{
4+
}
5+
6+
html,body{
67
font-family: 'Exo 2', sans-serif;
78
height: 100%;
8-
}
9-
.wrapper {
10-
display: flex;
11-
flex-direction: column;
12-
min-height: 100%;
13-
}
14-
.main {
15-
flex: 1 0 auto;
16-
}
17-
.footer{
9+
}
10+
11+
.wrapper {
12+
display: flex;
13+
flex-direction: column;
14+
min-height: 100%;
15+
}
16+
17+
.main {
18+
flex: 1 0 auto;
19+
}
20+
21+
.footer{
1822
flex: 0 0 auto;
19-
}
20-
21-
23+
background: rgb(5, 168, 141);
24+
width: auto;
25+
height: 260px;
26+
}
27+
28+
.footer__top{
29+
border-bottom: solid;
30+
border-bottom-color: #FFFFFF;
31+
border-width: 1px;
32+
display: flex;
33+
justify-content: space-between;
34+
margin-left: 40px;
35+
margin-right: 40px;
36+
margin-top: 40px;
37+
}
38+
39+
.logo{
40+
color:#F1E67D;
41+
text-decoration: none;
42+
font-size: 28px;
43+
font-weight: 700;
44+
display: flex;
45+
align-items: center;
46+
margin-bottom: 22px;
47+
text-transform: capitalize;
48+
}
49+
50+
.text{
51+
width: 437px;
52+
height: 46px;
53+
color: #FFFFFF;
54+
font-size: 12px;
55+
font-weight: 300;
56+
}
57+
58+
.footer__right{
59+
text-align: right;
60+
}
61+
62+
63+
.contact{
64+
font-size: 14px;
65+
font-weight: 700;
66+
color:#FFFFFF;
67+
text-transform: uppercase;
68+
margin-bottom: 20px;
69+
}
70+
71+
.phone{
72+
font-size: 24px;
73+
font-weight: 700;
74+
color:#F1E67D;
75+
text-decoration: none;
76+
text-transform: uppercase;
77+
}
78+
79+
.address{
80+
font-size: 12px;
81+
font-weight: 300;
82+
color: #FFFFFF;
83+
margin-top: 20px;
84+
margin-bottom: 16px;
85+
}
86+
87+
.footer__bottom{
88+
margin-left: 40px;
89+
margin-bottom: 36px;
90+
font-size: 12px;
91+
font-weight: 300;
92+
margin-top: 36px;
93+
color: #FFFFFF;
94+
95+
}

‎projects/header/index.html

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,28 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Document</title>
8+
89
<link rel="stylesheet" href="style.css">
9-
<!-- Подключите шрифт -->
10+
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1014
</head>
1115
<body>
1216
<header class="header">
1317
<nav class="menu">
14-
<!-- Здесь должен быть ваш код -->
18+
<ul class="menu__ul">
19+
<li class="menu__li"><a href="#" class="menu__link" style="color: #05A88D">Products</a></li>
20+
<li class="menu__li"><a href="#" class="menu__link">About</a></li>
21+
<li class="menu__li"><a href="#" class="menu__link">Blog</a></li>
22+
<li class="menu__li"><a href="#" class="menu__link">Contacts</a></li>
23+
</ul>
24+
<a href="index.html" class="menu__logo">MYCOMPANY</a>
25+
<div class="buttons">
26+
<a href="#" class="menu__signup">Sign Up</a>
27+
<a href="#" class="menu__login">Login</a>
28+
</div>
1529
</nav>
1630
</header>
1731
</body>
18-
</html>
19-
20-
21-
32+
</html>

‎projects/header/style.css

Lines changed: 63 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,67 @@
11
*{
22
margin: 0;
33
padding: 0;
4-
}
5-
6-
body{
7-
8-
}
9-
10-
.header{
11-
width: 100%;
4+
}
5+
6+
7+
body{
8+
font-family: "Montserrat", sans-serif;
9+
font-optical-sizing: auto;
10+
background: #05A88D;
11+
}
12+
13+
.header{
1214
box-sizing: border-box;
13-
}
15+
width: 1440px;
16+
height: 100px;
17+
background: #FFFFFF;
18+
}
19+
20+
.menu{
21+
height: 100px;
22+
display: flex;
23+
align-items: center;
24+
justify-content:space-between;
25+
font-size: 16px;
26+
font-weight: 300;
27+
}
28+
29+
.menu__ul{
30+
list-style: none;
31+
display: flex;
32+
}
33+
34+
.menu__li{
35+
padding: 20px;
36+
color:#000000;
37+
}
38+
39+
.menu__link{
40+
text-decoration: none;
41+
color: #000000;
42+
}
43+
44+
.menu__logo{
45+
text-decoration: none;
46+
color: #05A88D;
47+
font-size: 24px;
48+
font-weight: 700;
49+
}
50+
51+
.menu__signup{
52+
text-decoration: none;
53+
color: #05A88D;
54+
box-sizing: border-box;
55+
border: 1px solid rgb(5, 168, 141);
56+
border-radius: 3px;
57+
padding: 12.5px;
58+
margin: 10px;
59+
}
60+
61+
.menu__login{
62+
text-decoration: none;
63+
color: #05A88D;
64+
margin: 69.5px;
65+
}
66+
67+

0 commit comments

Comments
 (0)