Skip to content

Commit d926b72

Browse files
solygambassolygambas
committed
add landing page section
1 parent 162d866 commit d926b72

18 files changed

+354
-2
lines changed

‎88-promo code/style.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ body {
88
background: #232526;
99
background: linear-gradient(to top, #414345, #232526);
1010
font-family: "Itim", cursive;
11-
height: 100vh;
12-
overflow: hidden;
11+
min-height: 100vh;
1312
margin: 0;
1413
display: flex;
1514
justify-content: center;

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

172 KB
Loading

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

207 KB
Loading

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

49.1 KB
Loading

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

45.4 KB
Loading

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

42.5 KB
Loading

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

10.6 KB
Loading

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

631 Bytes
Loading

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

482 Bytes
Loading

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

6.98 KB
Loading

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

392 Bytes
Loading

‎89-one color UI/index.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!-- Based on Build One Color UI Responsive Website by Simo Edwin - Dev Ed (2020)
2+
see: https://www.youtube.com/watch?v=2IjyqauKumE -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<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+
/> -->
15+
<link rel="stylesheet" href="./styles/style.css" />
16+
<title>One Color UI</title>
17+
</head>
18+
<body>
19+
<main>
20+
<div class="nav-container">
21+
<nav>
22+
<h1 id="logo">Leica</h1>
23+
<ul>
24+
<li><a href="#features">Features</a></li>
25+
<li><a class="order" href="#soon">Order</a></li>
26+
</ul>
27+
</nav>
28+
</div>
29+
<section class="home">
30+
<div class="showcase">
31+
<h2>Leica M6</h2>
32+
<img src="./img/camera 1.png" alt="" />
33+
<div class="info">
34+
<h3>Small but powerful.</h3>
35+
<p>
36+
The new Leica M6 offers 4k at 60fps, Raw Video & Full Frame
37+
Sensor.
38+
</p>
39+
</div>
40+
</div>
41+
</section>
42+
</main>
43+
<script src="script.js"></script>
44+
</body>
45+
</html>

‎89-one color UI/script.js

Whitespace-only changes.

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

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
.home {
2+
background: radial-gradient(#525252, #131313);
3+
}
4+
5+
.nav-container {
6+
background: rgb(7, 7, 7);
7+
}
8+
9+
nav {
10+
width: 80%;
11+
margin: auto;
12+
min-height: 10vh;
13+
padding: 3rem 0rem;
14+
display: flex;
15+
justify-content: space-between;
16+
align-items: center;
17+
18+
ul {
19+
display: flex;
20+
justify-content: space-between;
21+
list-style: none;
22+
flex: 1;
23+
}
24+
25+
#logo {
26+
flex: 3;
27+
position: relative;
28+
&::after {
29+
content: "";
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
width: 6rem;
34+
height: 6rem;
35+
background: var(--primary-color);
36+
border-radius: 50%;
37+
transform: translate(-10%, -20%);
38+
mix-blend-mode: screen;
39+
}
40+
}
41+
.order {
42+
background: var(--primary-color);
43+
padding: 1rem 2rem;
44+
border-radius: 2rem;
45+
}
46+
}
47+
48+
.showcase {
49+
display: grid;
50+
min-height: 90vh;
51+
grid-template-columns: 10% repeat(3, minmax(5rem, 1fr)) 10%;
52+
grid-template-rows: 1fr 2fr 1fr;
53+
54+
h2 {
55+
grid-column: 2/3;
56+
align-self: flex-end;
57+
}
58+
59+
img {
60+
grid-row: 2/3;
61+
grid-column: 3/4;
62+
height: 110%;
63+
object-fit: cover;
64+
align-self: center;
65+
justify-self: center;
66+
}
67+
68+
.info {
69+
grid-row: 3/4;
70+
grid-column: 4/5;
71+
72+
h3 {
73+
padding-bottom: 3rem;
74+
}
75+
}
76+
}

‎89-one color UI/styles/style.css

+166
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎89-one color UI/styles/style.css.map

+10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:wght@400;600&display=swap");
2+
3+
:root {
4+
--primary-color: #f54538;
5+
}
6+
7+
* {
8+
box-sizing: border-box;
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
html {
14+
font-size: 62.5%;
15+
}
16+
17+
body {
18+
color: white;
19+
font-family: "Montserrat", sans-serif;
20+
}
21+
22+
h1 {
23+
font-size: 2.5rem;
24+
font-family: "Lobster", cursive;
25+
font-weight: lighter;
26+
}
27+
28+
h2 {
29+
font-size: 8rem;
30+
font-family: "Lobster", cursive;
31+
font-weight: lighter;
32+
}
33+
34+
h3 {
35+
font-size: 3.5rem;
36+
}
37+
38+
h4 {
39+
font-size: 3rem;
40+
}
41+
42+
p {
43+
font-size: 2.5rem;
44+
}
45+
46+
li {
47+
font-size: 2rem;
48+
}
49+
50+
a {
51+
color: white;
52+
text-decoration: none;
53+
}
54+
55+
@import "home";

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@
9494
| 86 | [Coming Soon Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/86-coming%20soon%20page) | [Live Demo](https://codepen.io/solygambas/full/bGgwNaM) |
9595
| 87 | [Sliding Sign In & Sign Up Form](https://github.com/solygambas/html-css-fifty-projects/tree/master/87-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm) |
9696
| 88 | [Promo Code](https://github.com/solygambas/html-css-fifty-projects/tree/master/88-promo%20code) | [Live Demo](https://codepen.io/solygambas/full/wvggBXe) |
97+
| 89 | [One Color UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/89-one%20color%20UI) | [Live Demo](#) |
9798

9899
This repository is mostly based on 2 courses by Brad Traversy (2020):
99100

0 commit comments

Comments
 (0)