materializeCSSでHTMLのやや左揃えにする方法

Question

これは2つの部分からなる質問です。私はこのモックアップをエミュレートしようとしています。

私はわずかに左のテキストの整列と同様に灰色の円領域内の円形画像を追加を行う方法はかなりわかりません。私はそれがモックアップに遠隔地近くに見えるようにするにはどうすればよい

：

<div class="index-banner color2"> 
 
    <div class="section"> 
 
     <div class="row"> 
 
     <div class="col s12 center"> 
 
      <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> 
 
      <p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> 
 
      </div> 
 
     <div class="row center"> 
 
      <a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a> 
 
      <span class="divider2"/> 
 
      <a href="Hackathons.html" class="btn-large waves-effect waves-light green lighten-1">Hackathons</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

それは次のようになります。現在、この分野での私のコードは次のようになりますか？ （フォントの色とサイズは無視してください）

Answer 1

以下のスニペットをフルページモードで実行します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/> 
 
<div class="index-banner color2"> 
 
    <div class="section"> 
 
     <div class="row"> 
 
     <div class="col l8 s12 center"> 
 
      <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> 
 
      <p class="left-align light ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a s;</p> 
 
      
 
     <div class="row center"> 
 
      <a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a> 
 
      <span class="divider2"/> 
 
      <a href="Hackathons.html" class="btn-large waves-effect waves-light green lighten-1">Hackathons</a> 
 
     </div> 
 
     </div> 
 
     <div class="col l4 s12 center"><img src="https://dummyimage.com/200x200/000/fff" class="circle"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>