136 twitter.css
View file
@@ -0,0 +1,136 @@
box {
box-sizing:border-box;
}

body {
font-family: "Lucida Grande";
margin: 0;
background: rgb(237, 236, 243)
}

button {
height: 45px;
width: 110px;
border-radius: 5px;
border: 1px solid darkgreen;
border-bottom: 2px solid darkgreen;
background-color: rgb(35,148,77);
color: white;
font-size: 20px;
font-weight: bold;
}

header {
background:linear-gradient(rgb(58,192,117), rgb(43,165,94));
padding: 20px;
color: white;
}

h1 {
display: inline;
margin-left: 20px;
}

header nav {
float: right;
margin-right: 20px;
}

li {
display: inline;
}

main {
background: white;
margin: 50px;
width: 80%;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
padding: 30px;
box-shadow: 0 0 1em lightgray;
}

.commentrow {
display: flex;
border-bottom: 1px solid lightgray;
}

section {
flex: 1;
}

.new-comment {
position: relative;
width: 100%;
}

textarea {
margin: 20px 0 5px 0;
height: 80px;
border-radius: 8px;
border-color: rgba(14, 14, 14, 0.28);
width: 100%;
padding: 15px;
font-size: 18px;
}

.character-limit {
position: absolute;
bottom: 15px;
right: 8px;
font-size: 12px;
}

#row3 {
border-bottom: none;
}


img {
float: left;
width: 100px;
height: 100px;
display: block;
border-radius: 10px;
margin: 20px 10px 20px 20px;
}

.tweet-button {
float: left;
margin-bottom:40px;
}

main button {
height: 50px;
}


main p {
margin-top: 20px;
font-size: 18px;
}

a {
font-weight: bold;
color: darkgreen;
text-decoration: none;
}

.count {
color: gray;
}
footer {
color: rgba(14, 14, 14, 0.28);
font-size: 14px;
padding-bottom: 50px;
font-weight: bold;
}

footer nav {
text-align: center;
}

footer li {
margin: 20px;
}
67 twitter.html
View file
@@ -0,0 +1,67 @@

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Twitter</title>
<link rel="stylesheet" href="twitter.css">
</head>
<body>

<header>
<h1>Twitter</h1>
<nav>
<li><button>Sign Up</button></li>
<li><button>Log In</button></li>
</nav>
</header>

<main>
<div class="commentrow">
<img src="datboi.jpg" alt="avatar">
<section>
<div class="new-comment">
<textarea name="comment" placeholder="What's Happening?" rows="8" cols="40" character-limit="140"></textarea>
<span class="character-limit">140</span>
</div>
<span class=tweet-button><button type="button" name="tweet">Tweet</button></span>
</section>
</div>

<div class="row2">
<img src="tigerbunny.jpg" alt="avatar">
<section>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<a href="#"> Like </a> <span class="count"> (0) </span>
</section>
</div>

<div class="row">
<img src="Cathy.jpg" alt="avatar">
<section>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="#"> Like </a> <span class="count"> (0) </span>
</section>
</div>

<div id="row3" class="row">
<img src="Kat.jpg" alt="avatar">
<section>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<a href="#"> Like </a> <span class="count"> (0) </span>
</section>
<div>
</main>

<footer>
<nav>
<li> About Us </li>
<li> Careers </li>
<li> Press </li>
<li> Terms of Service </li>
<li> Privacy Policy </li>
<li> Contact Us </li>
</nav>
</footer>
</body>
</html>