Skip to content

Commit 9393775

Browse files
NSM722NSM722
committed
First Commit
0 parents  commit 9393775

16 files changed

+642
-0
lines changed

‎README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Responsive Learning Journal
2+
3+
The goals in this project were to:
4+
5+
+ Build each page using only HTML & CSS
6+
+ Make all the pages responsive:
7+
8+
+ Inlusion of the Viewport Meta Tag
9+
+ Ensure Mobile First Design
10+
+ Use of Relative Units
11+
+ Apply Media Queries
12+
13+
14+

‎about.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
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+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
9+
<link rel="stylesheet" href="css/about.css">
10+
<title>About</title>
11+
</head>
12+
13+
<body>
14+
<header>
15+
<nav>
16+
<div class="logo">
17+
<img class="logo-img" src="images/image 17.png">
18+
<p class="logo-text">My learning journal</p>
19+
</div>
20+
<ul class="nav-list">
21+
<li class="nav-list-item"><a href="index.html">Home</a></li>
22+
<li class="nav-list-item"><a href="#">About Me</a></li>
23+
</ul>
24+
</nav>
25+
</header>
26+
<div class="container">
27+
<div class="article-main">
28+
<div>
29+
<p class="about-me-title">Hi there! My name is Natalie and welcome to my learning journal.</p>
30+
<p class="about-me-body">After several months of learning in the Frontend Developer Career Path, I've made the
31+
big
32+
jump over to the
33+
Bootcamp to get expert code reviews of my Solo Projects projects and meet like-minded peers.</p>
34+
</div>
35+
<div class="article-image">
36+
<img class="about-me-img" src="https://picsum.photos/id/237/182" alt="A black puppy">
37+
</div>
38+
</div>
39+
<div class="article-body">
40+
<p><strong>How I stay committed to learning</strong>
41+
<br>
42+
<br>
43+
I like to think of myself as a lifelong learner. I used to spend hours and hours learning, then try to create
44+
simple
45+
projects using what I learned or work new techniques into existing projects.
46+
</p>
47+
<p>While that was fun, I felt like it would be helpful to share what I was learning and most things about my
48+
journey
49+
with the world.
50+
</p>
51+
<p><strong>How I got started</strong>
52+
<br>
53+
<br>
54+
I started simple and gradually grew my learning journal site. I would take notes about what I was learning.
55+
After
56+
each learning session, I'd use my notes to not only reflect on what I learned but also write short summaries of
57+
what
58+
I learned using my own words.
59+
</p>
60+
61+
<p>That helped me grow what I was learning, and I realized that posting my learning summaries was also helping
62+
others
63+
learn and stay motivated.
64+
</p>
65+
</div>
66+
<div class="article-recent-posts">
67+
<p class="article-recent-posts-title">Recent Posts</p>
68+
<div class="row-1">
69+
<div class="article-card">
70+
<h2 class="article-card-title">Blog one</h2>
71+
<img class="article-card-img" src="images/blog-image-01.png" alt="">
72+
<p class="article-card-date">JULY 23, 2022</p>
73+
<p class="article-card-body">I'm excited to start a new learning journey as a Scrimba Bootcamp student! After
74+
several months of learning
75+
in
76+
the Frontend Developer Career Path.</p>
77+
</div>
78+
<div class="article-card">
79+
<h2 class="article-card-title">Blog two</h2>
80+
<img class="article-card-img" src="images/blog-image-02.png" alt="">
81+
<p class="article-card-date">JULY 23, 2022</p>
82+
<p class="article-card-body">I'm excited to start a new learning journey as a Scrimba Bootcamp student! After
83+
several months of learning
84+
in
85+
the Frontend Developer Career Path.</p>
86+
</div>
87+
<div class="article-card">
88+
<h2 class="article-card-title">Blog three</h2>
89+
<img class="article-card-img" src="images/blog-image-03.png" alt="">
90+
<p class="article-card-date">JULY 23, 2022</p>
91+
<p class="article-card-body">I'm excited to start a new learning journey as a Scrimba Bootcamp student! After
92+
several months of learning
93+
in
94+
the Frontend Developer Career Path.</p>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
<footer>
100+
<p class="footer-text">My Learning Journal</p>
101+
<p class="footer-copyright">Copyright &copy;2022</p>
102+
</footer>
103+
</body>
104+
105+
</html>

