SaveText.Ru

Без имени
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>BB</title>
  6.     <link rel="stylesheet" href="css/main.css">
  7. </head>
  8. <body>
  9.        
  10.  
  11.  
  12.     <header>
  13.           <div class="container">
  14.             <div class="heading clearfix">
  15.               <img src="img/logo.jpg" alt="BB" class="logo">
  16.               <nav>
  17.                   <ul class="menu">
  18.                                      
  19.                       <li>
  20.                             <a href="button 3.html">о нас</a>
  21.                       </li>
  22.                       <li>
  23.                             <a href="button 4.html">ваш заказ</a>
  24.                       </li>
  25.                       <li>
  26.                             <a href="button 5.html">войти</a>
  27.                       </li>
  28.                 </ul>  
  29.             </nav>
  30.         </div>
  31.         <div class="titles">
  32.             <div class="titles__first">
  33.                 DESIGNED BY DANIIL BAKUNIN
  34.             </div>
  35.             <h1>
  36.                 ДИЗАЙН - ЭТО ПРОСТО.
  37.             </h1>
  38.         </div>
  39.         <a class="button" href="button 1.html">НАЧАТЬ СОЗДАНИЕ</a>
  40.      </div>      
  41.     </header>
  42.      </section>
  43.     <section id="portfolio__2">
  44.         <div class="container">
  45.             <div class="titles__second">
  46.                 <h2>
  47.                     НАШИ ГАРАНТИИ
  48.                 </h2>
  49.             </div>
  50.             <div class="services clearfix">
  51.                 <div class="services__item">
  52.                
  53.                    <img src="img/icon 1.png" alt="Usluga">              
  54.                    <p>
  55.                     Все ваши предпочтения будут учтены и реализованы профессионалами в поставленные вами сроки.
  56.                     Нам важно чтобы вы получили тот проект, который задумали изначально.  
  57.                    </p>
  58.                 </div>
  59.                <div class="services__item">
  60.                    <img src="img/icon 2.png" alt="Usluga">
  61.                    <p>
  62.                     После утверждения вашего проекта с дизайнером, вы регулярно будите получать отчет о проделанной работе, и при неообходимости, в любой момент сможете внести корректировки или одобрить сделанное.
  63.                    </p>
  64.                 </div>
  65.  
  66.                 <div class="services__item">
  67.                    <img src="img/icon 3.png" alt="Usluga">
  68.                    <p>
  69.                     Как только заказ будет утвержден или выпущен, он сразу же встанет на пробный трехмесячный ПРЕМИУМ период, и все это время ему будут предоставляться бесплатный хост и место в облаке нашей компании.
  70.                    </p>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.     </section>
  75.     </section>
  76.     <section id="portfolio">
  77.         <div class="container">
  78.             <div class="titles__third">
  79.                 <h3>
  80.                     ДРУЖНОЕ НАЧАЛО
  81.                 </h3>
  82.             </div>
  83.             <div class="services clearfix">
  84.                 <div class="services__item">
  85.                
  86.                    <img src="img/icon 4.png" alt="Usluga">
  87.                 <h4>Виталик Ким            
  88.                    <p>
  89.                       Учтивый молодой программист, не поскупится на веселую историю, в процессе утверждения очередного проекта. Самая известная и вместе с тем популярная работа Виталия - сайт магазина одежды O'STIN.
  90.                    </p>
  91.                </h4>
  92.                 </div>
  93.                <div class="services__item">
  94.                    <img src="img/icon 5.png" alt="Usluga">
  95.                 <h4>Костя Чинавой
  96.                    <p>
  97.                     Довольно известный в узких кругах веб-дизайнер под именем чинавой. Безкомпромиссные качества Кости - преданность к собственному делу, и уважение труда других людей.
  98.                    </p>
  99.                </h4>
  100.                 </div>
  101.  
  102.                 <div class="services__item">
  103.                    <img src="img/icon 6.png" alt="Usluga">
  104.                 <h4>Мария Эклерная
  105.                    <p>
  106.                     Последняя по списку, но не по значению. Талантливый, строгий руководитель, не терпящий ошибок.
  107.                    </p>
  108.                </h4>
  109.                 </div>
  110.             </div>
  111.         </div>
  112.     </section>
  113. </body>
  114. </html>
  115.         <div class="container">
  116.     </section>
  117.     <footer>
  118.         <div class="container">
  119.             </div>
  120.    
  121.  
  122.  
  123.  
  124. ==================================
  125.  
  126. body {
  127.         font-family: Arial, sans-serif;
  128.         color: #222222;
  129.         padding: 0;
  130.         margin: 0;
  131. }
  132.  
  133. .clearfix:after {
  134.         content: '';
  135.         display: table;
  136.         width: 100%;
  137.         clear: both;
  138. }
  139. div {
  140.         box-sizing: border-box;
  141.         margin-right: 40px;
  142.        
  143. }
  144. header {
  145.         background: url(../img/fon.jpg) no-repeat center top / cover;
  146.         height: 1000px;
  147. }
  148. .container {
  149.         width: 1000px;
  150.         margin: 0 auto;
  151.  
  152.  
  153. }
  154. .logo {
  155. margin-top: 50px;
  156. width: 100px;
  157. height: 80px;
  158.  float: left;
  159.        
  160. }
  161. nav {
  162.         margin-top: 50px;
  163.         float: right;
  164. }
  165. .menu {
  166.         padding: 0;
  167.         margin: 0;
  168.         display: block;
  169. }
  170. .menu li {
  171.         float: left;
  172.         display: block;
  173.         margin-right: 50px;
  174. }
  175. .menu li a {
  176.         color: #fff;
  177.         text-decoration: none;
  178.         text-transform: uppercase;
  179.         font-size: 15px;
  180. }
  181. .titles__first {
  182.        
  183.         color: grey;
  184.         text-transform: uppercase;
  185.         text-align: center;
  186.         font-size: 10px;
  187.        
  188. }
  189. h1 {
  190.         font-size: 40px;
  191.         color: #fff;
  192.         text-transform: uppercase;
  193.         text-align: center;
  194.         margin: 30px;
  195.         font-size: 45px;
  196.  
  197. }
  198. h2 {
  199.         font-size: 45px;
  200.         color: black;
  201.         margin-top: 30px;
  202. }
  203. h3 {
  204.         font-size: 45px;
  205.         color: black;
  206.         margin-top: 30px;
  207. }
  208. .button {
  209.         background: #fed136;
  210.         color: black;
  211.         border-radius: 5px;
  212.         display: block;
  213.         width: 400px;
  214.         padding: 20px 0;
  215.         margin: 0 auto;
  216.         text-decoration: none;
  217.         text-align: center;
  218.         text-transform: uppercase;
  219.         font-weight: bold;
  220.         font-size: 45px;
  221.         margin-top: 200px;
  222.         margin-bottom: 700px;
  223. }
  224. .title {
  225. padding-top: 115px;
  226. }
  227. .title h2 {
  228. font-size: 40px;
  229. font-weight: bold;
  230. text-align: center;
  231. text-transform: uppercase;
  232. margin: 0;
  233. }
  234. .title p {
  235. color: #777777;
  236. text-align: center;
  237. font-size: 16px;
  238. margin-top: 5px;
  239. }
  240. p {
  241. text-align: center;
  242. color: #828282;
  243. margin-right: 1px;     
  244. }
  245.  
  246.  
  247.  
  248.  
  249. .titles__second {
  250. text-align: center;
  251. color: black;
  252. font-size: 16px;
  253. margin-top: 5px;
  254. }
  255. .titles__third {
  256. text-align: center;
  257. color: black;
  258. font-size: 16px;
  259. margin-top: 5px;       
  260. }
  261.  
  262.  
  263.  
  264.  
  265.  
  266. .services {
  267. margin-top: 80px;
  268.  
  269.  
  270. }
  271. .services__item {
  272. width: 270px;
  273. float: left;
  274. text-align: center;
  275. padding: 20px 0;
  276. margin: 0 auto;
  277. padding-bottom: 150px;
  278. }
  279.  
  280. .services__item h3 {
  281. font-size: 18px;
  282. margin-bottom: 10px;
  283. text-align: center;
  284. }
  285.  
  286. .services__item p {
  287. font-size: 20px;
  288. color: #777777;
  289. line-height: 1.3em;
  290. padding: 20px 0;
  291. margin: 1000 auto;
  292.  
  293. }
  294.  
  295. .services__item:last-child {
  296. float: right;
  297. }
  298.  
  299. .services__item:nth-child(2) {
  300. margin-left: 60px;
  301.  
  302. }
  303.  
  304. #services {
  305. padding-bottom: 150px;
  306.  
  307. }
  308.  
  309. #portfolio {
  310. background: #e6e6e6;
  311. padding-bottom: 1000px;
  312. padding: 1000;
  313. margin: 1000;
  314. padding-bottom: 1000px;
  315. }
  316. #portfolio__2 {
  317. background: white;
  318. padding-bottom: 1000px;
  319. padding: 1000;
  320. margin: 1000;
  321. }
  322.  
  323. #port {
  324. background: #f7f7f7;
  325. padding-bottom: 1000px;
  326. margin-top: 50px;
  327.  
  328. }
  329.  
  330. .works img {
  331. margin-top: 70px;
  332. float: left;
  333. }
  334.  
  335. .works img:last-child {
  336.         float: right;
  337. }
  338. .works img:nth-child(2) {
  339. margin-left: 400px;
  340. }
  341.  
  342.  

Share with your friends:

Распечатать