PeytonStrahan.github.io/index.html at main · PeytonStrahan/PeytonStrahan.github.io · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE HTML>
<html>
    <head>
        <title>PASS ME THE MCGRIDDLE!!!</title>
        <style>
          body {
              background: rgb(221, 24, 24);
              color: rgb(0, 0, 0);
              padding: 10px;
              font-family: arial;
          }
          #all-contents {
            max-width: 800px;
              margin: auto;
          }

          /* navigation menu */
          nav {
              background: rgb(150, 37, 9);
             margin: 0 auto;
             margin-bottom: 20px;
              display: flex;
              padding: 10px;
          }
          h1 {
              display: flex;
              align-items: center;
              color: cyan;
              flex: 1;
              margin: 0;
          }
          #nav-ul {
              list-style-image: none;
          }
          .nav-li {
              display: inline-block;
              padding: 0 10px;
          }
          a {
              text-decoration: none;
              color: cyan;
          }

          /* main container area beneath menu */
          main {
              background: rgb(193, 188, 175);
              display: flex;
          }
          .sidebar {
              margin-right: 25px;
              padding: 10px;
          }
          .sidebar-img {
              width: 200px;
              border-radius: 25% 10%;
          }
          .content {
              flex: 1;
              padding: 15px;
          }
          #interests {
              border: 4px cyan ridge;
              padding: 8px;
          }
          h2, h3 {
              margin: 0px;
          }
       </style>
    </head>

    <body>
      <!-- All content goes here  -->
        <div id="all-contents">
          <nav>
            <h1>( ͡° ͜ʖ ͡°)sup</h1>
            <ul id="nav-ul">
              <li class="nav-li">
                <a href="index.html"> Home </a>
              </li>
              <li class="nav-li">
                <a href="portfolio.html"> Portfolio </a>
              </li>
            </ul>
          </nav>

          <main>
            <!-- Sidebar section -->
            <div class="sidebar">
            <img class="sidebar-img" src="https://i.ytimg.com/vi/UJx9oAwIUl4/sddefault.jpg">
            </div>

            <!-- Content section -->
            <div class="content">
              <h2>Peyton Strahan</h2>
              <p>Student at Belle Chase High School</p>
              <!-- Interests section -->
              <div id="interests">
                <h3>Interests</h3>
                <ul>
                  <li>Dinosaurs</li>
                  <li>Firearms</li>
                  <li>Videogames</li>
                </ul>
              </div>
            </div>
          </main>
        </div>

    </body>
</html>