Add HSE design coursework and Wikimedium assignment
This commit is contained in:
emil28092005
@@ -0,0 +1,13 @@
|
||||
@font-face {
|
||||
font-family: "PT Sans";
|
||||
src: url("../fonts/PTSans-Regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "PT Sans Caption";
|
||||
src: url("../fonts/PTSansCaption-Regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
background: white;
|
||||
font-family: "PT Sans", Arial, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 54px;
|
||||
padding: 0 20px 0 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eee;
|
||||
box-shadow: 0 1px 3px #eee;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: black;
|
||||
font-family: "PT Sans Caption", Arial, sans-serif;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.about-link {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sections {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
width: 1204px;
|
||||
height: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 600px;
|
||||
padding-top: 127px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: "PT Sans Caption", Arial, sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 22px;
|
||||
font-size: 26px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.first .image {
|
||||
top: 82px;
|
||||
left: 641px;
|
||||
width: 1106px;
|
||||
}
|
||||
|
||||
.second .text {
|
||||
margin-left: 642px;
|
||||
padding-top: 119px;
|
||||
}
|
||||
|
||||
.second p {
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
.second .image {
|
||||
top: 65px;
|
||||
left: -42px;
|
||||
width: 646px;
|
||||
}
|
||||
|
||||
.third .text {
|
||||
padding-top: 129px;
|
||||
}
|
||||
|
||||
.third .image {
|
||||
top: 140px;
|
||||
left: 640px;
|
||||
width: 1295px;
|
||||
box-shadow: 0 0 4px #ddd;
|
||||
}
|
||||
|
||||
.learning {
|
||||
height: 666px;
|
||||
padding: 129px 20px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.learning p {
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 82px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
border-radius: 5px;
|
||||
font-family: "PT Sans Caption", Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.source {
|
||||
width: 266px;
|
||||
border: 1px solid #ccc;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.course {
|
||||
width: 300px;
|
||||
color: white;
|
||||
background: black;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline: 2px solid #444;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 1250px) {
|
||||
.section {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
padding: 70px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.section .text {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.section .image {
|
||||
position: static;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.second .image {
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.learning {
|
||||
height: auto;
|
||||
padding: 70px 5% 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
h1, h2 {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 45px 0;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "reset.css";
|
||||
@import "fonts.css";
|
||||
@import "layout.css";
|
||||
Reference in New Issue
Block a user