HTML Fundamentals – Creating Twitter Homepage Using HTML and CSS

mine 1Hello guys, today I created my final project on Pirple HTML Fundamental course. I designed Twitter homepage using HTML. I used and external stylesheet for the project.

The project basically contains three section inside the body: The first section is the left area having a light blue colour, the right side having the login buttons and form and the third section having the footer links.

I have improved my knowledge of website design with this pirple course. Check out the codes of the website and the style.

Check Stylesheet here

<!–
Project: Twitter Homepage in Dark Mode.

Final Project for Pirple HTML fundamentals created by: Joseph Chuks.

Credit goes to www.w3schools.com for the extra CSS
properties used in this document.

Created using Adobe Dreamweaver

–>
<!DOCTYPE html>
<html>
<head>
<!– Begin Meta tags showing the description, keywords, author and title of the website–>
<meta charset=”utf-8″>
<meta name=”description” content=”Twitter Homepage”>
<meta name=”keywords” content=”Twitter, CSS, HTML, Pirple, HTML Fundamentals”>
<meta name=”author” content=”Joseph Chuks”>
<meta name=”viewport” content=”width=device-width”>
<title>Twitter. It’s what’s happening / Twitter</title>
<!– Begin Link to the stylesheet used–>
<link rel=”stylesheet” href=”css/style.css”>
<!– End Link to the stylesheet used–>
<!–favicon–>
<link rel=”icon” type=”image/png” href=”images/2.png”>
<!–end favicon–>
<!– End Meta tags showing the description, keywords, author and title of the website–>
</head>
<body>
<!–start main section–>
<main>
<!–Start The left section showing the icons and background twitter bird–>
<section id=”first”>
<div id=”a”>
<div class=”welcome”><span class=”icon icon-search”></span><strong>Follow your interests.</strong></div>
<div class=”welcome”><span class=”icon icon-users”></span><strong>Hear what people are talking about.</strong></div>
<div class=”welcome”><span class=”icon icon-comment”></span><strong>Join the conversation.</strong></div>
</div>
</section>
<!–End The left section showing the icons and background twitter bird–>

<!–start second section showing the login form and buttons–>
<section id=”second”>
<div class=”login-area”>
<div id=”b”>
<form method=”post” action=””>
<div class=”form-group”>
<label>Username, Phone or Email</label>
<input type=”text” name=”username” class=”form” />
</div>

<div class=”form-group”>
<label>Password</label>
<input type=”password” name=”password” class=”form” />
</div>
<a href=”#”>Log In</a>
</form>
</div>
<a href=”#” class=”pswd”>Forgot Password?</a>
</div>

<section id=”others”>
<div id=”logo”>
<img src=”images/logo.png” alt=”logo” width=”40px” />
</div>

<h1>See what’s happening in the world right now</h1>

<h4>Join Twitter today.</h4>

<div id=”buttons”>
<a href=”#signup” class=”signup-btn”>Sign Up</a>
<a href=”#login” class=”login-btn”>Login</a>
</div>
</section>
</section>
<!–start second section showing the login form and buttons–>
</main>
<!–end main section–>
<!–start footer section–>
<footer>
<ul>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Help Center</a></li>
<li><a href=”#”>Terms</a></li>
<li><a href=”#”>Privacy policy</a></li>
<li><a href=”#”>Cookies</a></li>
<li><a href=”#”>Ads info</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Status</a></li>
<li><a href=”#”>Jobs</a></li>
<li><a href=”#”>Brand</a></li>
<li><a href=”#”>Advertise</a></li>
<li><a href=”#”>Marketing</a></li>
<li><a href=”#”>Businesses</a></li>
<li><a href=”#”>Developers</a></li>
<li><a href=”#”>Directory</a></li>
<li><a href=”#”>Settings</a></li>
<li>© 2020 Twitter, Inc.</li>
</ul>
</footer>
<!–end footer section–>
</body>
</html>

 

Views:
162
Article Categories:
Technology

Leave a Reply

Your email address will not be published. Required fields are marked *