Skip to content

Commit 65fd782

Browse files
AlexDimov-04AlexDimov-04
committed
added files with header and section sections
1 parent 330755d commit 65fd782

File tree

4 files changed

+293
-0
lines changed

4 files changed

+293
-0
lines changed

‎Single page application - Aria web-page/index.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Aria - Singer</title>
9+
<link rel="stylesheet" href="./reset.css">
10+
<link rel="stylesheet" href="./style.css">
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link
14+
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
15+
rel="stylesheet">
16+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
17+
</head>
18+
19+
<body>
20+
<!-- header -->
21+
22+
<header id="head">
23+
<div class="logo-container">
24+
<img src="./images/dancing_icon.svg" alt="dancing icon" class="logo">
25+
<span class="artist-name">ARIA</span>
26+
</div>
27+
28+
<nav class="navbar">
29+
<a href="#home">home</a>
30+
<a href="#about">about</a>
31+
<a href="#artist">artist</a>
32+
<a href="#shop">shop</a>
33+
<a href="#gallery">gallery</a>
34+
<a href="#blog">blogs</a>
35+
<a href="#contact">contact</a>
36+
</nav>
37+
38+
<div id="menu" class="fas fa-bars"></div>
39+
</header>
40+
41+
<!-- hero section -->
42+
43+
<section id="hero" class="home">
44+
<div class="content">
45+
<h3>Мария Цветкова - <br> Ариа</h3>
46+
<a href="#" class="btn">show more</a>
47+
</div>
48+
</section>
49+
50+
51+
52+
<script src="./script.js"></script>
53+
</body>
54+
55+
</html>

‎Single page application - Aria web-page/reset.css

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/* Box sizing rules */
2+
*,
3+
*::before,
4+
*::after {
5+
box-sizing: border-box;
6+
}
7+
8+
/* Remove default margin */
9+
body,
10+
h1,
11+
h2,
12+
h3,
13+
h4,
14+
p,
15+
figure,
16+
blockquote,
17+
dl,
18+
dd {
19+
margin: 0;
20+
}
21+
22+
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
23+
ul[role='list'],
24+
ol[role='list'] {
25+
list-style: none;
26+
padding: 0px;
27+
margin: 0px;
28+
}
29+
30+
/* Set core root defaults */
31+
html:focus-within {
32+
scroll-behavior: smooth;
33+
}
34+
35+
/* Set core body defaults */
36+
body {
37+
min-height: 100vh;
38+
text-rendering: optimizeSpeed;
39+
line-height: 1.5;
40+
}
41+
42+
/* A elements that don't have a class get default styles */
43+
a:not([class]) {
44+
text-decoration-skip-ink: auto;
45+
}
46+
47+
/* Make images easier to work with */
48+
img,
49+
picture {
50+
max-width: 100%;
51+
display: block;
52+
}
53+
54+
/* Inherit fonts for inputs and buttons */
55+
input,
56+
button,
57+
textarea,
58+
select {
59+
font: inherit;
60+
}
61+
62+
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
63+
@media (prefers-reduced-motion: reduce) {
64+
html:focus-within {
65+
scroll-behavior: auto;
66+
}
67+
68+
*,
69+
*::before,
70+
*::after {
71+
animation-duration: 0.01ms !important;
72+
animation-iteration-count: 1 !important;
73+
transition-duration: 0.01ms !important;
74+
scroll-behavior: auto !important;
75+
}
76+
}

‎Single page application - Aria web-page/script.js

Whitespace-only changes.

‎Single page application - Aria web-page/style.css

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
/* css variables */
2+
3+
:root {
4+
--main-color: #022988;
5+
--primary-color: #ef5068;
6+
--black: #13131a;
7+
--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
8+
}
9+
10+
/* config html page and properties */
11+
12+
* {
13+
font-family: Lato, sans-serif;
14+
outline: none;
15+
border: none;
16+
text-transform: capitalize;
17+
text-decoration: none;
18+
transition: all 0.2s linear;
19+
}
20+
21+
html {
22+
font-size: 62.5%;
23+
overflow: hidden;
24+
scroll-behavior: smooth;
25+
scroll-padding-top: 6rem;
26+
}
27+
28+
html::-webkit-scrollbar {
29+
width: 0.6rem;
30+
}
31+
32+
html::-webkit-scrollbar-track {
33+
background: #fff;
34+
}
35+
36+
html::-webkit-scrollbar-thumb {
37+
background: var(--primary-color);
38+
}
39+
40+
section {
41+
padding: 3rem 7%;
42+
}
43+
44+
.btn {
45+
margin-top: 1rem;
46+
background: var(--primary-color);
47+
color: #fff;
48+
display: inline-block;
49+
border-radius: 5rem;
50+
box-shadow: var(--box-shadow);
51+
padding: 1rem 4rem;
52+
font-size: 1.7rem;
53+
position: relative;
54+
overflow: hidden;
55+
}
56+
57+
.btn::before,
58+
.btn::after {
59+
content: '';
60+
position: absolute;
61+
top: 0;
62+
height: 100%;
63+
width: 0%;
64+
background: #bd394c;
65+
z-index: -1;
66+
transition: .3 linear;
67+
}
68+
69+
.btn:hover::before,
70+
.btn:hover::after {
71+
width: 100%;
72+
}
73+
74+
.btn::before {
75+
left: 0;
76+
}
77+
78+
.btn::after {
79+
right: 0;
80+
}
81+
82+
/* header */
83+
84+
#head {
85+
position: fixed;
86+
top: 0;
87+
left: 0;
88+
right: 0;
89+
z-index: 10;
90+
display: flex;
91+
justify-content: space-between;
92+
align-items: center;
93+
padding: 1.5rem 9%;
94+
background: #f0f4ff;
95+
box-shadow: var(--box-shadow);
96+
}
97+
98+
#head .logo-container {
99+
display: flex;
100+
align-items: center;
101+
}
102+
103+
#head .logo-container .artist-name {
104+
font-size: 2rem;
105+
font-weight: bolder;
106+
}
107+
108+
#head .logo {
109+
width: 5rem;
110+
}
111+
112+
#head .navbar a {
113+
font-size: 2rem;
114+
color: var(--black);
115+
margin-left: 2rem;
116+
}
117+
118+
#head .navbar a:hover {
119+
color: var(--primary-color);
120+
}
121+
122+
#menu {
123+
font-size: 2.5rem;
124+
cursor: pointer;
125+
color: var(--black);
126+
}
127+
128+
#hero {
129+
display: flex;
130+
align-items: center;
131+
background: url(./images/300.jpg) no-repeat;
132+
min-height: 110vh;
133+
background-size: cover;
134+
background-position: center;
135+
}
136+
137+
#hero::before {
138+
content: "";
139+
display: block;
140+
position: absolute;
141+
top: 0;
142+
left: 0;
143+
width: 100%;
144+
height: 115vh;
145+
background-color: black;
146+
opacity: 0.5;
147+
}
148+
149+
#hero .content {
150+
max-width: 60rem;
151+
z-index: 1;
152+
}
153+
154+
#hero .content h3 {
155+
font-size: 8rem;
156+
color: #fff;
157+
line-height: 1.2;
158+
font-weight: 900;
159+
text-transform: uppercase;
160+
letter-spacing: .5rem;
161+
padding-bottom: 2rem;
162+
}

0 commit comments

Comments
 (0)