JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="css/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<header>
<div class="upper-line-row">
<div class="logo">
<div class="logo-wrapper"><a href="#"><span>dart</span><br>service manager</a></div>
</div>
<div class="menu-list">
<a href="">Home</a>
<a href="">Service</a>
<a href="">Extension</a>
<a href="">Pricing</a>
<a href="">Help</a>
</div>
<div class="header__ulr__register">
<a href="">sign up</a>
</div>
</div>
<div class="header__main-line">
<div class="header__ml__intro-row">
<h1>lorem Ipsum
Dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamc</p>
<div class="hml__intro-buttons" class="text">
<a href="" class="hmli-b__btn-purchase button">buy now</a>
<a href="" class="hmli__btn-demo button">try for free</a>
</div>
</div>
<div class="hml__video-container" class="video-container"><div class="video-button"></div>
<video class="hml__video" src=""></video></div>
</div>
</header>
<section class="easyNuseful">
<div class="easyNuseful__title-row">
<h1 class="title">Easy & Useful</h1>
<h2>Project Management Tool</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p></div>
</p>
<div class="easyNuseful__icons-row">
<div class="icon_calendar icon">
<div class="icon_calendar__image"></div>
<h3>Title Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur<br>adipisicing elit, sed do eiusmod tempor...
CSS
// проблема со строки 545
@import "nullstyle.scss";
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
font-family: 'Raleway', sans-serif;
& a {
color: #fff;
}
}
p {
font-size: 15px;
}
.wrapper {
max-width: 1600px;
margin: 0px auto;
cursor: default;
}
.title {
font-size: 45px;
font-weight: 600;
text-align: center;
color: #061e37;
}
.video-container {
position: relative;
}
.button {
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.button_getStarted {
margin: 78px 0 0 15px;
border-radius: 5px;
box-shadow: 0px 5px 5px 0 rgba(0, 0, 0, 0.15);
width: 150px;
height: 55px;
font-size: 15px;
text-align: center;
padding: 2px 0 0 2px;
font-weight: bold;
text-transform: uppercase;
transition: color 300ms ease 0s;
&:hover {
color: #061e37;
}
}
header {
color: #fff;
text-decoration-color: #fff;
min-width: 100%;
height: 750px;
background: url(../img/BG.png) no-repeat center;
padding: 50px 80px 0 80px;
}
.upper-line-row {
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
user-select: none;
}
.logo {
flex: 1 1 33.333%;
font-size: 15px;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
& .logo-wrapper span {
opacity: 0.8;
font-weight: 600;
}
&::before {
content: url(../img/dartLogo.png);
position: absolute;
margin-top: -2px;
}
}
.logo-wrapper {
padding-left: 42px;
}
.menu-list {
flex: 0 1 441px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-top: 0px;
font-size: 15px;
font-weight: 600;
line-height: 1.67;
color: #ffffff;
& a {
transition: color 400ms ease;
&:hover {
color: #061e37;
}
}
}
.menu-list_footer {
flex: 0 1 441px;
display: flex;
flex-direction: row;
align-items: center;
justify-content:...
JavaScript
$(document).ready(function() {
$('.testimonals__comments').slick()
});