add images

This commit is contained in:
ray 2020-02-14 19:27:04 +00:00
parent 992fdbfd56
commit d3f872bc9c
9 changed files with 36 additions and 2 deletions

View File

@ -86,6 +86,8 @@ With SPAs being an important component of the modern web I wanted this project t
## The Design
![]( /images/flowmm/flowmm-model.jpg )
The design brief from the non-existent owners of Flow Model Management was quite
simple. A visually appealing, elegant site, with some background information and an easy
to use method for applicants to sign up with.
@ -102,8 +104,13 @@ It is formal, but not too formal, reminding me of the classy, stylish fashions o
Lato, which goes well with Montserrat, is also modern and elegant, much like Montserrat, and keeps with the formal but not overly so, feel of the site.
As the site is for a modelling agency, I decided that making the models a prominent feature would be an ideal way to make the site visually appealing.
By bringing the models to centre stage and focusing attention on stylish images of the models, this focuses the aesthetic of the site towards an elegant, stylish look.
{{<
figure
src="/images/flowmm/flowmm-model-1.jpg"
alt=""
class="icon-inline icon-right flowmm-model-thumb"
caption="As the site is for a modelling agency, I decided that making the models a prominent feature would be an ideal way to make the site visually appealing. By bringing the models to centre stage and focusing attention on stylish images of the models, this focuses the aesthetic of the site towards an elegant, stylish look."
>}}
## The Deployment

View File

