boolean-uk · Hamada-AB · Mar 4, 2024 · Mar 5, 2024 · Mar 5, 2024
diff --git a/imgs/1.png b/imgs/1.png
diff --git a/imgs/2.png b/imgs/2.png
diff --git a/imgs/3.png b/imgs/3.png
diff --git a/imgs/4.png b/imgs/4.png
diff --git a/imgs/5.png b/imgs/5.png
diff --git a/imgs/6.png b/imgs/6.png
diff --git a/imgs/7.png b/imgs/7.png
diff --git a/imgs/logo.png b/imgs/logo.png
diff --git a/imgs/nala-profile.jpg b/imgs/nala-profile.jpg
diff --git a/index.html b/index.html
@@ -5,9 +5,88 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="stylesheet" href="style.css" />
-
+    <title>Nala Cat</title>
   </head>
+
   <body>
+    <!-------------------- HERDER-------------------->
+    <header>
+      <div class="logo">
+        <img src="./imgs/logo.png" alt="logo photo" />
+      </div>
+      <div class="account">
+        <div>
+          <button class="btn log-in">Log In</button>
+        </div>
+        <div>
+          <button class="btn sign-up">Sign Up</button>
+        </div>
+      </div>
+    </header>
+    <hr />
+
+    <!-------------------- MAIN  -------------------->
+
+    <main>
+      <div class="profile-img">
+        <img src="./imgs/nala-profile.jpg" alt="Nala cat profile's photo" />
+      </div>
+      <div class="container">
+        <div class="content">
+          <div class="user-name">
+            <p>nala_cat🐻‍❄️</p>
+          </div>
+          <div class="content-btn">
+            <button class="btn follow">Follow</button>
+            <button class="btn message">Message</button>
+          </div>
+          <div class="more">
+            <p>...</p>
+          </div>
+        </div>
+
+        <div class="activity">
+          <div class="posts">
+            <p>7209</p>
+            <p>posts</p>
+          </div>
+          <div class="followers">
+            <p>4.5M</p>
+            <p>followers</p>
+          </div>
+          <div class="following">
+            <p>840</p>
+            <p>following</p>
+          </div>
+        </div>
+
+        <div class="about">
+          <p class="name">Nala Cat&trade;</p>
+          <p>
+            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.
+          </p>
+        </div>
+      </div>
+    </main>
+
+    <!-------------------- PHOTOS  -------------------->
 
+    <section class="photos">
+      <div class="photo"><img src="./imgs/1.png" alt="Nala cat pgoto" /></div>
+      <div class="photo"><img src="./imgs/2.png" alt="Nala cat pgoto" /></div>
+      <div class="photo"><img src="./imgs/3.png" alt="Nala cat pgoto" /></div>
+      <div class="photo"><img src="./imgs/4.png" alt="Nala cat pgoto" /></div>
+      <div class="photo"><img src="./imgs/5.png" alt="Nala cat pgoto" /></div>
+      <div class="photo"><img src="./imgs/6.png" alt="Nala cat pgoto" /></div>
+      <div class="photo"><img src="./imgs/7.png" alt="Nala cat pgoto" /></div>
+    </section>
   </body>
-</html>
+</html>
diff --git a/style.css 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;
+}