Rendu du projet typoweb

css/styles.css

@@ -0,0 +1,355 @@
+@font-face {
+  font-family: 'Big Shoulders Display';
+  src: url('../fonts/BigShouldersDisplay-ExtraBold.woff2') format('woff2'),
+      url('../fonts/BigShouldersDisplay-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Big Shoulders Display';
+  src: url('../fonts/BigShouldersDisplay-Black.woff2') format('woff2'),
+      url('../fonts/BigShouldersDisplay-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Big Shoulders Display';
+  src: url('../fonts/BigShouldersDisplay-Bold.woff2') format('woff2'),
+      url('../fonts/BigShouldersDisplay-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Big Shoulders Display';
+  src: url('../fonts/BigShouldersDisplay-ExtraLight.woff2') format('woff2'),
+      url('../fonts/BigShouldersDisplay-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Big Shoulders Display';
+  src: url('../fonts/BigShouldersDisplay-Light.woff2') format('woff2'),
+      url('../fonts/BigShouldersDisplay-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Big Shoulders Display';
+  src: url('../fonts/BigShouldersDisplay-Medium.woff2') format('woff2'),
+      url('../fonts/BigShouldersDisplay-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Big Shoulders Display';
+  src: url('../fonts/BigShouldersDisplay-SemiBold.woff2') format('woff2'),
+      url('../fonts/BigShouldersDisplay-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Big Shoulders Display';
+  src: url('../fonts/BigShouldersDisplay-Thin.woff2') format('woff2'),
+      url('../fonts/BigShouldersDisplay-Thin.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Big Shoulders Display';
+  src: url('../fonts/BigShouldersDisplay-Regular.woff2') format('woff2'),
+      url('../fonts/BigShouldersDisplay-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  max-width: 320px;
+  margin: auto;
+}
+
+hr {
+  border: 1px solid black;
+}
+
+video {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.video-wrapper {
+  width: 320px;
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+h1 {
+  color: #49f271;
+  font-family: bely-display, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 50px;
+  text-align: center;
+  position: relative; 
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  font-size: 26px;
+  font-family: 'Big Shoulders Display';
+  font-weight: 100;
+  font-style: normal;
+}
+
+header a {
+  color: black;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #a700ff;
+}
+
+.introduction {
+  background-image: url("../img/img_introduction.svg");
+  text-align: center;
+  padding: 37px;
+  font-size: 18px;
+  font-family: bely, serif;
+}
+
+.introduction p {
+  text-align: center;
+  padding: 23px;
+  margin: 0;
+}
+
+.main-title {
+  border-width: 2px;
+}
+
+.styles {
+  background-color: #49f271;
+  padding: 37px;
+  font-size: 20px;
+  text-align: center;
+}
+
+.styles hr {
+  margin-bottom: 0;
+}
+
+.styles h2 {
+  font-family: 'Big Shoulders Display';
+  font-weight: 400;
+  font-style: normal; 
+  font-size: 40px;
+  margin: 0;
+  text-align: left;
+}
+
+.styles h3 {
+  font-family: 'Big Shoulders Display';
+  font-weight: 400;
+  font-style: normal; 
+  font-size: 26px;
+  margin-bottom: 0;
+  text-align: left;
+  margin-top: 35px;
+}
+
+.display-regular {
+  font-family: bely-display, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.regular {
+  font-family: bely, serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.italic {
+  font-family: bely, serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.bold {
+  font-family: bely, serif;
+  font-weight: 700;
+  font-style: normal;
+
+}
+
+.bold-italic {
+  font-family: bely, serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.alternatives {
+  background-image: url("../img/img_alternatives.svg");
+  padding: 37px;
+  padding-bottom: 0;
+}
+
+.alternatives h2 {
+  font-family: 'Big Shoulders Display';
+  font-weight: 400;
+  font-style: normal; 
+  font-size: 40px;
+  margin: 0;
+  text-align: left;
+}
+
+.alternatives h3{
+  font-family: 'Big Shoulders Display';
+  font-weight: 400;
+  font-style: normal; 
+  font-size: 26px;
+  margin-bottom: 5px;
+}
+
+.alternatives img {
+  width: 200px;
+  margin-bottom: 50px;
+}
+
+.alternatives-table {
+  margin-left: 25px; 
+  margin-right: 50px;
+}
+
+.alternatives hr {
+  margin-bottom: 70px;
+}
+
+.alternatives .main-title {
+  color: #49f271;
+  border-color: #49f271; 
+}
+
+.test {
+  background-color: #49f271;
+  padding: 37px;
+}
+
+.test h2 {
+  font-family: 'Big Shoulders Display';
+  font-weight: 400;
+  font-style: normal; 
+  font-size: 40px;
+  margin: 0;
+  text-align: left;
+}
+
+input {
+  outline: #a700ff;
+  background-color: #49f271;
+  border: 2px solid black;
+  width: 240px;
+  height: 50px;
+  font-size: 30px;
+  color: black;
+  margin-top: 40px;
+}
+
+input::placeholder {
+  color: black;
+}
+
+input:hover {
+  border-color: #a700ff;
+}
+
+.test-box-display {
+  font-family: bely-display, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.test-box-regular {
+  font-family: bely, serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.test-box-bold {
+  font-family: bely, serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.test-box-italic {
+  font-family: bely, serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.test-box-italic-bold {
+  font-family: bely, serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+footer {
+  padding: 37px;
+  padding-bottom: 0;
+  color: #49f271;
+  font-size: 18px;
+}
+
+footer a {
+  color: #49f271;
+}
+
+footer a:visited {
+  color: #49f271;
+}
+
+footer p {
+  margin-top: 0;
+}
+
+.font-name {
+  font-size: 20px;
+  margin-bottom: 0;
+}
+
+.signature {
+  text-align: right;
+  margin-top: 18px;
+}