@ -84,6 +84,21 @@ h6 {
}
}
.content figure.icon-inline.flowmm-model-thumb > img {
display: block;
height: auto;
width: 100%;
max-width: 250px;
margin: 0 auto;
}
@media (min-width: 500px) {
.content figure.icon-inline.flowmm-model-thumb > img {
height: 12em;
width: auto;
}
}
/*
* logos
*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 298">
<g fill-rule="nonzero" fill="none">
<path d="M227.92099 82.07407l-13.6889 23.7037-46.8148-81.08641L23.7037 273.58025h97.3037c0 13.0912 10.61252 23.7037 23.70371 23.7037H23.70371c-8.46771 0-16.29145-4.52017-20.5246-11.85382-4.23315-7.33366-4.23272-16.36849.00114-23.70174L146.89383 12.83951c4.23415-7.33433 12.0596-11.85252 20.5284-11.85252 8.46878 0 16.29423 4.51819 20.52839 11.85252l39.97037 69.23456z" fill="#00C58E"/>
<path d="M331.6642 261.7284l-90.05432-155.95062-13.6889-23.7037-13.68888 23.7037-90.04445 155.95061c-4.23385 7.33325-4.23428 16.36808-.00113 23.70174 4.23314 7.33365 12.05689 11.85382 20.5246 11.85382h166.4c8.46946 0 16.29644-4.51525 20.532-11.84955 4.23555-7.3343 4.23606-16.37123.00132-23.706h.01976zM144.7111 273.58024L227.921 129.48148l83.19012 144.09877h-166.4z" fill="#2F495E"/>
<path d="M396.04938 285.4321c-4.23344 7.33254-12.05656 11.85185-20.52345 11.85185H311.1111c13.0912 0 23.7037-10.6125 23.7037-23.7037h40.66173L260.09877 73.74815l-18.4889 32.02963-13.68888-23.7037L239.5753 61.8963c4.23416-7.33433 12.0596-11.85252 20.5284-11.85252 8.46879 0 16.29423 4.51819 20.52839 11.85252l115.41728 199.8321c4.23426 7.33395 4.23426 16.36975 0 23.7037z" fill="#108775"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="556" height="98" viewBox="0 0 556 98"><g fill="none" fill-rule="evenodd"><path fill="#2E495E" d="M74.4 3.7c1 1.1 1.7 2.6 1.6 4.2v81.5c0 1.7-.6 3.4-1.8 4.7a6.2 6.2 0 0 1-4.6 1.9c-1 0-2-.2-3-.5a5 5 0 0 1-2.1-1.4L11.7 25.4V90a5.7 5.7 0 0 1-6 5.9c-1.5 0-3-.6-4-1.7A5.8 5.8 0 0 1 0 90.1V8.4C0 6.7.7 5 2 3.8A6 6 0 0 1 6.3 2c1 0 2.1.2 3 .6 1 .3 1.8 1 2.4 1.7l52.5 68.9V7.9a5.7 5.7 0 0 1 6-5.9c1.5 0 3 .5 4 1.7zM183.1 3.9c1.1 1.3 1.8 3 1.7 4.6v51.6c.1 6.6-1.5 13.2-4.7 19-3 5.6-7.5 10.2-13 13.3-5.6 3.3-12 5-18.6 4.9-6.5 0-13-1.6-18.8-4.8a34 34 0 0 1-13-13.2 38.6 38.6 0 0 1-4.7-19.1V8.6c0-1.7.6-3.4 2-4.6a6.7 6.7 0 0 1 9.3 0c1.2 1.2 1.9 2.8 1.9 4.6V60c-.1 4.4 1 8.7 3.2 12.6a23.2 23.2 0 0 0 20.1 11.7 24 24 0 0 0 24.1-24.3V8.6c0-1.7.5-3.4 1.6-4.7 1.2-1.3 2.8-2 4.5-1.9 1.7 0 3.3.7 4.4 1.9zM287 85.7a6.3 6.3 0 0 1 1.1 3.8c.1 1.7-.6 3.4-1.9 4.6a6.4 6.4 0 0 1-4.3 1.7c-2.1.1-4.1-1-5.3-2.7l-26-34.8L225 93.1a6.2 6.2 0 0 1-5.2 2.8c-1.6 0-3-.6-4.1-1.7-1-1-1.7-2.4-1.7-3.8 0-1.6.6-3.2 1.6-4.4l27.6-37.5-27.7-37.2a6.2 6.2 0 0 1 .5-8.4 6.3 6.3 0 0 1 7.4-1.2 6 6 0 0 1 2.4 2l25.8 34.6L277 4c1.1-1.7 3-2.8 5.1-3 1.6 0 3.2.8 4.3 2 1.1 1 1.8 2.5 1.9 4 0 1.5-.5 2.8-1.4 4l-28 37.2 28 37.5zM383.5 3.7c1.2 1.1 2 2.8 1.9 4.5 0 1.7-.7 3.3-2 4.4-1.2 1.1-2.9 1.7-4.6 1.6H355v75.4c0 1.7-.6 3.3-1.9 4.5a7.4 7.4 0 0 1-9.8 0 6.2 6.2 0 0 1-2-4.5V14.2h-23.8c-1.7 0-3.3-.5-4.6-1.7A5.9 5.9 0 0 1 311 8c0-1.6.6-3.2 1.8-4.3 1.3-1.2 3-1.8 4.6-1.7h61.4c1.7 0 3.4.5 4.7 1.7z"/><path fill="#00C48D" d="M412.7 93.6c-4.3-2.4-8-6-10.5-10.3-.7-1-1.1-2.3-1.2-3.6 0-1.7.7-3.3 2-4.4 1.1-1.2 2.6-1.8 4.2-2 2.4.3 4.6 1.5 6 3.4 3 5 8.4 8 14.1 7.8A17.2 17.2 0 0 0 445 67.3V8.5a6 6 0 0 1 2-4.6c1.3-1.2 3-1.9 4.7-1.9 1.8 0 3.5.6 4.8 1.8a6.3 6.3 0 0 1 1.8 4.6v59a29 29 0 0 1-15 26 31.2 31.2 0 0 1-30.5.2zM505.2 94c-5.3-2-10.2-5-14.4-9a7.2 7.2 0 0 1-2.8-5.4 6 6 0 0 1 2-4.4 6 6 0 0 1 4.3-1.9c1.5 0 2.8.5 3.9 1.5 3.2 3 7 5.5 11 7.3 4.2 1.6 8.6 2.4 13 2.4 5 .1 10-1.2 14.3-4 3.5-2 5.8-5.7 5.8-9.8.1-4.3-2.1-8.4-5.8-10.8a52 52 0 0 0-17.4-6.3c-9.2-2-16.3-5-21.3-9.3-5-4.3-7.4-10.3-7.4-17.9-.1-5 1.3-9.9 4.2-14 2.9-4 6.8-7.2 11.4-9.2a45.5 45.5 0 0 1 32.4-.5 33 33 0 0 1 12 7.1c1.8 1.4 3 3.5 3 5.7a6 6 0 0 1-1.8 4.3 5.7 5.7 0 0 1-4.4 2c-1 0-2.2-.4-3-1.1a32.1 32.1 0 0 0-21.4-8.2c-5-.3-10 1-14.3 3.6a11.9 11.9 0 0 0 0 19.8 50 50 0 0 0 15.8 6c5.9 1.1 11.6 3 17.1 5.3 4.2 1.9 7.8 4.8 10.3 8.6 2.6 4.4 3.8 9.3 3.6 14.4.1 5-1.4 9.8-4.3 13.8-3 4.2-7.2 7.4-12 9.4a49.8 49.8 0 0 1-33.9.6z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.32 170.02">
<path fill="#42b883" d="M120.83 0L98.16 39.26 75.49 0H0l98.16 170.02L196.32 0h-75.49z"/>
<path fill="#35495e" d="M120.83 0L98.16 39.26 75.49 0H39.26l58.9 102.01L157.06 0h-36.23z"/>
</svg>

After

Width:  |  Height:  |  Size: 261 B