diff --git a/.htaccess b/.htaccess new file mode 100644 index 00000000000..9e25198b5a4 --- /dev/null +++ b/.htaccess @@ -0,0 +1,4 @@ +RewriteEngine On +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule ^(.*)$ index.php/$1 [L] \ No newline at end of file diff --git a/application/config/autoload.php b/application/config/autoload.php index 7cdc9013c11..350833244d3 100644 --- a/application/config/autoload.php +++ b/application/config/autoload.php @@ -58,7 +58,7 @@ | | $autoload['libraries'] = array('user_agent' => 'ua'); */ -$autoload['libraries'] = array(); +$autoload['libraries'] = array('session', 'database'); /* | ------------------------------------------------------------------- @@ -89,7 +89,7 @@ | | $autoload['helper'] = array('url', 'file'); */ -$autoload['helper'] = array(); +$autoload['helper'] = array('url', 'file', 'form'); /* | ------------------------------------------------------------------- diff --git a/application/config/config.php b/application/config/config.php index 782b19c74b6..feead4eeb35 100644 --- a/application/config/config.php +++ b/application/config/config.php @@ -23,7 +23,7 @@ | a PHP script and you can easily do that on your own. | */ -$config['base_url'] = ''; +$config['base_url'] = 'http://localhost/vietgram/'; /* |-------------------------------------------------------------------------- @@ -35,7 +35,7 @@ | variable so that it is blank. | */ -$config['index_page'] = 'index.php'; +$config['index_page'] = ''; /* |-------------------------------------------------------------------------- diff --git a/application/config/database.php b/application/config/database.php index 77748959f9f..64ea7e8f784 100644 --- a/application/config/database.php +++ b/application/config/database.php @@ -76,9 +76,9 @@ $db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', - 'username' => '', + 'username' => 'root', 'password' => '', - 'database' => '', + 'database' => 'vietgram', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, diff --git a/application/config/routes.php b/application/config/routes.php index 8ebf62bfa43..74189312baf 100644 --- a/application/config/routes.php +++ b/application/config/routes.php @@ -49,6 +49,6 @@ | Examples: my-controller/index -> my_controller/index | my-controller/my-method -> my_controller/my_method */ -$route['default_controller'] = 'welcome'; +$route['default_controller'] = 'C_Login'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE; diff --git a/application/controllers/C_EditProfile.php b/application/controllers/C_EditProfile.php new file mode 100644 index 00000000000..a958f8188d7 --- /dev/null +++ b/application/controllers/C_EditProfile.php @@ -0,0 +1,88 @@ +load->model("M_User"); + + } + + public function index() { + $data['profile'] = $this->M_User->loadProfile($this->session->userdata("username")); + $this->load->view("edit-profile", $data); + + } + + public function login() { + + $username = $this->input->post("username"); + $password = $this->input->post("password"); + + $check = $this->M_User->login($username, $password); + if ($check) { + $this->session->set_userdata("username", $username); + redirect('C_Feed'); + }else { + + $message = "username or password is wrong"; + $this->session->set_flashdata('message', $message); + $this->load->view("index"); + } + } + + public function editProfpic() { + $config['upload_path'] = './assets/images/'; + $config['allowed_types'] = 'gif|jpg|png'; + + + $this->load->library('upload', $config); + + if ($this->upload->do_upload('image')) { + $profpic = base_url().'/assets/images/'.$this->upload->data('file_name'); + + $this->M_User->editProfpic($profpic, $this->session->userdata("username")); + redirect("C_EditProfile", 'refresh'); + }else { + $error['error'] = $this->upload->display_errors(); + echo $error['error']; + } + + + } + + public function editProfile() { + + $name = $this->input->post("name"); + $username = $this->input->post("username"); + $website = $this->input->post("website"); + $bio = $this->input->post("bio"); + $email = $this->input->post("email"); + $phonenumber = $this->input->post("phonenumber"); + $gender = $this->input->post("gender"); + + + $data = array ( + 'name' => $name, + 'website' => $website, + 'bio' => $bio, + 'email' => $email, + 'phonenumber' => $phonenumber, + 'gender' => $gender, + + ); + + $this->M_User->updateProfile((object) $data, $this->session->userdata("username")); + + if ($this->session->userdata("username") != $username) { + $this->M_User->updateUsername($username, $this->session->userdata("username")); + $this->session->set_userdata("username", $username); + + } + + redirect('C_Profile'); + + } + +} diff --git a/application/controllers/C_Feed.php b/application/controllers/C_Feed.php new file mode 100644 index 00000000000..5a3a7519b07 --- /dev/null +++ b/application/controllers/C_Feed.php @@ -0,0 +1,57 @@ +load->model("M_User"); + $this->load->model("M_Photos"); + } + + public function index() { + $data['photos'] = $this->M_Photos->getFeedData(); + $this->load->view("feed", $data); + + } + + public function searchCaption() { + $data['photos'] = $this->M_Photos->search($this->input->get('searchkey')); + $this->load->view("feed", $data); + + + } + + + public function upload() { + $config['upload_path'] = './assets/images/'; + $config['allowed_types'] = 'gif|jpg|png'; + $config['max_size'] = 1000; + $config['max_width'] = 1920; + $config['max_height'] = 1080; + + $this->load->library('upload', $config); + + if ($this->upload->do_upload('image')) { + + $data = array( + 'idUser' => $this->session->userdata('userID'), + 'url' => base_url().'assets/images/'.$this->upload->data('file_name'), + 'caption' => $this->input->post('caption'), + 'likes' => 0 + ); + + $this->M_Photos->upload($data); + + + redirect('C_Feed'); + }else { + $error = $this->upload->display_errors(); + $this->session->set_flashdata('message', $error); + redirect('C_Feed'); + + } + } + + +} diff --git a/application/controllers/C_Login.php b/application/controllers/C_Login.php new file mode 100644 index 00000000000..7357c6ec97a --- /dev/null +++ b/application/controllers/C_Login.php @@ -0,0 +1,37 @@ +load->model("M_User"); + } + + public function index() { + $this->load->view("index"); + + } + + public function login() { + + $username = $this->input->post("username"); + $password = $this->input->post("password"); + + $check = $this->M_User->login($username, $password); + if ($check) { + $id = $this->M_User->getUserID($username); + $this->session->set_userdata("userID", $id->idUser); + $this->session->set_userdata("username", $username); + redirect('C_Feed'); + }else { + + $message = "username or password is wrong"; + $this->session->set_flashdata('message', $message); + $this->load->view("index"); + } + + + } + +} diff --git a/application/controllers/C_Navigation.php b/application/controllers/C_Navigation.php new file mode 100644 index 00000000000..26a2d178303 --- /dev/null +++ b/application/controllers/C_Navigation.php @@ -0,0 +1,18 @@ +load->model("M_User"); + } + + public function index() { + $this->load->view("explore"); + + } + + + +} diff --git a/application/controllers/C_Profile.php b/application/controllers/C_Profile.php new file mode 100644 index 00000000000..6b9f60d2644 --- /dev/null +++ b/application/controllers/C_Profile.php @@ -0,0 +1,23 @@ +load->model("M_User"); + $this->load->model("M_Photos"); + } + + public function index() { + $data['uploads'] = $this->M_User->userUploads($this->session->userdata('username')); + $data['profile'] = $this->M_User->loadProfile($this->session->userdata('username')); + $this->load->view("profile", $data); + + } + + + + + +} diff --git a/application/models/M_Photos.php b/application/models/M_Photos.php new file mode 100644 index 00000000000..fc1673a51aa --- /dev/null +++ b/application/models/M_Photos.php @@ -0,0 +1,25 @@ +db->query('SELECT user.username, photos.likes, url, caption, profpic FROM photos join profile JOIN user;'); + return $query->result(); + } + + public function upload($data){ + $this->db->insert("photos", $data); + } + + public function search($searchkey) { + $qr = 'SELECT user.username, photos.likes, url, caption, profpic FROM photos join profile JOIN user WHERE caption LIKE "%'.$searchkey.'%"'; + $query = $this->db->query($qr); + return $query->result(); + } + + + +} + + +?> \ No newline at end of file diff --git a/application/models/M_User.php b/application/models/M_User.php new file mode 100644 index 00000000000..0d74554cac5 --- /dev/null +++ b/application/models/M_User.php @@ -0,0 +1,60 @@ +db->like('username', $username); + $this->db->like('password', $password); + $query = $this->db->get('user'); + if ($query->row() != NULL) { + return true; + }else { + return false; + } + } + + public function getUserID($username) { + $query = $this->db->query("SELECT idUser FROM user where username LIKE '$username'"); + return $query->row(); + } + + public function loadProfile($username) { + $query = $this->db->query("SELECT * FROM profile WHERE username LIKE '$username'"); + return $query->row(); + } + + public function userUploads($idUser) { + $query = $this->db->query("SELECT * FROM photos WHERE idUser LIKE '$idUser'"); + return $query->result(); + } + + public function updateProfile($data, $username) { + $query = $this->db->query(" + UPDATE profile + SET + name = '$data->name', + website = '$data->website', + bio = '$data->bio', + email = '$data->email', + phonenumber = '$data->phonenumber', + gender = '$data->gender' + WHERE username = '$username' + + "); + } + + public function updateUsername($username, $us) { + $query = $this->db->query("UPDATE user SET username = '$username' WHERE username = '$us'"); + } + + public function editProfpic($profpic, $username) { + $query = $this->db->query("UPDATE profile SET profpic = '$profpic' WHERE username = '$username'"); + } + + +} + + +?> \ No newline at end of file diff --git a/application/views/box-model.php b/application/views/box-model.php new file mode 100644 index 00000000000..a52be8be767 --- /dev/null +++ b/application/views/box-model.php @@ -0,0 +1,42 @@ + + + + + + + Box Model + + + +
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/application/views/edit-profile.php b/application/views/edit-profile.php new file mode 100644 index 00000000000..69a7a080924 --- /dev/null +++ b/application/views/edit-profile.php @@ -0,0 +1,170 @@ + + + + + + + + Edit Profile | Vietgram + + "> + + + + + + + + +
+
+
+
+ +
+

