scrimba
Responsive Design
CSS Grid
Putting grid to use - part 2
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Putting grid to use - part 2
AboutCommentsNotes
Putting grid to use - part 2
Expand for more info
index.html
run
preview
console
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:300,700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="portfolio">
<!--portfolio item 1 -->
<h2 class="portfolio-title">Some of my work</h2>
<div class="portfolio-card">
<img src="https://unsplash.it/700/100" alt="">
<h3 class="portfolio-card-title">Project title</h3>
<p class="portfolio-card-p">Project description</p>
</div>

<!--portfolio item 2 -->
<div class="portfolio-card">
<img src="https://unsplash.it/700/100" alt="">
<h3 class="portfolio-card-title">Project title</h3>
<p class="portfolio-card-p">Project description</p>
</div>

<!--portfolio item 3 -->
<div class="portfolio-card">
<img src="https://unsplash.it/700/100" alt="">
<h3 class="portfolio-card-title">Project title</h3>
<p class="portfolio-card-p">Project description</p>
</div>

<!--portfolio item 4 -->
<div class="portfolio-card">
<img src="https://unsplash.it/700/100" alt="">
<h3 class="portfolio-card-title">Project title</h3>
<p class="portfolio-card-p">Project description</p>
</div>

<!--portfolio item 5 -->
<div class="portfolio-card">
<img src="https://unsplash.it/700/100" alt="">
<h3 class="portfolio-card-title">Project title</h3>
<p class="portfolio-card-p">Project description</p>
</div>

<!--portfolio item 6 -->
<div class="portfolio-card">
<img src="https://unsplash.it/700/100" alt="">
<h3 class="portfolio-card-title">Project title</h3>
<p class="portfolio-card-p">Project description</p>
</div>
</div>
</body>
</html>
Console
index.html
-3:30