Skip to content
Snippets Groups Projects
Commit 419d954a authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

mark-up preperation and background fixes

parent 9eb14fd4
No related branches found
No related tags found
1 merge request!1Adding css
Hide whitespace changes
Inline Side-by-side
src/css/style.css
+ 38
− 3
View file @ 419d954a
...@@ -11,26 +11,61 @@ ...@@ -11,26 +11,61 @@
--weight-medium: 500; --weight-medium: 500;
--weight-semi-bold: 600; --weight-semi-bold: 600;
--weight-bold: 700; --weight-bold: 700;
--body-color: #4B4B4B;
} }
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
.content-container {
max-width: 1000px;
width: 100%;
}
@media screen and (min-width: 1280px) {
body {
padding-top: 100px;
}
}
body { body {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
background-image: url('../img/background.svg'); background-image: url('../img/background.svg');
background-size: 250vw; background-size: 400vw;
background-position: center; background-position: center;
background-color: #f9f9f9;
background-repeat: repeat; background-repeat: repeat;
color: var(--body-color);
} }
.page-container { .page-container {
width: 100%; width: 100%;
max-width: 1240px; max-width: 1240px;
margin: 0 auto; margin: 0 auto;
background: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px); 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);
} }
* { * {
......
src/index.html
+ 20
− 19
View file @ 419d954a
...@@ -17,32 +17,33 @@ ...@@ -17,32 +17,33 @@
<body> <body>
<div class="page-container"> <div class="page-container">
<header> <main>
<table> <section class="hero-section">
<tr> <div class="intro-container">
<td> <header>
<a href="index.html"> <a href="index.html">
<img src="img/logo.svg" alt="Logo" width="100" height="35"> <img src="img/logo.svg" alt="Logo" width="100" height="35">
</a> </a>
</td>
<th>
<nav> <nav>
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="index.html#team">Team</a> <a href="index.html#team">Team</a>
<a href="index.html#contact">Contact</a> <a href="index.html#contact">Contact</a>
</nav> </nav>
</th> </header>
</table> <div class="text-container">
</header> <h1>ryoko</h1>
<main> <h2>Plan your projects like a journey!</h2>
<section class="hero-section"> <p>
<img src="img/header.jpg" alt="Header"> Are you feeling lost with your tasks? Maximize your productivity now with ryoko.
<h1>ryoko</h1> <a href="#intro" class="button">Get started</a>
<h2>Plan your projects like a journey!</h2> </p>
<p> </div>
Are you feeling lost with your tasks? Maximize your productivity now with ryoko. </div>
<a href="#intro">Get started</a> <div class="preview-container">
</p> <div class="preview-phone">
</div>
</div>
</section> </section>
<section class="intro-section" id="intro"> <section class="intro-section" id="intro">
<table> <table>
...@@ -243,4 +244,4 @@ ...@@ -243,4 +244,4 @@
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment