Skip to content

Commit

Permalink
Icon sets page and materials
Browse files Browse the repository at this point in the history
  • Loading branch information
@francesca-paris
francesca-paris committed Aug 2, 2021
1 parent 8fd8f68 commit 3840507
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 22 deletions.
49 changes: 43 additions & 6 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,12 +339,6 @@ h4 {
transform: translateY(-50%);
}

.center2 {
position: relative;
padding-top: 50%;
left: 25%;
}

/* Margin top to cover the header bar space */
.margin-t-71 {
margin-top: 71px;
Expand Down Expand Up @@ -652,6 +646,11 @@ h4 {
display: table;
}

/* Icon sets */
#icon-sets h1 {
font-weight: 400;
}

/* Images */
img {
max-width: 100%;
Expand Down Expand Up @@ -915,10 +914,18 @@ picture .logo {
padding-top: 36px;
}

.space-top-sd-40 {
padding-top: 40px;
}

.space-bottom-sd {
padding-bottom: 16px;
}

.space-bottom-sd-32 {
padding-bottom: 32px;
}

.menu-items {
position: absolute;
top: 40px;
Expand Down Expand Up @@ -958,6 +965,12 @@ picture .logo {
margin-top: 0;
}

.center-gradients {
align-self: center;
padding-top: 20px;
padding-bottom: 36px;
}

/* Intro hero animation */
@keyframes move-down {
0% {
Expand Down Expand Up @@ -1156,6 +1169,10 @@ Medium devices (640px and larger)
display: table;
}

.padding-t-md-60 {
padding-top: 60px;
}

.space-left-md12 {
padding-left: 12px;
}
Expand All @@ -1172,6 +1189,10 @@ Medium devices (640px and larger)
padding-top: 12px;
}

.space-bottom-md-108 {
padding-bottom: 108px;
}

/* Quick and Tasty */
.max-w300-md {
max-width: 300px;
Expand Down Expand Up @@ -1213,6 +1234,12 @@ Medium devices (640px and larger)
.padding-b-36 {
padding-bottom: 36px;
}

.center-gradients {
position: relative;
padding-top: 30%;
left: 25%;
}
}

/* ==============================
Expand Down Expand Up @@ -1281,6 +1308,10 @@ Large devices (1024px or larger)
float: right;
}

.padding-t-lg-92 {
padding-top: 92px;
}

.space-left-320-lg {
margin-left: 320px;
}
Expand Down Expand Up @@ -1312,6 +1343,12 @@ Large devices (1024px or larger)
margin-left: auto;
margin-right: auto;
}

.center-gradients {
position: relative;
padding-top: 50%;
left: 25%;
}
}

/* ==============================
Expand Down
29 changes: 15 additions & 14 deletions icon-sets.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,14 @@ <h2>Cartoony</h2>
</div>
<!-- Brown version -->
<div class="container container-sm row-nm beige2">
<div class="col-sm-12 col-md-6">
<div class="col-sm-12 col-md-6 padding-t-20 space-bottom-md-108">
<img src="img/icon-sets/cartoony-brown.png" alt="Cartoony icons with brown colours">
</div>
<div class="col-sm-12 col-md-6">
<picture>
<source srcset="img/icon-sets/brown-gradients.png" media="(min-width:1024px)">
<source srcset="img/icon-sets/brown-gradients-md.png" media="(min-width:640px)">
<img class="center2" src="img/icon-sets/brown-gradients.png" alt="Brown gradients used for the icons">
<img class="center-gradients" src="img/icon-sets/brown-gradients-md.png" alt="Brown gradients used for the icons">
</picture>
</div>
</div>
Expand All @@ -85,15 +85,15 @@ <h2>Cartoony</h2>
</div>

<!-- violet version -->
<div class="container container-sm row-nm blue">
<div class="col-sm-12 col-md-6">
<div class="container container-sm row-nm blue space-top-sd-40">
<div class="col-sm-12 col-md-6 padding-t-lg-92 padding-t-md-60 space-bottom-md-108">
<img src="img/icon-sets/cartoony-violet.png" alt="Cartoony icons with brown colours">
</div>
<div class="col-sm-12 col-md-6">
<picture>
<source srcset="img/icon-sets/violet-gradients.png" media="(min-width:1024px)">
<source srcset="img/icon-sets/violet-gradients-md.png" media="(min-width:640px)">
<img class="center2" src="img/icon-sets/violet-gradients.png" alt="Brown gradients used for the icons">
<img class="center-gradients" src="img/icon-sets/violet-gradients-md.png" alt="Brown gradients used for the icons">
</picture>
</div>
</div>
Expand All @@ -106,15 +106,15 @@ <h2>Cartoony</h2>
</div>

<!-- green version -->
<div class="container container-sm row-nm green">
<div class="col-sm-12 col-md-6">
<div class="container container-sm row-nm green space-top-sd-40">
<div class="col-sm-12 col-md-6 padding-t-lg-92 padding-t-md-60 space-bottom-md-108">
<img src="img/icon-sets/cartoony-green.png" alt="Cartoony icons with brown colours">
</div>
<div class="col-sm-12 col-md-6">
<picture>
<source srcset="img/icon-sets/green-gradients.png" media="(min-width:1024px)">
<source srcset="img/icon-sets/green-gradients-md.png" media="(min-width:640px)">
<img class="center2" src="img/icon-sets/green-gradients.png" alt="Brown gradients used for the icons">
<img class="center-gradients" src="img/icon-sets/green-gradients-md.png" alt="Brown gradients used for the icons">
</picture>
</div>
</div>
Expand All @@ -128,18 +128,19 @@ <h2>Cartoony</h2>

<!-- Basic icons --->
<div class="row-nm off-white2 container container-sm">
<div class="col-12 padding-b-36">
<div class="col-12 space-bottom-sd-32">
<h2>Basic</h2>
</div>
</div>
<!-- Brown version -->
<div class="container container-sm row-nm off-white2">
<div class="col-12">
<source srcset="img/icon-sets/basic-mobile.png" media="(min-width:640px)">
<img src="img/icon-sets/basic-640plus.png" alt="decorative transition image">
<div class="container container-sm row-nm off-white2 space-bottom-140">
<div class="col-12 padding-t-md-60 padding-t-lg-92">
<picture>
<source srcset="img/icon-sets/basic-640plus.png" media="(min-width:640px)">
<img src="img/icon-sets/basic-mobile.png" alt="decorative transition image">
</picture>
</div>
</div>

</div>
</main>

Expand Down
Binary file added img/icon-sets/icon-sets-home.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/icon-sets/icon-sets-home2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/icon-sets/icons-title.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 16 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ <h3>My Style</h3>
<div class="col-md-6 col-lg-7">
<picture>
<source srcset="img/money-organizer/money-organizer@2x.png" media="(min-width:767px)">
<img src="img/money-organizer/money-organizer@1x.png" alt="My Image">
<img src="img/money-organizer/money-organizer@1x.png" alt="Introduction image of the Money Organizer project">
</picture>
</div>
<div class="col-md-6 col-lg-5 space-left-md">
Expand All @@ -108,7 +108,7 @@ <h3>Money Organizer</h3>
<div class="col-md-6 col-lg-7">
<picture>
<source srcset="img/activities-view/activities-view@2x.png" media="(min-width:767px)">
<img src="img/activities-view/activities-view@1x.png" alt="My Image">
<img src="img/activities-view/activities-view@1x.png" alt="Introduction image of the Activities View project">
</picture>
</div>
<div class="col-md-6 col-lg-5 space-left-md">
Expand All @@ -118,6 +118,20 @@ <h3>Activities View</h3>
<a href="activities-view.html" class="button">View Project</a>
</div>
</div>

<div class="row">
<div class="col-md-6 col-lg-7">
<picture>
<img src="img/icon-sets/icon-sets-home.png" alt="My Image">
</picture>
</div>
<div class="col-md-6 col-lg-5 space-left-md">
<h3>Icon sets</h3>
<p>Some icon sets made in Illustrator, from a cartoony style to a more basic one.</p>
<a href="icon-sets.html" class="button">View Project</a>
</div>
</div>

</div>
</div>

Expand Down

0 comments on commit 3840507

Please sign in to comment.