semantic-html-assigment/index.html at master · foocoding/semantic-html-assigment · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="apple-touch-icon" href="images/icon.png">

  <link rel="stylesheet" href="main.css">

  <meta name="theme-color" content="#fafafa">
</head>

<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
  your browser</a> to improve your experience and security.</p>
<![endif]-->

<div class="siteHeader">
  <div class="imageWrapper"><img alt="logo" class="logoImg" src="images/tile.png">
  </div>
  <div class="navbar">
    <a class="navbarItem" href="images/subsite.html">SubSite 1</a>
    <a class="navbarItem" href="images/subsite.html">SubSite 2</a>
    <a class="navbarItem" href="images/subsite.html">SubSite 3</a>
  </div>
</div>

<div class="content">
  <div class="siteStory">
    <div class="sideNote">
      <div class="sideNoteHeading">General side note</div>
      <div class="sideNoteParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et
        dolore
        magna aliqua. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Duis at
        tellus at urna condimentum mattis pellentesque id nibh. Egestas purus viverra accumsan in. Sodales ut etiam sit
        amet nisl purus in mollis nunc.
      </div>
      <div class="sideNoteParagraph"><span class="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et
        dolore
        magna aliqua. Congue eu consequat ac felis donec et odio pellentesque. Sit amet justo donec enim. Felis bibendum
        ut tristique et egestas quis. Ullamcorper a lacus vestibulum sed arcu.</span></div>
      <div class="sideNoteParagraph"><span class="bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et
        dolore
        magna aliqua. Congue eu consequat ac felis donec et odio pellentesque. Sit amet justo donec enim. Felis bibendum
        ut tristique et egestas quis. Ullamcorper a lacus vestibulum sed arcu.</span></div>
    </div>
    <div class="siteHeading">SiteHeadline</div>
    <div class="siteStoryParagraph">
      <div class="paragraphHeading">ParagraphHeadline</div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Turpis egestas maecenas pharetra convallis. Sit amet aliquam id diam. Scelerisque eu ultrices vitae
      auctor eu augue ut lectus arcu. Pulvinar neque laoreet suspendisse interdum.
    </div>
    <div class="siteStoryParagraph">
      <div class="paragraphHeading">ParagraphHeadline</div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Turpis egestas maecenas pharetra convallis. Sit amet aliquam id diam. Scelerisque eu ultrices vitae
      auctor eu augue ut lectus arcu. Pulvinar neque laoreet suspendisse interdum.
      <div class="imageWrapper">
        <img alt="image" src="images/tile-wide.png">
        <span class="imageDescription">image description</span>
      </div>
    </div>
    <div class="siteStoryParagraph">
      <div class="paragraphHeading">ParagraphHeadline</div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Turpis egestas maecenas pharetra convallis. Sit amet aliquam id diam. Scelerisque eu ultrices vitae
      auctor eu augue ut lectus arcu. Pulvinar neque laoreet suspendisse interdum.
    </div>

  </div>
</div>
<div class="footer">
  <div class="navbar">
    <a class="navbarItem" href="images/subsite.html">Footer Link 1</a>
    <a class="navbarItem" href="images/subsite.html">Footer Link 2</a>
    <a class="navbarItem" href="images/subsite.html">Footer Link 3</a>
  </div>
</div>
</body>

</html>