Skip to content

Commit d26f5e6

Browse files
AbernachyAbernachy
authored
Merge pull request #6 from Aber-Learningforks/lesson2/css
did again moar thingies
2 parents 360f0dd + e5a4d2a commit d26f5e6

File tree

4 files changed

+200
-116
lines changed

4 files changed

+200
-116
lines changed

‎projectfolder/css/shopStyle.css

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,33 @@
1+
* {
2+
margin: 0px;
3+
padding: 0px;
4+
}
5+
16
body {
27
font-family: sans-serif;
3-
border: black 5px solid;
48
line-height: 1.4;
59
}
610

11+
p {
12+
margin-bottom: 20px;
13+
}
14+
15+
.product-container {
16+
border: black 4px solid;
17+
width: 825px;
18+
margin: 5 0px auto;
19+
}
20+
721
.product-name {
822
background: #f7f7f7;
923
text-transform: uppercase;
1024
text-align: center;
25+
padding: 20px 0;
1126
}
1227

1328
.product-details {
1429
text-transform: uppercase;
30+
margin-bottom: 20px;
1531
}
1632

1733
.shipping {
@@ -22,6 +38,7 @@ body {
2238

2339
.price {
2440
font-size: 25px;
41+
margin-bottom: 0px;
2542
}
2643

2744
/* Link styling */
@@ -54,23 +71,37 @@ a:hover {
5471
/* Other stuff */
5572

5673
button {
74+
width: 100%;
5775
background-color: black;
5876
text-transform: uppercase;
59-
color: white;
6077
border: black solid 5px;
78+
color: white;
6179
font-size: 18px;
6280
}
6381

6482
button:hover {
6583
color: black;
6684
background-color: white;
67-
border: white solid 5px;
85+
border: black solid 5px;
6886
/* The above can be consolidated down into:
6987
background-color: white
7088
filter:invert(100%)
7189
*/
7290
}
7391

92+
ul {
93+
margin-left: 15px;
94+
margin-bottom: 10px;
95+
}
96+
7497
ul li {
7598
list-style: square;
99+
margin-bottom: 10px;
100+
}
101+
102+
nav {
103+
border: #1098ad solid 5px;
104+
background-color: #ad2510;
105+
opacity: 0.8;
106+
justify-content: center;
76107
}

‎projectfolder/css/style.css

Lines changed: 63 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,53 @@
1+
/* Global reset, this resets everything to a starting point of 0 so you can customize the padding and margin at an individual level */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
}
6+
17
body {
8+
border-top: 5px solid #1098ad;
29
color: #444;
310
font-family: sans-serif;
411
}
512

13+
.container {
14+
width: 800px;
15+
/* margin-left: auto;
16+
margin-right: auto; */
17+
margin: 0 auto;
18+
}
19+
20+
nav a:link {
21+
font-size: 18px;
22+
}
23+
24+
article {
25+
margin-bottom: 60px;
26+
}
27+
.main-header {
28+
background-color: #f7f7f7;
29+
/* padding: 20px;
30+
padding-left: 40px;
31+
padding-right: 40px; */
32+
padding: 20px 40px;
33+
margin-bottom: 60px;
34+
height: 80px;
35+
}
36+
37+
.post-header {
38+
margin-bottom: 40px;
39+
}
40+
41+
aside {
42+
background-color: #f7f7f7;
43+
border-top: 5px solid #1098ad;
44+
border-bottom: 5px solid #1098ad;
45+
/* padding-top: 50px;
46+
padding-bottom: 50px; */
47+
padding: 50px 0;
48+
width: 500px;
49+
}
50+
651
h1,
752
h2,
853
h3 {
@@ -18,10 +63,13 @@ h1 {
1863
h2 {
1964
font-size: 40px;
2065
border-bottom: 5px solid #1098ad;
66+
margin-bottom: 30px;
2167
}
2268

2369
h3 {
2470
font-size: 30px;
71+
margin-bottom: 20px;
72+
margin-top: 40px;
2573
}
2674
h4 {
2775
font-size: 20px;
@@ -31,10 +79,18 @@ h4 {
3179
p {
3280
font-size: 22px;
3381
line-height: 1.5;
82+
margin-bottom: 15px;
83+
}
84+
85+
ul,
86+
ol {
87+
margin-left: 50px;
88+
margin-bottom: 20px;
3489
}
3590

3691
li {
3792
font-size: 20px;
93+
margin-bottom: 10px;
3894
}
3995

4096
/* footer p {
@@ -63,26 +119,17 @@ li {
63119
list-style: none;
64120
}
65121

66-
.main-header {
67-
background-color: #f7f7f7;
68-
}
69-
70-
aside {
71-
background-color: #f7f7f7;
72-
border-top: 5px solid #1098ad;
73-
border-bottom: 5px solid #1098ad;
74-
}
75-
76122
/* .first-li {
77123
font-weight: bold;
78124
} */
79-
125+
/*
80126
li:first-child {
81127
font-weight: bold;
82-
}
128+
} */
83129

84130
li:last-child {
85-
font-style: italic;
131+
/* font-style: italic; */
132+
margin-bottom: 0px;
86133
}
87134
/* style based on odd number of item, odd can be changed to even or a specific number
88135
li:nth-child(odd) {
@@ -153,7 +200,7 @@ High to Low
153200
5 -> child element
154201
155202
*/
156-
157-
nav a:link {
158-
font-size: 18px;
203+
.post-img {
204+
width: 100%;
205+
height: auto;
159206
}

‎projectfolder/index.html

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -14,96 +14,98 @@
1414
</head>
1515
<body>
1616
<!-- Comment Block, this his how you do comments in html-->
17-
<header class="main-header">
18-
<!-- We can do inline CSS style like below
17+
<div class="container">
18+
<header class="main-header">
19+
<!-- We can do inline CSS style like below
1920
<h1 style="color: blue">
2021
But we dont want do this
2122
-->
22-
<h1>📘 The Code Magazine</h1>
23+
<h1>📘 The Code Magazine</h1>
2324

24-
<nav>
25-
<a href="./pages/blog.html">Blog</a>
26-
<a href="./pages/challenges.html">Challenges</a>
27-
<a href="#">Fexbox</a>
28-
<a href="#">CSS Grid </a>
29-
</nav>
30-
</header>
25+
<nav>
26+
<a href="./pages/blog.html">Blog</a>
27+
<a href="./pages/challenges.html">Challenges</a>
28+
<a href="#">Fexbox</a>
29+
<a href="#">CSS Grid </a>
30+
</nav>
31+
</header>
3132

32-
<article>
33-
<header>
34-
<h2>The Basic Langauge of The Web: HTML</h2>
35-
<img src="./imgs/laura-jones.jpg" src="the person who wrote this" width="50" height="50" />
36-
<p id="author">Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027</p>
37-
<br />
33+
<article>
34+
<header class="post-header">
35+
<h2>The Basic Langauge of The Web: HTML</h2>
36+
<img src="./imgs/laura-jones.jpg" src="the person who wrote this" width="50" height="50" />
37+
<p id="author">Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027</p>
38+
<br />
3839

39-
<img src="./imgs/post-img.jpg" alt="This is the voice of Satan" width="500" height="200" />
40-
</header>
41-
<p>
42-
All modern websites and web applications are built using three <em>fundamental</em> technologies: HTML, CSS and
43-
JavaScript. These are the languages of the web.
44-
</p>
45-
<p>In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.</p>
46-
<h3>What is HTML?</h3>
47-
<p>
48-
<strong>HTML </strong> stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
49-
<strong>L</strong>anguage. It's a markup language that web developers use to structure and describe the content
50-
of a webpage (not a programming language).
51-
</p>
52-
<p>
53-
HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video,
54-
etc. Web browsers understand HTML and render HTML code as websites.
55-
</p>
56-
<p>In HTML, each element is made up of 3 parts:</p>
57-
<ol>
58-
<li class="first-li">The opening tag</li>
59-
<li>The closing tag</li>
60-
<li>The actual element</li>
61-
<li>You can learn more at the MDN Web Docs.</li>
62-
</ol>
40+
<img class="post-img" src="./imgs/post-img.jpg" alt="This is the voice of Satan" width="500" height="200" />
41+
</header>
42+
<p>
43+
All modern websites and web applications are built using three <em>fundamental</em> technologies: HTML, CSS
44+
and JavaScript. These are the languages of the web.
45+
</p>
46+
<p>In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.</p>
47+
<h3>What is HTML?</h3>
48+
<p>
49+
<strong>HTML </strong> stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
50+
<strong>L</strong>anguage. It's a markup language that web developers use to structure and describe the
51+
content of a webpage (not a programming language).
52+
</p>
53+
<p>
54+
HTML consists of elements that describe different types of content: paragraphs, links, headings, images,
55+
video, etc. Web browsers understand HTML and render HTML code as websites.
56+
</p>
57+
<p>In HTML, each element is made up of 3 parts:</p>
58+
<ol>
59+
<li class="first-li">The opening tag</li>
60+
<li>The closing tag</li>
61+
<li>The actual element</li>
62+
<li>You can learn more at the MDN Web Docs.</li>
63+
</ol>
6364

64-
<p>
65-
You can learn more at the
66-
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a>
67-
</p>
65+
<p>
66+
You can learn more at the
67+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a>
68+
</p>
6869

69-
<h3>Why should you learn HTML</h3>
70+
<h3>Why should you learn HTML</h3>
7071

71-
<p>There are countless reasons for learning the fundamental language of the web. Here are 5 of them:</p>
72+
<p>There are countless reasons for learning the fundamental language of the web. Here are 5 of them:</p>
7273

73-
<ul>
74-
<li class="first-li">To be able to use the fundamental web dev language</li>
75-
<li>To hand-craft beautiful websites instead of relying on tools like Worpress or Wix</li>
76-
<li>To build web applications</li>
77-
<li>To impress friends To have fun 😃</li>
78-
</ul>
79-
<p>Hopefully you learned something new here. See you next time!</p>
80-
</article>
81-
<!--- Aside element is used for secondary information designed to compliment information-->
82-
<aside class="related-aside">
83-
<h4><strong>Related Posts</strong></h4>
84-
<ul class="related-list">
85-
<li>
86-
<img src="imgs/related-1.jpg" alt="How to Learn Web Development" height="50" width="50" />
87-
<a href="#"> How to Learn Web Development</a>
88-
<p class="related-author">By Jonas Schmeltmann</p>
89-
</li>
90-
<br />
91-
<li>
92-
<img src="imgs/related-2.jpg" alt="Unknown Power of CSS" height="50" width="50" />
93-
<a href="#"> The Uknown Power of CSS</a>
94-
<p class="related-author">By Jonas Schmeltmann</p>
95-
</li>
96-
<br />
97-
<li>
98-
<img src="imgs/related-3.jpg" alt="Why Javascript is Awsome" height="50" width="50" />
99-
<a href="#"> Why Javascript is Awsome</a>
100-
<p class="related-author">By Jonas Schmeltmann</p>
101-
</li>
102-
</ul>
103-
</aside>
74+
<ul>
75+
<li class="first-li">To be able to use the fundamental web dev language</li>
76+
<li>To hand-craft beautiful websites instead of relying on tools like Worpress or Wix</li>
77+
<li>To build web applications</li>
78+
<li>To impress friends To have fun 😃</li>
79+
</ul>
80+
<p>Hopefully you learned something new here. See you next time!</p>
81+
</article>
82+
<!--- Aside element is used for secondary information designed to compliment information-->
83+
<aside class="related-aside">
84+
<h4><strong>Related Posts</strong></h4>
85+
<ul class="related-list">
86+
<li>
87+
<img src="imgs/related-1.jpg" alt="How to Learn Web Development" height="50" width="50" />
88+
<a href="#"> How to Learn Web Development</a>
89+
<p class="related-author">By Jonas Schmeltmann</p>
90+
</li>
91+
<br />
92+
<li>
93+
<img src="imgs/related-2.jpg" alt="Unknown Power of CSS" height="50" width="50" />
94+
<a href="#"> The Uknown Power of CSS</a>
95+
<p class="related-author">By Jonas Schmeltmann</p>
96+
</li>
97+
<br />
98+
<li>
99+
<img src="imgs/related-3.jpg" alt="Why Javascript is Awsome" height="50" width="50" />
100+
<a href="#"> Why Javascript is Awsome</a>
101+
<p class="related-author">By Jonas Schmeltmann</p>
102+
</li>
103+
</ul>
104+
</aside>
104105

105-
<footer>
106-
<p id="copyright" class="copyright text">Copyright &copy 2017 by The Code Magazine</p>
107-
</footer>
106+
<footer>
107+
<p id="copyright" class="copyright text">Copyright &copy 2017 by The Code Magazine</p>
108+
</footer>
109+
</div>
108110
</body>
109111
</html>

0 commit comments

Comments
 (0)