diff --git a/index.html b/index.html new file mode 100644 index 0000000..28a52c0 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + +
+ +
+ Cute animated illustration +
+
+ + + + +
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..06e05ab --- /dev/null +++ b/styles.css @@ -0,0 +1,95 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 90vh; + background-color: rgb(0,0,0); +} + +#noButton { + position: absolute; + margin-left: 150px; + transition: 0.5s; +} + +#yesButton { + position: absolute; + margin-right: 150px; +} + +.header_text { + font-family: 'Nunito'; + font-size: 40px; + font-weight: bold; + color: rgb(255, 255, 255); + text-align: center; + margin-top: 20px; + margin-bottom: 0; +} + +.buttons { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 20px; + margin-left: 20px; +} + +.btn { + background-color: #ffffff; + color: rgb(233, 48, 48); + padding: 15px 32px; + text-align: center; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border: none; + border-radius: 12px; + transition: background-color 0.3s ease; +} + +.gif_container { + display: flex; + justify-content: center; + align-items: center; +} + +@media only screen and (max-width: 320px) and (max-height: 568px) { + body { + height: 100vh; + } + + .header_text { + font-size: 20px; + } + + img { + height: 60vh; + } + + .btn { + padding: 10px 18px; + font-size: 12px; + } +} + +@media only screen and (max-width: 414px) and (max-height: 736px) { + body { + height: 90vh; + } + + .header_text { + font-size: 28px; + } + + img { + height: 60vh; + } + + .btn { + padding: 15px 25px; + font-size: 14px; + } +} \ No newline at end of file diff --git a/yes.html b/yes.html new file mode 100644 index 0000000..a5dcded --- /dev/null +++ b/yes.html @@ -0,0 +1,16 @@ + + + + + + + +
+ +
+ Cute animated illustration +
+
+ + + diff --git a/yes_style.css b/yes_style.css new file mode 100644 index 0000000..8f7e8cb --- /dev/null +++ b/yes_style.css @@ -0,0 +1,23 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: rgb(0,0,0); +} + +.header_text { + font-family: 'Nunito'; + font-size: 50px; + font-weight: bold; + color: white; + text-align: center; + margin-top: 20px; + margin-bottom: 0px; +} + +.gif_container { + display: flex; + justify-content: center; + align-items: center; +}