Style Guide

logo with Y and V letters pink + bluish

Yana Vishnevskaya

With a flexible layout.

Headings Colors Body Logo Buttons Works Feedback

Headings

H1

H2

H3

H4

H5
H6

HTML:

<div class="main">

CSS:

.main { flex: 80%; background-color: white; padding: 20px; }

Colors

HTML:

<div class="color-img">

CSS:

.color-img { display: flex; margin-bottom: -10rem; margin-left: auto; margin-right: auto; margin-top: -5rem; width: 80%; }

Body Text

Hello!

You have landed on the portfolio of Yana Vishnevskaya, and I welcome you to my personal page. In my natural habitat you will typically find me exploring new trails, climbing the mountains, overlanding, and writing code. Here you will find my most recent works, feedback from happy customers, and information about how to contact me. Feel free to explore and ask any questions that might arise.

HTML:

<p id="main-text"> <b id="b-hello">Hello!>

CSS:

#main-text { display: flex; margin-left: 5rem; margin-right: 5rem; } p { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } #b-hello { color: #5B618A; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }

Logo by Yana Vishnevskaya

HTML:

<img id="logo-image" src="img/logo.png">

CSS:

#logo-image { display: flex; margin-left: -11rem; margin-right: auto; margin-top: -6.5rem; margin-bottom: -3rem; width: 50%; }

Buttons

BUTTON BUTTON BUTTON

HTML:

<a class="button" href="index.html">BUTTON>

CSS:

.button { background-color: #5B618A; color: white; text-decoration: none; margin-bottom: 2rem; padding: 0.7rem; } .button:hover { transition-property: color; transition-duration: 0.5s; background-color: #F7C4A5; color: black; }

Works

Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


Feedback

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.