SBA

README.md

@@ -1,107 +1,25 @@
-# AD - SBA - HTML/CSS/JavaScript
+1.1	Introduction
+        Access my site by navigating to the link: https://rachid16.github.io/sba.javascript_3-page-website
+
+       The purpose of this document is to add the important detail to the current project description. This document is also intended to help the users to discover the feature of the website and can be used as a reference manual.
 
+1.2	Scope of this Document
 
+      Define requirements for create a resume website. The documentation presents the structure of the project, such as application architecture, application flow, and technology architecture. 
 
-### Description
-* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly.
+1.3	Technology Used 
 
-* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor.
+      To deploy the application, I used GitHub server. The code of my project written with HTML, CSS, and JavaScript. Also, I used Bootstrap  
+      HTML: Hypertext Markup Language is the standard markup language for creating web pages and web applications.
+      JavaScript: is a programming language commonly used in web development. 
 
-* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements.
+1.4	About the Project
 
-* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system.
+The Project is an E-commerce website uses to sale the clothes for both men and women.
+ Form will be used to enter the feedback and user information and check them if they are right information in the textbox. Such as email contain the “.” And “@”. 
 
+1.5	 Tools used
 
-* Some resources for free content:
-  * Photos: `https://www.pexels.com/search/template/`
-  * Text: `https://www.lipsum.com/`
-  * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k`
-
-* Useful API sites:
-  * https://rapidapi.com/ (Links to an external site.)
-  * https://any-api.com/ (Links to an external site.)
-  * https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.)
-  * https://apilist.fun/
-
-### Deliverable:
-* A theme for your site that you feel comfortable with
-  * Complete all technical requirements for HTML, CSS, and Javascript
-  * Have markups of your pages
-  * Research for a public API that can provide you with content (Optional)
-  * Include a README file. The file should include technical specifications and description of your website.
-  * Host on GitHub,  include the link to your GitHub account in the README file(optional)
-  * Submit the project in a ZIP file
-
-
-
-
-## Technical requirements
-
-* HTML
-  * Have at least 3 pages, keep the grid system consistent as much as possible
-  * Use at least 10 different HTML tags
-  * Use HTML tables
-  * Implement at least two uses for forms
-  * Dropped Down Menu 
-  * Use web fonts
-  * Use different types of content in the form of text, images, videos, and GIFs
-  * Use regex validation
-
-* CSS
-  * Inline, internal, and external styling
-  * Use five different CSS selectors
-  * Don’t use too many fonts
-  * Use colors that complement each other
-  * Use Flexbox (Optional)
-  * Use SASS/SCSS (Optional)
-  * Use animations (Optional)
-
-* Javascript
-  * External scripts
-  * Use variables, if statements, loops, at least one form of collections, functions/call back, and events
-  * Use AJAX (Optional) 
-  * Use JSON or XML (Optional)
-  * Use JQuery (Optional)
-
-
-
-## How to Download
-
-#### Part 1 - Forking the Project
-* To _fork_ the project, click the `Fork` button located at the top right of the project.
-
-
-#### Part 2 - Navigating to _forked_ Repository
-* Navigate to your github profile to find the _newly forked repository_.
-* Copy the URL of the project to the clipboard.
-
-#### Part 3 - Cloning _forked_ repository
-* Clone the repository from **your account** into the `~/dev` directory.
-  * if you do not have a `~/dev` directory, make one by executing the following command:
-  * * `mkdir ~/dev`
-  * navigate to the `~/dev` directory by executing the following command:
-  * * `cd ~/dev`
-  * clone the project by executing the following command:
-  * * `git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}`
-
-
-
-
-
-
-## How to Submit
-
-#### Part 1 -  _Pushing_ local changes to remote repository
-* from a _terminal_ navigate to the root directory of the _cloned_ project.
-* from the root directory of the project, execute the following commands:
-  * * add all changes
-  *   * `git add .`
-  * * commit changes to be pushed
-  *   * `git commit -m 'I have added changes'`
-  * * push changes to your repository
-  *   * `git push -u origin master`
-
-#### Part 2 - Submitting assignment
-* from the browser, navigate to the _forked_ project from **your** github account.
-* click the `Pull Requests` tab.
-* select `New Pull Request`
+	* Visual studio for the coding.
+  * git-bash
+	* gitHub 

css/fonts.css

@@ -0,0 +1,14 @@
+
+/*----------------------imported the file downalded from google--*/
+@font-face{
+    font-family: "Roboto";
+    src: '../fonts/Roboto/Roboto-Regular.ttf';
+}
+
+
+
+
+
+
+
+

css/style.css

@@ -1,9 +1,220 @@
-body {
-    background-color: navy;
+/*----------------------import fonts.css--*/
+@import url(./fonts.css);
+
+
+
+body{
+    margin:0;
+    font-family: sans-serif;
+}
+
+*{
+    box-sizing: border-box;
+}
+
+.header{
+    width: 100%;
+    float: left;
+}
+
+
+
+
+.content-wrapper{
+    background-color:#e5e5e5;
+    width: 100%;
+    float: left;
+    padding:30px;
+}
+
+.content-wrapper .container{
+    width: 100%;
+    float: left;
+    background-color:#f9f9f9;
+    border-radius:5px;
+}
+
+
+.content-wrapper .content{
+   float: left;
+   width: 80%;
+   background-color: #f9f9f9;
+   padding:20px;
+   padding-bottom:50px;
+   border-radius:0px 5px 5px 0px;
+   min-height: 600px;
+}
+
+
+.content-wrapper .content .heading{
+   background-color:#eff1f1;
+   font-size: 25px;
+   padding:10px 15px;
+    margin:0px 0px 10px;
+    border-radius: 4px;
+}
+
+.content-wrapper .content p{
+   font-size: 16px;
+   color:#000000;
+   line-height: 24px;
+   margin:0px 0px 15px;
+}
+
+.content-wrapper .content .products .box{
+   width:calc(33.33% - 30px);
+   float: left;
+   box-shadow: 0px 0px 10px #cdcdcd;
+   height: 350px;
+   margin:15px;
+   border-radius:4px;
+   position: relative;
+}
+
+
+.content-wrapper .content .products .box img{
+   max-width: 100%;
+   max-height: 100%;
+   padding:20px;
+   width:auto;
+   height: auto;
+   position: absolute;
+   display: inline-block;
+   margin: auto;
+   top:0;
+   right:0;
+   left:0;
+   bottom:0;
+   z-index:1;
+}
+
+.content-wrapper .content .products .box .price{
+   background-color:#047dc3;
+   padding:10px 20px;
+   color:#ffffff;
+   font-size:16px;
+   position: absolute;
+   left:0;
+   top:0;
+   z-index: 10;
+}
+
+.content-wrapper .content .products .box .buy{
+   background-color: #e6b723;
+   padding:10px 20px;
+   color:#ffffff;
+   font-size:16px;
+   position: absolute;
+   right:0;
+   bottom:0;
+   z-index: 10;
+   text-decoration: none;
+}
+
+.content-wrapper .content .feedback-form{
+   width: 100%;
+   float:left;
+   border-top:1px solid #c5c4c4;
+   padding-top: 20px;
+}
+.content-wrapper .content .feedback-form form{
+   float: left;
+   width:50%;
+
+}
+.content-wrapper .content .feedback-form form .row{
+   width:100%;
+   float: left;
+   margin-bottom: 15px;
+}
+.content-wrapper .content .feedback-form form .row .label{
+   width:30%;
+   float: left;
+   line-height:40px;
+   font-size:15px;
+   font-weight: bold;
+
+}
+.content-wrapper .content .feedback-form form .row .input{
+   width:70%;
+   float:right;
+
+}
+.content-wrapper .content .feedback-form form .row .input .form-control{
+   width: 100%;
+   height: 40px;
+   border-radius:4px;
+   border:1px solid #c5c4c4;
+   padding:6px 12px;
+}
+.content-wrapper .content .feedback-form form .row .input textarea.form-control{
+   height: 100px;
+}
+
+.footer{
+   background-color:#047dc3;
+   padding:50px 30px;
+   float: left;
+   width: 100%;
+   text-align: center;
+}
+
+.footer h5{
+ color:#d8d8d8;
+ font-size:16px;
+ margin:0px;
+ font-family: comic sans ms;
 }
 
 
-object {
-    height: 100vh;
-    width: 100vh;
+.footer p{
+color:#ffffff;
+margin:10px 0;      
 }
+
+
+
+/*Responsive*/
+
+/*if width equal to or less than 991 then*/
+
+@media(max-width: 991px){
+
+    .content-wrapper .content .products .box{
+        height: 280px;
+    }
+    .content-wrapper .content .feedback-form form {
+   width: 70%;
+}
+}
+
+/*if width equal to or less than 767 then*/
+
+@media(max-width: 767px){
+
+    .content-wrapper .nav{
+        width: 100%;
+    }
+    .content-wrapper .content{
+        width: 100%;
+        border-radius:0px 0px 5px 5px
+    }
+    .content-wrapper .content .products .box{
+        width: 100%;
+        margin:15px 0px;
+    }
+    .content-wrapper .content .feedback-form form {
+   width: 100%;
+}
+}
+
+/*if width equal to or less than 500 then*/
+@media(max-width: 500px){
+.content-wrapper .content .feedback-form form .row .label{
+    width: 100%;
+}
+.content-wrapper .content .feedback-form form .row .input{
+    width: 100%;
+}
+
+}