diff --git a/first/index.css b/first/index.css index e69de29..2fae342 100644 --- a/first/index.css +++ b/first/index.css @@ -0,0 +1,33 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.header{ + height: 200px; + background: gray; +} + +.sidebar{ + width: 120px; + height: 100vh; + background: lightgray; + z-index: 20; +} + +.left{ + float:left; +} + +.right{ + float:right; +} + +.footer{ + background: rgb(43, 43, 43); + height: 100px; + position: relative; + top: 90vh; + z-index: -5; +} \ No newline at end of file diff --git a/first/index.html b/first/index.html index 2574597..9201b1c 100644 --- a/first/index.html +++ b/first/index.html @@ -1 +1,20 @@ - + + + + + + + First + + + + +
+
+ +
+ + +
+ + \ No newline at end of file diff --git a/second/index.css b/second/index.css index e69de29..83fd4ad 100644 --- a/second/index.css +++ b/second/index.css @@ -0,0 +1,79 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +/* container tracking */ + +.container{ + width: 95%; + margin: 20px auto; + border: 3px solid black; + height: 200px; +} + +.dotted{ + border: 3px dotted black; + display: flex; + justify-content: center; + align-items: center; + height: 250px; +} + +.fancy{ + border: 1px solid #e6e6e6; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 2px 2px 4px 0px #b1b1b1;; + width: 500px; +} + +/* inner content */ + +.reactangle1{ + display: inline-block; + width: 30px; + height: 90px; + background: rgb(94, 29, 133); + top: 45px; + margin: 50px 21px 10px 10px; +} + +.reactangle2{ + display: inline-block; + width: 26%; + height: 90%; + background: rgb(22, 99, 3); + top: 45px; + margin: 7px 20px 10px 10px; +} + +.circle{ + display: inline-block; + width: 170px; + height: 170px; + background: rgb(103, 192, 228); + top: 45px; + margin: 7px 60px 10px 10px; + border-radius: 50%; +} + +/* second container */ + +.inner-container{ + width: 90%; + height: 70%; + background: rgb(250, 250, 188); + box-shadow: 6px 8px 3px 0px #525252; +} + +/* third container */ +.fancy > h1{ + color: rgb(1, 1, 167); +} + + + + diff --git a/second/index.html b/second/index.html index 2574597..52ab446 100644 --- a/second/index.html +++ b/second/index.html @@ -1 +1,27 @@ - + + + + + + + + Second + + + +
+
+
+
+
+ +
+
+
+ +
+

HELLO FRIENDS

+
+ + + \ No newline at end of file diff --git a/third/index.css b/third/index.css index e69de29..8cc3c25 100644 --- a/third/index.css +++ b/third/index.css @@ -0,0 +1,58 @@ + +*{ + padding: 0; + margin: 0; +} + +.header-nav{ + height: 110px; + background: rgb(177, 177, 177); + display: flex; + align-items: center; +} + +.logo-container{ + /* display: inline-block; */ + height: 60px; + width: 60px; + background: rgb(11, 137, 196); + margin-left: 20px; +} + +.content{ + height: 380px; + display: flex; + align-items: center; + justify-content: space-around; +} + +.content > p{ + margin: 50px; +} + + +.bar{ + height: 110px; +} + +.blue{ + background: rgb(11, 137, 196); +} + +.seagreen{ + background: rgb(10, 187, 148); +} + +.lime{ + background: rgb(197, 223, 103); +} + +.yellow{ + background: rgb(237, 240, 64); +} + +.logo-container:active{ + +} + + diff --git a/third/index.html b/third/index.html index 2574597..2ae601b 100644 --- a/third/index.html +++ b/third/index.html @@ -1 +1,29 @@ - + + + + + + + + + Third + + +
+
+
+
+
+ +
+

Consider hiding the status bar -- and all other app UI -- while people are actively viewing full-screen media. If you hide the status bar, be sure to let people retrieve it ( and the appropriate app UI ) with a single tap. Unless you have a compelling reason to do so, avoid defining a custom gesture to redisplay the status bar because users are unlikely to discover such a gesture or to remember it.

+
+ +
+
+
+
+ + + + \ No newline at end of file