diff --git a/imgs/1.png b/imgs/1.png new file mode 100644 index 0000000..b123cee Binary files /dev/null and b/imgs/1.png differ diff --git a/imgs/2.png b/imgs/2.png new file mode 100644 index 0000000..162b68b Binary files /dev/null and b/imgs/2.png differ diff --git a/imgs/3.png b/imgs/3.png new file mode 100644 index 0000000..2b8009b Binary files /dev/null and b/imgs/3.png differ diff --git a/imgs/4.png b/imgs/4.png new file mode 100644 index 0000000..744e45c Binary files /dev/null and b/imgs/4.png differ diff --git a/imgs/5.png b/imgs/5.png new file mode 100644 index 0000000..be8ca61 Binary files /dev/null and b/imgs/5.png differ diff --git a/imgs/6.png b/imgs/6.png new file mode 100644 index 0000000..4d98d31 Binary files /dev/null and b/imgs/6.png differ diff --git a/imgs/7.png b/imgs/7.png new file mode 100644 index 0000000..8ae89a5 Binary files /dev/null and b/imgs/7.png differ diff --git a/imgs/logo.png b/imgs/logo.png new file mode 100644 index 0000000..ad23661 Binary files /dev/null and b/imgs/logo.png differ diff --git a/imgs/nala-profile.jpg b/imgs/nala-profile.jpg new file mode 100644 index 0000000..3861d59 Binary files /dev/null and b/imgs/nala-profile.jpg differ diff --git a/index.html b/index.html index 504dc31..15cd43f 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,88 @@ - + Nala Cat + + +
+ +
+
+ +
+
+ +
+
+
+
+ + + +
+
+ Nala cat profile's photo +
+
+
+
+

nala_cat🐻‍❄️

+
+
+ + +
+
+

...

+
+
+ +
+
+

7209

+

posts

+
+
+

4.5M

+

followers

+
+
+

840

+

following

+
+
+ +
+

Nala Cat™

+

+ Meet the Queen of feline social media, the gorgeous Nala holds the + Guinness World Record for having the largest social media following + for a cat on Instagram in the whole world! Nala’s Instagram journey + began in 2012 and she now boasts a staggering 4.5 million follower + count! Nala was rescued from a shelter by Varisiri Mathachittiphan, + and since they first laid eyes on each other, they have been the + best of companions. Nala is a stunning tabby/siamese mix with a + striking pair of ocean blue eyes, anld due to her popularity, has + been referred to as the ‘Kim Kardashian’ of cats. +

+
+
+
+ + +
+
Nala cat pgoto
+
Nala cat pgoto
+
Nala cat pgoto
+
Nala cat pgoto
+
Nala cat pgoto
+
Nala cat pgoto
+
Nala cat pgoto
+
- \ No newline at end of file + diff --git a/style.css b/style.css new file mode 100644 index 0000000..4e710f6 --- /dev/null +++ b/style.css @@ -0,0 +1,185 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + /* outline: 1px solid bisque; */ + font-family: sans-serif; +} + +/******************** HERDER SECTION ********************/ +header { + max-width: 70%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 7px 0; + margin: 0 auto; +} + +.logo img { + width: 110px; +} + +.logo:hover { + cursor: pointer; +} + +.account { + display: flex; + justify-content: space-between; +} + +.btn { + padding: 5px 7px; + margin: 0 5px; + border-radius: 7px; + border: none; + font-weight: bold; +} + +.log-in { + background-color: #0095f6; + color: white; +} + +.log-in:hover { + background-color: #127fc7; + cursor: pointer; +} +.sign-up { + color: #0095f6; + background-color: white; +} + +.sign-up:hover { + color: black; + cursor: pointer; +} + +hr { + border: 1px solid lightgray; + border-bottom: none; +} + +/******************** MAIN SECTION ********************/ + +main { + max-width: 70%; + margin: 0 auto; + display: flex; + margin-top: 20px; +} + +.profile-img { + padding: 70px; +} + +.profile-img img { + width: 180px; + border: 3px solid rgb(255, 60, 0); + border-radius: 50%; + padding: 5px; +} + +.container { + width: 500px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.content { + width: 400px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 0px; +} + +.follow { + font-weight: normal; + font-size: 15px; + padding: 10px 10px; +} + +.message { + font-weight: 550; + padding: 10px 10px; +} + +.follow:hover, +.message:hover { + background-color: rgb(203, 202, 202); + cursor: pointer; +} + +.more:hover { + cursor: pointer; +} + +.more p { + font-size: 30px; + padding-bottom: 10px; +} + +.activity { + width: 400px; + display: flex; + justify-content: space-between; + margin-top: 10px; +} + +.activity div { + display: flex; + font-size: 14px; + font-weight: 600; +} + +.activity div:hover { + color: grey; + cursor: pointer; +} + +.posts p, +.followers p, +.following p { + margin: 0 2px; +} + +.about { + padding-top: 30px; +} + +.about p { + margin-bottom: 15px; + font-size: 16px; + line-height: 1.4; +} + +.name { + font-size: 17px; + font-weight: 700; +} + +/******************** PHOTO SECTION ********************/ + +.photos { + max-width: 70%; + display: flex; + justify-content: space-around; + margin: 25px auto; +} + +.photo img { + width: 100px; + height: 100px; + border: 1.2px solid darkgray; + border-radius: 50%; + padding: 2px; +} + +.logo:hover, +.photo img:hover, +.profile-img:hover { + cursor: pointer; +}