Skip to content
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.

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

Jump to bottom

Add missing static html code #5

Closed
wants to merge 1 commit into from
Closed

Add missing static html code #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Add missing static html code 
Hey guys,
I was following your tutorial and noticed that the static HTML was missing so I took the liberty to add it for you!
I hope this spares some work for you.
Keep it up guys! Cheers.
  • Loading branch information
@Sayil8
Sayil8 committed May 29, 2020
commit 89504e289918fed3f96daca986b6d106e2c894e0
51 changes: 51 additions & 0 deletions sfcasts/ep1/styles.md
View file
Open in desktop
Expand Up @@ -3,6 +3,57 @@
Our main focus in this tutorial will be to build a rich product listing page inside
of `products.vue`. To get that started, I'm going to replace the `h1` with some new
markup - you can copy this from the code block on this page.
```
<div class="container-fluid">
<div class="row">
<aside class="col-xs-12 col-3">
<div class="p-3 mb-5">
<h5 class="text-center">
Categories
</h5>
<ul class="nav flex-column mb4">
<li class="nav-item">
<a class="nav-link" href="/">All Products</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Category A</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#">Category B</a>
</li>

</ul>

</div>

</aside>
<div class="col-xs-12 col-9">
<div class="row">
<div class="col-12">
<h1>
Products
</h1>
</div>
</div>
</div>

<div class="row">
<div class="col-xs-12 col-6 mb-2 pb-2">
TODO - load some products!
</div>
</div>

<div class="row">
<span class="p-3">
Shipping takes 10-12 weeks, and products probably won't work
</span>
</div>

</div>
</div>
```

Notice that there is nothing special yet. We're not rendering any variables: this
is 100% static HTML. If you refresh the page, ok! We have a sidebar on the left,
Expand Down