Skip to content
Snippets Groups Projects
Commit 5c96fad1 authored by Maddy's avatar Maddy
Browse files

First frontpage design to BrainStormer

parent 97869aea
No related branches found
No related tags found
1 merge request!1Linking front to backend
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<title>BrainStormer</title>
</head>
<body>
<div id="app"></div>
......
FullstackProsjekt/src/frontend/public/favicon.ico

4.19 KiB | W: 32px | H: 32px

FullstackProsjekt/src/frontend/public/favicon.ico

39.6 KiB | W: 512px | H: 512px

FullstackProsjekt/src/frontend/public/favicon.ico
FullstackProsjekt/src/frontend/public/favicon.ico
FullstackProsjekt/src/frontend/public/favicon.ico
FullstackProsjekt/src/frontend/public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}
<template>
<h1> hey </h1>
<body>
<section class ="header">
<div class="text-box">
<h1 class="heading">BrainStormer</h1>
<p> An easy way to learn and share quizzes. <br> Make your own quiz now! </p>
<a href="" class="hero-btn">CREATE QUIZ</a>
</div>
</section>
<!----- Info ----->
<section class="info">
<h1>How does it work</h1>
<p>Set a difficulty to your quizzes ..... [Add more text here]</p>
<div class="row">
<div class="course-col">
<h3>Easy</h3>
<p>The simplest of quizzes </p>
</div>
<div class="course-col">
<h3>Medium</h3>
<p>A more challenging quiz for those who want a challenge </p>
</div>
<div class="course-col">
<h3>Hard</h3>
<p>Quizes that challenge the mind to new limits... </p>
</div>
</div>
</section>
</body>
</template>
<style scoped>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
/*---Top----*/
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),url(photos/lightning.gif);
background-position: center;
background-size: cover;
position: relative;
color: white;
}
/*Front page*/
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1{
font-size: 62px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 16px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover{
border: 1px solid #CCA43B;
background: #CCA43B;
transition: 1s;
}
@media (max-width: 700px){
.text-box h1{
font-size: 36px;
}
.row{
flex-direction: column;
}
}
<script setup>
</script>
/*Info with three levels*/
.info{
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
h1{
font-size: 36px;
font-weight: 600;
}
p{
color: #0f1412;
font-size: 16px;
font-weight: 300;
line-height: 22px;
padding: 10px;
}
.row{
margin-top: 5%;
display: flex;
justify-content: space-between;
}
.course-col{
flex-basis: 31%;
background: #D9C590;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px;
box-sizing: border-box;
transition: 0.5s;
}
h3{
text-align: center;
font-weight: 600;
margin: 10px 0;
}
.course-col:hover{
box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
}
</style>
```
\ No newline at end of file
FullstackProsjekt/src/frontend/src/components/icons/brain.png

39.6 KiB

FullstackProsjekt/src/frontend/src/components/photos/background.png

668 KiB

FullstackProsjekt/src/frontend/src/components/photos/lightning.gif

3.05 MiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment