<About/>

sekcje i łączenie tekstu z grafiką

Paweł Grabarz

W portfolio nie może zabraknąć sekcji o tobie.

Warto w niej zawrzeć najważniejsze informacje o sobie oraz zdjęcie.

Dajmy sobie trochę miejsca do pracy

<section class="about" id="about">
  <div class="about__content">
  </div>
</section>

.about {
  / * tło */
  background-color: #f8f8f8;
}

.about__content {
  / * szerokość - responsive! */
  max-width: 1024px;
  min-height: 100px;
  / * wyśrodkowanie */
  margin-left: auto;
  margin-right: auto;
}

<section class="about" id="about">
  <div class="about__content">
    <h2 class="about__title">About</h2>
  </div>
</section>

.about__title {
  margin-top: 0;
  margin-bottom: 32px;
  padding-top: 64px;
  color: #d2d0d3;
  font-family: "Satisfy", cursive;
  font-size: 72px;
  text-align: center;
  cursor: default;
}

<section class="about" id="about">
  <div class="about__content">
    <h2 class="about__title">About</h2>
    <p class="about__desciption">
      Jestem Fajna! Tutaj piszę coś o sobię.
      Na przykład Lorem ipsum dolor sit amet.
    </p>
  </div>
</section>

.about__desciption {
  color: #929093;
  font-family: "Raleway", sans;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
}
.about__desciption:first-letter {
  font-size: 200%;
}

Tagi tekstowe

bloki

inline

<h1> .. <h6> - nagłówki różnego stopnia

<p> - akapit

 

<strong> - ważny fragment - semantyczny "bold"

<em> - emfaza - semantyczny "italic" 

<h1>Tagi tekstowe</h1>
<h3>bloki</h3>
<p>
    &lt;h1&gt; .. &lt;h6&gt; - nagłówki różnego stopnia <br>
    &lt;p&gt; - akapit
</p>
<h3>inline</h3>
<p>
  &lt;strong&gt; - <strong>ważny fragment</strong> - semantyczny "bold"<br>
  &lt;em&gt; - <em>emfaza</em> - semantyczny "italic"
</p>

< &lt;

> &gt;

© &copy;

Float

.about__avatar-frame

.about__description

Candy biscuit pudding gummies jelly beans pastry brownie. Cake brownie bear claw gingerbread. I love sugar plum wafer apple pie jelly beans cake. Caramels marshmallow macaroon topping oat cake candy dessert. Sweet roll cake sesame snaps caramels cotton candy pudding pie gummi bears. Pastry fruitcake candy canes chocolate bar.

 

Candy biscuit pudding gummies jelly beans pastry brownie. Cake brownie bear claw gingerbread. I love sugar plum wafer apple pie jelly beans cake. Caramels marshmallow macaroon topping oat cake candy dessert. Sweet roll cake sesame snaps caramels cotton candy

 

pudding pie gummi bears. Pastry fruitcake candy canes chocolate bar.

.about__avatar-frame {
  float: left;
  margin-right: 24px;
  background-color: #fefefe;
}
<div class="about_description">

</div>
<div class="about_description">
    <div class="about_avatar-frame"></div>
</div>
.about__desciption:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

Float

.about__avatar-frame

.about__description

.about__avatar-frame {
  float: left;
  margin-right: 24px;
  background-color: #fefefe;
}

clear: <left | right | both>;

:after

 clear!

Candy biscuit pudding gummies jelly beans pastry brownie. Cake brownie bear claw gingerbread. I love sugar plum wafer apple pie jelly beans cake. Caramels marshmallow macaroon topping oat cake candy dessert. Sweet roll cake sesame snaps caramels cotton candy pudding pie gummi bears. Pastry fruitcake candy canes chocolate bar.

 

Candy biscuit pudding gummies jelly beans pastry brownie. Cake brownie bear claw gingerbread. I love sugar plum wafer apple pie jelly beans cake. Caramels marshmallow macaroon topping oat cake candy dessert. Sweet roll cake sesame snaps caramels cotton candy pudding pie gummi bears. Pastry fruitcake candy canes chocolate bar.

 

Float zajmie najmniej miejsca, jak to możliwe

<section class="about" id="about">
  <div class="about__content">
    <h2 class="about__title">About</h2>
    <div class="about__avatar-frame">
      <img src="images/avatar.png" alt="Avatar" class="about__avatar" />
    </div>
    <p class="about__desciption">
      Powder brownie I love sugar plum. Gummi bears carrot cake sugar plum
      cupcake lemon drops chocolate cake. Chupa chups topping marshmallow I love!
    </p>
  </div>
</section>
<h2 class="about__title">Carrot!</h2>
<div class="about__avatar-frame">
  <img src="images/avatar.png" alt="Avatar" class="about__avatar" />
</div>
<p class="about__desciption">
  Carrot, carrot, carrot, carrot.
  Carrot, carrot, carrot, carrot.
  Carrot, carrot, carrot, carrot.
  Mushroom, Mushroom!
</p>

.about__avatar-frame {
  float: left;
  margin-right: 24px;
  padding: 15px 15px 30px;
  background-color: #fefefe;
  border: 1px solid #d2d0d3;
}

.about__avatar {
  max-height: 180px;
}
.about__desciption:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

Gotowe!

Box

Powodzenia!

podgląd wynikowy

Utwórz sekcję "O mnie" zawierającą:

  • Porywający nagłówek
  • Opis, którzy przekona wymagającego HRowca
  • Piękne zdjęcie

Pomogą Ci w tym:

  • Tagi semantycznego tekstu (h1, strong, em...)
  • Css float
  • clearfix
  • Wasi mentorzy!

<About/>

By Pawel Grabarz

Made with Slides.com

<About/>

  • 1,240

More from Pawel Grabarz