Skip to content

Css/layouts #8

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
Feb 1, 2022
Merged

Css/layouts #8

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
535ce3e
floats/challenge
Abernachy Jan 27, 2022
0989fdf
completed float code challenge
Abernachy Jan 29, 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
77 changes: 74 additions & 3 deletions projectfolder/css/shopStyle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
* {
margin: 0px;
padding: 0px;
box-sizing: content-box;
}

body {
Expand All @@ -11,10 +12,13 @@ body {
p {
margin-bottom: 20px;
}
.product-description {
clear: both;
}

.product-container {
border: black 4px solid;
width: 825px;
width: 900px;
margin: 25px auto;
position: relative;
}
Expand All @@ -34,22 +38,28 @@ p {
color: white;
letter-spacing: 2px;
padding: 5px 5px;
font-size: 12px;
width: 80px;
text-align: center;
}

.product-details {
text-transform: uppercase;
margin-bottom: 20px;
font-size: 16px;
}

.shipping {
text-transform: uppercase;
font-weight: bold;
color: #777;
float: right;
}

.price {
font-size: 25px;
margin-bottom: 0px;
float: left;
}

/* Link styling */
Expand Down Expand Up @@ -117,11 +127,72 @@ nav {
justify-content: center;
}

.colored-boxes li {
display: block-inline;
.colored-boxes > div {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
margin-bottom: 10px;
}

.black {
background-color: black;
border: solid 5px black;
width: 5px;
height: 5px;
}
.blue {
background-color: blue;
border: solid 5px blue;
width: 5px;
height: 5px;
}
.red {
background-color: red;
border: solid 5px red;
width: 5px;
height: 5px;
}

.yellow {
background-color: yellow;
border: solid 5px yellow;
width: 5px;
height: 5px;
}
.green {
background-color: #00d500;
border: solid 5px #00d500;
width: 5px;
height: 5px;
}
.brown {
background-color: brown;
border: solid 5px brown;
width: 5px;
height: 5px;
}

/* Floats */
.product-image {
float: left;
margin-right: 40px;
}

.product-details-container {
/* background-color: yellow; */
width: 243px;
height: 250px;
float: left;
padding: 0px 40px;
/* margin-top: 20px; */
}

.product-info-container {
width: 243px;
/* background-color: blue; */
float: left;
height: 250px;
margin-right: 40px;
/* margin-top: 20px; */
}
62 changes: 51 additions & 11 deletions projectfolder/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
Expand All @@ -12,7 +13,7 @@ body {
}

.container {
width: 800px;
width: 1200px;
/* margin-left: auto;
margin-right: auto; */
margin: 0 auto;
Expand All @@ -32,7 +33,7 @@ article {
padding-right: 40px; */
padding: 20px 40px;
margin-bottom: 60px;
height: 80px;
/* height: 80px; */
}

.post-header {
Expand All @@ -43,10 +44,7 @@ aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
/* padding-top: 50px;
padding-bottom: 50px; */
padding: 50px 0;
width: 500px;
padding: 50px 40px;
}

/* SMALLER ELEMENTS */
Expand Down Expand Up @@ -78,6 +76,7 @@ h4 {
font-size: 20px;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
p {
font-size: 22px;
Expand Down Expand Up @@ -118,8 +117,10 @@ li {
font-weight: bold;
}

.related-list p {
.related-list p,
li {
list-style: none;
margin: none;
}

/* .first-li {
Expand Down Expand Up @@ -236,10 +237,6 @@ h1::first-letter {
margin-right: 5px;
}

h3 + p {
/* color: red; */
}

h2::after {
content: 'TOP';
background-color: #ffe70e;
Expand All @@ -252,3 +249,46 @@ h2::after {
top: -10px;
right: -25px;
}

/* Floats */

.author-img {
float: left;
margin-bottom: 20px;
}

.author {
float: left;
margin-top: 10px;
margin-left: 20px;
}

h1 {
float: left;
}

nav {
float: right;
}

.clear {
clear: both;
}

.clearfix::after {
clear: both;
content: '';
display: block;
}

article {
width: 825px;
float: left;
}
aside {
width: 300px;
float: right;
}
footer {
clear: both;
}
92 changes: 72 additions & 20 deletions projectfolder/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<body>
<!-- Comment Block, this his how you do comments in html-->
<div class="container">
<header class="main-header">
<header class="main-header clearfix">
<!-- We can do inline CSS style like below
<h1 style="color: blue">
But we dont want do this
Expand All @@ -28,32 +28,55 @@ <h1>📘 The Code Magazine</h1>
<a href="#">Flexbox</a>
<a href="#">CSS Grid </a>
</nav>
<div class="clear"></div>

<button>❤Like</button>
</header>

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

<img class="post-img" src="./imgs/post-img.jpg" alt="This is the voice of Satan" width="500" height="200" />
<img
class="post-img"
src="./imgs/post-img.jpg"
alt="This is the voice of Satan"
width="500"
height="200"
/>
</header>
<p>
All modern websites and web applications are built using three <em>fundamental</em> technologies: HTML, CSS
and JavaScript. These are the languages of the web.
All modern websites and web applications are built using three
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These are
the languages of the web.
</p>
<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>
<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>
<h3>What is HTML?</h3>
<p>
<strong>HTML </strong> stands for <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
<strong>L</strong>anguage. It's a markup language that web developers use to structure and describe the
content of a webpage (not a programming language).
<strong>HTML </strong> stands for
<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
<strong>L</strong>anguage. It's a markup language that web developers
use to structure and describe the content of a webpage (not a
programming language).
</p>
<p>
HTML consists of elements that describe different types of content: paragraphs, links, headings, images,
video, etc. Web browsers understand HTML and render HTML code as websites.
HTML consists of elements that describe different types of content:
paragraphs, links, headings, images, video, etc. Web browsers
understand HTML and render HTML code as websites.
</p>
<p>In HTML, each element is made up of 3 parts:</p>
<ol>
Expand All @@ -65,16 +88,28 @@ <h3>What is HTML?</h3>

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

<h3>Why should you learn HTML</h3>

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

<ul>
<li class="first-li">To be able to use the fundamental web dev language</li>
<li>To hand-craft beautiful websites instead of relying on tools like Worpress or Wix</li>
<li class="first-li">
To be able to use the fundamental web dev language
</li>
<li>
To hand-craft beautiful websites instead of relying on tools like
Worpress or Wix
</li>
<li>To build web applications</li>
<li>To impress friends To have fun 😃</li>
</ul>
Expand All @@ -85,26 +120,43 @@ <h3>Why should you learn HTML</h3>
<h4><strong>Related Posts</strong></h4>
<ul class="related-list">
<li>
<img src="imgs/related-1.jpg" alt="How to Learn Web Development" height="50" width="50" />
<img
src="imgs/related-1.jpg"
alt="How to Learn Web Development"
height="50"
width="50"
/>
<a href="#"> How to Learn Web Development</a>
<p class="related-author">By Jonas Schmeltmann</p>
</li>

<li>
<img src="imgs/related-2.jpg" alt="Unknown Power of CSS" height="50" width="50" />
<img
src="imgs/related-2.jpg"
alt="Unknown Power of CSS"
height="50"
width="50"
/>
<a href="#"> The Uknown Power of CSS</a>
<p class="related-author">By Jonas Schmeltmann</p>
</li>
<li>
<img src="imgs/related-3.jpg" alt="Why Javascript is Awsome" height="50" width="50" />
<img
src="imgs/related-3.jpg"
alt="Why Javascript is Awsome"
height="50"
width="50"
/>
<a href="#"> Why Javascript is Awsome</a>
<p class="related-author">By Jonas Schmeltmann</p>
</li>
</ul>
</aside>

<footer>
<p id="copyright" class="copyright text">Copyright &copy; 2017 by The Code Magazine</p>
<p id="copyright" class="copyright text">
Copyright &copy; 2017 by The Code Magazine
</p>
</footer>
</div>
</body>
Expand Down
Loading