diff --git a/Week-2/README.md b/Week-2/README.md new file mode 100644 index 0000000..45efe4b --- /dev/null +++ b/Week-2/README.md @@ -0,0 +1,4 @@ +# Week-2 Assignment +--- +## Exercise2.1: (2-3 hrs) +## Exercise2.2: (2-3 hrs) \ No newline at end of file diff --git a/Week-2/Week-2 b/Week-2/Week-2 deleted file mode 100644 index 8b13789..0000000 --- a/Week-2/Week-2 +++ /dev/null @@ -1 +0,0 @@ - diff --git a/Week-2/exercise_2.1/README.md b/Week-2/exercise_2.1/README.md new file mode 100644 index 0000000..1a79dd7 --- /dev/null +++ b/Week-2/exercise_2.1/README.md @@ -0,0 +1,24 @@ +# Week-2 Assignment +--- +### Exercise2.1: (2-3hours) +Create a new webpage on a subject that you're interested in. The page should **NOT** use anyframework like Bootstrap and it should include the following elements:- +- The `.html` page and a linked `.css` file applies a consistent color scheme to links and text onyour page. +- A page header with a title and description for the site. +- An articles section with three articles, each including a title, summary and a link. +- A page footer containing info about you or the site.- Proper use of the semantic HTML tags we discussed. +- Use this website [Lorem Ipsum](http://www.lipsum.com/) to generate random blocks ofcontent to fill your website. +- **Commit often (with good meaningful commit messages), and Push to Github regularly.** +- Add a form to your site. This form can contain as many fields as you wish to have but makesure it follows proper use of the semantic HTML tags we discussed. Add validation to thesefields without using any framework or JavaScript. +- On a larger device we should see a 2 column layout. On a smaller device the right sidecontent should stack below the image. Add at least three more articles and then convert themto a grid, so that you show 3 articles per row in a box layout. +- Color the form button with any color of your choice. Using CSS, in :hover state changes thecolor. Again the color is of your choice. +- Use the sketch below to guide you towards the layout and content you are trying to achieve.*Please note that this is just a sketch - you can choose the colors, fonts, images, input fields,validation messages etc. that you want to use in the page. + +### Guidelines:1. +1. There should be a separate branch created in GitHub for his exercise. +2. The UI is not subjected to look like the below. Please add your desired “look and feel” to thelayout and forms. Make sure Design looks good. +3. Semantic tags should be used for laying out the UI. +4. The Form validation is client-side validation. The validation messages could be subjective. +5. There should be one or more Git commits with meaningful commit messages. +--- +### The finale output 0f the exercise +![](exercise_2.1.png) diff --git a/Week-2/exercise_2.1/exercise_2.1.png b/Week-2/exercise_2.1/exercise_2.1.png new file mode 100644 index 0000000..b45f162 Binary files /dev/null and b/Week-2/exercise_2.1/exercise_2.1.png differ diff --git a/Week-2/exercise_2.1/ext.js b/Week-2/exercise_2.1/ext.js new file mode 100644 index 0000000..db7b29c --- /dev/null +++ b/Week-2/exercise_2.1/ext.js @@ -0,0 +1,15 @@ +const onChangeHandler = (e) => { + const errorLog ={ } + + const {value, title,name} = e.targe + console.log("e",e) + if(name === 'connName'){ + setInputForm({name: value}) + } +} + +const [inputForm,setInputForm] = useState({ + name:'', + description:'', +}) + diff --git a/Week-2/exercise_2.1/index.html b/Week-2/exercise_2.1/index.html new file mode 100644 index 0000000..6c8ff50 --- /dev/null +++ b/Week-2/exercise_2.1/index.html @@ -0,0 +1,131 @@ + + + + + + + + + For the Article + + + +
+

Lorem ipsum dolor sit.

+

Lorem ipsum dolor sit amet consectetur.

+
+
+
+
+
+

Lorem ipsum dolor sit.

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis molestias numquam alias, labore ipsam + quaerat, harum ex cupiditate eos facilis expedita voluptatum aliquam voluptate enim optio sit! Nemo aliquid + cumque deserunt recusandae facilis nulla voluptas repellat libero, sint ut. Molestiae ducimus reprehenderit + molestias quia doloremque.

+
+
+

Lorem ipsum dolor sit.

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur nisi ex harum dolore obcaecati distinctio + consequatur reprehenderit sequi labore, excepturi accusantium voluptatem id totam alias iste neque natus, + sapiente at impedit, magnam ullam aut quaerat placeat eveniet. Reprehenderit quas ea sit ipsum eaque libero + dolore!

+
+
+
+
+ a_random_image +
+
+
+

Lorem ipsum dolor sit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam obcaecati numquam, ea eligendi, + excepturi + maiores facilis, laudantium tempore perferendis tenetur quia nemo? Adipisci, eos, vitae suscipit mollitia + voluptatibus repudiandae, soluta nemo dolorem quidem molestias sint quas esse? Illum odit quod ab impedit. + Beatae, aliquid ipsam.

+
+
+

