<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>

< <

> >

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.

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!

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!