username?>

+ Change Profile Picture + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + + + + + diff --git a/application/views/explore.php b/application/views/explore.php new file mode 100644 index 00000000000..f4a22b4c7a0 --- /dev/null +++ b/application/views/explore.php @@ -0,0 +1,117 @@ + + + + + + + + Explore | Vietgram + + "> + + + + + +
+ + + +
+ + + + + + + + diff --git a/application/views/feed.php b/application/views/feed.php new file mode 100644 index 00000000000..33ed142ff1e --- /dev/null +++ b/application/views/feed.php @@ -0,0 +1,188 @@ + + + + + + + + Feed | Vietgram + + + + "> + + + + + + + + + + +
+ session->flashdata('message')):?> + + + +
+
+ + +
+ +
+
+ + + + + + +
+ + + username?> +

caption?>

+
    +
  • + serranoarevalo love this! +
    • +
  • + serranoarevalo love this! +
    • +
  • + serranoarevalo love this! +
    • +
  • + serranoarevalo love this! +
    • +
+ 2 hours ago +
+ + +
+
+
+ + + +
+ + + + + + + + + + + + + diff --git a/application/views/index.php b/application/views/index.php new file mode 100644 index 00000000000..b22ab4879c6 --- /dev/null +++ b/application/views/index.php @@ -0,0 +1,73 @@ + + + + + Vietgram | Login + + + + + + "> + + + + +
+
+ " class="login__phone" /> +
+
+ + + +
+
+ + + + diff --git a/application/views/links.php b/application/views/links.php new file mode 100644 index 00000000000..bf132c4eabb --- /dev/null +++ b/application/views/links.php @@ -0,0 +1,22 @@ + + + + + + + Links 4 u + + + + + \ No newline at end of file diff --git a/application/views/profile.php b/application/views/profile.php new file mode 100644 index 00000000000..dfc58f9f755 --- /dev/null +++ b/application/views/profile.php @@ -0,0 +1,118 @@ + + + + + + + + Profile | Vietgram + + "> + + + + + +
+
+
+ +
+
+
+

