Skip to content

Commit 6ec7e71

Browse files
gloriaLVelagloriaLVela
committed
Position exercise
1 parent 5777568 commit 6ec7e71

File tree

2 files changed

+237
-0
lines changed

2 files changed

+237
-0
lines changed

‎css/twitter.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
:root {
2+
--main-bg: #E6ECF0;
3+
--link-color: #3B94D9;
4+
--main-link-color: #848487;
5+
--light-bg: #FFF;
6+
--separator-color: #DDD;
7+
}
8+
* {
9+
box-sizing: border-box;
10+
}
11+
body, html {
12+
background-color: var(--main-bg);
13+
height: 100%;
14+
width: 100%;
15+
margin: 0;
16+
padding: 0;
17+
font-family: Arial, Ubuntu, sans-serif;
18+
}
19+
header {
20+
background-image: url("https://loremflickr.com/1200/300");
21+
background-size: cover;
22+
min-height: 300px;
23+
padding-top: 275px;
24+
}
25+
a {
26+
color: var(--link-color);
27+
}
28+
.top-nav {
29+
background: var(--light-bg);
30+
width:100%;
31+
position: fixed;
32+
z-index: 1000;
33+
}
34+
35+
.nav-item {
36+
display: inline-block;
37+
padding: 1.5em;
38+
}
39+
.nav {
40+
list-style-type: none;
41+
padding: 0;
42+
margin: 0;
43+
}
44+
45+
46+
.nav-link {
47+
color: var(--main-link-color);
48+
font-weight: bold;
49+
text-decoration: none;
50+
}
51+
.nav-link:hover {
52+
color: var(--link-color);
53+
}
54+
.profile {
55+
background: var(--light-bg);
56+
height: 80px;
57+
}
58+
59+
.profile-entry{
60+
margin: .5em;
61+
}
62+
.profile-image{
63+
position: absolute;
64+
top: 30%;
65+
66+
}
67+
68+
.profile-items{
69+
list-style-type: none;
70+
71+
}
72+
73+
.profile-form{
74+
float: right;
75+
line-height: 80px;
76+
77+
}
78+
79+
.profile-details {
80+
float:left;
81+
width: calc(25% - 1em);
82+
margin: 0 .5em;
83+
}
84+
85+
.timeline {
86+
float: left;
87+
width: calc(50% - 1em);
88+
margin: 0 .5em;
89+
}
90+
91+
.who-to-follow{
92+
float: left;
93+
width: calc(25% - 1em);
94+
margin: 0 .5em;
95+
}
96+
97+
.container{
98+
margin: 2em;
99+
}
100+
101+
.media{
102+
width:100%;
103+
background: var(--light-bg);
104+
border-color: var(--separator-color);
105+
border-bottom-width: 1px;
106+
padding: .5em;
107+
overflow: auto;
108+
109+
}
110+
111+
.media-image{
112+
width: 50px;
113+
float:left;
114+
margin-top: 1.33em;
115+
}
116+
117+
.media-body{
118+
float: left;
119+
widt: calc(100% - 100px);
120+
}
121+
.btn {
122+
border: 1px solid var(--main-link-color);
123+
color: var(--main-link-color);
124+
background: var(--light-bg);
125+
font-weight: bold;
126+
padding: 8px;
127+
border-radius: 5px;
128+
}
129+
.btn-large {
130+
font-size: 1.3em;
131+
padding: 10px;
132+
}
133+
.img-circle {
134+
border-radius: 100%;
135+
border: 4px solid var(--light-bg);
136+
}
137+
.text-right {
138+
text-align: right;
139+
}
140+
.text-muted {
141+
color: var(--main-link-color);
142+
}

‎twitter.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Twitter profile page</title>
6+
<link rel="stylesheet" href="css/twitter.css">
7+
</head>
8+
<body>
9+
<nav class="top-nav">
10+
<ul class="nav">
11+
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
12+
<li class="nav-item"><a class="nav-link" href="#">Moments</a></li>
13+
<li class="nav-item"><a class="nav-link" href="#">Notifications</a></li>
14+
<li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
15+
</ul>
16+
</nav>
17+
<header>
18+
<section class="profile">
19+
<div class="profile-header">
20+
<img class="img-circle profile-image" src="https://randomuser.me/api/portraits/men/12.jpg" alt="user">
21+
</div>
22+
<div class="profile-form">
23+
<form action="#" class="text-right">
24+
<button class="btn btn-large">Edit profile</button>
25+
</form>
26+
</div>
27+
</section>
28+
</header>
29+
<div class="container">
30+
<aside class="profile-details">
31+
<h3>
32+
Elliot Alderson
33+
<small class="text-muted">@fsociety</small>
34+
</h3>
35+
36+
<p>Regular twitter user | ¯\_(ツ)_/¯</p>
37+
38+
<ul class="profile-items">
39+
<li class="profile-entry"><a href="#">San Antonio, TX</a></li>
40+
<li class="profile-entry"><a href="#">codeup.com</a></li>
41+
<li class="text-muted profile-entry">Joined June 2011</li>
42+
</ul>
43+
</aside>
44+
<main class="timeline">
45+
<div class="media">
46+
<img class="media-image img-circle" src="https://randomuser.me/api/portraits/women/18.jpg" alt="Random user">
47+
<div class="media-body">
48+
<h4 class="tweet-user">Safia Abdalla <span class="text-muted">@captainsafia</span></h4>
49+
Unit tests are an important part of self-care.
50+
</div>
51+
</div>
52+
<div class=media>
53+
<img class="media-image img-circle" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Random user">
54+
<div class="media-body">
55+
<h4 class="tweet-user">Little Idea <span class="text-muted">@littleidea</span></h4>
56+
<p>I've only seen one thing produce software quality... conscientious people with quality as a high
57+
priority.</p>
58+
<p>Often those people should have prioritized 'valuable'.</p>
59+
<p>Live and learn. Live and learn.</p>
60+
</div>
61+
</div>
62+
</main>
63+
<aside class="who-to-follow">
64+
<div class="media">
65+
<h3>Who to follow</h3>
66+
<img class="media-image img-circle" src="https://randomuser.me/api/portraits/men/25.jpg" alt="Random user">
67+
<div class="media-body">
68+
<h4>wozgeass
69+
<small class="text-muted">@lelouch_linux</small>
70+
</h4>
71+
<button class="btn">Follow</button>
72+
</div>
73+
</div>
74+
<div class="media">
75+
<img class="media-image img-circle" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Random user">
76+
<div class="media-body">
77+
<h4>Łukasz Gruszka
78+
<small class="text-muted">@lukgru</small>
79+
</h4>
80+
<button class="btn">Follow</button>
81+
</div>
82+
</div>
83+
<div class="media">
84+
<img class="media-image img-circle" src="https://randomuser.me/api/portraits/women/31.jpg" alt="Random user">
85+
<div class="media-body">
86+
<h4>Huertito
87+
<small class="text-muted">@huertitoDA</small>
88+
</h4>
89+
<button class="btn">Follow</button>
90+
</div>
91+
</div>
92+
</aside>
93+
</div>
94+
</body>
95+
</html>

0 commit comments

Comments
 (0)