Вы находитесь на странице: 1из 5

<div class="my-section">

<h1>Marko Pantovic</h1>
<span class="border"></span>
<div class="ps">
<a href="#"><img src="slike/jaaa.jpeg"></a>

</div>
<div class="section">
<span class="name">About me</span>
<span class="border"></span>
<p class="paragraf">Hi there,welcome to Panta Designs!I'm a 2nd year
student at Higher Education Techincal School of Proffesional Studies located in
Novi Sad.I love to code,my speciality is backend programming such as SQL,PHP,C#,but
also in my free time i like to build professional looking websites.If you choose my
service,i promise that you wont regret selecting me,I'm affordable and open for
ideas!Also you get free web-maintainance and 24/7 technical support,all around the
globe. </p>

</span>
<span class="name">My moto</span>
<span class="border"></span>
<p class="moto"><cite>My main goal is product quailty,service,afordable
price and after all care for my clients.It's an easy formula <span
class="citat">YOUR SATISFACTION=MY SUCCESS!</span></cite> </p>

</span>

<span class="name">Vision</span>
<span class="border"></span>
<p><cite>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Debitis, sequi. Voluptate quibusdam ipsam tenetur similique non vel magni at
nostrum sapiente asperiores nam suscipit dicta impedit dolorem deserunt et quam quo
dolor quas omnis laudantium, velit! Inventore dolorum, ex, unde deserunt voluptatum
at sequi. Quae quasi neque, quia adipisci recusandae quos? Eum quisquam doloremque
ratione libero facere soluta! Provident maiores dolores unde dicta assumenda iste
excepturi! Explicabo aliquam, dolore mollitia quae temporibus? Nostrum error iste
minima labore, impedit est quos consequatur neque fuga, debitis, iusto fugiat
placeat maxime perspiciatis laborum adipisci quia accusantium! Molestiae porro
adipisci, laudantium natus dolor quasi. </cite></p>

</span>
</div>
</div>

/*about section*/
#about .my-section{
overflow: hidden;
text-align: center;
background:#34495e;
padding: 60px;
}
#about*{
margin: 0;
padding: 0;

#about .my-section h1{


text-transform: uppercase;
margin-bottom: 40px;
color: white;
font-size: 28px;
}
#about .border{
display: block;
margin: auto;
width: 160px;
height: 3px;
background:#3498db;
margin-bottom: 5%;
}
#about .ps{
margin-bottom: 40px;
}
#about .ps a{
display: inline-block;
margin:0px 30px;
width: 160px;
height: 160px;
overflow: hidden;
border-radius: 50%;

}
#about .ps a img{
width: 100%;
filter: grayscale(100%);
transition:0.4s all;

}
#about .ps a:hover >img{
filter:none;
}
#about .section{
width: 600px;
margin: auto;
font-size: 20px;
color: white;
text-align: justify;
word-break: break-word;
word-spacing:-4px;
overflow: hidden;
animation: sirenje 1s;

#about .name{
display: block;
margin-bottom: 30px;
text-align: center;
text-transform: uppercase;
font-size: 2vw;///////////////

}
#about span.name{
animation:mojaanimacija 2s;
}
@keyframes mojaanimacija {
0% {
letter-spacing: -10px;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}

#about .citat{
color: #111;
font-weight: bold;
text-transform: uppercase;
}

NOVI NACIN
<div class="split-container">
<div class="split-item split-left">
<div class="split-image">
<img src="slike/jaaa1.jpeg">
</div>
<h3>About Marko</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod sequi dolorum
praesentium et voluptas sunt sed beatae aspernatur nobis ut rem, excepturi error
atque sapiente, adipisci aut, dolor. Sequi incidunt, voluptatum earum tempora
dolores officia beatae ea, iusto molestias laborum, quaerat! Beatae omnis vero
exercitationem veritatis mollitia id quo, cumque quod rerum sint fugiat, officiis
modi ab porro dignissimos laboriosam maiores quam dolores cupiditate aliquam labore
hic. Cupiditate in iure, voluptates mollitia illo corporis ea reiciendis, tempore
dolorum earum dignissimos nemo ad suscipit nisi quasi temporibus debitis obcaecati
magni doloribus, aut quis optio. Adipisci vero, necessitatibus minus id nobis,
delectus.
</p>
</div>
<div class="split-item split-right">
<div class="split-image">
<img src="slike/bellamoja1.jpeg">
</div>
<h3>About Bella</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod sequi dolorum
praesentium et voluptas sunt sed beatae aspernatur nobis ut rem, excepturi error
atque sapiente, adipisci aut, dolor. Sequi incidunt, voluptatum earum tempora
dolores officia beatae ea, iusto molestias laborum, quaerat! Beatae omnis vero
exercitationem veritatis mollitia id quo, cumque quod rerum sint fugiat, officiis
modi ab porro dignissimos laboriosam maiores quam dolores cupiditate aliquam labore
hic. Cupiditate in iure, voluptates mollitia illo corporis ea reiciendis, tempore
dolorum earum dignissimos nemo ad suscipit nisi quasi temporibus debitis obcaecati
magni doloribus, aut quis optio. Adipisci vero, necessitatibus minus id nobis,
delectus. </p>

</div>
</div>

#about .split-container {
flex-direction: row;
display: flex;

#about .split-item {
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
padding: 3em 5em 6em 5em;
}

#about .split-right {
order: -1;
color: black;
background:white;///
}

#about .split-left {
background: gray;
color: black;
}

#about .split-image img {


width: 100%;
height: auto;
margin: 2em auto;
border-radius: 50%;
max-width: 150px;
display: block;
}

#about .split-item h3 {
text-align: center;
margin: 0 0 2em 0;
}

#about .split-item p {
text-align: justify;
margin: 0 auto;
max-width: 500px;
line-height: 1.5;
}

Оценить