-
Guest, before posting your code please take these rules into consideration:
- It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
- You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
- Don't share a wall of code. All we want is the problem area, the code related to your issue.
To learn more about how to use our BBCode feature, please click here.
Thank you, Code Forum.
HTML & CSS What tools should I use for color matching?
index.html
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>История лагеря</title>
</head>
<body>
<div class="history">
<div class="history__nav">
<div class="history__titles">
<div class="history__title">История создания</div>
<div class="history__sub-title">План-схема лагеря</div>
</div>
<div class="history__btns">
<a href="#" class="history__btn"> <span>План-схема лагеря</span>
<img src="./img/btn.png" alt="">
</a>
<a href="#" class="history__btn"><span>В главное меню </span>
<img src="./img/btn.png" alt="">
</a>
</div>
</div>
<div class="text">
<div class="history__text">
<div class="history__first-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet velit exercitationem commodi
distinctio necessitatibus esse atque. Libero, ducimus cumque! Aperiam nemo natus ipsa consequuntur
facilis similique deleniti, sunt omnis repudiandae mollitia possimus harum provident ullam nesciunt
tenetur fugiat fugit, at esse blanditiis pariatur eum. Sed inventore laudantium corporis architecto
eaque dolore error fugiat quia adipisci nesciunt totam modi nemo quam reiciendis eius eveniet nisi,
placeat omnis delectus maxime aliquid cumque.</p>
</div>
<div class="history__second-text">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias voluptatem veritatis magnam impedit
asperiores ab vero accusamus quas, ratione repellendus provident qui saepe iure dolores praesentium
itaque exercitationem nostrum esse eius soluta ex? Nemo quasi recusandae nostrum, quos,
exercitationem
cumque assumenda ab corrupti itaque facere ad laudantium possimus aliquam tenetur qui eum officiis
iure fuga sunt. Accusamus accusantium iusto culpa.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero optio voluptates officia esse,
quidem
quo sint distinctio. Culpa quas cupiditate, amet officiis est eius libero architecto delectus.
Voluptatem, asperiores debitis provident, odio vel itaque suscipit quasi ullam quam nam ducimus.
</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias voluptatem veritatis magnam impedit
asperiores ab vero accusamus quas, ratione repellendus provident qui saepe iure dolores praesentium
itaque exercitationem nostrum esse eius soluta ex? Nemo quasi recusandae nostrum, quos,
exercitationem
cumque assumenda ab corrupti itaque facere ad laudantium possimus aliquam tenetur qui eum officiis
iure fuga sunt. Accusamus accusantium iusto culpa.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero optio voluptates officia esse,
quidem
quo sint distinctio. Culpa quas cupiditate, amet officiis est eius libero architecto delectus.
Voluptatem, asperiores debitis provident, odio vel itaque suscipit quasi ullam quam nam ducimus.
</p>
</div>
</div>
<div class="line"></div>
</div>
<div class="history__gallery">
<div class="history__image">
<img src="./img/01.jpg" alt="image of building">
</div>
<div class="history__image">
<img src="./img/02.jpg" alt="image of tree">
</div>
<div class="history__image">
<img src="./img/03.jpg" alt="image of building">
</div>
</div>
</div>
</body>
</html>style.scss
CSS:
@import "_nullstyle.scss";
body{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.history {
background-color: #fae1c4;
padding: 20px 10px 10px 10px;
height: 100vh;
min-width: 100vh;
display: flex;
overflow: hidden;
}
.history__nav {
flex: 1 1 17%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.history__title {
color:#6d614a;
margin-bottom: 40px;
position: relative;
font-size: 32px;
}
.history__sub-title {
position: relative;
font-size: 25px;
}
.history__sub-title::before{
content: '';
position: absolute;
display: block;
width: 260px;
height: 1px;
background-color: black;
top: 170%;
left: -35px;
}
.history__btn {
position: relative;
display: inline-flex;
font-size: 20px;
padding: 20px 29px 35px 25px;
border-radius: 20px;
text-align: center;
cursor: pointer;
overflow: hidden;
}
.history__btn img{
position: absolute;
left: -45px;
top: -60px;
width: 600px;
}
.history__btn span{
z-index: 20;
}
.text{
padding-top: 50px;
flex: 1 1 50%;
padding-bottom: 60px;
padding-right: 50px;
}
.history__text {
line-height: 150%;
height: 73vh;
overflow-y: scroll;
overflow-x: hidden;
}
.line{
margin-left: 50%;
height: 1px;
width:45%;
background-color: black;
}
.history__text {
margin-bottom: 20px;
}
.history__second-text {
}
.history__gallery {
flex: 1 1 20%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.history__image{
min-width: 100%;
position: relative;
padding-bottom: 55%;
margin-bottom: 15px;
}
.history__image img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}_nullstyle.scss
CSS:
/*Обнуление*/
* {
padding: 0;
margin: 0;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus,
:active {
outline: none;
}
a{
color: inherit;
font-size: inherit;
}
a:focus,
a:active {
outline: none;
}
nav,
footer,
header,
aside {
display: block;
}
html,
body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 20px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*--------------------*/style.css
CSS:
@charset "UTF-8";
/*Обнуление*/
* {
padding: 0;
margin: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus,
:active {
outline: none;
}
a {
color: inherit;
font-size: inherit;
}
a:focus,
a:active {
outline: none;
}
nav,
footer,
header,
aside {
display: block;
}
html,
body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 20px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*--------------------*/
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.history {
background-color: #fae1c4;
padding: 20px 10px 10px 10px;
height: 100vh;
min-width: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.history__nav {
-webkit-box-flex: 1;
-ms-flex: 1 1 17%;
flex: 1 1 17%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.history__title {
color: #6d614a;
margin-bottom: 40px;
position: relative;
font-size: 32px;
}
.history__sub-title {
position: relative;
font-size: 25px;
}
.history__sub-title::before {
content: '';
position: absolute;
display: block;
width: 260px;
height: 1px;
background-color: black;
top: 170%;
left: -35px;
}
.history__btn {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
font-size: 20px;
padding: 20px 29px 35px 25px;
border-radius: 20px;
text-align: center;
cursor: pointer;
overflow: hidden;
}
.history__btn img {
position: absolute;
left: -45px;
top: -60px;
width: 600px;
}
.history__btn span {
z-index: 20;
}
.text {
padding-top: 50px;
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-bottom: 60px;
padding-right: 50px;
}
.history__text {
line-height: 150%;
height: 73vh;
overflow-y: scroll;
overflow-x: hidden;
}
.line {
margin-left: 50%;
height: 1px;
width: 45%;
background-color: black;
}
.history__text {
margin-bottom: 20px;
}
.history__gallery {
-webkit-box-flex: 1;
-ms-flex: 1 1 20%;
flex: 1 1 20%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.history__image {
min-width: 100%;
position: relative;
padding-bottom: 55%;
margin-bottom: 15px;
}
.history__image img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
}
D
Deleted member 2829
Guest
Ok. I see this in your code
However, the background color of your "Task" image is
background-color: #fae1c4; which is indeed the background color of your "Result" image.However, the background color of your "Task" image is
#EFEBE0. Why didn't you paste that value ? How did you get by #fae1c4 ? Note, I used the Screen Color Picker function of Faststone Capture for Windows.
