Как я могу переместить абзац ниже фона? - PullRequest
0 голосов
/ 12 марта 2019

У меня скоро будет задание по разработке. Мне действительно нужна помощь в размещении абзаца с информацией о курсе под фоном без повторений. Я не хочу, чтобы это было на тех же двух фотографиях, на которых включено название Computer Engineering. Кроме того, как я могу изменить шрифт этого? Любая помощь будет оценена :). Это должно произойти очень скоро.

body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.8em;
}

.jumbotron {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(image.jpg);
  background-position: 0% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  border: 2px;
}

.navigation {
  background-color: #330;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

.navigation a {
  font-size: 20px;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
  float: left;
}

.navigation a:hover {
  background-color: #dddddd;
  color: black;
}

.navigation a.active {
  background-color: #4CAF50;
  color: white;
}

body {
  background-image: url("Engineering.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.5);
}

h1 {
  margin: auto;
  z-index: 4;
  text-align: center;
  width: 100%;
  color: white;
  font-size: 100px;
  padding: 10px;
  line-height: 1.8em;
}

.courseinfo {}
<!DOCTYPE html>
<html>

<head>

  <title>
    Home - Hasan's Website
  </title>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>

    </div>


  </div>

  <div class="courseinfo">
    <p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
      to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>

  </div>





</body>

</html>

1 Ответ

0 голосов
/ 12 марта 2019

Это как ты хочешь .. убрал position:absolute и transform: translate(-50%, -50%); добавлено фоновое изображение к .intro

body,
html {
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.8em;
}

.jumbotron {
  top: 50%;
  left: 50%;
  background-image: url(image.jpg);
  background-position: 0% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  border: 2px;
}

.navigation {
  background-color: #330;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

.navigation a {
  font-size: 20px;
  text-decoration: none;
  color: #f2f2f2;
  text-align: center;
  float: left;
}

.navigation a:hover {
  background-color: #dddddd;
  color: black;
}

.navigation a.active {
  background-color: #4CAF50;
  color: white;
}

.intro {
  background-image: url("Engineering.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.5);
  height: 90vh;
  display: flex;
  align-items: center;
}

h1 {
  margin: auto;
  z-index: 4;
  text-align: center;
  width: 100%;
  color: white;
  font-size: 100px;
  padding: 10px;
  line-height: 1.8em;
}

.courseinfo {}
<!DOCTYPE html>
<html>

<head>

  <title>
    Home - Hasan's Website
  </title>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>
    </div>
  </div>

  <div class="courseinfo">
    <p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
      to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>

  </div>





</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...