-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (137 loc) · 7.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="EN">
<head>
<title>Project</title>
<meta charset = "utf-8">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="slider/slick.css">
</head>
<body>
<div class="container">
<header>
<!-- logo -->
<div class="logo-flex-box">
<div>
<svg class="logo" width="68" height="59" viewBox="0 0 68 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68 19.6667L34.0557 0L0 19.6667V59L68 19.6667Z" fill="#005BBB"/>
<path d="M68 59V25.6334L38.9227 42.2083L68 59Z" fill="#005BBB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.6327 45.366L12.25 58.866L11.75 58L35.1327 44.5L35.6327 45.366Z" fill="#005BBB"/>
</svg>
</div>
<div>
<svg class="logo-adaptive" width="68" height="59" viewBox="0 0 68 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68 19.6667L34.0557 0L0 19.6667V59L68 19.6667Z" fill="white"/>
<path d="M68 59V25.6334L38.9227 42.2083L68 59Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.6327 45.366L12.25 58.866L11.75 58L35.1327 44.5L35.6327 45.366Z" fill="white"/>
</svg>
</div>
<!-- burger -->
<div class="menu-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- nav bar -->
<nav class="nav-bar">
<a href="#" class="nav-item">gallery</a>
<a href="#" class="nav-item">history</a>
<a href="#" class="nav-item">contact us</a>
</nav>
</header>
</div>
<!-- slider -->
<div class="gallery">
<div><img class="slider-img" src="img/image1.png" alt="image"></div>
<div><img class="slider-img" src="img/image3.png" alt="image"></div>
<div><img class="slider-img" src="img/image2.png" alt="image"></div>
<div><img class="slider-img" src="img/image2.png" alt="image"></div>
<div><img class="slider-img" src="img/image3.png" alt="image"></div>
<div><img class="slider-img" src="img/image1.png" alt="image"></div>
<div><img class="slider-img" src="img/image1.png" alt="image"></div>
</div>
<!-- slider end -->
<div class="container">
<div>
<!-- text block -->
<div class="text">
<p class="text-p">
We are an architectural firm with a long history and extensive experience. Our intention is to help
Ukrainians rebuild their homes and buildings even better than they were before the war.
</p>
<p class="text-p">
Please take a look at our history and contact us if you are intrested. We would be really glad to join the help to Ukraine as we can.
</p>
<p class="text-p">
Glory to Ukraine!
</p>
</div>
<!-- header -->
<div class="header-general-box">
<h2 class="header-general">HISTORY</h2>
</div>
<!-- flex-box -->
<div class="flex-box">
<div class="flex-box-item">
<p><span class="highlight-text">1890</span> Fusce rhoncus at sapien at sollicitudin. Quisque semper sollicitudin libero eget placerat. Aliquam quis laoreet tellus. In id
congue lacus. Nulla vestibulum turpis et nisi consequat, non sagittis purus interdum. Nunc eu dolor urna. Quisque fermentum risus quam,
at consectetur leo tincidunt id. Nulla facilisi.</p>
</div>
<div class="flex-box-item">
<p><span class="highlight-text">1920</span> Aliquam erat volutpat. Curabitur et accumsan odio, eget scelerisque risus. Suspendisse ultrices mattis accumsan.
In hac habitasse platea dictumst. In non nisl turpis. Sed sit amet purus odio. Donec aliquam leo a tortor tincidunt, vel molestie neque commodo.
Ut pellentesque ut ex pulvinar aliquam. Morbi porttitor, felis quis convallis tincidunt, augue felis euismod lectus, a placerat purus justo eget magna.
Mauris neque nisi, pharetra, vehicula non lorem.</p>
</div>
</div>
<!-- header -->
<div class="header-general-box">
<h2 class="header-general">CONTACT US</h2>
</div>
</div>
<!-- form -->
<div>
<form action="#" method="get" class="comment-area">
<textarea class="comment-field" name="comment" placeholder="type your message here" id="comment01"></textarea>
<input class="btn" type="submit" value="SEND">
</form>
</div>
</div>
<script src="js/script-menu.js"></script>
<script type="text/javascript" src="slider/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slider/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slider/slick.min.js"></script>
<script>
$(document).ready(function(){
$('.gallery').slick({
dots: true,
arrows: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 601 ,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
</body>
</html>