diff --git a/src/css/style.css b/src/css/style.css
index 94da1aba07465f5c55509da42362b51d7722e636..3a42cd74ad940dbb62576317e3d36e3bb1adaf20 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -11,26 +11,61 @@
--weight-medium: 500;
--weight-semi-bold: 600;
--weight-bold: 700;
+ --body-color: #4B4B4B;
}
html {
scroll-behavior: smooth;
}
+.content-container {
+ max-width: 1000px;
+ width: 100%;
+}
+
+@media screen and (min-width: 1280px) {
+ body {
+ padding-top: 100px;
+ }
+}
+
body {
font-family: 'Poppins', sans-serif;
background-image: url('../img/background.svg');
- background-size: 250vw;
+ background-size: 400vw;
background-position: center;
+ background-color: #f9f9f9;
background-repeat: repeat;
+ color: var(--body-color);
}
.page-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
- background: rgba(255, 255, 255, 0.25);
- backdrop-filter: blur(10px);
+ background: rgba(255, 255, 255, 0.4);
+ backdrop-filter: blur(20px);
+}
+
+a {
+ text-decoration: none;
+ transition: box-shadow 300ms ease;
+}
+
+.button {
+ padding: 14px 35px;
+ font-size: 18px;
+ font-weight: var(--weight-bold);
+ background: radial-gradient();
+ background: radial-gradient(60% 100% at 50% 0%, #D298FF 0.01%, var(--primary) 100%);
+ box-shadow: 0px 5px 25px -5px rgba(var(--primary), 0.35);
+ border-radius: 25px;
+ display: inline-block;
+ color: #fff;
+}
+
+.button:hover {
+ box-shadow: 0px 5px 40px -5px rgba(var(--primary), 0.35);
}
* {
diff --git a/src/index.html b/src/index.html
index de503f68b2eef33d3d1fbb04f4113212844ae790..e3a42c60c1654b3ef45da3113ea6e953337134a0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,32 +17,33 @@
<body>
<div class="page-container">
- <header>
- <table>
- <tr>
- <td>
+ <main>
+ <section class="hero-section">
+ <div class="intro-container">
+ <header>
<a href="index.html">
<img src="img/logo.svg" alt="Logo" width="100" height="35">
</a>
- </td>
- <th>
<nav>
<a href="index.html">Home</a>
<a href="index.html#team">Team</a>
<a href="index.html#contact">Contact</a>
</nav>
- </th>
- </table>
- </header>
- <main>
- <section class="hero-section">
- <img src="img/header.jpg" alt="Header">
- <h1>ryoko</h1>
- <h2>Plan your projects like a journey!</h2>
- <p>
- Are you feeling lost with your tasks? Maximize your productivity now with ryoko.
- <a href="#intro">Get started</a>
- </p>
+ </header>
+ <div class="text-container">
+ <h1>ryoko</h1>
+ <h2>Plan your projects like a journey!</h2>
+ <p>
+ Are you feeling lost with your tasks? Maximize your productivity now with ryoko.
+ <a href="#intro" class="button">Get started</a>
+ </p>
+ </div>
+ </div>
+ <div class="preview-container">
+ <div class="preview-phone">
+
+ </div>
+ </div>
</section>
<section class="intro-section" id="intro">
<table>
@@ -243,4 +244,4 @@
</div>
</body>
-</html>
+</html>
\ No newline at end of file