JSFiddle - React, Tailwind, and code Playground

by Berzhan_Alisher

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/main.css">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
	<title>Agnecy</title>
</head>
<body>

<header class="header">
	<div class="container">
		<div class="header__inner">
			<div class="header__logo">Our Strong Organaisation</div>
			<nav class="nav">
				<img class="dark__rectangle" src="img/dark rectangle.jpg" alt="">	
				<a class="nav__link" href="#">Home</a>
				<a class="nav__link" href="#">Portfolio</a>
				<a class="nav__link" href="#">About Us</a>
				<a class="nav__link" href="#">Contact</a>
			</nav>
		</div>	
	</div>
</header>

<div class="intro">
	<div class="container">
		<div class="intro__inner">
			<div class="paragraph__content">
				<p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed do</p>
				<p>eiusmod tempor incididunt  ut labore et. ectetur adig ipis cing elit,<p>
				<p>sed do eiusmod tempor incididunt.</p>
			</div>
			<div class="button">
				<img src="img/red rectangle.png" alt="">
				<a class="button__link" href="#">Contact Us</a>
			<div class="video">
				<img src="img/video.jpg" alt="">
			</div>
			</div>
		</div>
	</div>
</div>

</body>
</html>

CSS

body {
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

/* Container */
.container {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
}

/* Header */
.header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-top: 30px;
}

.header__inner {
  display: flex;
  flex-direction: row;
}

.header__logo {
  font-size: 85px;
  font-weight: 800;
  color: #000000;
  position: relative;
  top: 160px;
  left: 95px;
}

/* Nav */
.nav {
  font-size: 14px;
  text-transform: uppercase;
  padding-bottom: 111px;
}

.nav__link { 
  margin: 0 31px;
  text-decoration: none;
  color: #e0e0e0;
  transition: color 0.3s linear;
  position: relative;
  bottom: 54px;
  left: 300px;
}

.nav__link:hover {
  color: #ff3f40;;
}

/* Intro */
.intro {
  width: 100%;
  height: 100vh;
  background: url("../img/intro.jpg") center no-repeat;
  background-size: cover;
}

.intro__ {
  max-width: 100%;
  position: relative;
}

.intro__inner {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 410px;
  left: 160px;
}

/* Content and Button */
.paragraph__content {
  margin-bottom: 40px;
  color: #6f6d6d;
}

.button__link {
  margin: 0 auto;
  color: #ffffff;
  position: relative;
  right: 167px;
  bottom: 20px;
  font-size: 21px;
  text-decoration: none;
}

.video {
  position: absolute;
  left: 780px;
  bottom: 64px;
}