0

введите сюда описание изображения

Помогите задать отступы у формы, не знаю, где ошибка. Также не применяется border-bottom к input. P.S. Только начал применять flexbox, мало опыта.

head,
body {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 72px;
  background-color: #000000;
}

.logo {
  padding-left: 150px;
}

.navigation {
  flex-grow: 1;
  padding-right: 148px;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.menu li {
  padding-left: 45px;
  color: #ffffff;
  list-style: none;
  opacity: 0.69;
}

.form_template {
  background-color: #9a9a9a;
  height: 713px;
  display: flex;
  align-items: center;
}

.inner {
  flex-direction: column;
  max-width: 50%;
}

.logo1 {
  padding-left: 150px;
  padding-top: 105px;
}

.title {
  height: 70px;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 36px;
  font-weight: 300;
  text-transform: uppercase;
  padding-top: 30px;
  padding-bottom: 80px;
  padding-left: 150px;
  max-width: 100%;
}

.text {
  padding-left: 150px;
  padding-bottom: 45px;
  height: 61px;
  color: #ffffff;
  opacity: 0.8;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 23px;
  max-width: 70%;
}

.download {
  background: none;
  margin-left: 150px;
  width: 135px;
  height: 42px;
  border: 2px solid white;
  color: white;
  font-weight: 400;
  font-size: 15px;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
}

.free_trial {
  padding-left: 222px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
  height: 363px;
}

.trial {
  background-color: #f5f5f5;
  margin: 0;
  width: 360px;
  height: 54px;
  align-items: center;
  display: flex;
  color: #333333;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  justify-content: center;
}

.span {
  color: #ff8b38;
}

.form-inner input {
  border-bottom: 1px;
  width: 285px;
  height: 31px;
}

.form-inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 360px;
  height: 355px;
  background-color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>AX IT</title>
  <link rel="stylesheet" type="text/css" href="AXIT.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:600&display=swap" rel="stylesheet">

</head>

<body>
  <!-- Header -->
  <header class="header">
    <div class="logo">
      <img src="img/Logo.png">
    </div>
    <nav class="navigation">
      <ul class="menu">
        <li>Features</li>
        <li>About</li>
        <li>Pricing</li>
        <li>Reviews</li>
        <li>Contact</li>
      </ul>
    </nav>
  </header>
  <!-- Form -->
  <section class="form_template">
    <div class="inner">
      <div class="logo1">
        <img src="img/Logo1.png">
      </div>
      <div class="title">
        MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES
      </div>
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
      </div>
      <button class="download">
          Download
      </button>
    </div>
    <form class="free_trial">
      <div class="form-inner">
        <p class="trial">Try Your<span class="span">&nbsp;FREE&nbsp;</span>Trial Today</p>

        <input type="text" name="1" placeholder="Name">
        <input type="text" name="2" placeholder="Email">
        <input type="text" name="3" placeholder="Password">
        <button class="get_started">
        </button>
      </div>
    </form>
  </section>
  <!-- Media -->
  <section class="social_media">
    media
  </section>
  <!-- Tabs -->
  <section class="tabs">
    tabs
  </section>
  <!-- List section -->
  <section class="list_section">
    list
  </section>
  <!-- Picture section -->
  <section class="picture_section">
    picture
  </section>
  <!-- Awesome -->
  <section class="awesome">
    awesome
  </section>
  <!-- Prices -->
  <section class="prices">
    prices
  </section>
  <!-- Reviews -->
  <section class="reviews">
    reviews
  </section>
  <!-- Design-->
  <section class="design">
    design
  </section>
  <!-- Contact form-->
  <section class="contact_form">
    contact form
  </section>
  <footer class="footer">
    footer
  </footer>
</body>

</html>

1 ответ 1

1

Добавил justify-content: space-around; для отступов между input-ми. Так же вы неправильно написали свойство border, border: 1px solid цвет. Вместо solid можно вставить тип border-а, а если не задать цвет, то он будет автоматический чёрным. Надеюсь помог.

head, body {
    margin: 0;
    padding: 0;
}

.header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 72px;
    background-color: #000000;
}

