Skip to content

03 css fundementals #2

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 2 commits into from
Dec 15, 2022
Merged

03 css fundementals #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd7e292
lecture 25
marcuma Dec 14, 2022
8edcadb
final css fundamentals
marcuma Dec 15, 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
111 changes: 111 additions & 0 deletions starter/03-CSS-Fundamentals/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
h1,
h2,
h3,
h4,
p,
li {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: #444;
}

h1,
h2,
h3 {
color: #1098ad;
}

h1 {
font-size: 26px;
text-transform: uppercase;
font-style: italic;
}

h2 {
font-size: 40px;
}

h3 {
font-size: 30px;
}

h4 {
font-size: 20px;
text-transform: uppercase;
text-align: center;
}

p {
font-size: 22px;
line-height: 1.5;
}

li {
font-size: 20px;
}

/* footer p {
font-size: 16px;
text-align: center;
} */

#copyright {
font-size: 16px;
text-align: center;
}

#author {
font-style: italic;
font-size: 18px;
}

.related-author {
font-style: italic;
font-weight: bold;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: 18px;
}

.related {
list-style: none;
}

.main-header {
background-color: #f7f7f7;
}

aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
}

.border {
border-bottom: 5px solid #3a3b3b;
}

li:first-child {
font-weight: bold;
}

li:last-child {
font-style: italic;
}

li:nth-child(even) {
/* color: red; */
}

/* Style Hyperlinks */
a:link {
color: #1098ad;
text-decoration: none;
}

a:visited {
color: #1098ad;
}

a:hover {
color: orangered;
font-weight: bold;
}
30 changes: 13 additions & 17 deletions starter/03-CSS-Fundamentals/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,12 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/style.css" />
<title>The Basic Language of the Web: HTML</title>
</head>

<body>
<!--
<h1>The Basic Language of the Web: HTML</h1>
<h2>The Basic Language of the Web: HTML</h2>
<h3>The Basic Language of the Web: HTML</h3>
<h4>The Basic Language of the Web: HTML</h4>
<h5>The Basic Language of the Web: HTML</h5>
<h6>The Basic Language of the Web: HTML</h6>
-->

<header>
<header class="main-header">
<h1>📘 The Code Magazine</h1>

<nav>
Expand All @@ -28,7 +20,7 @@ <h1>📘 The Code Magazine</h1>

<article>
<header>
<h2>The Basic Language of the Web: HTML</h2>
<h2 class="border">The Basic Language of the Web: HTML</h2>

<img
src="img/laura-jones.jpg"
Expand All @@ -37,7 +29,9 @@ <h2>The Basic Language of the Web: HTML</h2>
width="50"
/>

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

<img
src="img/post-img.jpg"
Expand Down Expand Up @@ -112,7 +106,7 @@ <h3>Why should you learn HTML?</h3>
<aside>
<h4>Related posts</h4>

<ul>
<ul class="related">
<li>
<img
src="img/related-1.jpg"
Expand All @@ -121,12 +115,12 @@ <h4>Related posts</h4>
width="75"
/>
<a href="#">How to Learn Web Development</a>
<p>By Jonas Schmedtmann</p>
<p class="related-author">By Jonas Schmedtmann</p>
</li>
<li>
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
<a href="#">The Unknown Powers of CSS</a>
<p>By Jim Dillon</p>
<p class="related-author">By Jim Dillon</p>
</li>
<li>
<img
Expand All @@ -136,11 +130,13 @@ <h4>Related posts</h4>
height="75"
/>
<a href="#">Why JavaScript is Awesome</a>
<p>By Matilda</p>
<p class="related-author">By Matilda</p>
</li>
</ul>
</aside>

<footer>Copyright &copy; 2027 by The Code Magazine.</footer>
<footer>
<p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
</footer>
</body>
</html>