нужна помощь для исправления кода в html для формата страницы - PullRequest
Новая
       47

нужна помощь для исправления кода в html для формата страницы

0 голосов
/ 29 января 2020

Привет, мне нужна моя страница, чтобы она выглядела так: this what im trying to do

но вот что я получаю: enter image description here

Вот и вся страница. Я надеюсь, что смогу помочь с этим. У меня проблема с макетом и цветом навигации, и изображение вверху слева вверху.

Я пытался работать над ним, и мне потребовались часы, и я не могу достичь с ним никакого результата. 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>Digital Cloud</title>
	<style type="text/css">
	
			#container{
			width: 800px;
			height: 700px;
			background-color: white;
			margin-left: auto;
			margin-right: auto;	 
			position: fixed;
			top: 20%;
           left: 30%;

		}
		
		#logo{
			margin-top:15px;
			width: 200px;
			height: 200px;
		
		
		}
		
		#ending{
			float: right;
			text-align: center;
			margin: 120px;
			
			
			
		}
		
		#navigation{
			background-color: #3c99dc;
			float:left;
			margin-left: 5px;
			margin-bottom: 15px;
			font-size: 20px;
			width: 190px;
			height: 50px;
			text-align: center;
		}
		
		#content{
			text-align: center;
		}	
		
	
		#text{
			float: left;
			margin-bottom: 10px;
		}
			
		img{
			width: 260px;
			height: 150px;
			float: left;
		}
		
		#texting{
			width: 258px;
			height: 200px;
			float: left;
			margin-left: 6px;
			margin-bottom: 7px;
			margin-left: 3px;
		}
		
		#description{
			text-align: center;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div id="logo">
	<h1><img src="images/logo.jpeg" alt="logo" /></h1>
	</div>
	<div id="container">
		<div id="navigation">
			<div id="nav01">
			<nav> <a href="#"> Business </a></nav>
			</div>
		</div>	
		<div id="navigation">
			<div id="nav01">
			<nav> <a href="#"> Pricing </a></nav>
			</div>
		</div>
		<div id="navigation">
			<div id="nav01">
				<nav> <a href="#"> Community </a> </nav>
			</div>
		</div>
		<div id="navigation">
			<div id="nav01">
				<nav> <a href="#"> Help </a> </nav>
			</div>
		</div>
		<div id="content">
			<h1>Droplets</h1>
			<p>We rent out easy-to-deploy and resizable cloud servers.</p>
			<h2>Deploy in 55 seconds</h2>
		</div>
		
	<div id="textimg">
		<div id="texting">
			<h3>1. Select an image or app</h3>
			<p><img src="images/image.jpeg" alt="Representative picture of server's image" /></p>
			<div id="description">
			<p>Choose from our library of distros and apps, or create a Droplet from a snapshot.</p>
			</div>
		</div>
		
		<div id="texting">
			<h3>2. Choose a size</h3>
			<p><img src="images/size.jpeg" alt="Representative picture of server's size" /></p>
			<div id="description">
			<p>Select a Droplet size based on the resources you need. You can resize at any time from the control panel.</p>
		</div></div>
		<div id="texting">
			<h3>3. Select a region</h3>
			<p><img src="images/region.jpeg" alt="Representative picture of server's region" /></p>
			<div id="description">
			<p>Deploy your Droplet to any of our datacenter locations around the world.</p>
			</div>
		</div>
		
	</div>
	
	<div id="ending">
	<em>48,087,734 DROPLETS LAUNCHED</em>
	<em>&copy; COPYRIGHT 2017 DIGITAL CLOUD INC.</em>
	</div>



</body>
</html>

1 Ответ

0 голосов
/ 29 января 2020

вы не далеко

добавьте опечатку в ваш <style> тег 

* {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
  text-align:center;
}
...