.logo {
    padding-left: 150px;
}

.navigation {
    flex-grow: 1;
    padding-right: 148px;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menu li {
    padding-left: 45px;
    color: #ffffff;
    list-style: none;
    opacity: 0.69;
}

.form_template {
    background-color: #9a9a9a;
    height: 713px;
    display: flex;
    align-items: center;
}

.inner {
	flex-direction: column;
	max-width: 50%;
}

.logo1 {
	padding-left: 150px;
	padding-top: 105px;
}

.title {
    height: 70px;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
    font-weight: 300;
    text-transform: uppercase;
    padding-top: 30px;
    padding-bottom: 80px;
    padding-left: 150px;
    max-width: 100%;
}


.text {
	padding-left: 150px;
	padding-bottom: 45px;
    height: 61px;
    color: #ffffff;
    opacity: 0.8;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 23px;
    max-width: 70%;
}

.download {
	background: none;
	margin-left: 150px;
    width: 135px;
    height: 42px;
    border: 2px solid white;
    color: white;
    font-weight: 400;
    font-size: 15px;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
}

.free_trial {
	padding-left: 222px;
	display: flex;
	flex-direction: column;
    align-items: center;
    width: 360px;
    height: 363px;
}

.trial {
	background-color: #f5f5f5;
	margin: 0;
	width: 360px;
    height: 54px;
    align-items: center;
    display: flex;
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    justify-content: center;
}

.span {
	color: #ff8b38;
}

.form-inner input {
  border: none;
	border-bottom: 1px solid red;
	width: 285px;
	height: 31px;
}

.form-inner {
	display: flex;
	align-items: center;
  justify-content: space-around;
	flex-direction: column;
	width: 360px;
	height: 355px;
	background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<title>AX IT</title>
	<link rel="stylesheet" type="text/css" href="AXIT.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:600&display=swap" rel="stylesheet">

</head>
<body>
	<!-- Header -->
	<header class="header">
			<div class="logo">
				<img src="img/Logo.png">
			</div>
			<nav class="navigation">
				<ul class="menu">
					<li>Features</li>
					<li>About</li>
					<li>Pricing</li>
					<li>Reviews</li>
					<li>Contact</li>
				</ul>
			</nav>
	</header>
	<!-- Form -->
	<section class="form_template">
		<div class="inner">
		    <div class="logo1">
		    	<img src="img/Logo1.png">
		    </div>
			<div class="title">
				MODERN AXURE TEMPLATE
                FOR BEAUTIFUL PROTOTYPES
			</div>
			<div class="text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
                euismod bibendum laoreet. Proin gravida dolor sit amet lacus
                accumsan et viverra justo commodo.
			</div>
			<button class="download">
				Download
			</button>
		</div>
			<form class="free_trial">
				<div class="form-inner">
				     <p class="trial">Try Your<span class="span">&nbsp;FREE&nbsp;</span>Trial Today</p>
			   
				     <input type="text" name="1" placeholder="Name">
				     <input type="text" name="2" placeholder="Email">
				     <input type="text" name="3" placeholder="Password">
				     <button class="get_started">
			
				     </button>
			    </div>
			</form>
	</section>
	<!-- Media -->
	<section class="social_media">
		media
	</section>
	<!-- Tabs -->
	<section class="tabs">
		tabs
	</section>
	<!-- List section -->
	<section class="list_section">
		list
	</section>
	<!-- Picture section -->
	<section class="picture_section">
		picture
	</section>
	<!-- Awesome -->
	<section class="awesome">
		awesome
	</section>
	<!-- Prices -->
	<section class="prices">
		prices
	</section>
	<!-- Reviews -->
	<section class="reviews">
		reviews
	</section>
	<!-- Design-->
	<section class="design">
		design
	</section>
	<!-- Contact form-->
	<section class="contact_form">
		contact form
	</section>
	<footer class="footer">
		footer
	</footer>
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.