Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@hitarthpathak
hitarthpathak authored May 14, 2024
0 parents commit 2fc8414
Show file tree
Hide file tree
Showing 4 changed files with 375 additions and 0 deletions.
Binary file added Images/Al Pacino.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Icon.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
175 changes: 175 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!DOCTYPE html>

<head>

<title>Thefacebook</title>

<link rel="icon" href="Images/Icon.jpg">

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="main-box">

<navbar>

<img src="Images/Al Pacino.jpg" alt="Image Not Available">

<div class="the-facebook">

<label>

<span id="the-facebook">[thefacebook]</span>

</label>

<div class="navbar-anchors">

<span>

<a href="">login</a>

</span>

<span>

<a href="">register</a>

</span>

<span>

<a href="">about</a>

</span>

</div>

</div>

</navbar>

<div class="box">

<div class="top">

<div class="login-box">

<label>Email:</label>

<input type="text">

<label>Password:</label>

<input type="password">

<div class="btn-1">

<button id="btn-1">register</button>

<button id="btn-1">login</button>

</div>

</div>

<div class="welcome-box">

<div class="welcome-top">Welcome to Thefacebook!</div>

<div class="welcome-body">

<h1 id="welcome-heading">[Welcome to Thefacebook]</h1>

<p>Thefacebook is an online directory that connects people through social networks at colleges.
</p>

<p>We have opened up Thefacebook for popuar consumption at <b>Harvard University.</b></p>

<span>You can use Thefacebook to:</span>

<div class="list">

<ul>

<li>Search for people at your school</li>

<li>Find out who are in your classes</li>

<li>Look up your friends' friends</li>

<li>See a visualization of your social network</li>


</ul>

</div>

<p>To get started, click below to register. If you have already regstered, you can log in.</p>

<div class="btn-2">

<button id="btn-2">Register</button>

<button id="btn-2">Login</button>

</div>

</div>

</div>

</div>

<div class="bottom">

<div class="anchors">

<span>

<a href="">about</a>

</span>

<span>

<a href="">contact</a>

</span>

<span>

<a href="">faq</a>

</span>

<span>

<a href="">terms</a>

</span>

<span>

<a href="">privacy</a>

</span>

</div>

<p>a Mark Zuckerberg production</p>

<p>Thefacebook © 2004</p>

</div>

</div>

</div>

</body>

</html>
200 changes: 200 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
* {
margin: 0px;
padding: 0px;
font-family: Arial;
box-sizing: border-box;
}

body {
height: 100vh;
width: 100vw;
display: flex;
align-items: start;
justify-content: center;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
cursor: pointer;
}

.main-box {
height: 35rem;
width: 60rem;
}

button {
cursor: pointer;
}

navbar {
border: 1px solid #3B5997;
border-top: 3px solid #3B5997;
border-bottom: 3px solid #3B5997;
height: auto;
width: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15%;
background-color: #3B5997;
}

img {
height: 100%;
width: 35%;
}

.the-facebook {
height: 100%;
width: 50%;
text-align: start;
}

#the-facebook {
height: auto;
width: auto;
font-size: 2.5rem;
font-weight: 900;
color: rgb(100, 100, 255);
}

.navbar-anchors {
height: auto;
width: auto;
display: flex;
align-items: center;
justify-content: start;
gap: 1rem;
}

.navbar-anchors a {
color: white;
font-size: 1rem;
font-weight: bold;
}

.box {
border: 1px solid #3B5997;
height: auto;
width: auto;
}

.top {
border: 3px solid white;
height: auto;
width: auto;
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.3rem;
}

.login-box {
border: 2px dashed #3B5997;
height: auto;
width: 20%;
text-align: end;
font-size: 1rem;
padding: 0.5rem 0.2rem 1.3rem 0.2rem;
}

input {
height: auto;
width: 100%;
text-align: end;
font-size: 1rem;
background-color: #D8DEEB;
color: black;
}

.btn-1 {
display: flex;
align-items: center;
justify-content: space-evenly;
}

#btn-1 {
height: auto;
width: auto;
margin-top: 0.2rem;
padding: 0.2rem 0.5rem;
font-weight: bold;
background-color: #5188DE;
color: white;
}

.welcome-box {
border: 2px solid #3B5997;
height: auto;
width: 80%;
}

.welcome-top {
height: auto;
width: auto;
font-weight: bold;
padding: 0.2rem;
background-color: #3B5997;
color: white;
}

.welcome-body {
height: auto;
width: auto;
padding: 1.5rem;
}

#welcome-heading {
margin-bottom: 2rem;
text-align: center;
}

.welcome-body p, .list {
font-size: 1rem;
margin-bottom: 1rem;
}

.list {
margin-left: 1.5rem;
}

.btn-2 {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}

#btn-2 {
height: auto;
width: auto;
padding: 0.2rem 0.5rem;
font-weight: bold;
background-color: #5188DE;
color: white;
}

.bottom {
height: auto;
width: auto;
text-align: center;
margin: 1rem 0rem 2rem 0rem;
}

.anchors {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-weight: bold;
}

.anchors a {
color: #6288E0;
}

0 comments on commit 2fc8414

Please sign in to comment.