‎articles.html

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
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+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
9+
<link rel="stylesheet" href="css/articles.css">
10+
<title>Articles</title>
11+
</head>
12+
13+
<body>
14+
<header>
15+
<nav>
16+
<div class="logo">
17+
<img class="logo-img" src="images/image 17.png">
18+
<p class="logo-text">My learning journal</p>
19+
</div>
20+
<ul class="nav-list">
21+
<li class="nav-list-item"><a href="index.html">Home</a></li>
22+
<li class="nav-list-item"><a href="about.html">About Me</a></li>
23+
</ul>
24+
</nav>
25+
</header>
26+
<div class="container">
27+
<div class="article-main">
28+
<div class="article-main-texts">
29+
<p class="article-main-title">My new journey as a bootcamp student.</p>
30+
<p class="article-main-date">JULY 23, 2022</p>
31+
<p>After several months of learning in the Frontend Developer Career Path, I've made
32+
the
33+
big jump over to the
34+
Bootcamp to get expert code reviews of my Solo Projects projects and meet like-minded peers.</p>
35+
</div>
36+
<img class="article-main-img" src="images/blog-image-hero.png" alt="logo">
37+
<div class="article-main-body">
38+
<p><strong>How I stay committed to learning</strong>
39+
<br>
40+
<br>
41+
I like to think of myself as a lifelong learner. I used to spend hours and hours learning, then try to create
42+
simple
43+
projects using what I learned or work new techniques into existing projects.
44+
</p>
45+
<p>While that was fun, I felt like it would be helpful to share what I was learning and most things about my
46+
journey
47+
with the world.
48+
</p>
49+
<p><strong>How I got started</strong>
50+
<br>
51+
<br>
52+
I started simple and gradually grew my learning journal site. I would take notes about what I was learning.
53+
After
54+
each learning session, I'd use my notes to not only reflect on what I learned but also write short summaries
55+
of
56+
what
57+
I learned using my own words.
58+
</p>
59+
60+
<p>That helped me grow what I was learning, and I realized that posting my learning summaries was also helping
61+
others
62+
learn and stay motivated.
63+
</p>
64+
</div>
65+
</div>
66+
<div class="article-recent-posts">
67+
<p class="article-recent-posts-title">Recent Posts</p>
68+
<div class="row-1">
69+
<div class="article-card">
70+
<h2 class="article-card-title">Blog one</h2>
71+
<img class="article-card-img" src="images/blog-image-06.png" alt="">
72+
<p class="article-card-date">JULY 23, 2022</p>
73+
<p class="article-card-body">I'm excited to start a new learning journey as a Scrimba Bootcamp student!
74+
After
75+
several months of learning
76+
in
77+
the Frontend Developer Career Path.</p>
78+
</div>
79+
<div class="article-card">
80+
<h2 class="article-card-title">Blog two</h2>
81+
<img class="article-card-img" src="images/blog-image-04.png" alt="">
82+
<p class="article-card-date">JULY 23, 2022</p>
83+
<p class="article-card-body">I'm excited to start a new learning journey as a Scrimba Bootcamp student!
84+
After
85+
several months of learning
86+
in
87+
the Frontend Developer Career Path.</p>
88+
</div>
89+
<div class="article-card">
90+
<h2 class="article-card-title">Blog three</h2>
91+
<img class="article-card-img" src="images/blog-image-05 (1).png" alt="">
92+
<p class="article-card-date">JULY 23, 2022</p>
93+
<p class="article-card-body">I'm excited to start a new learning journey as a Scrimba Bootcamp student!
94+
After
95+
several months of learning
96+
in
97+
the Frontend Developer Career Path.</p>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
<footer>
103+
<p class="footer-text">My Learning Journal</p>
104+
<p class="footer-copyright">Copyright &copy;2022</p>
105+
</footer>
106+
</body>
107+
108+
</html>

‎css/about.css

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import url("style.css");
2+
3+
body {
4+
font-weight: 400;
5+
}
6+
7+
.about-me-img {
8+
border-radius: 50%;
9+
max-width: 182px;
10+
margin-top: 1.5em;
11+
}
12+
13+
.article-main {
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
gap: 2em;
18+
}
19+
20+
.article-image {
21+
order: -1;
22+
/* align-self: center; */
23+
}
24+
25+
.about-me-title {
26+
font-weight: 700;
27+
font-size: 2.1875rem;
28+
margin-top: .5em;
29+
margin-bottom: 0;
30+
line-height: 1.2;
31+
}
32+
33+
.about-me-body {
34+
margin-top: .5em;
35+
}
36+
37+
.article-body {
38+
margin: 1em 0;
39+
}
40+
41+
.article-recent-posts {
42+
margin: 1em 0;
43+
}
44+
45+
.article-recent-posts-title {
46+
text-align: center;
47+
font-weight: 700;
48+
}
49+
50+
@media (min-width: 606px) {
51+
.article-main {
52+
flex-direction: row;
53+
align-items: center;
54+
gap: 2em;
55+
}
56+
57+
.about-me-title {
58+
font-size: 2.25rem;
59+
}
60+
61+
.article-body {
62+
max-width: 75%;
63+
}
64+
}

‎css/articles.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@import url("style.css");
2+
3+
.article-main {
4+
margin-top: .5em;
5+
}
6+
7+
.article-main,
8+
.article-main-texts {
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
13+
.article-main-date {
14+
order: -1;
15+
}
16+
17+
.article-main-title {
18+
font-weight: 700;
19+
font-size: 2.1875rem;
20+
margin-top: .5em;
21+
margin-bottom: 0;
22+
line-height: 1.2;
23+
}
24+
25+
.article-recent-posts {
26+
margin: 1em 0;
27+
}
28+
29+
.article-recent-posts-title {
30+
text-align: center;
31+
font-weight: 700;
32+
}
33+
34+
@media (min-width: 520px) {
35+
.article-main-body {
36+
max-width: 75%;
37+
margin: 0 auto;
38+
padding-top: 1em;
39+
}
40+
41+
.article-main>div {
42+
max-width: 80%;
43+
margin: 0 auto;
44+
}
45+
}

0 commit comments

Comments
 (0)