मैं दो SVG इमेज (Tobias-Raketfart.svg class="turbotobias-shake Turbotobias-rocket-img" और TurboTobias-Blue-clouds.svg class="turbotobias-smoke") को पोजिशन करने की कोशिश कर रहा हूं। हर बार जब मैं एक समाधान के साथ आता हूं तो यह कहीं भी उत्तरदायी नहीं होता है।

मैं स्थिति के साथ खेल रहा हूं: पूर्ण; और फिर नीचे और दाएं के साथ स्थिति। यह परिणाम मेरे पीसी मॉनीटर पर अच्छा दिखता है लेकिन किसी भी अन्य स्क्रीन पर बहुत ही भयानक है। दो एसवीजी छवियों को स्थापित करने के लिए मैं क्या कर सकता हूं?

अंतिम परिणाम का मोबाइल मॉकअप मैं हासिल करने की कोशिश कर रहा हूं

अंतिम परिणाम का पीसी मॉकअप मैं हासिल करने की कोशिश कर रहा हूं

एचटीएमएल:

<body>
    <div class='turbotobias-hero-section-wrapper'>
        <div class='turbotobias-row'>
            <div class='turbotobias-column'>
                <div class='turbotobias-first-column'>
                    <h1 class="turbotobias-fp-h1">Vil du have
                        <div class="turbotobias-h1-enhanced">raketfart</div>
                        <div class="turbotobias-h1-smaller">på din hjemmeside?</div>
                    </h1>
                    <span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
                </div>
            </div>
            <div class='turbotobias-column'>
                <div class='turbotobias-second-column'>
                    <img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt="" class="turbotobias-shake turbotobias-rocket-img">
                    <img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt="" class="turbotobias-smoke"></img>
                </div>
            </div>
            <div class="turbotobias-divider-clouds"></div>
        </div>
    </div>
</body>

सीएसएस:

body {
  background: #fff;
  color: #333333;
  margin: 0;
  box-sizing: border-box;
  font-family: open sans,Arial,sans-serif;
  font-size: 14px;
  overflow: hidden;
  word-break: break-word;
}

.turbotobias-hero-section-wrapper {
  height: 100vh;
  background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.turbotobias-column .turbotobias-first-column {
  display: flex;
  align-self: center;
  align-items: center;
  flex-direction: column;
}

.turbotobias-first-column {
  font-weight: 700;
  text-transform: uppercase;
  background-color: rgba(0,0,0,0);
  border-left-width: 10px;
  border-left-style: solid;
  border-left-color: #0082a4;
  padding-top: 20px!important;
  padding-bottom: 20px!important;
  padding-left: 20px!important;
  margin-top: 0px!important;
  display: flex;
  align-items: center;
}

.turbotobias-h1-enhanced {
  font-weight: 900;
  font-size: 120%;
}

.turbotobias-h1-smaller {
  font-size: 70%;
}

@media (min-width: 980px) {
h1.turbotobias-fp-h1 {
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  font-weight: 700;
  font-size: 60px !important;
  color: #303030!important;
  line-height: 1em;
  text-transform: uppercase;
}
}

@media (max-width: 979px) {
  h1.turbotobias-fp-h1 {
      padding-bottom: 0px;
      margin-bottom: 0px;
      margin-top: 0px;
      font-weight: 700;
      font-size: 33px !important;
      color: #303030!important;
      line-height: 1em;
      text-transform: uppercase;
  }
  }

.turbotobias-sub-h1 {
  font-size: 24px;
  color: #303030;
  font-weight: 400;
  font-family: open sans,Arial,sans-serif;
  text-transform: uppercase;
  text-align: left;
}

.turbotobias-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  max-width: 1080px;
  height: 100vh;
  margin: auto;
}

.turbotobias-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.turbotobias-smoke {
  position:absolute;
  bottom: 0;
  width: 470px;
  height: auto;
  z-index: 9;
  right: 30%;
}

.turbotobias-rocket-img {
  position: absolute;
  bottom: 30%;
  right: 36%;
  width: 180px;
  height: auto;
  z-index: 11;
}

