12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- h1, h2, h3, h4, h5, h6, p {
- margin: 0;
- }
- a {
- text-decoration: none;
- }
- button, input {
- box-shadow: none;
- outline: none;
- border: 1px solid #aaa;
- border-radius: 4px;
- color: #555;
- background-color: white;
- }
- button {
- cursor: pointer;
- padding: 1px 4px;
- }
- input {
- padding: 4px 8px;
- }
- button:hover, button:active {
- background-color: #fafafa;
- }
- * {
- font-family: Sans-Serif;
- font-weight: 400;
- }
- body {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- margin: 0;
- }
- header {
- background: linear-gradient(90deg, green, lightblue, blue);
- width:100%;
- color: white;
- text-align: center;
- height: 100px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- }
- main {
- display: flex;
- padding: 16px;
- row-gap: 16px;
- column-gap: 16px;
- flex-direction: column;
- min-width: 300px;
- max-width: 500px;
- width: 50%;
- }
- main .block {
- background-color: #fafafa;
- color: #555;
- padding: 12px;
- border: 1px solid #aaa;
- display: flex;
- flex-direction: column;
- row-gap: 12px;
- }
- .block h2 {
- text-align: center;
- }
- .contact-section, .links-section, .portfolio-section {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- row-gap: 8px;
- }
- .portfolio-section {
- row-gap: 4px;
- }
|