uyriq/dunequote.markdown

## dunequote.markdown

      
    Raw
  

              dunequote.markdown
            
          
    duneQuote

A Pen by uyriq on CodePen.
License.

  
## index.html
<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="./fonts/fonts.css" />
  <link rel="stylesheet" href="./style.css" />
  <script src="https://code.s3.yandex.net/react/libs/react.development.js"></script>
  <script src="https://code.s3.yandex.net/react/libs/react-dom.development.js"></script>
  <script src="https://code.s3.yandex.net/react/libs/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>

  <script type='text/jsx' src="task.jsx"></script>
</body>

</html>

## script.babel
const Quote = (props) => {
  return (
    <div className="fancy-quote">
      <p className='text'>{props.children}</p> {/* Переписать на props.children */}
      <span className='author'>{props.author}</span>
    </div>
  );
}


const DuneQuote = () => {
  return (
    <Quote
      author="Принцесса Ирулан «Избранные&nbsp;изречения Муад'Диба»"
      >
      Арракис учит «пониманию ножа», учит относиться к жизни так: отрезать всё несовершенное и незавершённое, говоря: «Вот теперь это совершенно и завершено — ибо кончается здесь».
    </Quote>
  );
}

ReactDOM.render(<DuneQuote />, document.querySelector('#root'));

## style.css
body {
  background: linear-gradient(
    220.43deg,
    #e6b980 0%,
    #e6b980 6.67%,
    #e6ba81 13.33%,
    #e6bb83 20%,
    #e7bc85 26.67%,
    #e7be88 33.33%,
    #e7c08c 40%,
    #e8c28f 46.67%,
    #e8c494 53.33%,
    #e9c697 60%,
    #e9c89b 66.67%,
    #e9ca9e 73.33%,
    #eacba0 80%,
    #eacca2 86.67%,
    #eacda3 93.33%,
    #eacda3 100%
  );
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.fancy-quote {
  width: 50%;
  height: 100vh;
  margin: 0 auto;
  font-family: "Spectral", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  color: #000;
  font-size: 24px;
  line-height: 32px;
  background-image: url("./images/dune.svg");
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: contain;
}

.text {
  text-align: left;
  margin: 0 auto 64px;
  padding: 168px 40px 0;
}

.author {
  display: block;
  margin: 0 0 0 auto;
  padding-right: 40px;
  text-align: right;
  max-width: 450px;
}

@media screen and (max-width: 1000px) {
  .fancy-quote {
    width: 100%;
  }
  .author {
    max-width: 65%;
  }
}
	<html>

	<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="./fonts/fonts.css" />
	<link rel="stylesheet" href="./style.css" />
	<script src="https://code.s3.yandex.net/react/libs/react.development.js"></script>
	<script src="https://code.s3.yandex.net/react/libs/react-dom.development.js"></script>
	<script src="https://code.s3.yandex.net/react/libs/babel.min.js"></script>
	</head>

	<body>
	<div id="root"></div>

	<script type='text/jsx' src="task.jsx"></script>
	</body>

	</html>
	const Quote = (props) => {
	return (
	<div className="fancy-quote">
	<p className='text'>{props.children}</p> {/* Переписать на props.children */}
	<span className='author'>{props.author}</span>
	</div>
	);
	}


	const DuneQuote = () => {
	return (
	<Quote
	author="Принцесса Ирулан «Избранные изречения Муад'Диба»"
	>
	Арракис учит «пониманию ножа», учит относиться к жизни так: отрезать всё несовершенное и незавершённое, говоря: «Вот теперь это совершенно и завершено — ибо кончается здесь».
	</Quote>
	);
	}

	ReactDOM.render(<DuneQuote />, document.querySelector('#root'));
	body {
	background: linear-gradient(
	220.43deg,
	#e6b980 0%,
	#e6b980 6.67%,
	#e6ba81 13.33%,
	#e6bb83 20%,
	#e7bc85 26.67%,
	#e7be88 33.33%,
	#e7c08c 40%,
	#e8c28f 46.67%,
	#e8c494 53.33%,
	#e9c697 60%,
	#e9c89b 66.67%,
	#e9ca9e 73.33%,
	#eacba0 80%,
	#eacca2 86.67%,
	#eacda3 93.33%,
	#eacda3 100%
	);
	width: 100vw;
	height: 100vh;
	margin: 0;
	}

	.fancy-quote {
	width: 50%;
	height: 100vh;
	margin: 0 auto;
	font-family: "Spectral", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #000;
	font-size: 24px;
	line-height: 32px;
	background-image: url("./images/dune.svg");
	background-repeat: no-repeat;
	background-position-y: bottom;
	background-size: contain;
	}

	.text {
	text-align: left;
	margin: 0 auto 64px;
	padding: 168px 40px 0;
	}

	.author {
	display: block;
	margin: 0 0 0 auto;
	padding-right: 40px;
	text-align: right;
	max-width: 450px;
	}

	@media screen and (max-width: 1000px) {
	.fancy-quote {
	width: 100%;
	}
	.author {
	max-width: 65%;
	}
	}