API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 2nd, 2017
572
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.54 KB | None | 0 0
raw download clone embed print report
  1. Фонт CSS файл важо за всички задачи
  2.  
  3. /* latin-ext */
  4. @font-face {
  5.   font-family: 'Lato';
  6.   font-style: normal;
  7.   font-weight: 300;
  8.   src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  9.   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  10. }
  11. /* latin */
  12. @font-face {
  13.   font-family: 'Lato';
  14.   font-style: normal;
  15.   font-weight: 300;
  16.   src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  17.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  18. }
  19. /* latin-ext */
  20. @font-face {
  21.   font-family: 'Lato';
  22.   font-style: normal;
  23.   font-weight: 400;
  24.   src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
  25.   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  26. }
  27. /* latin */
  28. @font-face {
  29.   font-family: 'Lato';
  30.   font-style: normal;
  31.   font-weight: 400;
  32.   src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
  33.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  34. }
  35. /* latin-ext */
  36. @font-face {
  37.   font-family: 'Lato';
  38.   font-style: normal;
  39.   font-weight: 900;
  40.   src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v13/R4a6fty3waPci7C44H8AjvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  41.   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  42. }
  43. /* latin */
  44. @font-face {
  45.   font-family: 'Lato';
  46.   font-style: normal;
  47.   font-weight: 900;
  48.   src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v13/tI4j516nok_GrVf4dhunkg.woff2) format('woff2');
  49.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  50. }
  51.  
  52. 1.Simple Navigation Bar html
  53.  
  54. <!DOCTYPE html>
  55. <html>
  56.   <head>
  57.     <meta charset="utf-8">
  58.     <link rel="stylesheet" href="SimpleNavigationBar.css">
  59.     <link rel="stylesheet" href="font.css">
  60.     <title>Simple Navigation Bar</title>
  61.   </head>
  62.   <body>
  63.     <nav>
  64.       <ul>
  65.         <li><a href="#">Home</a></li>
  66.         <li><a href="#">Services</a></li>
  67.         <li><a href="#">Products</a></li>
  68.         <li><a href="#">About Us</a></li>
  69.         <li><a href="#">Contact</a></li>
  70.       </ul>
  71.     </nav>
  72.   </body>
  73. </html>
  74.  
  75. 1.Simple Navigation Bar CSS файл
  76.  
  77. body {
  78.   font-family: "Lato", sans-serif;
  79. }
  80. nav {
  81.   padding: 0;
  82.   height: 40px;
  83.   line-height: 30px;
  84.  
  85. }
  86. ul {
  87.   list-style: none;
  88.   background-color: #84b3ad;
  89. }
  90. li {
  91.   display: inline-block;
  92.   width: 100px;
  93.   margin: 0 5px;
  94.   padding: 5px;
  95.   cursor: pointer;
  96.   color: #fff;
  97.   text-align: center;
  98. }
  99. li a {
  100.   text-decoration: none;
  101.   color: #fff;
  102. }
  103. li:hover {
  104.   background-color: #135e3e;
  105.   padding: 5px 0;
  106. }
  107.  
  108. 2.SimpleArticle html
  109.  
  110. <!DOCTYPE html>
  111. <html>
  112.   <head>
  113.     <meta charset="utf-8">
  114.     <link rel="stylesheet" href="SimpleArticle.css">
  115.     <link rel="stylesheet" href="font.css">
  116.     <title>Breaking News: Cat does not give a damn</title>
  117.   </head>
  118.   <body>
  119.       <article>
  120.           <h1>Breaking News: Cat does not give a damn</h1>
  121.           <img src="cat.jpg">
  122.         <p>
  123.           This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text to low around it. I even decided to copy the previous paragraph. This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text to low around it.
  124.         </p>
  125.         <p>
  126.           This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text fo low around it.
  127.         </p>
  128.       </article>
  129.   </body>
  130. </html>
  131.  
  132. 2. SimpleArticle css
  133.  
  134. body {
  135.   font-family: "Lato", sans-serif;
  136.   border-width: 5px;
  137. }
  138. article {
  139.   width: 550px;
  140.   border-radius: 15px;
  141.   margin: 0 auto;
  142.   padding: 25px;
  143.   background-color: #fafafa;
  144.   box-shadow: 10px 11px 35px -14px rgba(0,0,0,0.54);
  145. }
  146. h1 {
  147.   margin-bottom: 0;
  148.   padding: 10px;
  149.   text-align: center;
  150.   letter-spacing: 5px;
  151. }
  152. img {
  153.   width: 200px;
  154.   border-radius: 50%;
  155.   margin: 15px;
  156.   border: 5px dotted #8b603d;
  157.   float: left;
  158. }
  159. p {
  160.   font-size: 14px;
  161.   text-align: justify;
  162. }
  163.  
  164. 3. CreateHeader html
  165.  
  166. <!DOCTYPE html>
  167. <html>
  168.   <head>
  169.     <meta charset="utf-8">
  170.     <link rel="stylesheet" href="CreateHeader.css">
  171.     <link rel="stylesheet" href="font.css">
  172.     <title>Create Header</title>
  173.   </head>
  174.   <body>
  175.           <header class="container">
  176.             <h1>Innovation Cloud</h1>
  177.             <p>&quot;Connect your ideas globally&quot;</p>
  178.             <button type="button" name="button" class="btn">Learn More</button>
  179.           </header>
  180.   </body>
  181. </html>
  182.  
  183. 3. CreateHeader css
  184.  
  185. * {
  186.   margin: 0;
  187.   padding: 0;
  188. }
  189. body {
  190.   font-family: "Lato", sans-serif;
  191.   color: #fff;
  192. }
  193. header {
  194.   margin: 0;
  195.   padding: 0 10px;
  196.   Background: url(background-image.jpg) no-repeat center center;
  197.   background-size: cover;
  198.   height: 800px;
  199.   text-align: center;
  200. }
  201. h1 {
  202.   font-size: 80px;
  203.   padding: 80px 0;
  204.   letter-spacing: 8px;
  205.   text-transform: uppercase;
  206. }
  207. p {
  208.   font-size: 27px;
  209.   font-weight: 100;
  210.   margin: 20px;
  211. }
  212. button {
  213.   color: #fff;
  214.   background: none;
  215.   border: 5px solid #ffffff;
  216.   border-radius: 15px;
  217.   margin-top: 40px;
  218.   padding: 15px 45px;
  219.   font-size: 16px;
  220. }
  221. button:hover {
  222.   background: #000;
  223.   border-color: #000;
  224.   cursor: pointer;
  225. }
  226.  
  227. 4. CreateContent html
  228.  
  229. <!DOCTYPE html>
  230. <html>
  231.   <head>
  232.     <meta charset="utf-8">
  233.     <link rel="stylesheet" href="CreateContent.css">
  234.     <link rel="stylesheet" href="font.css">
  235.     <title>Create Content</title>
  236.   </head>
  237.   <body>
  238.     <main>
  239.       <img src="innovation-cloud.png">
  240.       <h2>The Innovation Cloud Conference</h2>
  241.       <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
  242.       <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
  243.      <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
  244.    </main>
  245.  </body>
  246. </html>
  247.  
  248. 4. CreateContent css
  249.  
  250. main {
  251.  margin: 50px 200px;
  252.  max-width: 1060px;
  253.  padding: 0 10px;
  254. }
  255. h2 {
  256.  color: #234465;
  257.  margin: 10px;
  258. }
  259. p {
  260.  font-size: 16px;
  261.  color: #333;
  262.  margin-bottom: 5px;
  263.  letter-spacing: 0;
  264.  width: 800px;
  265. }
  266. img {
  267.  float: left;
  268.  width: 180px;
  269.  height: 100px;
  270.  margin: 10px 50px 0 0;
  271. }
  272.  
  273. 5.InnovationCloud html
  274.  
  275. <!DOCTYPE html>
  276. <html>
  277.  <head>
  278.    <meta charset="utf-8">
  279.    <link rel="stylesheet" href="InnovationCloud.css">
  280.    <link rel="stylesheet" href="font.css">
  281.    <title>The Innovation Cloud Conference</title>
  282.  </head>
  283.  <body>
  284.    <header class="container">
  285.      <h1>Innovation Cloud</h1>
  286.      <p>&quot;Connect your ideas globally&quot;</p>
  287.      <button type="button" name="button" class="btn">Learn More</button>
  288.    </header>
  289.    <main>
  290.      <img src="innovation-cloud.png">
  291.      <h2>The Innovation Cloud Conference</h2>
  292.      <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
  293.      <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
  294.       <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
  295.     </main>
  296.     <footer>
  297.       <p>&copy;Innovation Cloud Conference</p>
  298.     </footer>
  299.   </body>
  300. </html>
  301.  
  302. 5. InnovationCloud css
  303.  
  304. main {
  305.   margin: 50px 200px;
  306.   max-width: 1060px;
  307.   padding: 0 10px;
  308. }
  309. h2 {
  310.   color: #234465;
  311.   margin: 10px;
  312. }
  313. main p {
  314.   font-size: 16px;
  315.   color: #333;
  316.   margin-bottom: 5px;
  317.   letter-spacing: 0;
  318.   width: 800px;
  319. }
  320. main img {
  321.   float: left;
  322.   width: 180px;
  323.   height: 100px;
  324.   margin: 10px 50px 0 0;
  325. }
  326. * {
  327.   margin: 0;
  328.   padding: 0;
  329. }
  330. body {
  331.   font-family: "Lato", sans-serif;
  332.   color: #fff;
  333. }
  334. header {
  335.   margin: 0;
  336.   padding: 0 10px;
  337.   Background: url(background-image.jpg) no-repeat center center;
  338.   background-size: cover;
  339.   height: 800px;
  340.   text-align: center;
  341. }
  342. h1 {
  343.   font-size: 80px;
  344.   padding: 80px 0;
  345.   letter-spacing: 8px;
  346.   text-transform: uppercase;
  347. }
  348. header p {
  349.   font-size: 27px;
  350.   font-weight: 100;
  351.   margin: 20px;
  352. }
  353. header button {
  354.   color: #fff;
  355.   background: none;
  356.   border: 5px solid #ffffff;
  357.   border-radius: 15px;
  358.   margin-top: 40px;
  359.   padding: 15px 45px;
  360.   font-size: 16px;
  361. }
  362. header button:hover {
  363.   background: #000;
  364.   border-color: #000;
  365.   cursor: pointer;
  366. }
  367. footer {
  368.   background-color: #000;
  369.   color: #fff;
  370.  
  371.   height: 80px;
  372.   line-height: 80px;
  373.   margin: 0;
  374. }
  375. footer p {
  376.   font-size: 14px;
  377. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!