Skip to content

Commit 932a6bc

Browse files
solygambassolygambas
committed
add one color UI
1 parent d926b72 commit 932a6bc

20 files changed

+450
-17
lines changed

‎89-one color UI/img/camera 1.png

-172 KB
Binary file not shown.

‎89-one color UI/img/camera-soon-v2 1.png

-207 KB
Binary file not shown.

‎89-one color UI/img/card1 1.png

-49.1 KB
Binary file not shown.

‎89-one color UI/img/card2 1.png

-45.4 KB
Binary file not shown.

‎89-one color UI/img/card3 1.png

-42.5 KB
Binary file not shown.

‎89-one color UI/img/circle.png

-10.6 KB
Binary file not shown.

‎89-one color UI/img/instagram-logo.png

-631 Bytes
Binary file not shown.

‎89-one color UI/img/twitter-logo.png

-482 Bytes
Binary file not shown.

‎89-one color UI/img/wave.png

-6.98 KB
Binary file not shown.

‎89-one color UI/img/yt-logo.png

-392 Bytes
Binary file not shown.

‎89-one color UI/index.html

+49-8
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,6 @@
66
<head>
77
<meta charset="UTF-8" />
88
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9-
<!-- <link
10-
rel="stylesheet"
11-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12-
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13-
crossorigin="anonymous"
14-
/> -->
159
<link rel="stylesheet" href="./styles/style.css" />
1610
<title>One Color UI</title>
1711
</head>
@@ -29,7 +23,7 @@ <h1 id="logo">Leica</h1>
2923
<section class="home">
3024
<div class="showcase">
3125
<h2>Leica M6</h2>
32-
<img src="./img/camera 1.png" alt="" />
26+
<img src="https://i.ibb.co/BzZWGCb/camera-1.png" alt="" />
3327
<div class="info">
3428
<h3>Small but powerful.</h3>
3529
<p>
@@ -39,7 +33,54 @@ <h3>Small but powerful.</h3>
3933
</div>
4034
</div>
4135
</section>
36+
<div class="features-container" id="features">
37+
<section class="features">
38+
<h2>Features</h2>
39+
<div class="cards">
40+
<div class="card">
41+
<img src="https://i.ibb.co/ZT31nWx/card1-1.png" alt="" />
42+
<h4>4k 60fps</h4>
43+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
44+
</div>
45+
<div class="card">
46+
<img src="https://i.ibb.co/9ZB13MQ/card2-1.png" alt="" />
47+
<h4>Full Frame</h4>
48+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
49+
</div>
50+
<div class="card">
51+
<img src="https://i.ibb.co/M97L2XC/card3-1.png" alt="" />
52+
<h4>4k 60fps</h4>
53+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
54+
</div>
55+
</div>
56+
</section>
57+
<img class="wave" src="https://i.ibb.co/wzczfTS/wave.png" alt="" />
58+
</div>
59+
<div class="soon" id="soon">
60+
<h2>Coming Soon</h2>
61+
<img src="https://i.ibb.co/10w7ywb/camera-soon-v2-1.png" alt="" />
62+
<img class="circle" src="https://i.ibb.co/VD1j32P/circle.png" alt="" />
63+
</div>
64+
<footer>
65+
<h1>© 1984 Leica. All Rights Reserved.</h1>
66+
<ul>
67+
<li>
68+
<a href="#"
69+
><img src="https://i.ibb.co/zxtSCkx/instagram-logo.png" alt=""
70+
/></a>
71+
</li>
72+
<li>
73+
<a href="#"
74+
><img src="https://i.ibb.co/Mhhv2xK/yt-logo.png" alt=""
75+
/></a>
76+
</li>
77+
<li>
78+
<a href="#"
79+
><img src="https://i.ibb.co/pvtcT3t/twitter-logo.png" alt=""
80+
/></a>
81+
</li>
82+
</ul>
83+
</footer>
4284
</main>
43-
<script src="script.js"></script>
4485
</body>
4586
</html>

‎89-one color UI/script.js

Whitespace-only changes.

‎89-one color UI/styles/_features.scss

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.features-container {
2+
background: #323232;
3+
position: relative;
4+
z-index: 0;
5+
overflow: hidden;
6+
7+
.wave {
8+
position: absolute;
9+
left: 0;
10+
bottom: -25%;
11+
width: 100%;
12+
z-index: -1;
13+
}
14+
}
15+
16+
.features {
17+
min-height: 90vh;
18+
width: 80%;
19+
margin: auto;
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: space-around;
23+
24+
.cards {
25+
display: flex;
26+
justify-content: space-between;
27+
color: var(--black);
28+
29+
.card {
30+
background: white;
31+
margin: 0rem 5rem;
32+
display: flex;
33+
flex-direction: column;
34+
text-align: center;
35+
border-radius: 0.625rem;
36+
overflow: hidden;
37+
38+
h4 {
39+
margin: 2rem 0rem 1rem;
40+
}
41+
42+
p {
43+
padding: 2rem;
44+
color: #686868;
45+
}
46+
47+
img {
48+
object-fit: cover;
49+
}
50+
}
51+
}
52+
}

‎89-one color UI/styles/_footer.scss

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
footer {
2+
min-height: 10vh;
3+
background: var(--black);
4+
padding-left: 10%;
5+
padding-right: 10%;
6+
display: flex;
7+
align-items: center;
8+
justify-content: space-between;
9+
10+
ul {
11+
display: flex;
12+
flex: 1;
13+
list-style: none;
14+
justify-content: space-between;
15+
}
16+
17+
h1 {
18+
flex: 3;
19+
}
20+
}

‎89-one color UI/styles/_home.scss

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
.home {
2-
background: radial-gradient(#525252, #131313);
2+
background: var(--gradient);
33
}
44

55
.nav-container {
6-
background: rgb(7, 7, 7);
6+
background: var(--black);
7+
position: sticky;
8+
top: 0;
9+
z-index: 2;
710
}
811

912
nav {
@@ -41,7 +44,7 @@ nav {
4144
.order {
4245
background: var(--primary-color);
4346
padding: 1rem 2rem;
44-
border-radius: 2rem;
47+
border-radius: 0.625rem;
4548
}
4649
}
4750

@@ -72,5 +75,9 @@ nav {
7275
h3 {
7376
padding-bottom: 3rem;
7477
}
78+
79+
p {
80+
color: #c4c4c4;
81+
}
7582
}
7683
}

‎89-one color UI/styles/_soon.scss

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.soon {
2+
background: var(--gradient);
3+
min-height: 80vh;
4+
position: relative;
5+
z-index: 0;
6+
7+
img,
8+
.circle,
9+
h2 {
10+
position: absolute;
11+
top: 50%;
12+
left: 50%;
13+
transform: translate(-50%, -50%);
14+
}
15+
16+
.circle {
17+
z-index: -1;
18+
}
19+
20+
h2 {
21+
top: 25%;
22+
}
23+
}

0 commit comments

Comments
 (0)