diff --git a/css/landing page.css b/css/landing page.css new file mode 100644 index 0000000..44598e2 --- /dev/null +++ b/css/landing page.css @@ -0,0 +1,117 @@ +* { + margin: 0; + padding: 0; + list-style: none; + text-decoration: none; + } + + .logo { + order: 1; + font-size: 2rem; + font-weight: 800; + } + + nav { + display: flex; + justify-content: space-between; + align-items: center; + height: 64px; + margin-left: 50px; + margin-right: 50px; + + } + + nav ul { + display: flex; + order: 2; + } + + nav ul a { + color: #000000; + font-size: 1.6rem; + margin-left: 2rem; + z-index: 5; + } + + .container { + height: 600px; + padding: 20px; + margin-left: 40px; + margin-right: 40px; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + gap: 40px; + } + + .container img { + width: 100%; + /* height: 500px; */ + z-index: -1; + } + + .hero-text { + width: 80%; + } + + .hero-text h1 { + font-size: 3.3rem; + margin-bottom: 12px; + color: #8b4513; + } + + .hero-text p { + font-size: 1.4rem; + margin-bottom: 12px; + } + + button { + padding: 1em 2.1em 1.1em; + border-radius: 4px; + margin: 8px; + border: none; + background-color: #e2e273; + color: #000000; + font-weight: 800; + font-size: 0.85em; + text-transform: uppercase; + text-align: center; + box-shadow: 0em -0.2rem 0em #e2e273 inset; + transition: color 3s ease-in-out; + } + + button:hover { + background-color: transparent; + color: #8b4513; + border: 3px solid #e2e273; + cursor: pointer; + } + + /* Media queries */ + + @media (max-width: 884px) { + .container { + margin-top: 10px; + flex-direction: column; + } + .hero-text { + width: 100%; + text-align: center; + } + .hero-text h1 { + font-size: 3rem; + } + } + + @media (max-width: 678px) { + .hero-text h1 { + font-size: 2rem; + } + } + @media (max-width: 428px) { + nav ul { + display: none; + } + } + \ No newline at end of file diff --git a/exams-animate.svg b/exams-animate.svg new file mode 100644 index 0000000..77e2f11 --- /dev/null +++ b/exams-animate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index e69de29..dfbed18 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + + Responsive Hero + + + +
+ +
+
+
+ + +
+

Unleash Exam Potential

+

Sharpen your skills with a variety of question formats on our secure online testing platform ! +

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