diff --git a/webdev/README.md b/webdev/README.md new file mode 100644 index 0000000..f6d1f98 --- /dev/null +++ b/webdev/README.md @@ -0,0 +1 @@ +# CalHacks22 diff --git a/webdev/close.png b/webdev/close.png new file mode 100644 index 0000000..78c8d8a Binary files /dev/null and b/webdev/close.png differ diff --git a/webdev/criteria.txt b/webdev/criteria.txt new file mode 100644 index 0000000..5697a7d --- /dev/null +++ b/webdev/criteria.txt @@ -0,0 +1 @@ +im \ No newline at end of file diff --git a/webdev/facebook.png b/webdev/facebook.png new file mode 100644 index 0000000..d1eae5a Binary files /dev/null and b/webdev/facebook.png differ diff --git a/webdev/instagram.png b/webdev/instagram.png new file mode 100644 index 0000000..4efeb5d Binary files /dev/null and b/webdev/instagram.png differ diff --git a/webdev/logo.png b/webdev/logo.png new file mode 100644 index 0000000..06b4688 Binary files /dev/null and b/webdev/logo.png differ diff --git a/webdev/menu.png b/webdev/menu.png new file mode 100644 index 0000000..5a20ec1 Binary files /dev/null and b/webdev/menu.png differ diff --git a/webdev/page1.html b/webdev/page1.html new file mode 100644 index 0000000..fb118fe --- /dev/null +++ b/webdev/page1.html @@ -0,0 +1,48 @@ + + + + + + CrunchTime + + + + +
+
+
+ +
+ +
+ +
+
+


Crunch Time

+

+ Assigned reading made easy! +

+ Continue + +
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/webdev/page2.html b/webdev/page2.html new file mode 100644 index 0000000..0ee5ba3 --- /dev/null +++ b/webdev/page2.html @@ -0,0 +1,154 @@ + + + + + + CrunchTime + + + +
+
+
+

Drop image here

