diff --git a/login.html b/login.html new file mode 100644 index 0000000..d317ba0 --- /dev/null +++ b/login.html @@ -0,0 +1,29 @@ + + + + + + +
+
+ ProjectX +
+
+
+
+ +
+
+ +
+
+
+
+ +
+ +
Don't have an account? Sign up!
+ +
+ + \ No newline at end of file diff --git a/main-page.html b/main-page.html new file mode 100644 index 0000000..dd474fc --- /dev/null +++ b/main-page.html @@ -0,0 +1,40 @@ + + + + + + +
+
+

+ PROJECTx + Connecting UofC +

+ + + +
+
+ +
+
+ Post 1 +
This is post 1
+ +
+
+ Post 2 +
This is post 2
+ +
+ +
+ + + \ No newline at end of file diff --git a/mainPage.js b/mainPage.js new file mode 100644 index 0000000..f6681b9 --- /dev/null +++ b/mainPage.js @@ -0,0 +1,12 @@ +// const postContainer = document.querySelector('.post-container'); + +// for (let i = 0; i < 10; i++) { +// const post = document.createElement('div'); +// post.classList.add('post'); +// post.innerHTML = ` +// Post ${i+1} +//
This is post ${i+1}
+//
${Math.floor(Math.random()*100)} likes
+// `; +// postContainer.appendChild(post); +// } diff --git a/style.css b/style.css new file mode 100644 index 0000000..4dd4f42 --- /dev/null +++ b/style.css @@ -0,0 +1,46 @@ +html{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.main{ + margin-top: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: black; + background-color: #FBCE2E; + width: 350px; + height: 350px; +} + +/* #loginTitle{ + margin-bottom: 20px; +} */ +#loginTitle{ + font-size: 30px; +} +#form-container{ + margin-top: 100px; + /* margin-bottom: 100px; */ +} +#username, +#password{ + margin-bottom: 10px; + border: none; + border-radius: 5px; + padding: 8px; +} +#signin{ + border-radius: 5px; + padding: 10px 60px; + border: none; + margin-bottom: 70px; + background-color: beige; +} +#signin:hover{ + cursor: pointer; + background-color: #cfb65c; +} \ No newline at end of file diff --git a/stylemain.css b/stylemain.css new file mode 100644 index 0000000..db661b9 --- /dev/null +++ b/stylemain.css @@ -0,0 +1,103 @@ +.post-container { + border: 1px solid black; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .post { + display: inline-block; + border: 1px solid green; + width: 33.33%; + height: 100%; + text-align: center; + padding: 10px; + box-sizing: border-box; + min-height: 400px; + min-width: 550px; + } + + .post img { + max-width: 100%; + max-height: 100%; + object-fit: cover; + } + + .caption { + margin-top: 10px; + } + + .likes { + margin-top: 5px; + font-size: 0.8em; + color: gray; + } + + .subheading { + display: block; + font-size: 1rem; + color: #d0aaff; +} +header{ + padding: 1.25em 0; + background-color: #f4c818; + justify-content: space-between; + align-items: center; +} +.container { + width: 90%; + max-width: 800px; + margin: 0 auto; + justify-content: space-between; + align-items: center; +} +nav a { + color: rgb(73, 61, 61); + text-decoration: none; + font-size: 1.125rem; + padding: 0.85em 0; + display: block; +} +a { + color: #ef5839; + text-decoration: underline dotted; +} + +a:hover, +a:active { + color: black; +} +.container { + width: 100%; + overflow: hidden; /* This prevents the container from collapsing */ + } + + .left { + float: left; + width: 50%; /* Set the width of each div to 50% */ + } + + .right { + float: right; + width: 50%; + } + ul { + padding: 0; + margin: 0; + list-style-type: none; +} +header .container, +nav ul { + display: flex; +} + +nav li { + margin-left: 1.25em; +} +h1{ + color: rgb(66, 66, 66); +} +.subheading{ + color: rgb(66, 66, 66); +} \ No newline at end of file