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
section-4: CSS grid challenge.
  • Loading branch information
@owen-webb
owen-webb committed Sep 1, 2022
commit 19d8c84f335c73fed00eaf15f860b9ab04f076df
72 changes: 35 additions & 37 deletions starter/04-CSS-Layouts/challenge/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,46 +9,44 @@
<body>
<article class="product">
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
<div class="container">
<img
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
alt="Chuck Taylor All Star Shoe"
height="250"
width="250"
class="product-img"
/>
<div class="product-info">
<div class="product-info-header">
<p class="price"><strong>$65.00</strong></p>
<p class="shipping">Free shipping</p>
</div>
<p class="sale">Sale</p>

<p class="product-description">
Ready to dress up or down, these classic canvas Chucks are an everyday
wardrobe staple.
</p>
<a href="https://converse.com" target="_blank" class="more-info">More information &rarr;</a>

<div class="colors">
<div class="color"></div>
<div class="color color-blue"></div>
<div class="color color-red"></div>
<div class="color color-yellow"></div>
<div class="color color-green"></div>
<div class="color color-brown"></div>
</div>
<img
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
alt="Chuck Taylor All Star Shoe"
height="250"
width="250"
class="product-img"
/>
<div class="product-info">
<div class="product-info-header">
<p class="price"><strong>$65.00</strong></p>
<p class="shipping">Free shipping</p>
</div>

<div class="product-details">
<h3 class="details-title">Product details</h3>
<ul class="details-list">
<li>Lightweight, durable canvas sneaker</li>
<li>Lightly padded footbed for added comfort</li>
<li>Iconic Chuck Taylor ankle patch.</li>
</ul>
<p class="sale">Sale</p>

<p class="product-description">
Ready to dress up or down, these classic canvas Chucks are an everyday
wardrobe staple.
</p>
<a href="https://converse.com" target="_blank" class="more-info">More information &rarr;</a>

<div class="colors">
<div class="color"></div>
<div class="color color-blue"></div>
<div class="color color-red"></div>
<div class="color color-yellow"></div>
<div class="color color-green"></div>
<div class="color color-brown"></div>
</div>
</div>

<div class="product-details">
<h3 class="details-title">Product details</h3>
<ul class="details-list">
<li>Lightweight, durable canvas sneaker</li>
<li>Lightly padded footbed for added comfort</li>
<li>Iconic Chuck Taylor ankle patch.</li>
</ul>
</div>
<button class="add-cart">Add to cart</button>
</article>
</body>
Expand Down
19 changes: 17 additions & 2 deletions starter/04-CSS-Layouts/challenge/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ body {
line-height: 1.4;
}

.container {
/* .container {
align-items: center;
display: flex;
gap: 40px;
}
} */

.product-img { }

Expand Down Expand Up @@ -153,3 +153,18 @@ body {
color: #000;
background-color: #fff;
}

.product {
display: grid;
grid-template-columns: 250px 1fr 1fr;
column-gap: 40px;
align-items: center;
}

.product-title {
grid-column: 1 / -1;
}

.add-cart {
grid-column: 1 / -1;
}