Lorem ipsum dolor sit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam obcaecati numquam, ea eligendi, + excepturi + maiores facilis, laudantium tempore perferendis tenetur quia nemo? Adipisci, eos, vitae suscipit mollitia + voluptatibus repudiandae, soluta nemo dolorem quidem molestias sint quas esse? Illum odit quod ab impedit. + Beatae, aliquid ipsam. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia fugiat accusamus + architecto? Est architecto sint aliquam possimus atque harum iusto molestias dolorem aspernatur, autem + sapiente, magni, quia nulla sit. Ad eaque, repellendus, aspernatur nobis cum ipsa veniam labore, quo optio + accusantium fugit at perferendis aperiam?

+
+
+
+
+

Lorem ipsum dolor sit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam obcaecati numquam, ea eligendi, + excepturi + maiores facilis, laudantium tempore perferendis tenetur quia nemo? Adipisci, eos, vitae suscipit mollitia + voluptatibus repudiandae, soluta nemo dolorem quidem molestias sint quas esse? Illum odit quod ab impedit. + Beatae, aliquid ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure voluptatem est beatae + dolore nam perspiciatis veniam provident doloribus quo! Pariatur atque magni in impedit dolorem obcaecati est + laboriosam facere doloremque delectus unde autem similique, ipsum officia, sed temporibus repellat illo + necessitatibus amet, placeat vitae nemo?

+
+
+
+
+
+ +
+ Sign up Form / Subscription +
+ +
+ Title + + + + + + + + +
+
+ Personal Details + + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Week-2/exercise_2.1/style.css b/Week-2/exercise_2.1/style.css new file mode 100644 index 0000000..105be8c --- /dev/null +++ b/Week-2/exercise_2.1/style.css @@ -0,0 +1,69 @@ +* { + font-family: sans-serif; + margin: 2px; + padding: 2px; +} + +body { + height: 100vh; + width: calc(100vw - 22px); +} + +.header-about { + text-align: center; +} + +.articles { + display: block; +} + +.container { + display: flex; + flex-direction: column; +} + +article { + padding: 1em; +} + +.container-1 { + display: flex; + flex-direction: initial; +} + +.inner-container { + display: block; + text-align: left; +} + +.form-container { + width: 28rem; + display: flex; + justify-content: end; + justify-self: center; +} + +.form-controller { + display: flex; + justify-items: start; +} + +.title-container { + display: block; + font-weight: bold; +} + +label input { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + +button { + font-weight: bold; + width: 10rem; + margin: auto; +} + +.footer-controller { + text-align: center; +} \ No newline at end of file diff --git a/Week-2/exercise_2.2/README.md b/Week-2/exercise_2.2/README.md new file mode 100644 index 0000000..95d1118 --- /dev/null +++ b/Week-2/exercise_2.2/README.md @@ -0,0 +1,16 @@ +# Exercise2.2:(2-3hours) +--- + +## Exercise2.1-GoogleDocs(Image)Exercise:- + + Create a new `.html` page and link a `.css` file to it.- Using CSS only, achieve the above animation.- No frameworks or libraries to be used. + - **Commit often (with good meaningful commit messages), and Push to Github regularly. + + ### **Guidelines: + 1. There should be a separate branch created in GitHub for this exercise. + 2. The UI should closely match with the screengrab given as sample. Layout, forms, validationetc. + 3. 3rd party CSS libraries should not have been used. + 4. There should be one or more Git commits with meaningful commit messages. + +### final output +![](exercise_2.2.png) \ No newline at end of file diff --git a/Week-2/exercise_2.2/exercise_2.2.png b/Week-2/exercise_2.2/exercise_2.2.png new file mode 100644 index 0000000..7d63b2c Binary files /dev/null and b/Week-2/exercise_2.2/exercise_2.2.png differ diff --git a/Week-2/exercise_2.2/index.html b/Week-2/exercise_2.2/index.html new file mode 100644 index 0000000..8de84f1 --- /dev/null +++ b/Week-2/exercise_2.2/index.html @@ -0,0 +1,23 @@ + + + + + + + + Advance CSS + + + + +
+

Hi!

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Week-2/exercise_2.2/style.css b/Week-2/exercise_2.2/style.css new file mode 100644 index 0000000..62bf8b7 --- /dev/null +++ b/Week-2/exercise_2.2/style.css @@ -0,0 +1,70 @@ +* { + font-family: sans-serif; + margin: 2px; + padding: 2px; +} + +body { + height: 100vh; + width: calc(100vw - 22px); +} + +main { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: minmax(100px, auto); + width: 200px; + height: 200px; + margin: auto; + padding-top: 200px; +} + +.one { + grid-column: 1; + grid-row: 1; + background-color: red; + animation: spin 5s infinite; + animation-direction: alternate; + transform-origin: top left; +} + +.two { + grid-column: 2; + grid-row: 1; + background-color: yellow; + animation: spin 5s infinite; + animation-direction: alternate; + transform-origin: top right; +} + +.three { + grid-column: 1; + grid-row: 2; + background-color: blue; + animation: spin 5s infinite; + animation-direction: alternate; + transform-origin: bottom left; +} + +.four { + grid-column: 2; + grid-row: 2; + background-color: green; + animation: spin 5s infinite; + animation-direction: alternate; + transform-origin: bottom right; +} + +.central-text { + text-align: center; + width: 210px; + margin-top: 80px; + font-size: 40px; + position: absolute; +} + +@keyframes spin { + 100% { + transform: rotate(60deg); + } +} \ No newline at end of file