React JS приложение

#7 - Добавление стилей и завершение

#7 - Добавление стилей и завершение

В завершающем уроке курса мы с вами добавим стили Bootstrap к проекту, а также поработаем над CSS стилями, дабы наш проект выглядел максимально привлекательно.

Видеоурок

К любому веб проекту можно добавить стили на основе языка CSS. Для более быстрого написания стилей можно использовать различные CSS фреймворки, которые содержат наборы готовых стилей. Фреймворк Bootstrap является наиболее популярным фреймворком для CSS, но помимо него существуют и другие. Ознакомиться с ними можно в нашей статье.


В ходе урока мы использовали Bootstrap, а также картинку гор. Картинку можете скачать ниже:


Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Весь CSS код
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
  font-family: "Open Sans", serif;
}

.wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(45,176,224,1);
  background: -moz-linear-gradient(45deg, rgba(45,176,224,1) 0%, rgba(96,40,168,1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(45,176,224,1)), color-stop(100%, rgba(96,40,168,1)));
  background: -webkit-linear-gradient(45deg, rgba(45,176,224,1) 0%, rgba(96,40,168,1) 100%);
  background: -o-linear-gradient(45deg, rgba(45,176,224,1) 0%, rgba(96,40,168,1) 100%);
  background: -ms-linear-gradient(45deg, rgba(45,176,224,1) 0%, rgba(96,40,168,1) 100%);
  background: linear-gradient(45deg, rgba(45,176,224,1) 0%, rgba(96,40,168,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2db0e0', endColorstr='#6028a8', GradientType=1 );
}

.main {
  height: 55vh;
  background: #2a6bb1;
  box-shadow: 0px 2px 80px -20px rgba(0,0,0,0.5);
  width: 60%;
  margin: 0 auto;
}

.info {
  height: 55vh;
  background: url("img/polygon.jpg") center center no-repeat;
  background-blend-mode: multiply;
  background-color: #484747;
  border: 2px solid #1f1f1f;
  border-right: 2px solid #131e29;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
}

.form {
  height: 55vh;
  padding-top: 100px;
  padding-left: 50px;
  border-top: 2px solid #113a65;
  border-bottom: 2px solid #113a65;
  border-right: 2px solid #113a65;
}

input[type="text"] {
  background-color: transparent;
  border: 0;
  border-bottom: solid 2px #113a65;
  width: 50%;
  padding-bottom: 4px;
  color: #fff;
  font-weight: lighter;
  margin-bottom: 30px;
  margin-right: 20px;
  font-size: 20px;
  outline: none;
}

input::-webkit-input-placeholder {
  color: #103a65;
}

input::-moz-placeholder {
  color: #103a65;
}

button {
  border: 2px solid #103a65;
  border-bottom: 4px solid #103a65;
  padding: 8px 20px;
  margin: 0 2px;
  border-radius: 2px;
  cursor: pointer;
  background-color: #235d9c;
  color: #fff;
  outline: none!important;
}

button:hover {
  border-bottom: 2px solid #103a65;
  position: relative;
  top: 2px;
}

button:active {
  border-bottom: 2px solid transparent;
  border-color: transparent;
  position: relative;
  top: 2px;
}

.info h2 {
  font-size: 3em;
  color: #fff;
}

.info p {
  color: #e4e4e4;
  font-weight: bold;
}

.infoWeath {
  width: 60%;
  font-size: 20px;
  color: #fff;
}

.error {
  color: #041f3c;
  font-weight: bold;
}
Посмотреть остальной код можно после подписки на проект!

Онлайн редактор кода

Загрузка...

Также стоит посмотреть

Изучение React JS / Redux библиотеки
9 уроков
Курс по React JS для начинающих
14 уроков
Комментарии для сайта Cackle