Skip to content

Commit

Permalink
Pre-final2
Browse files Browse the repository at this point in the history
  • Loading branch information
KostiLomit committed Feb 8, 2024
1 parent 31dde0d commit 0b81b5d
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 4 deletions.
Binary file added 5/assets/img/1b8e02b8e5512add87be4876daf3d9ce.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 5/assets/img/417d66413488cfcee2e9ff52bd88b3c3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 5/assets/img/edf2c9e9123f9912811abe2f770867da.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
116 changes: 113 additions & 3 deletions 5/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
box-sizing: border-box;
font-size: 100%;
list-style-type: none;
font-family: 'Open Sans', sans-serif;
font-family: 'Open-Sans', sans-serif;
}
@font-face {
font-weight: 400;
Expand All @@ -18,11 +18,121 @@
}
@font-face {
font-weight: 400;
font-family: sans-serif;
font-family: Open-Sans;
src: url(../assets/fonts/OpenSans/static/OpenSans_Condensed-Regular.ttf);
}
@font-face {
font-weight: 700;
font-family: sans-serif;
font-family: Open-Sans;;
src: url(../assets/fonts/OpenSans/static/OpenSans-Bold.ttf);
}
.customers {
margin-top: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.section-titile {
text-align: center;
text-transform: uppercase;
font-size: 36px;
}
h2 {
font-family: Raleway;
font-weight: 400;
}
.section-titile::after {
content: "";
width: 170px;
height: 1px;
background: #EC7979;
display: inline-block;
margin: 40px auto;
}
.section-subtitle {
text-align: center;
margin-bottom: 83px;
font-size: 18px
}
p {
font-family: Raleway;
font-weight: 400;
}
.item-list {
display: flex;
justify-content: center;
padding-bottom: 83px;
/*flex-wrap: wrap;*/
}
.item {
max-width: 370px;
margin-left: 15.5px;
margin-right: 15.5px;
text-align: center;

}
.item:first-child {
margin-left: 0px;
}
.item:last-child {
margin-right: 0px;
}
.coment {
padding: 38px 25px;
background-color:#E2E2E2;
border-radius: 10px;
position: relative;
}
p.comment-text {
color: #86878B;
font-family: Raleway;
font-size: 18px;
font-weight: 400;
}
.coment::after {
content: "";
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid #E2E2E2;
}
.person {
max-width: 370px;
display: flex;
margin-top: 46px;
align-items: center;
}
/*.photo {
justify-content: left;
}*/
img.comment-photo {
width: 70px;
height: 70px;
border-radius: 100px;
}
.info {
margin-left: 30px;
flex-direction: column;
/*align-items: flex-start;*/
}
p.name {
font-family: "Open-Sans";
font-size: 24px;
font-style: normal;
font-weight: 700;
padding-bottom: 18px;
}
p.position {
font-family: Raleway;
font-size: 18px;
font-style: normal;
font-weight: 400;
text-align: left;
}
70 changes: 69 additions & 1 deletion 5/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,74 @@
<title>What out customers</title>
</head>
<body>

<section class="customers">
<div class="container">
<div class="section-titile">
<h2>what our customers are saying</h2>
</div>
<div class="section-subtitle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item-list">
<div class="item">
<div class="coment">
<p class="comment-text">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Doloribus
accusamus expedita repellat similique
odio aspernatur ex, architecto eaque
quo suscipit.
</p>
</div>
<div class="person">
<div class="photo">
<img class="comment-photo" src="../5/assets/img/1b8e02b8e5512add87be4876daf3d9ce.png" >
</div>
<div class="info"><div class="name-of-person"><p class="name">Davis Rhiel Madsen</p></div>
<div class="hold-position"><p class="position">Manager</p></div></div>

</div>
</div>
<div class="item">
<div class="coment">
<p class="comment-text">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Doloribus
accusamus expedita repellat similique
odio aspernatur ex, architecto eaque
quo suscipit.
</p>
</div>
<div class="person">
<div class="photo">
<img class="comment-photo" src="../5/assets/img/417d66413488cfcee2e9ff52bd88b3c3.png">
</div>
<div class="info"><div class="name-of-person"><p class="name">Jaydon Rosser</p></div>
<div class="hold-position"><p class="position">Manager</p></div></div>

</div>
</div>
<div class="item">
<div class="coment">
<p class="comment-text">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Doloribus
accusamus expedita repellat similique
odio aspernatur ex, architecto eaque
quo suscipit.
</p>
</div>
<div class="person">
<div class="photo">
<img class="comment-photo" src="../5/assets/img/edf2c9e9123f9912811abe2f770867da.png">
</div>
<div class="info"><div class="name-of-person"><p class="name">Cooper Dorwart</p></div>
<div class="hold-position"><p class="position">Manager</p></div></div>

</div>
</div>
</div>
</div>
</section>
</body>
</html>

0 comments on commit 0b81b5d

Please sign in to comment.