username?>

+ ">Edit profile + +
+
    +
  • + 333 posts +
    • +
  • + 1234 followers +
    • +
  • + 36 following +
    • +
+

+ + name?> + bio?> + website?> +

+
+
+
+ + +
+ +
+ + + like?> + + + + 344 + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/assets/css/edit-profile.css b/assets/css/edit-profile.css new file mode 100644 index 00000000000..75465431998 --- /dev/null +++ b/assets/css/edit-profile.css @@ -0,0 +1,100 @@ +#edit-profile { + display: flex; + justify-content: center; +} + +#edit-profile .edit-profile__container { + background-color: white; + border: 1px solid #e6e6e6; + width: 100%; + max-width: 800px; +} + +#edit-profile .edit-profile__container { + padding: 40px 0; +} + +#edit-profile .edit-profile__header { + display: flex; + align-items: center; + margin-bottom: 50px; +} + +.edit-profile__header .edit-profile__avatar-container { + width: 200px; +} + +.edit-profile__avatar-container { + display: flex; + justify-content: flex-end; + margin-right: 35px; +} + +.edit-profile__avatar-container img { + width: 38px; + height: 38px; + border-radius: 50%; +} +.edit-profile__header h4 { + font-size: 18px; + font-weight: 600; +} + +.edit-profile__form .form__row { + display: flex; +} + +.form__row { + margin-bottom: 20px; + display: flex; + align-items: center; +} + +.form__row .form__label { + width: 200px; + display: block; + text-align: right; + margin-right: 35px; + font-weight: 600; + font-size: 16px; +} + +.form__row label { + font-size: 15px; + width: 80%; +} + +.form__row .form__input, +.form__row textarea { + padding: 8px; + width: 255px; + resize: vertical; + border: 0; + border: 1px solid #e6e6e6; + border-radius: 3px; +} + +.form__row input[type="checkbox"] { + margin-right: 15px; +} + +#edit-profile select { + background: 0 0; + border: 1px solid #efefef; + border-radius: 3px; + color: #262626; + font-size: 16px; + height: 32px; + padding: 0 30px 0 10px; +} + +#edit-profile input[type="submit"] { + margin-left: 235px; + border: 0; + color: white; + font-weight: 600; + border-radius: 3px; + background-color: var(--fd-blue); + font-size: 14px; + padding: 7px 25px; +} diff --git a/assets/css/explore.css b/assets/css/explore.css new file mode 100644 index 00000000000..d4a8f6ba2af --- /dev/null +++ b/assets/css/explore.css @@ -0,0 +1,70 @@ +#explore { + display: flex; + justify-content: center; + align-items: flex-start; + min-height: 500px; +} + +#explore .explore__users { + background-color: white; + border: 1px solid #e6e6e6; + border-radius: 3px; + width: 100%; + max-width: 600px; +} + +.explore__users .explore__user { + padding: 10px 15px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #e6e6e6; +} + +.explore__users .explore__user:last-child { + border: 0; +} + +.explore__user .explore__avatar { + width: 55px; + border-radius: 50%; +} + +.explore__user .explore__user-column { + display: flex; + align-items: center; +} + +.explore__user .explore__info { + margin-left: 15px; +} + +.explore__info .explore__username { + display: block; + font-weight: 600; + margin-bottom: 5px; +} + +.explore__info .explore__full-name { + color: #999; +} + +.explore__user-column button { + background-color: var(--fd-blue); + color: white; + border: 0; + font-weight: 600; + padding: 5px 10px; + font-size: 14px; + border-radius: 3px; + cursor: pointer; +} + +.explore__user-column button:active, +.explore__user-column button:focus { + outline: none; +} + +.explore__user-column:active { + opacity: 0.9; +} diff --git a/assets/css/feed.css b/assets/css/feed.css new file mode 100644 index 00000000000..cc88c16ef17 --- /dev/null +++ b/assets/css/feed.css @@ -0,0 +1,101 @@ +#feed { + display: flex; + align-items: center; + flex-direction: column; +} + +#feed .photo { + background-color: white; + border: 1px solid #e6e6e6; + border-radius: 3px; + width: 100%; + max-width: 600px; + margin-bottom: 65px; +} + +.photo .photo__header { + padding: 15px; + display: flex; + align-items: center; +} + +.photo__header .photo__avatar { + width: 32px; + border-radius: 50%; + margin-right: 10px; +} + +.photo .photo__user-info .photo__author { + display: block; + font-weight: 600; + margin-bottom: 5px; +} + +.photo > img { + max-width: 100%; +} + +.photo .photo__info { + padding: 15px 20px; +} + +.photo__actions { + margin-bottom: 15px; + font-size: 115%; +} + +.photo__actions .photo__action:first-child { + margin-right: 15px; +} + +.photo__actions .photo__action { + cursor: pointer; +} + +.photo .photo__likes { + font-weight: 600; + margin-bottom: 10px; + display: block; +} + +.photo .photo__add-comment-container { + margin-top: 15px; + border-top: 1px solid #e6e6e6; + padding-top: 10px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.photo__add-comment-container textarea { + width: 90%; + border: 0; + font-size: 14px; + resize: none; + height: 20px; +} + +.photo__add-comment-container textarea:focus, +.photo__add-comment-container textarea:active { + outline: none; +} + +.photo__add-comment-container i { + cursor: pointer; +} + +.photo .photo__time-ago { + font-size: 10px; + text-transform: uppercase; + color: #999; + margin-top: 10px; + display: block; +} + +.photo__comment { + margin-bottom: 10px; +} + +.photo__comments .photo__comment-author { + font-weight: 600; +} diff --git a/assets/css/footer.css b/assets/css/footer.css new file mode 100644 index 00000000000..0d5b8cbae0e --- /dev/null +++ b/assets/css/footer.css @@ -0,0 +1,30 @@ +.footer { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + max-width: 900px; + margin: 30px auto; + text-transform: uppercase; + font-size: 12px; + font-weight: 600; +} + +.footer .footer__list { + padding: 0; + list-style-type: none; + display: flex; +} + +.footer .footer__copyright { + color: hsl(0, 0%, 60%); +} + +.footer__list .footer__list-item { + margin-right: 10px; +} + +.footer .footer__link { + text-decoration: none; + color: var(--link-color); +} diff --git a/assets/css/globals.css b/assets/css/globals.css new file mode 100644 index 00000000000..cea96117b23 --- /dev/null +++ b/assets/css/globals.css @@ -0,0 +1,21 @@ +body { + background-color: white; + background-color: var(--background-color); + font-size: 14px; + font-family: "Open Sans", sans-serif; +} + +main { + animation: fadeInMain 0.5s linear; +} + +@keyframes fadeInMain { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0px); + } +} diff --git a/assets/css/login.css b/assets/css/login.css new file mode 100644 index 00000000000..f5657f0c13a --- /dev/null +++ b/assets/css/login.css @@ -0,0 +1,128 @@ +#login { + width: 100%; + max-width: 800px; + margin: 45px auto; + display: flex; + justify-content: space-around; +} + +#login .login__column { + width: 45%; +} + +.login__column .login__phone { + max-width: 100%; +} + +.login__column .login__box { + background-color: white; + border: 1px solid #e6e6e6; +} + +.login__column .login__box--transparent { + background: none; + border: 0; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 35px; +} + +.login__column .login__appstores { + margin-top: 20px; +} + +.login__appstores .login__appstore { + height: 40px; +} + +#login .login__box { + padding: 30px 0; + text-align: center; +} + +#login .login__box:first-child { + margin-bottom: 10px; + padding-left: 40px; + padding-right: 40px; +} + +.login__column .login__logo { + height: 50px; +} + +.login__form input { + display: block; + width: 100%; + box-sizing: border-box; + padding: 7px; + font-size: 14px; + border: 0; + border: 1px solid #e6e6e6; + border-radius: 5px; + background: #fafafa; +} + +.login__form input:focus { + outline: none; + border: 1px solid #a9a9a9; +} + +.login__form input:first-child { + margin-bottom: 5px; +} + +.login__form input[type="submit"] { + background-color: #3f99ed; + border: 0; + padding: 5px; + margin-top: 15px; + margin-bottom: 20px; + color: white; + font-weight: 600; +} + +#login .login__divider { + display: block; + text-transform: uppercase; + font-weight: 600; + color: #999; + margin-bottom: 20px; + position: relative; + width: 100%; +} + +#login .login__link { + display: block; + text-decoration: none; + color: #003569; +} + +#login .login__link--small { + margin-top: 30px; +} + +.login__box a { + text-decoration: none; + color: var(--fd-blue); +} + +#login .login__divider:before { + content: ""; + height: 1px; + background-color: rgba(153, 153, 153, 0.5); + width: 40%; + position: absolute; + left: 0; + top: 10px; +} + +#login .login__divider:after { + content: ""; + height: 1px; + background-color: rgba(153, 153, 153, 0.5); + width: 40%; + position: absolute; + right: 0; + top: 10px; +} diff --git a/assets/css/mobile.css b/assets/css/mobile.css new file mode 100644 index 00000000000..fc236e0553c --- /dev/null +++ b/assets/css/mobile.css @@ -0,0 +1,110 @@ +@media screen and (min-width: 375px) and (max-width: 667px) { + .navigation { + padding: 0 20px; + margin-bottom: 0; + } + .navigation input, + .navigation .fa-search { + display: none; + } + #feed .photo { + background-color: transparent; + border: 0; + margin-bottom: 20px; + } + #feed .photo .photo__add-comment-container { + display: none; + } + .footer { + width: 80%; + } + .footer, + .footer .footer__list { + flex-wrap: wrap; + justify-content: center; + } + .footer__list .footer__list-item { + margin-bottom: 10px; + } + #login .login__column { + width: 100%; + } + #login .login__column:first-child { + display: none; + } + #login .login__box { + background-color: transparent; + border: 0; + } + #profile { + margin-top: 50px; + } + #profile .profile__header { + flex-direction: column; + align-items: center; + } + #profile .profile__title { + flex-wrap: wrap; + justify-content: center; + width: 100%; + } + .profile__title h3 { + margin: 20px 0; + } + .profile__title a { + margin-right: auto; + } + .profile__stats { + justify-content: space-between; + } + .profile__stats .profile__stat { + text-align: center; + margin-right: 0; + } + .profile__stat span { + display: block; + } + .profile__photos .profile__photo { + width: 33%; + margin-bottom: 0; + } + .profile__photos { + margin-bottom: 50px; + } + #explore .explore__users { + background-color: transparent; + border: 0; + } + .explore__users .explore__user { + border: 0; + } + #edit-profile > .edit-profile__container { + border: 0; + } + #edit-profile .form__row { + flex-direction: column; + } + .form__row .form__label { + margin: 0; + text-align: center; + margin-bottom: 10px; + } + #edit-profile input[type="submit"] { + width: 120px; + margin: 0; + margin-top: 20px; + } + #edit-profile .edit-profile__container { + display: flex; + flex-direction: column; + align-items: center; + } + #edit-profile .edit-profile__form { + display: flex; + flex-direction: column; + align-items: center; + } + .edit-profile__header .edit-profile__avatar-container { + width: 0; + } +} diff --git a/assets/css/navigation.css b/assets/css/navigation.css new file mode 100644 index 00000000000..cb729669732 --- /dev/null +++ b/assets/css/navigation.css @@ -0,0 +1,77 @@ +.navigation { + height: 75px; + background-color: white; + border-bottom: 1px solid #e6e6e6; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 100px; + margin-bottom: 60px; +} + +.navigation .navigation__column:first-child img { + height: 45px; +} + +.navigation .navigations__links { + display: flex; + padding: 0; + list-style-type: none; +} + +.navigation .navigation__list-item { + margin-left: 30px; + padding: 0 2px; + opacity: 0; + animation: slideNavLink 0.5s ease-out forwards; +} + +@keyframes slideNavLink { + from { + transform: translateY(-10px); + } + to { + opacity: 1; + transform: none; + } +} + +.navigation .navigation__list-item:nth-child(2) { + animation-delay: 0.2s; +} + +.navigation .navigation__list-item:last-child { + animation-delay: 0.3s; +} + +.navigation__link { + color: rgba(0, 0, 0, 0.8); + font-size: 18px; +} + +.navigation__column input { + padding: 5px 0; + padding-left: 60px; + border: 0; + border: 1px solid #e6e6e6; + border-radius: 3px; + background: #fafafa; + font-size: 16px; +} + +.navigation__column input:focus { + outline: none; + border: 1px solid #a9a9a9; +} + +.navigation__column { + position: relative; +} + +.navigation__column .fa-search { + position: absolute; + top: 10px; + left: 10px; + color: rgba(0, 0, 0, 0.5); + font-size: 12px; +} diff --git a/assets/css/profile.css b/assets/css/profile.css new file mode 100644 index 00000000000..5d115215978 --- /dev/null +++ b/assets/css/profile.css @@ -0,0 +1,161 @@ +#profile { + display: flex; + flex-direction: column; + align-items: center; +} + +#profile .profile__header { + max-width: 935px; + width: 100%; + display: flex; + margin-bottom: 50px; + font-size: 110%; +} + +.profile__header .profile__column { + width: 70%; +} + +.profile__header .profile__column:first-child { + width: 30%; + display: flex; + align-items: center; + justify-content: center; +} + +.profile__column:first-child img { + border-radius: 50%; + transform-style: preserve-3d; + transition: transform 0.5s linear; + animation: rotateLynn 1s linear infinite; +} + +@keyframes rotateLynn { + from { + transform: rotateY(0turn); + } + to { + transform: rotateY(1turn); + } +} + +.profile__column .profile__title, +.profile__column .profile__stats { + display: flex; + align-items: center; +} + +.profile__column .profile__title { + margin-bottom: 30px; +} + +.profile__title .profile__username { + margin-right: 25px; + font-size: 32px; + font-weight: 300; +} + +.profile__title a { + margin-right: 10px; + text-decoration: none; + color: inherit; + font-weight: 600; + padding: 5px 25px; + border: 1px solid #e6e6e6; + border-radius: 3px; + transition: all 0.3s ease-in-out; +} + +.profile__title a:hover { + background-color: #3f99ed; + color: white; + border-color: #3f99ed; +} + +.profile__title i { + cursor: pointer; + transition: transform 1s ease-in; +} + +.profile__title i:hover { + transform: rotate(2turn); +} + +.profile__column .profile__stats { + margin-bottom: 30px; +} + +.profile__stats .profile__stat { + margin-right: 40px; +} + +.profile__stat .stat__number { + font-weight: 600; +} + +.profile__bio .profile__full-name { + font-weight: 600; +} + +.profile__bio a { + color: var(--link-color); + font-weight: 600; + text-decoration: none; + display: block; +} + +.profile__column .profile__bio { + line-height: 125%; +} + +#profile .profile__photos { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + max-width: 936px; + width: 100%; +} + +.profile__photos .profile__photo { + width: 31%; + margin-bottom: 35px; + position: relative; +} + +.profile__photo img { + max-width: 100%; +} + +.profile__photo .profile__photo-overlay { + position: absolute; + top: 0; + background-color: rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-weight: 600; + opacity: 0; + transition: opacity 0.2s linear; +} + +.profile__photo:hover .profile__photo-overlay { + opacity: 1; +} + +.profile__photo-overlay .overlay__item { + font-size: 130%; + display: flex; + align-items: center; +} +.profile__photo-overlay .overlay__item:last-child { + margin-left: 10px; + /**/ +} + +.profile__photo-overlay .overlay__item i { + font-size: 130%; + margin-right: 5px; +} diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 00000000000..82935aeceff --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,124 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 00000000000..09dd98497fc --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,12 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"); +@import "reset.css"; +@import "variables.css"; +@import "globals.css"; +@import "login.css"; +@import "footer.css"; +@import "navigation.css"; +@import "explore.css"; +@import "feed.css"; +@import "profile.css"; +@import "edit-profile.css"; +@import "mobile.css"; diff --git a/assets/css/variables.css b/assets/css/variables.css new file mode 100644 index 00000000000..0620c7ea3f3 --- /dev/null +++ b/assets/css/variables.css @@ -0,0 +1,5 @@ +:root { + --background-color: #fafafa; + --fd-blue: #3897f0; + --link-color: #003569; +} diff --git a/assets/images/android.png b/assets/images/android.png new file mode 100644 index 00000000000..306aa45f29e Binary files /dev/null and b/assets/images/android.png differ diff --git a/assets/images/avatar.jpg b/assets/images/avatar.jpg new file mode 100644 index 00000000000..5ef783b9abf Binary files /dev/null and b/assets/images/avatar.jpg differ diff --git a/assets/images/boy1.jpg b/assets/images/boy1.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy1.jpg differ diff --git a/assets/images/boy11.jpg b/assets/images/boy11.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy11.jpg differ diff --git a/assets/images/boy110.jpg b/assets/images/boy110.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy110.jpg differ diff --git a/assets/images/boy111.jpg b/assets/images/boy111.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy111.jpg differ diff --git a/assets/images/boy1110.jpg b/assets/images/boy1110.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy1110.jpg differ diff --git a/assets/images/boy112.jpg b/assets/images/boy112.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy112.jpg differ diff --git a/assets/images/boy113.jpg b/assets/images/boy113.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy113.jpg differ diff --git a/assets/images/boy114.jpg b/assets/images/boy114.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy114.jpg differ diff --git a/assets/images/boy115.jpg b/assets/images/boy115.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy115.jpg differ diff --git a/assets/images/boy116.jpg b/assets/images/boy116.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy116.jpg differ diff --git a/assets/images/boy1161.jpg b/assets/images/boy1161.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy1161.jpg differ diff --git a/assets/images/boy1162.jpg b/assets/images/boy1162.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy1162.jpg differ diff --git a/assets/images/boy1163.jpg b/assets/images/boy1163.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy1163.jpg differ diff --git a/assets/images/boy11631.jpg b/assets/images/boy11631.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy11631.jpg differ diff --git a/assets/images/boy1164.jpg b/assets/images/boy1164.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy1164.jpg differ diff --git a/assets/images/boy117.jpg b/assets/images/boy117.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy117.jpg differ diff --git a/assets/images/boy118.jpg b/assets/images/boy118.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy118.jpg differ diff --git a/assets/images/boy119.jpg b/assets/images/boy119.jpg new file mode 100644 index 00000000000..fcbde73a61e Binary files /dev/null and b/assets/images/boy119.jpg differ diff --git a/assets/images/boy12.jpg b/assets/images/boy12.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy12.jpg differ diff --git a/assets/images/boy120.jpg b/assets/images/boy120.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy120.jpg differ diff --git a/assets/images/boy13.jpg b/assets/images/boy13.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy13.jpg differ diff --git a/assets/images/boy14.jpg b/assets/images/boy14.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy14.jpg differ diff --git a/assets/images/boy15.jpg b/assets/images/boy15.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy15.jpg differ diff --git a/assets/images/boy151.jpg b/assets/images/boy151.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy151.jpg differ diff --git a/assets/images/boy16.jpg b/assets/images/boy16.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy16.jpg differ diff --git a/assets/images/boy17.jpg b/assets/images/boy17.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy17.jpg differ diff --git a/assets/images/boy18.jpg b/assets/images/boy18.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy18.jpg differ diff --git a/assets/images/boy19.jpg b/assets/images/boy19.jpg new file mode 100644 index 00000000000..1fcc19f57b9 Binary files /dev/null and b/assets/images/boy19.jpg differ diff --git a/assets/images/feedPhoto.jpg b/assets/images/feedPhoto.jpg new file mode 100644 index 00000000000..f1da1a8cf0d Binary files /dev/null and b/assets/images/feedPhoto.jpg differ diff --git a/assets/images/feedPhoto1.jpg b/assets/images/feedPhoto1.jpg new file mode 100644 index 00000000000..f1da1a8cf0d Binary files /dev/null and b/assets/images/feedPhoto1.jpg differ diff --git a/assets/images/feedPhoto2.jpg b/assets/images/feedPhoto2.jpg new file mode 100644 index 00000000000..f1da1a8cf0d Binary files /dev/null and b/assets/images/feedPhoto2.jpg differ diff --git a/assets/images/feedPhoto21.jpg b/assets/images/feedPhoto21.jpg new file mode 100644 index 00000000000..f1da1a8cf0d Binary files /dev/null and b/assets/images/feedPhoto21.jpg differ diff --git a/assets/images/feedPhoto211.jpg b/assets/images/feedPhoto211.jpg new file mode 100644 index 00000000000..f1da1a8cf0d Binary files /dev/null and b/assets/images/feedPhoto211.jpg differ diff --git a/assets/images/ios.png b/assets/images/ios.png new file mode 100644 index 00000000000..460f81ab32d Binary files /dev/null and b/assets/images/ios.png differ diff --git a/assets/images/loginLogo.png b/assets/images/loginLogo.png new file mode 100644 index 00000000000..332881b2ad3 Binary files /dev/null and b/assets/images/loginLogo.png differ diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 00000000000..e2ab02a7522 Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/phoneImage.png b/assets/images/phoneImage.png new file mode 100644 index 00000000000..949173e7366 Binary files /dev/null and b/assets/images/phoneImage.png differ