CSS - Positionieren von Text und Symbolen

Question

Ich baue eine Website und habe eine PSD-Datei mit dem Design erhalten, kämpfe aber an einem bestimmten Abschnitt. Dies ist, wie das Design aussehen sollte -

Und das ist, wo ich bin an -

Ich bin sicher, es ist ziemlich offensichtlich zu einem erfahrenen Front-End-Entwickler, aber ich habe mit Schwimmern und zeige und kämpfe. Hier ist der Code, den ich verwendet habe, um dieses zu erhalten -

HTML

<section id="home"> 

     <a href="agency.html">Are you an agency?</a> 
     <a href="business.html">Or a business?</a> 
     <div class="container showreel"> 
      <div class="seemore"> 
       <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i> 
       <p>SEE MORE</p> 
      </div> 
      <div class="seeour"> 
       <p>SEE OUR SHOWREEL</p> 
       <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i> 
      </div> 
     </div> 
    </section> 

CSS

section#home { 

    height: 480px; 
    max-width: 100%; 
    background: url(../images/homepagemain.jpg) center center no-repeat; 
    background-size: 960px; 
    background-position: center; 
    overflow: hidden; 
    margin-top: 75px; 
    position: relative; 
} 

.showreel { 
    height: 50px; 
    width: 960px; 
    background-color: black; 
    position: absolute; 
    bottom: 0; 
} 

.showreel p { 
    display: inline-block; 
    font-size: 15px; 
    font-weight: normal; 


    color: #ffffff; 
} 

.showreel i { 
    display: inline-block; 
    margin-right: 30px; 
    color: #ffffff; 


} 

.seemore { 
    float: left; 
} 

.seeour { 
    float: right; 
} 

Die Symbole sind nicht genau das gleiche wie bei der Gestaltung, aber ich kann ändern/später ändern. Es ist mehr die Positionierung, die ich brauche, um richtig zu werden. Jede Hilfe, geschätzt.

UPDATE - So ist es jetzt.

Answer 1

können Sie die Eltern machen und die linke/rechte Abschnitte flex und verwenden align-items: center sie vertikal zu zentrieren, dann justify-content: space-between auf dem übergeordneten verwenden, um die Elemente zu den fernen Rändern zu trennen. Ordnen Sie dann die i und p im linken Element neu an und wenden Sie eine eindeutige margin-left und margin-right auf die Symbole, um sie vom Text zu trennen.

section#home { 
 
    height: 480px; 
 
    max-width: 100%; 
 
    background: url(../images/homepagemain.jpg) center center no-repeat; 
 
    background-size: 960px; 
 
    background-position: center; 
 
    overflow: hidden; 
 
    margin-top: 75px; 
 
    position: relative; 
 
} 
 

 
.showreel { 
 
    height: 50px; 
 
    width: 960px; 
 
    background-color: black; 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 0 30px; 
 
    justify-content: space-between; 
 
} 
 

 
.showreel, .showreel > div { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.showreel p { 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
    margin: 0; 
 
    color: #ffffff; 
 
} 
 

 
.showreel i { 
 
    color: #ffffff; 
 
} 
 

 
.seemore i { 
 
    margin-right: 30px; 
 
} 
 

 
.seeour i { 
 
    margin-left: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<section id="home"> 
 
     <a href="agency.html">Are you an agency?</a> 
 
     <a href="business.html">Or a business?</a> 
 
     <div class="container showreel"> 
 
      <div class="seemore"> 
 
       <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i> 
 
       <p>SEE MORE</p> 
 
      </div> 
 
      <div class="seeour"> 
 
       <p>SEE OUR SHOWREEL</p> 
 
       <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i> 
 
      </div> 
 
     </div> 
 
    </section>

Answer 2

https://codepen.io/toastEater/pen/rwYRMG

HTML

<div class="container"> 
    <div class="bottom-bar"> 
    <div class="showreel"> 
      <div class="seemore"> 
       <p>SEE MORE</p> 
       <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i> 
      </div> 
      <div class="seeour">  
      <p>SEE OUR SHOWREEL</p> 
      <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i> 
      </div> 
     </div> 
    </div> 

</div> 

CSS

.container{ 
     width: 100%; 
     height: 420px; 
     background: url('http://i.imgur.com/5tj6S7Or.jpg') no-repeat top center; 
     position: relative; 
    } 
    .bottom-bar{ 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
     background: rgba(0,0,0,0.7); 
     height: 50px; 
    } 
    .showreel { 
     width: 960px; 
     margin: 0 auto; 
     text-align: left; 
     font-size: 15px; 
     color: #ffffff; 
    } 

    .seemore, 
    .seeour{ 
     display: inline-block; 
    } 

    .seeour { 
     float: right; 
    }