4-2_html_css/sample.html at master · potaufeuman/4-2_html_css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>About programming languages</h1>
  </header>
  <div class="container">
    <div class="menu">
      <p>・Ruby</p>
      <p>・Java</p>
      <p>・C#</p>
      <p>・Objective-C</p>
      <p>・Javascript</p>
    </div>
    <div class="article">
      <div class="top_content">What is Ruby?</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nunc urna tortor, congue id quam maiesuada, sodales fermentum sapien, Morbi ullamcorper mauris magna.
        Ut pretium odio nec varius pellentesque.
        Paecenas nec ante eget massa facilisis pellentesque.
        <p></p>
        Fusce tellus lorem, fringilla ut nisl ac, pulvinar venenatis sem.
        Suspendisse ditum sollicitudin semper.
        Integer ut lectus nisi.
        Donec vehicula augue vitae elefend commodo.
        Mauris vehicula velit nec tellus luctus, in semper arou ultricies.
        Donec aliquet interdum neque, ut cursus ipsum pretium ut.
        <p></p>
        Curabitur posuere ullamcorper lectus a auctor.
        Pellentasque habitant morbi tristique senectus et netus et metasuada fames ac turpis egestas.
        Nulla condimentum dolor id leo posuere consequat.
        Suspendisse tincidunt nibh lacus, dictum ullamcorper odio lobortis in consectetur velit.
        Nam vittae urma ultricies dui euismod lobortis eu at risus.
        Duis interdum ipsum arcu, sed lacinia nunc cursus a.
        <p></p>
        Ut dapibus, tellus et convellis laoreet, elit felis rutrum risus, qui iaculis dolor lectus et quam.
        Vestibulum quis lorem pretium, accumsan qnte sed, sollicitudin odio.
        Nulla dapibus dui a orci tristique facilisis.
        Mauris egestas quam nisi, eu lobortis nunc pretiursit amt.
        Praesent dignissim lacus lorem, et cursus arcu accuman sed.
        Cras adipiscin vestibulum eros.
        Proin et orci eget elit viverra malesuada a in odil.
        <p></p>
        Morbi egestas turpis et interdum pellentesque.
        Curabitur sed nunc quam.
        Nullam luchnisl purus, nec adipiscing augue dignissim vitae.
        Aliquam at consequat lacus.
        Nullam nauctor tortor, ac congue urna.
        Vivamus sed eros a sem ultricies cursus.
        Vivamus lobortis, tortor quis auctor ultrices, ante augue tempus ipsum, ut interdum nulla mauris id nulla.
      </div>
    </div>
  </div>

</body>
</html>