Skip to content

Commit 8dad012

Browse files
hattifnatt4rhattifnatt4r
committed
Add example
1 parent bc9ae86 commit 8dad012

8 files changed

Lines changed: 200 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
# welcome-pages
2-
Sandbox repo to help learning Git / HTML / CSS
1+
# welcome--js
2+
Sandbox repo to help start with Git / HTML / CSS.
33

4-
View online: https://cambridge-devclass.github.io/welcome-pages__js
4+
Add a card with your name and a some message, in src/index.html.
5+
You can also add a page in src/pages - see the example.
6+
7+
View online: https://cambridge-devclass.github.io/welcome--js

‎src/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>Welcome to DevClass</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="script.js" defer></script>
9+
10+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
11+
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
15+
</head>
16+
<body>
17+
<div class="content">
18+
<div class="header">
19+
<div class="header__text">
20+
Say hi!
21+
</div>
22+
<div class="header__link" onclick="openGithub()">
23+
<span class="header__name">Cambridge_DevClass</span>
24+
<i class="fa-brands fa-github header__icon"></i>
25+
</div>
26+
</div>
27+
28+
<div class="cards">
29+
<div class="card" onclick="openPage('pages/001_maria.html')">
30+
<img class="card__img" src="https://i.imgur.com/E9spTvP.jpeg" alt="DST image" />
31+
<div class="card__text card__text--white">
32+
<div class="card__message">Hi there</div>
33+
<div class="card__name">Maria</div>
34+
</div>
35+
</div>
36+
37+
<div class="card" onclick="openPage('pages/002_example.html')">
38+
<div class="card__text">
39+
<div class="card__message">Card example</div>
40+
<div class="card__name">Your name</div>
41+
</div>
42+
</div>
43+
44+
<!--
45+
Add your card below, similar to other cards.
46+
It can be a picture or just text.
47+
The card can open a page.
48+
-->
49+
</div>
50+
</div>
51+
</body>
52+
</html>

‎src/pages/001_maria.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
padding: 2rem 3rem;
3+
}

‎src/pages/001_maria.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>CambridgeDevClass Maria</title>
6+
<link rel="stylesheet" href="../style.css">
7+
<link rel="stylesheet" href="001_maria.css">
8+
</head>
9+
<body>
10+
<h1>Will add something here</h1>
11+
12+
<p>When I have time...</p>
13+
14+
<a href="../index.html">Back</a>
15+
</body>
16+
</html>

‎src/pages/002_example.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
padding: 2rem 3rem;
3+
}

‎src/pages/002_example.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>CambridgeDevClass Example</title>
6+
<link rel="stylesheet" href="../style.css">
7+
<link rel="stylesheet" href="002_example.css">
8+
</head>
9+
<body>
10+
<h1>Example page - add something here</h1>
11+
12+
13+
<a href="../index.html">Back</a>
14+
</body>
15+
</html>

‎src/script.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
function openGithub() {
2+
window.open('https://github.com/cambridge-devclass', '_blank').focus();
3+
}
4+
5+
function openPage(page) {
6+
window.location.href = page;
7+
}

‎src/style.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: Arial, sans-serif;
7+
font-family: "Ubuntu", sans-serif;
8+
margin: 0;
9+
--header-height: 2rem;
10+
}
11+
12+
.content {
13+
max-width: 64rem;
14+
margin: auto;
15+
padding: 3rem 2rem;
16+
}
17+
18+
.header {
19+
margin-bottom: 1.5rem;
20+
}
21+
.header__text {
22+
font-size: var(--header-height);
23+
line-height: var(--header-height);
24+
font-weight: 600;
25+
}
26+
.header__link {
27+
position: fixed;
28+
right: 2.5rem;
29+
top: 1rem;
30+
height: var(--header-height);
31+
display:flex;
32+
align-items:center;
33+
justify-content:center;
34+
color: rgba(41, 102, 222, 1);
35+
cursor: pointer;
36+
}
37+
.header__name {
38+
font-size: 0.95rem;
39+
font-weight: 400;
40+
}
41+
.header__icon {
42+
margin-left: 0.5rem;
43+
font-size: 1.3rem;
44+
opacity: 0.9;
45+
}
46+
47+
/* pinterest-like layout */
48+
.cards {
49+
column-count: 4;
50+
column-gap: 1rem;
51+
}
52+
/* Set .content width to 18-33-48-63rem, based on screen width */
53+
@media (max-width: 33rem) {
54+
.cards { column-count: 1; }
55+
.content { max-width: 18rem; }
56+
}
57+
@media (min-width: 33rem) and (max-width: 48rem) {
58+
.cards { column-count: 2; }
59+
.content { max-width: 33rem; }
60+
}
61+
@media (min-width: 48rem) and (max-width: 63rem) {
62+
.cards { column-count: 3; }
63+
.content { max-width: 48rem; }
64+
}
65+
@media (min-width: 63rem) {
66+
.cards { column-count: 4; }
67+
.content { max-width: 64rem; }
68+
}
69+
70+
.card {
71+
width: 14rem;
72+
min-height: 9rem;
73+
margin-bottom: 1rem;
74+
background-color: rgba(0,0,0,0.05);
75+
border-radius: 1rem;
76+
position: relative;
77+
display: inline-block;
78+
}
79+
/* Using BEM for naming: https://www.geeksforgeeks.org/css/understanding-the-css-bem-convention */
80+
.card__img {
81+
width: 100%;
82+
height: 100%;
83+
min-height:100%;
84+
border-radius: 1rem;
85+
}
86+
.card__text {
87+
padding: 1.7rem 1.2rem;
88+
position: absolute;
89+
top: 0;
90+
}
91+
.card__text--white {
92+
color: white;
93+
}
94+
.card__message {
95+
font-size: 1.3rem;
96+
margin-bottom: 0.5rem;
97+
font-weight: 500;
98+
}

0 commit comments

Comments
 (0)