CodeYourFuture · selinahussain · May 6, 2020 · May 6, 2020 · May 6, 2020 · May 7, 2020
diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css
@@ -6,3 +6,206 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+* {
+  font-family: "Roboto";
+  box-sizing: border-box;
+}
+
+/*basic sitewide styles*/
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body,
+html {
+  height: 100%;
+  width: 100%;
+}
+
+.header-style {
+  color: #c44c4c;
+  float: right;
+  font-size: 3rem;
+}
+
+button {
+  font-size: 1rem;
+  margin: 1rem 0 1rem 0;
+  padding: 0.5rem;
+  background-color: #7b3030;
+  color: #feebe7;
+  border-radius: 0.5rem;
+  transition-duration: 0.4s;
+}
+
+button:hover {
+  background-color: #cc8d7c;
+  color: white;
+}
+
+/*---------------------Navbar styles*/
+#header {
+  background-color: #fdd7cf;
+  width: 100%;
+  position: fixed;
+  padding: 10px 0;
+  z-index: 400;
+}
+
+.navlinks {
+  float: right;
+  list-style-type: none;
+  margin-top: 50px;
+}
+
+a {
+  text-decoration: none;
+  font-size: 20px;
+  padding: 10px;
+  margin: 0.8rem;
+  color: #c44c4c;
+  line-height: 1rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-right: 50px;
+}
+
+.navbrand {
+  height: 100px;
+  float: left;
+  margin-left: 50px;
+}
+
+a:hover {
+  border-radius: 0.5rem;
+  background-color: rgb(255, 255, 255, 0.6);
+}
+
+/*--------------------Jumbotron section*/
+.jumbotron {
+  display: flex;
+}
+
+.jumbotron img {
+  max-width: 100%;
+}
+
+.hero-text {
+  text-align: center;
+  position: absolute;
+  top: 30%;
+  left: 30%;
+  right: 30%;
+
+}
+
+.hero-text h1 {
+  margin: 5%;
+  color: #c44c4c;
+  font-weight: bold;
+  font-size: 50px;
+  text-transform: uppercase;
+}
+
+.hero-text p {
+  margin: 5%;
+  color: #c44c4c;
+  font-weight: bold;
+  font-size: 30px;
+}
+
+/*--------------------About section*/
+
+.about {
+  margin-top: 30px;
+}
+
+.card {
+  column-count: 2;
+  column-width: 100%;
+  margin-top: 30px;
+}
+
+.about h4 {
+  font-size: 2rem;
+  margin: 2rem 2rem 0 0;
+}
+
+.about p {
+  font-size: 1rem;
+  line-height: 1.8rem;
+  margin: 2rem 2rem 0 0;
+}
+
+.card img {
+  max-width: 100%;
+  height: auto;
+}
+
+/*--------------------Blog section*/
+.blog {
+  margin-top: 30px;
+}
+.blog-card {
+  column-count: 3;
+  column-width: 100%;
+  margin-top: 30px;
+}
+
+.blog-section img {
+  max-width: 100%;
+  transition: transform .2s;
+}
+
+.blog-section img:hover {
+  transform: scale(1.5);
+}
+
+.blog-card h4 {
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.blog-card p {
+  text-align: justify;
+  line-height: 1.5rem;
+}
+
+.blog-section p:first-of-type {
+  font-size: 1rem;
+  text-align: center;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.blog-section:first-child{
+  border-style: double;
+  border-color: #c44c4c;
+}
+
+/*--------------------Footer section*/
+footer {
+  display: block;
+  background-color: #7b3030;
+}
+
+footer a {
+  font-size: 20px;
+  font-family: Roboto;
+  color: #feebe7;
+}
+
+footer p {
+  color: #feebe7;
+  padding: 1rem;
+}
diff --git a/week1/3-website/images/about.jpg b/week1/3-website/images/about.jpg
diff --git a/week1/3-website/images/dresses.jpg b/week1/3-website/images/dresses.jpg
diff --git a/week1/3-website/images/glasses.jpg b/week1/3-website/images/glasses.jpg
diff --git a/week1/3-website/images/hat.jpg b/week1/3-website/images/hat.jpg
diff --git a/week1/3-website/images/hero.jpg b/week1/3-website/images/hero.jpg
diff --git a/week1/3-website/images/logo.png b/week1/3-website/images/logo.png
diff --git a/week1/3-website/index.html b/week1/3-website/index.html
@@ -6,17 +6,120 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
+    <title>Fashion Blog</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
       type="text/css"
     />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+
+
   </head>
   <body>
     <!-- Add your HTML markup here -->
+    <header id="header">
+      <nav class="navbar">
+        <!--------------------Brand image-->
+
+          <img class="navbrand" src="images\logo.png" />
+        </a>
+        <!--------------------Nav links-->
+
+        <ul class="navlinks">
+          <a href="#home" class="active"> Home </a>
+          <a href="#about-section"> About </a>
+          <a href="#blog"> Blog </a>
+          <a href="#contact"> Contact </a>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <!--Hero section-->
+      <section class="jumbotron" id="home">
+        <div class="container">
+          <img src="images\hero.jpg" />
+          <div class="hero-text">
+            <h1>Summer Fashion!</h1>
+            <p>
+              Lorem Ipsum is simply dummy text of the printing and typesetting
+              industry.
+            </p>
+            <button>Sign up for the Newsletter</button>
+          </div>
+        </div>
+      </section>
+      <!--About Section-->
+      <section class="about" id="about-section">
+        <div class="container">
+          <h2 class="header-style">About</h2>
+          <div class="card">
+            <img src="images\about.jpg" />
+            <h4>Fashion Blog</h4>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
+              expedita nam nisi qui esse, dolor exercitationem optio veritatis
+              alias accusantium aut beatae modi nulla inventore officiis, hic
+              praesentium minima eum Lorem ipsum dolor, sit amet consectetur
+              adipisicing elit. Tempore quod amet, iusto cum, minima reiciendis
+              ut deserunt sint laudantium illo assumenda soluta possimus fugit?
+              Recusandae dolorem reprehenderit possimus consectetur nihil?
+            </p>
+          </div>
+        </div>
+      </section>
+    </main>
+    <!---Blog Section-->
+    <section class="blog" id="blog">
+      <div class="container">
+        <h2 class="header-style">Blog Articles</h2>
+        <div class="blog-card">
+          <article class="blog-section">
+            <h4>Flowery, Flowy Dresses</h4>
+            <img src="images\dresses.jpg" />
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> 
+            <p>Odit estnatus libero impedit sunt alias rem iusto asperiores expedita
+              dicta aspernatur, doloribus sequi eligendi earum, soluta inventore
+              error? Itaque, quod.</p>
+            <button>Read More</button>
+          </article>
+          <article class="blog-section">
+            <h4>Statement Glasses</h4>
+            <img src="images\glasses.jpg" />
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> 
+            <p>Odit estnatus libero impedit sunt alias rem iusto asperiores expedita
+              dicta aspernatur, doloribus sequi eligendi earum, soluta inventore
+              error? Itaque, quod.</p>
+            <button>Read More</button>
+          </article>
+          <article class="blog-section">
+            <h4>10 ways to rock hats!</h4>
+            <img src="images\hat.jpg" />
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> 
+            <p>Odit estnatus libero impedit sunt alias rem iusto asperiores expedita
+              dicta aspernatur, doloribus sequi eligendi earum, soluta inventore
+              error? Itaque, quod.</p>
+            <button>Read More</button>
+          </article>
+        </div>
+      </div>
+    </section>
+    <!--Footer section-->
+    <footer id= "contact">
+      <div class="container">
+        <a href="#"><i class="fa fa-instagram"></i> Instagram</a>
+
+        <a href="#"><i class="fa fa-facebook-square"></i> Facebook</a>
+
+        <a href="#"><i class="fa fa-twitter-square"></i> Twitter</a>
+      </div>
+      <div class="container">
+        <p>Ⓒ Copyright FashionBlog by Selina Hussain</p>
+      </div>
+    </footer>
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
   </body>
 </html>