Skip to content

Section 4 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Sep 1, 2022
Merged

Section 4 #3

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a2e909d
section-4: Implemented basic float layout.
owen-webb Aug 30, 2022
697a559
section-4: Apply border-box sizing.
owen-webb Aug 30, 2022
bb5cb4c
section-4: Initialize challenge.
owen-webb Aug 30, 2022
9bf4bb9
section-4: Set nav bar links.
owen-webb Aug 30, 2022
99121e3
section-4: Flexbox sandbox.
owen-webb Aug 30, 2022
67a5f15
section-4: Style inner components with flexbox.
owen-webb Aug 30, 2022
ac32d19
section-4: Use flexbox to style major components.
owen-webb Aug 30, 2022
2070921
section-4: Converted challenge to flexbox.
owen-webb Aug 31, 2022
2a41f02
section-4: CCS grid experimentations.
owen-webb Aug 31, 2022
5778a5c
section-4: Style blog with CSS grid.
owen-webb Aug 31, 2022
19d8c84
section-4: CSS grid challenge.
owen-webb Sep 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
section-4: Style inner components with flexbox.
  • Loading branch information
@owen-webb
owen-webb committed Aug 30, 2022
commit 67a5f15eedbc9b1600c0d80a28ddbdbd0e951db6
36 changes: 22 additions & 14 deletions starter/04-CSS-Layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,19 @@ <h1>📘 The Code Magazine</h1>
<header class="post-header">
<h2>The Basic Language of the Web: HTML</h2>

<img
<div class="author-box">
<img
src="img/laura-jones.jpg"
alt="Headshot of Laura Jones"
class="author-image"
height="50"
width="50"
/>
/>

<p id="author" class="author">
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
</p>
<p id="author" class="author">
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
</p>
</div>

<img
src="img/post-img.jpg"
Expand Down Expand Up @@ -126,35 +128,41 @@ <h3>Why should you learn HTML?</h3>
<h4>Related posts</h4>

<ul class="related">
<li>
<li class="related-post">
<img
src="img/related-1.jpg"
alt="Person programming"
width="75"
height="75"
/>
<a href="#">How to Learn Web Development</a>
<p class="related-author">By Jonas Schmedtmann</p>
<div>
<a href="#" class="related-link">How to Learn Web Development</a>
<p class="related-author">By Jonas Schmedtmann</p>
</div>
</li>
<li>
<li class="related-post">
<img
src="img/related-2.jpg"
alt="Lightning"
width="75"
height="75"
/>
<a href="#">The Unknown Powers of CSS</a>
<p class="related-author">By Jim Dillon</p>
<div>
<a href="#" class="related-link">The Unknown Powers of CSS</a>
<p class="related-author">By Jim Dillon</p>
</div>
</li>
<li>
<li class="related-post">
<img
src="img/related-3.jpg"
alt="JavaScript code on a screen"
width="75"
height="75"
/>
<a href="#">Why JavaScript is Awesome</a>
<p class="related-author">By Matilda</p>
<div>
<a href="#" class="related-link">Why JavaScript is Awesome</a>
<p class="related-author">By Matilda</p>
</div>
</li>
</ul>
</aside>
Expand Down
46 changes: 44 additions & 2 deletions starter/04-CSS-Layouts/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,6 @@ nav a:link {
display: block; */

margin-right: 30px;
margin-top: 10px;
display: inline-block;
}

Expand Down Expand Up @@ -266,7 +265,9 @@ nav p {
font-size: 18px;
} */

.author {
/* FLOATS */

/* .author {
float: left;
margin-left: 20px;
margin-top: 10px;
Expand Down Expand Up @@ -307,4 +308,45 @@ aside {

footer {
clear: both;
} */

/* FLEX */

.main-header {
align-items: center;
display: flex;
justify-content: space-between;
}

.author-box {
align-items: center;
display: flex;
margin-bottom: 15px;
}

.author {
margin-bottom: 0;
margin-left: 15px;
}

.related-author {
font-size: 14px;
font-style: italic;
font-weight: normal;
margin-bottom: 0;
}

.related-link:link {
display: block;
font-size: 17px;
font-style: normal;
font-weight: bold;
margin-bottom: 5px;
}

.related-post {
align-items: center;
display: flex;
gap: 20px;
margin-bottom: 30px;
}