Skip to content

Commit b102c2b

Browse files
daviskamaudaviskamau
authored
ui
1 parent 78240c6 commit b102c2b

14 files changed

Lines changed: 665 additions & 0 deletions

File tree

‎ui_components/1_blog_cards/images/ballons.jpeg‎

85.2 KB
Loading

‎ui_components/1_blog_cards/images/city.jpeg‎

97.4 KB
Loading

‎ui_components/1_blog_cards/images/rover.jpeg‎

97.6 KB
Loading

‎ui_components/1_blog_cards/images/user-1.jpg‎

4.34 KB
Loading

‎ui_components/1_blog_cards/images/user-2.jpg‎

4.85 KB
Loading

‎ui_components/1_blog_cards/images/user-3.jpg‎

6.79 KB
Loading

‎ui_components/1_blog_cards/index.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Blog Posts</title>
7+
<link rel="stylesheet" href="./style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="card">
12+
<div class="card-header">
13+
<img src="./images/rover.jpeg" alt="rover" />
14+
</div>
15+
<div class="card-body">
16+
<span class="tag tag-teal">Technology</span>
17+
<h4>Why is the Tesla Cybertruck designed the way it is?</h4>
18+
<p>An exploration into the truck's polarising design.</p>
19+
<div class="user">
20+
<img src="./images/user-1.jpg" alt="user 1" />
21+
<div class="user-info">
22+
<h5>Carrie Brewer</h5>
23+
<small>2h ago</small>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
<div class="card">
29+
<div class="card-header">
30+
<img src="./images/ballons.jpeg" alt="ballons" />
31+
</div>
32+
<div class="card-body">
33+
<span class="tag tag-purple">Popular</span>
34+
<h4>How to Keep Going When You Don't Know What's Next</h4>
35+
<p>
36+
The future can be scary, but there are ways to deal with that fear.
37+
</p>
38+
<div class="user">
39+
<img src="./images/user-2.jpg" alt="user 2" />
40+
<div class="user-info">
41+
<h5>Jerome Walton</h5>
42+
<small>Yesterday</small>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="card">
48+
<div class="card-header">
49+
<img src="./images/city.jpeg" alt="city" />
50+
</div>
51+
<div class="card-body">
52+
<span class="tag tag-pink">Design</span>
53+
<h4>10 Rules of Dashboard Design</h4>
54+
<p>Dashboard Design Guidelines</p>
55+
<div class="user">
56+
<img src="./images/user-3.jpg" alt="user 3" />
57+
<div class="user-info">
58+
<h5>Lewis Daniels</h5>
59+
<small>23 Dec 2019</small>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</body>
66+
</html>

‎ui_components/1_blog_cards/style.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #f7f8fc;
9+
font-family: 'Open Sans', sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
min-height: 100vh;
14+
margin: 0;
15+
}
16+
17+
.container {
18+
/* CHANGE TO GRID */
19+
display: grid;
20+
grid-template-columns: repeat(3, 1fr);
21+
justify-items: center;
22+
grid-gap: 20px;
23+
width: 940px;
24+
max-width: 100%;
25+
margin: auto;
26+
}
27+
28+
.card {
29+
background-color: #fff;
30+
border-radius: 10px;
31+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
32+
overflow: hidden;
33+
width: 300px;
34+
}
35+
36+
.card-header img {
37+
object-fit: cover;
38+
height: 200px;
39+
width: 100%;
40+
}
41+
42+
.card-body {
43+
display: flex;
44+
flex-direction: column;
45+
align-items: start;
46+
padding: 20px;
47+
min-height: 250px;
48+
}
49+
50+
.card-body h4 {
51+
margin: 10px 0;
52+
}
53+
54+
.card-body p {
55+
font-size: 13px;
56+
margin: 0 0 40px;
57+
}
58+
59+
.tag {
60+
background-color: #fff;
61+
border-radius: 50px;
62+
font-size: 12px;
63+
color: #fff;
64+
margin: 0;
65+
padding: 2px 10px;
66+
text-transform: uppercase;
67+
}
68+
69+
.tag-teal {
70+
background-color: #92d4e4;
71+
}
72+
73+
.tag-purple {
74+
background-color: #3d1d94;
75+
}
76+
77+
.tag-pink {
78+
background-color: #c62bcb;
79+
}
80+
81+
.user {
82+
display: flex;
83+
margin-top: auto;
84+
}
85+
86+
.user img {
87+
border-radius: 50%;
88+
margin-right: 10px;
89+
height: 40px;
90+
width: 40px;
91+
}
92+
93+
.user-info h5 {
94+
margin: 0;
95+
}
96+
97+
.user-info small {
98+
color: #888785;
99+
}
100+
101+
@media (max-width: 940px) {
102+
.container {
103+
grid-template-columns: 1fr;
104+
}
105+
}

‎ui_components/2_login/images/google.png‎

4.46 KB
Loading

‎ui_components/2_login/index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="style.css">
8+
<title>Login</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<form>
13+
<button class="btn btn-ghost">
14+
<img src="./images/google.png" alt="">
15+
Log in with Google
16+
</button>
17+
18+
<small>or</small>
19+
20+
<div class="form-control">
21+
<label for="email">Email</label>
22+
<input type="email" id="email" placeholder="Enter your email">
23+
</div>
24+
25+
<div class="form-control">
26+
<label for="password">Password</label>
27+
<input type="password" id="password" placeholder="Password">
28+
</div>
29+
30+
<div class="checkbox-container">
31+
<input type="checkbox" id="remember">
32+
<label for="remember">Remember me</label>
33+
34+
<a href="#">Forgot Password</a>
35+
</div>
36+
37+
<button class="btn">Log In</button>
38+
39+
<small>Don't have an account? <a href="#">Sign up</a></small>
40+
</form>
41+
42+
<div class="features">
43+
<div class="feature">
44+
<i class="fas fa-code"></i>
45+
<h3>Development</h3>
46+
<p>A modern and clean design system for developing fast and powerful
47+
web interfaces.</p>
48+
</div>
49+
<div class="feature">
50+
<i class="fas fa-gift"></i>
51+
<h3>Features</h3>
52+
<p>A modern and clean design system for developing fast and powerful
53+
web interfaces.</p>
54+
</div>
55+
<div class="feature">
56+
<i class="fas fa-edit"></i>
57+
<h3>Updates</h3>
58+
<p>A modern and clean design system for developing fast and powerful
59+
web interfaces.</p>
60+
</div>
61+
</div>
62+
</div>
63+
</body>
64+
</html>

0 commit comments

Comments
 (0)