codeup-web-exercises/twitter.html at main · CynCity17/codeup-web-exercises · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Layout Elements Exercise</title>
  <link rel="stylesheet" href="CSS/resets.css"/>
  <link rel="stylesheet" href="CSS/layout.css"/>
  <link rel="stylesheet" href="CSS/twitter.css"/>
</head>
<body>
<div class="page-wrapper">
  <section class="container justify-center">
    <div class="row no-gap justify-space-between">
      <div class="nav-column">
        <div class="twitter-Logo">
          <img src="images/twitterLogo.png" alt="Logo"/>
        </div>
        <div class="nav-buttons justify-space-between">
          <a class="home">Home</a>
          <a class="explore">Explore</a>
          <a class="notifications">Notifications</a>
          <a class="messages">Messages</a>
          <a class="bookmarks">Bookmarks</a>
          <a class="twitter-blue">Twitter Blue</a>
          <a class="profile">Profile</a>
          <a class="more">More</a>
          <a class="tweet">Tweet</a>
        </div>
      </div>
      <div class="hero-column">
        <div class="header-profile">
          <h1 class="users-header">Hisoka M.</h1>
          <p class="tweet-number">3,000 Tweets</p>
        </div>
        <div class="banner-img">
          <img src="images/hisoka-cityview.jpeg" alt="Hisoka looking at city from above"/>
        </div>
        <section class="profile-container">
          <div class="profile-row">
            <div class="photo-wrapper">
              <div class="profile-picture">
                <img src="images/Hisoka4.jpeg" alt="profile picture">
              </div>
                <button class="edit-profile">Edit profile</button>
            </div>
                <h1 class="users-name">Hisoka M.</h1>
                <p class="tag-name">@Hisoka-HxH</p>
                <p class="bio">Magician | Hunter | Former Troupe Member | Loves a challenge | Turning
                arms into flowers is my form of self-love</p>
          </div>
        </section>
        <section class="location-container">
          <div class="location-row">
            <div class="location-column">
              <img src="images/location-icon.png" alt="location icon"/><p class="location-etc">Meteor City, Yorbia</p>
              <img src="images/hyperlink.png" alt="link icon"><a href="www.youtube.com/hisoka">youtube.com/hisoka</a>
            </div>
            <div class="location-column2">
              <img src="images/calendar-icon.png" alt="calendar icon"/><p class="date-joined">Joined May 2011</p>
            </div>
          </div>
        </section>
        <section class="followers-container">
          <div class="followers-row>">
            <div class="followers-column">
              <div class="following"><a>4</a> Following</div>
              <div class="followers"><a>1.4M</a> Followers</div>
            </div>
          </div>
        </section>
      </div>
      <div class="interests-column">

      </div>
    </div>
  </section>
<!--      </div>-->
<!--      <div class="column align-center direction-row">-->
<!--        <h1>Hisoka M.</h1>-->
<!--        <p>3,000 Tweets</p>-->
<!--      </div>-->
<!--      <div class="column shrink">-->
<!--        <div class="topnav">-->
<!--          <input type="text" placeholder="Search..">-->
<!--        </div>-->
<!--      </div>-->

<!--  <section class="container hero-scene justify-center">-->
<!--    <div class="row">-->
<!--      <div class="column align-center justify-center">-->
<!--        <h5 class="hero-header">An Exercise in Web Layouts</h5>-->
<!--        <h1 class="hero-second-header">We are all masters of the frontend.</h1>-->
<!--        <p class="hero-text">Home is behind, the world ahead and there are many paths to tread-->
<!--          through shadow to the.</p>-->
<!--      </div>-->
<!--      <div class="column">-->
<!--        <img src="images/AAAAAA.webp">-->
<!--      </div>-->
<!--    </div>-->
<!--  </section>-->
<!--  <section class="features-header">-->
<!--    <div class="row no-padding full-width justify-center align-center">-->
<!--      <div class="column justify-center text-center">-->
<!--        <h1>Features</h1>-->
<!--        <p class="features-description">Home is behind, the world ahead and there are many path to tread-->
<!--          through shadows to the edge, world ahead and there are.</p>-->
<!--      </div>-->
<!--    </div>-->
<!--  </section>-->
<!--  <section class="container features">-->
<!--    <div class="row no-padding">-->
<!--      <div class="column justify-center text-center">-->
<!--        <img src="images/camera-icon-white-2.jpg" class="feature-img" alt="camera icon">-->
<!--        <h3>Feature Title</h3>-->
<!--        <p>It's dangerous business, Frodo, going out your front door. You step onto the road.</p>-->
<!--      </div>-->
<!--      <div class="column justify-center text-center">-->
<!--        <img src="images/camera-icon-white-2.jpg" class="feature-img" alt="camera icon">-->
<!--        <h3>Feature Title</h3>-->
<!--        <p>Three Rings for the Elven-Kings under the sky, Seven for the Dwarf-lords in halls of stone</p>-->
<!--      </div>-->
<!--      <div class="column justify-center text-center">-->
<!--        <img src="images/camera-icon-white-2.jpg" class="feature-img" alt="camera icon">-->
<!--        <h3>Feature Title</h3>-->
<!--        <p>Nine for Mortal Men doomed to die, One for the Dark-lord on his dark throne in the land of Mordor</p>-->
<!--      </div>-->
<!--      <div class="column justify-center text-center">-->
<!--        <img src="images/camera-icon-white-2.jpg" class="feature-img" alt="camera icon">-->
<!--        <h3>Feature Title</h3>-->
<!--        <p>Where the shadows lie. One Ring to rule them all, One Ring to find them, One Ring to bring them all-->
<!--        </p>-->
<!--      </div>-->
<!--    </div>-->
<!--  </section>-->
</div>
</body>
</html>