.turbotobias-divider-clouds {
  background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
  background-size: cover;
  background-position: center top;
  bottom: 0;
  left: 0;
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 10;
}


@media screen and (min-width: 800px) {
  .turbotobias-column {
  align-self: center;
    flex: 1
  }
}

@media (max-width: 980px) {
  .turbotobias-row {
      padding: 30px 0;
  }
}

सांकेतिक टुकड़ा

1
TobiasM 22 जुलाई 2019, 00:55

1 उत्तर

सबसे बढ़िया उत्तर

कुछ बदलाव किए गए हैं। सवाल यह है कि बादल दिखाई क्यों नहीं देता? - लाइट-एबव-क्लाउड्स-एचडी-टर्बोटोबियास.jpg turbotobias-second-column वर्ग के साथ Div को हमेशा दो svg को केंद्र में रखना चाहिए और आपको केवल इसे नियंत्रित करना चाहिए।

body {
  background: #fff;
  color: #333333;
  margin: 0;
  font-family: open sans, Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
}

.turbotobias-hero-section-wrapper {
  height: 100vh;
  background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.turbotobias-first-column {
  text-transform: uppercase;
  border-left: 10px solid #0082a4;
  padding: 20px 0 20px 20px;
  margin-top: 0;
  font-weight: 700;
}

@media (max-width: 799px) {
  .turbotobias-first-column {
    text-align: center;
  }
}

.turbotobias-fp-h1 {
  margin: 0 0 20px 0;
  font-size: calc(12px + 2vw);
  font-weight: 600;
  line-height: 90%;
}

.turbotobias-h1-enhanced {
  font-size: calc(24px + 2vw);
  font-weight: 900;
  line-height: 100%;
}

.turbotobias-h1-smaller {
  font-size: calc(17px + 1vw);
  font-weight: 600;
}


.turbotobias-sub-h1 {
  font-size: calc(14px + 0.5vw);
  font-weight: 400;
}

.turbotobias-sub-h1 {
  color: #303030;
}

.turbotobias-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  max-width: 1080px;
  height: 100vh;
  margin: auto;
}

.turbotobias-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.turbotobias-second-column {
  display: flex;
  justify-content: center;
  max-width: 470px;
  margin: auto;
}

.turbotobias-rocket-img {
  bottom: 30%;
  width: 180px;
  height: auto;
  z-index: 11;
}

.turbotobias-smoke {
  position: absolute;
  bottom: 0;
  max-width: 470px;
  height: auto;
  z-index: 9;
}

.turbotobias-shake {
  animation: shake 2s infinite cubic-bezier(0.79, 0.04, 0.39, 0.81) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@media (max-width: 790px) {
  .turbotobias-rocket-img {
    z-index: 2;
    max-width: 420px;
  }
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(1px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-2px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(2px, 0, 0);
  }
}


.turbotobias-divider-clouds {
  background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
  background-size: cover;
  background-position: center top;
  bottom: 0;
  left: 0;
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 10;
}


@media (min-width: 800px) {
  .turbotobias-column {
    align-self: center;
    flex: 1
  }
}

@media (max-width: 980px) {
  .turbotobias-row {
    padding: 30px 0;
  }
}
 <div class='turbotobias-hero-section-wrapper'>
    <div class='turbotobias-row'>
      <div class='turbotobias-column'>
        <div class='turbotobias-first-column'>
          <h1 class="turbotobias-fp-h1">Vil du have
            <div class="turbotobias-h1-enhanced">raketfart</div>
            <div class="turbotobias-h1-smaller">på din hjemmeside?</div>
          </h1>
          <span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
        </div>
      </div>
      <div class='turbotobias-column'>
        <div class='turbotobias-second-column'>
          <img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt=""
            class="turbotobias-shake turbotobias-rocket-img">
          <img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt=""
            class="turbotobias-smoke"></img>
        </div>
      </div>
      <div class="turbotobias-divider-clouds"></div>
    </div>
  </div>
0
Grzegorz T. 22 जुलाई 2019, 18:18