+ + +
+ +
+
+
+ +
+ +
+ +
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/webdev/style1.css b/webdev/style1.css new file mode 100644 index 0000000..69ef350 --- /dev/null +++ b/webdev/style1.css @@ -0,0 +1,231 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap'); + +body { + background-color: #545c63; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +section { + position: relative; + width: 100%; + min-height: 100vh; + padding: 100px; + display: flex; + justify-content: space-between; + align-items: center; + background: #545c63; +} + +header { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding: 20px 100px; + display: flex; + justify-content: space-between; + align-items: center; +} + +header .logo { + position: relative; + max-width: 80px; +} + +header ul { + position: relative; + display: flex; +} +.toggle +{ + +} + +header ul li { + list-style: none; +} + +header ul li a { + display: inline-block; + color: #fff; + font-weight: 400; + margin-left: 40px; + text-decoration: none; +} + +.content { + position: relative; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.content .textBox { + position: relative; + max-width: 600px; +} + +.content .textBox h2 { + color: #fff; + font-size: 4em; + line-height: 1.4em; + font-weight: 500; +} + +.content .textBox h2 span { + color: #6baa7f; + font-size: 1.2em; + font-weight: 900; +} + +.content .textBox p { + color: #fff; +} + +.content .textBox a { + display: inline-block; + margin-top: 20px; + padding: 8px 20px; + background: #84dd63; + color: #fff; + border-radius: 40px; + font-weight: 500; + letter-spacing: 1px; + text-decoration: none; +} + +.content .imgBox { + width: 300px; + height: 300px; + display: flex; + justify-content: flex-end; + padding-right: 50px; + margin-top: 50px; +} + +.content .imgBox img { + max-width: 340px; +} + + +.sci { + position: absolute; + top: 50%; + right: 30px; + transform: translateY(-50%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.sci li { + list-style: none; +} + +.sci li a { + display: inline-block; + margin: 5px 0; + transform: scale(0.6); + filter: invert(1); +} + +.circle { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #84dd63; + clip-path: circle(600px at right 500px); +} +@media (max-width: 991px){ + header{ + padding: 20px; + } +header .logo{ + max-width: 60px; + } +header ul{ + display: none; + } +header ul li a{ + font-size:1.5em; + margin: 5px 0; + } +.toggle{ + position: relative; + width: 30px; + height: 30px; + cursor: pointer; + background:url(menu.png); + background-size: 30px; + background-position:center; + background-repeat: no-repeat; + filter: invert(1); + z-index: 11; + } +.toggle.active{ + position:fixed; + right: 20px; + background:url(close.png); + background-size: 25px; + background-position:center; + background-repeat: no-repeat; + } +header ul.navigation.active{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background: #fff; + z-index: 10; + } +section{ + padding: 20px 20px 120px; + } +.content{ + flex-direction: column; + margin-top: 100px; + } +.content .textBox h2{ + font-size: 2.5em; + margin-bottom: 15px; + } +.content .imgBox{ + max-width: 300%; + justify-content: center; + } +.content .imgBox img{ + max-width: 300px; + } +.thumb li img{ + max-width: 40px; + } +.content .textbox{ + max-width: 100%; + } +.circle{ + + clip-path: circle(400px at center bottom); + } +.sci{ + background-color: #017143; + right: 0; + width:50px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } +} \ No newline at end of file diff --git a/webdev/style2.css b/webdev/style2.css new file mode 100644 index 0000000..4193320 --- /dev/null +++ b/webdev/style2.css @@ -0,0 +1,271 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap'); + + +#drop-area { + border: 2px dashed #ccc; + border-radius: 20px; + width: 480px; + height: 205px; + margin: 50px auto; + padding: 20px; +} +#drop-area.highlight { + border-color: #ffffff; +} +p { + margin-top: 5px; +} +.my-form { + margin-bottom: 10px; +} +#gallery { + margin-top: 10px; +} + +.button { + display: inline-block; + padding: 10px; + margin-right: 10px; + margin-bottom: 10px; + margin-top: 10px; + background: #6baa7f; + cursor: pointer; + border-radius: 5px; + border: 1px solid #ccc; +} +.button:hover { + background: #ddd; +} +#fileElem { + display: none; +} + +body { + background-color: #545c63; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +section { + position: relative; + width: 100%; + min-height: 100vh; + padding: 100px; + display: flex; + justify-content: space-between; + align-items: center; + background: #545c63; +} + +header { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding: 20px 100px; + display: flex; + justify-content: space-between; + align-items: center; +} + +header .logo { + position: relative; + max-width: 80px; +} + +header ul { + position: relative; + display: flex; +} +.toggle +{ + +} + +header ul li { + list-style: none; +} + +header ul li a { + display: inline-block; + color: #fff; + font-weight: 400; + margin-left: 40px; + text-decoration: none; +} + +.content { + position: relative; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.content .textBox { + position: relative; + max-width: 600px; +} + +.content .textBox h2 { + color: #fff; + font-size: 4em; + line-height: 1.4em; + font-weight: 500; +} + +.content .textBox h2 span { + color: #6baa7f; + font-size: 1.2em; + font-weight: 900; +} + +.content .textBox p { + color: #fff; +} + +.content .textBox a { + display: inline-block; + margin-top: 20px; + padding: 8px 20px; + background: #84dd63; + color: #fff; + border-radius: 40px; + font-weight: 500; + letter-spacing: 1px; + text-decoration: none; +} + +.content .imgBox { + width: 300px; + height: 300px; + display: flex; + justify-content: flex-end; + padding-right: 50px; + margin-top: 50px; +} + +.content .imgBox img { + max-width: 340px; +} + + +.sci { + position: absolute; + top: 50%; + right: 30px; + transform: translateY(-50%); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.sci li { + list-style: none; +} + +.sci li a { + display: inline-block; + margin: 5px 0; + transform: scale(0.6); + filter: invert(1); +} + +.circle { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #84dd63; + clip-path: circle(600px at right 500px); +} +@media (max-width: 991px){ + header{ + padding: 20px; + } + header .logo{ + max-width: 60px; + } + header ul{ + display: none; + } + header ul li a{ + font-size:1.5em; + margin: 5px 0; + } + .toggle{ + position: relative; + width: 30px; + height: 30px; + cursor: pointer; + background:url(menu.png); + background-size: 30px; + background-position:center; + background-repeat: no-repeat; + filter: invert(1); + z-index: 11; + } + .toggle.active{ + position:fixed; + right: 20px; + background:url(close.png); + background-size: 25px; + background-position:center; + background-repeat: no-repeat; + } + header ul.navigation.active{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background: #fff; + z-index: 10; + } + section{ + padding: 20px 20px 120px; + } + .content{ + flex-direction: column; + margin-top: 100px; + } + .content .textBox h2{ + font-size: 2.5em; + margin-bottom: 15px; + } + .content .imgBox{ + max-width: 300%; + justify-content: center; + } + .content .imgBox img{ + max-width: 300px; + } + .thumb li img{ + max-width: 40px; + } + .content .textbox{ + max-width: 100%; + } + .circle{ + + clip-path: circle(400px at center bottom); + } + .sci{ + background-color: #017143; + right: 0; + width:50px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } +} \ No newline at end of file diff --git a/webdev/twitter.png b/webdev/twitter.png new file mode 100644 index 0000000..009fbb9 Binary files /dev/null and b/webdev/twitter.png differ