Как сделать окно разговора
265
11 марта 2018, 21:06
Привет! Мне нужно сделать так как на скриншоте
У меня сейчас вот так
Как добавить этот маленький треугольник или есть другие способы сделать это?
@import "vars"
@import "fonts"
@import "libs"
ul
list-style: none
.Companyname
font-family: $PoiretOne
color: $white
font-size: 30px
margin-top: 74px
padding-left: 174px
margin-bottom: 0px
span:last-child
color: #C9C9C6
font-size: 28px
.first-block
background-color: $bg-gray
.Top-menu
display: flex
margin-top: 75px
margin-bottom: 0px
li
margin-left: 15px
a
color: $white
font-size: 13px
font-family: $MontserratRegular
text-decoration: none
text-transform: uppercase
&::after
content: ''
width: 100%
height: 2px
display: block
background-color: $white
transform: scale(0)
transition: all 0.2s
&:hover
&::after
transform: scale(1)
.BigGrayText
color: $white
font-size: 50px
margin-left: 172px
margin-top: 196px
font-family: $CabinRegular
width: 640px
.first-block-2
background-color: $bg-gray
button
background-color: $green
width: 224px
height: 56px
outline: none
border: none
color: $white
text-transform: uppercase
font-family: $LatoBold
font-size: 13px
border-radius: 5px
margin-top: 60px
.SmallGrayText
font-size: 15px
width: 574px
margin-left: 174px
font-family: $LatoLight
color: $white
line-height: 32px
margin-bottom: 272px
.second-block
background-color: $white
margin-bottom: 100px
&-bigtext
font-family: $CabinRegular
font-size: 48px
width: 100%
color: $very-dark
text-align: center
margin-top: 128px
.second-block-2
margin-left: 176px
margin-right: 176px
&-icon
font-size: 30px
color: $white
width: 65px
height: 65px
text-align: center
background-color: $green
border-radius: 50%
line-height: 62px
transform: translateY(-30px)
&-iconcontainer
display: flex
justify-content: center
width: 100%
&-main
display: flex
justify-content: center
flex-direction: column
flex-wrap: wrap
width: 280px
border: 1px solid #f2f2f2
&-bigtext
font-family: $LatoBold
font-size: 18px
color: $very-dark
text-align: center
text-transform: uppercase
&-smalltext
font-family: $LatoRegular
font-size: 16px
text-align: center
.third-block
background-color: $gray
&-bigtext
font-family: $CabinRegular
color: $very-dark
font-size: 48px
margin-bottom: 40px
width: 510px
margin-top: 128px
&-text
font-family: $LatoRegular
color: $text-gray
font-size: 16px
margin-bottom: 20px
width: 510px
&-button
font-family: $LatoBold
font-size: 15px
text-transform: uppercase
color: $very-dark
border: 1px solid $very-dark
border-radius: 5px
padding: 15px
width: 232px
text-align: center
margin-bottom: 130px
.ClientsBigText
font-family: $CabinRegular
font-size: 48px
color: $very-dark
text-align: center
width: 100%
margin-top: 128px
.ClientMain
width: 500px
.ClientText
font-family: $LatoRegular
font-size: 16px
color: $text-gray
border: 2px solid #f2f2f2
padding: 15px
.ClientPerson
text-align: right
float: left
width: 83%
span:first-child
font-family: $LatoBold
font-size: 15px
color: $very-dark
span:last-child
font-family: $LatoRegular
font-size: 13px
color: #666666
.ClientImage
border-radius: 50%
margin-left: 15px
@import "media" <html lang="ru">
<head>
<meta charset="utf-8">
<base href="/">
<title>CompanyName</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Template Basic Images Start -->
<meta property="og:image" content="path/to/image.jpg">
<link rel="icon" href="img/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon-180x180.png">
<!-- Template Basic Images End -->
<!-- Custom Browsers Color Start -->
<meta name="theme-color" content="#FFF">
<!-- Custom Browsers Color End -->
<script defer src="libs/fontawesome-free-5.0.8/svg-with-js/js/fontawesome-all.min.js"></script>
<link rel="stylesheet" href="css/main.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row first-block align-items-center">
<p class="Companyname col-7">
<span>company</span>
<span>name</span>
</p>
<ul class="col-5 Top-menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<div class="row first-block-2">
<p class="BigGrayText">
We’re here to create your online presense and style
</p>
<p class="SmallGrayText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis orci dapibus risus dignissim, viverra pellentesque
arcu ullamcorper. Mauris a tincidunt lectus. Proin nec venenatis quam.
<br>
<button>start today with us</button>
</p>
</div>
<div class="row second-block">
<p class="second-block-bigtext">Features you’ll love</p>
</div>
<div class="row second-block-2">
<div class="col-4">
<div class="second-block-2-main">
<div class="second-block-2-iconcontainer">
<p class="second-block-2-icon">
<i class="fas fa-user"></i>
</p>
</div>
<p class="second-block-2-bigtext">Personal touch</p>
<p class="second-block-2-smalltext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra
lorem.
</p>
</div>
</div>
<div class="col-4">
<div class="second-block-2-main">
<div class="second-block-2-iconcontainer">
<p class="second-block-2-icon">
<i class="fas fa-flag"></i>
</p>
</div>
<p class="second-block-2-bigtext">Unique solutions</p>
<p class="second-block-2-smalltext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra
lorem.
</p>
</div>
</div>
<div class="col-4">
<div class="second-block-2-main">
<div class="second-block-2-iconcontainer">
<p class="second-block-2-icon">
<i class="fas fa-paint-brush"></i>
</p>
</div>
<p class="second-block-2-bigtext">Help in promotion</p>
<p class="second-block-2-smalltext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra
lorem.
</p>
</div>
</div>
</div>
<div class="row justify-content-end third-block">
<div class="col-6">
<p class="third-block-bigtext">Our Short Story</p>
<p class="third-block-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra
lorem. .
</p>
<br>
<p class="third-block-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra
lorem.
</p>
<br>
<p class="third-block-button">More about our team</p>
</div>
</div>
<div class="row">
<p class="ClientsBigText">Our Clients Says</p>
</div>
<div class="row justify-content-center">
<div class="col-5">
<div class="ClientMain">
<p class="ClientText">
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
</p>
<p class="ClientPerson">
<span>Joe Doe</span>
<br>
<span>Creative Deirector at Gmoogle.com</span>
</p>
<img class="ClientImage" src="img/photo-person.png" alt="ClientPhoto">
</div>
</div>
<div class="col-5"></div>
</div>
</div>
<script src="js/scripts.min.js"></script>
</body>
</html> Answer 1
.block__hint {
position: relative;
height: 150px;
width: 150px;
background: #777;
border: 1px solid red;
}
.block__hint::after {
display: block;
content: "";
position: absolute;
height: 30px;
width: 30px;
background: #777;
border-left: 1px solid red;
border-top: 1px solid red;
bottom: -16px;
right: 20px;
transform: rotate(-135deg);
}<div class="block__hint">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit assumenda illum ab fuga error, exercitationem iure dolorem! Assumenda, enim architecto!
</div>Answer 2
.block {
position: relative;
height: 50px;
width: 50px;
margin: 250px auto 0;
background: #777;
border-radius: 50%;
cursor: pointer;
&:hover .block__hint {
opacity: 1;
}
&__hint {
position: absolute;
top: -150px;
left: -100%;
width: 200px;
padding: 20px;
border: 1px solid #000;
opacity: 0;
transition: all .5s;
}
}<div class="block">
<div class="block__hint">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit assumenda illum ab fuga error, exercitationem iure dolorem! Assumenda, enim architecto!
</div>
</div>
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47554 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30492 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23626 visits
- Как через css изменить цвет png изображения? 10348 visits
- Blob video url download 9956 visits
- Php curl запрос через прокси с авторизацией 9208 visits
- Работа с captcha vk api 8091 visits
© "hostciti.net" 19.11.2024 | 20:19