be-hacking-hyf · akadarAkku · Sep 20, 2019 · Sep 20, 2019 · Sep 20, 2019 · Sep 24, 2019
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-slate
diff --git a/homework/week-2-project/Img-folder/img b/homework/week-2-project/Img-folder/img
@@ -0,0 +1 @@
+
diff --git a/homework/week-2-project/Img-folder/logo_brush.png b/homework/week-2-project/Img-folder/logo_brush.png
diff --git a/homework/week-2-project/Img-folder/logo_css.png b/homework/week-2-project/Img-folder/logo_css.png
diff --git a/homework/week-2-project/Img-folder/logo_html.png b/homework/week-2-project/Img-folder/logo_html.png
diff --git a/homework/week-2-project/Services/services.html b/homework/week-2-project/Services/services.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Akader web Design|services</title>
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+<body> 
+    <header>
+        <div clss="container">
+        <div id="branding">
+        </div>
+    <h1><span class="highlight">Akader</span> Web Design</h1>   
+    </div>
+    <nav>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li></li><a href="about.html">About</a></li>
+            <li class="current"><a href="services.html">Services</a></li>
+        </ul>
+    </nav>
+    </header>
+    <section id="newsletter">
+    <div class="container">
+     <h1>Subscirbe to our newsletter</h1>
+     <form>
+         <input type="email" placeholder="enter email..."></input>
+         <button type="submit" class="button_1">Subscirbe</button>
+     </form>
+    </div>
+    </section>
+
+    <section id="main">
+    <div class="container">
+    <article id="main-col">
+    <h1 class="page-title">Services</h1>
+    <ul id="services">
+    <li>
+    <h3>website Design</h3>
+    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece.</p>
+     <p>pricing: $1,000 -3,000</p>
+    </li>
+    </ul>
+
+    <li>
+       <h3>website Maintenance</h3>
+        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece.</p>
+        <p>pricing: $250 par mounth</p>
+        </li>
+        </ul>
+
+        <li>
+          <h3>website hosting</h3>
+           <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece.</p>
+           <p>pricing: $25 par mounth</p>
+            </li>
+             </ul>
+    </article>
+    <aside id="sidebar">
+        <div class="dark">
+    <h3>Get A Quote</h3>
+    <form class="quote">
+        <div>
+        <label>Name</label><br>
+        <input type="text" placeholder="Name">
+        </div>
+        <div>
+        <label>email</label><br>
+        <input type="email" placeholder="email Address">
+        </div>
+        <div>
+        <label>Message</label><br>
+        <textarea placeholder="Message"></textarea>
+        </div>
+        <button class="button_1" type="submit">send</button>
+    </form>
+     </div>
+    </aside>
+    </div>
+    </section>
+
+    <footer>
+        <p>Akader Web Design copyright &copy;2019</p>
+    </footer>
+</body>
+</html>
diff --git a/homework/week-2-project/Style/style.css b/homework/week-2-project/Style/style.css
@@ -0,0 +1,165 @@
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 10px;
+    text-align: 1.5;
+    padding: 0;
+    margin: auto;
+    background-color: #f4f4f4;
+    width: 95%;
+    }
+    /* Gilobal*/
+    .container{
+    width: 90%;
+    margin: center;
+    overflow: hidden;
+    }
+
+    header ul{
+        margin: 0;
+        padding:0;
+    }
+
+    .button_1{
+        height: 38px;
+        background: #e8491d;
+        border: none;
+        padding-left: 20px;
+        padding-right: 20px;
+        color: #ffffff;
+    }
+
+    .dark{
+        padding: 15px;
+        background: #35424a;
+        color: #ffffff;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    /*header*/
+    header{
+    background: #35424a;
+    color: #ffffff;
+    padding-top: 30px;
+    min-height: 80px;
+    border-bottom: #e8491d 3px solid;
+    }
+
+    header a{
+        color: #ffffff;
+        text-decoration: none;
+        text-transform: uppercase;
+        font-size: 15px;    
+    }
+
+    header li{
+    float:left;
+    display: inline;
+    padding: 0 20px 0 20px;
+
+    }
+
+    header #branding{
+        float: left;
+    }
+
+    header #branding h1{
+        margin: 0;
+    }
+
+    header nav{
+        float: right;
+        margin-top: 10px
+    }
+
+    header .highlight, header .current a{
+        color: #e8491d;
+        font-weight: bold;
+    }
+
+    header a:hover{
+        color: #cccccc; 
+        font-weight: bold;
+    }
+    /* shocase*/
+    #showcase{
+    min-height: 300px;
+    background: url('https://directlinedev.com/media/services/service/background/background_20.wide.jpeg') no-repeat 0 -300px;
+    text-align: center;
+    color: #ffffff;
+    }
+
+    #showcase h1{
+        margin-top: 100px;
+        font-size: 55px;
+        margin-bottom: 10px;
+    }
+
+    #showcase p{
+    font-size: 20px;
+    }
+
+    /* newsletter*/
+    #newsletter{
+        padding: 15px;
+        color: #ffffff;
+        background: #35424a;
+    }
+
+    #newsletter h1{
+        float: left;
+    }
+
+    #newsletter form{
+        float: right;
+        margin-top: 15px;
+
+    }
+
+    #newsletter input[ type="email"]{
+        padding: 4px;
+        height: 25px;
+        width: 250px;
+    }
+    /* boxes*/
+    #boxes{
+        margin-top: 20px;
+    }
+
+    #boxes .box{
+        float: left;
+        text-align: center;
+        width: 20%;
+        padding: 55px;
+    }
+
+    #boxes .box img{
+        width: 90px;
+    }
+
+    /* sidebar*/
+    aside#sidebar{
+        float: right;
+        width: 30%;
+        margin-top: 10px;
+    }
+    /* main-col*/
+    article#main-col{
+        float: left;
+        width: 65%;
+    }
+    /* services*/
+    ul#services li{
+    list-style: none;
+    padding: 20px;
+    border: #cccccc solid 1px;
+    margin-bottom: 5px;
+    background: #e6e6e6;
+    }
+    footer{
+        padding: 20px;
+        margin-top: 20px;
+        color: #ffffff;
+        background: #e8491d;
+        text-align: center;
+    }
+
diff --git a/homework/week-2-project/about/about.html b/homework/week-2-project/about/about.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Akader web Design|About</title>
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+<body> 
+    <header>
+        <div clss="container">
+        <div id="branding">
+        </div>
+    <h1><span class="highlight">Akader</span> Web Design</h1>   
+    </div>
+    <nav>
+        <ul>
+            <li><a href="index.html">Home</a></li>
+            <li class="current"></li><a href="about.html">About</a></li>
+            <li><a href="services.html">Services</a></li>
+        </ul>
+    </nav>
+    </header>
+    <section id="newsletter">
+    <div class="container">
+     <h1>Subscirbe to our newsletter</h1>
+     <form>
+         <input type="email" placeholder="enter email..."></input>
+         <button type="submit" class="button_1">Subscirbe</button>
+     </form>
+    </div>
+    </section>
+
+    <section id="main">
+    <div class="container">
+    <article id="main-col">
+    <h1 class="page-title">About Us</h1>
+    <p class="dark">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
+
+    <p class="dark">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
+
+    </article>
+    <aside id="sidebar">
+        <div class="dark">
+    <h3>what We Do</h3>
+    <p>It is a long established fact that a reader will be distracted by the readable</p>
+     </div>
+    </aside>
+    </div>
+    </section>
+
+    <footer>
+        <p>Akader Web Design copyright &copy;2019</p>
+    </footer>
+</body>
+</html>
diff --git a/homework/week-2-project/index html/index.html b/homework/week-2-project/index html/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Akader web Design|welcome to my website</title>
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+<body> 
+    <header>
+        <div clss="container">
+        <div id="branding">
+        </div>
+    <h1><span class="highlight">Akader</span> Web Design</h1>   
+    </div>
+    <nav>
+        <ul>
+            <li class="current"><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="services.html">Services</a></li>
+        </ul>
+    </nav>
+    </header>
+    <section id="showcase">
+    <div class="container">
+    <h1>Affordbable Professional Web Design</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec velit elit, varius at felis ut, laoreet aliquam sem. Cras porta augue in pharetra aliquet.</p>    
+    </div>
+    </section>
+
+    <section id="newsletter">
+    <div class="container">
+     <h1>Subscirbe to our newsletter</h1>
+     <form>
+         <input type="email" placeholder="enter email..."></input>
+         <button type="submit" class="button_1">Subscirbe</button>
+     </form>
+    </div>
+    </section>
+
+    <section id="boxes">
+    <div class="container">
+    <div class="box">
+    <img src="http://floggingsails.com/images/logo_html.png">
+    <h3>HTML5 Markup</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipscing elit. vivamus miaugue, viverra sit amet ultriccies</p>
+    </div>
+
+    <div class="box">
+    <img src="http://floggingsails.com/images/logo_css.png">
+        <h3>CSS 3 Styling</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipscing elit. vivamus miaugue, viverra sit amet ultriccies</p>
+        </div>
+
+        <div class="box">
+        <img src="http://floggingsails.com/images/logo_brush.png">
+            <h3>Graphic Design</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipscing elit. vivamus miaugue, viverra sit amet ultriccies</p>
+            </div>
+    </div>
+    </section>
+
+    <footer>
+        <p>Akader Web Design copyright &copy;2019</p>
+    </footer>
+</body>
+</html>