Skip to content

Commit

Permalink
html structure defined, node modules defined,
Browse files Browse the repository at this point in the history
gulp tasks added
  • Loading branch information
vace328 committed Sep 26, 2022
1 parent abb687e commit 7d33e66
Show file tree
Hide file tree
Showing 9 changed files with 23,576 additions and 26 deletions.
101 changes: 101 additions & 0 deletions css/styles.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

180 changes: 180 additions & 0 deletions gulpfile.babel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
import gulp from "gulp";
import yargs from "yargs";
import gulpSass from "gulp-sass";
import dartSass from "sass";
import cleanCSS from "gulp-clean-css";
import gulpif from "gulp-if";
import sourcemaps from "gulp-sourcemaps";
// import imagemin from "gulp-imagemin";
// import del from "del";
import webpack from "webpack-stream";
import uglify from "gulp-uglify";
// import named from "vinyl-named";
import browserSync from "browser-sync";
// import zip from "gulp-zip";
// import replace from "gulp-replace";
import info from "./package.json";
// import es from "event-stream";
import autoprefixer from "autoprefixer";
import postcss from "gulp-postcss";

const server = browserSync.create();
const PRODUCTION = yargs.argv.prod;
const sass = gulpSass(dartSass);

const paths = {
styles: {
src: [
// "scss/bootstrap.scss",
"scss/styles.scss"
],
dest: "css"
},

scrips: {
src: [
"src/js/custom.js"
],
dest: "assets/js"
},
other: {
src: [
"src/**/*",
"!src/{images,js,scss,vendors}",
"!src/{images,js,scss,vendors}/**/*"
],
dest: "dist"
},
package: {
src: [
"**/*",
"!.vscode",
"!node_modules{,/**}",
"!packaged{,/**}",
"!src{,/**}",
"!.babelrc",
"!.gitignore",
"!gulpfile.babel.js",
"!package.json",
"!package-lock.json"
],
dest: "packaged"
}
};

export const serve = done => {
server.init({
// proxy: "http://localhost:8888/"
server: {
baseDir: "./"
}
});
done();
};

export const reload = done => {
server.reload();
done();
};

// export const clean = () => del(["dist"]);

export const styles = () => {
return gulp.src(paths.styles.src)
.pipe(gulpif(!PRODUCTION, sourcemaps.init()))
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulpif(PRODUCTION, cleanCSS({ compatibility: "ie8" })))
.pipe(postcss([ autoprefixer() ]))
.pipe(gulpif(!PRODUCTION, sourcemaps.write()))
.pipe(gulp.dest(paths.styles.dest))
.pipe(server.stream());
};

// export const images = () => {
// return gulp
// .src(paths.images.src)
// .pipe(gulpif(PRODUCTION, imagemin()))
// .pipe(gulp.dest(paths.images.dest));
// };

export const watch = () => {
gulp.watch("scss/**/*.scss", gulp.series(styles));
// gulp.watch("src/js/**/*.js", gulp.series(scripts, reload));
gulp.watch("**/*.html", reload);
gulp.watch("**/*.js", reload);
// gulp.watch(paths.images.src, gulp.series(images, reload));
// gulp.watch(paths.other.src, gulp.series(copyOther, reload));
};

// export const copyOther = () => {
// return gulp.src(paths.other.src).pipe(gulp.dest(paths.other.dest));
// };

// export const scripts = () => {
// return gulp
// .src(paths.scrips.src)
// .pipe(named())
// .pipe(
// webpack({
// module: {
// rules: [
// {
// test: /\.js$/,
// use: {
// loader: "babel-loader",
// options: {
// presets: ["@babel/preset-env"]
// }
// }
// }
// ]
// },
// output: {
// filename: "[name].js"
// },
// externals: {
// jquery: "jQuery"
// },
// devtool: !PRODUCTION ? "inline-source-map" : false,
// mode: PRODUCTION ? 'production' : 'development'
// })
// )
// .pipe(gulp.dest(paths.scrips.dest));
// };

// export const compress = () => {
// return gulp
// .src(paths.package.src)
// .pipe(
// gulpif(
// file => file.relative.split(".").pop() !== "zip",
// replace("_themename", info.name)
// )
// )
// .pipe(zip(`${info.name}.zip`))
// .pipe(gulp.dest(paths.package.dest));
// };

export const dev = gulp.series(
// clean,
// gulp.parallel(styles, scripts, images, copyOther),
// replace_filenames,
styles,
serve,
watch
);

// export const build = gulp.series(
// clean,
// gulp.parallel(styles, stylesBootstrap, scripts, images, copyOther),
// copyPlugins,
// pot
// );
// export const bundle = gulp.series(
// build,
// replace_filenames,
// compress,
// delete_replaced_filenames
// );

export default dev;
95 changes: 69 additions & 26 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,82 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->

<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | FAQ Accordion Card</title>

<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
How many team members can I invite?
You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.
<header>
<h1 id="site-title">Frequently asked questions</h1>
</header>
<main>
<div class="illustration">
illustration here
</div>
<div class="questions-wrapper">
<!-- 1 -->
<div class="question">
<div class="question-header">
<h2>How many team members can I invite?</h2>
<img src="./images/icon-arrow-down.svg" alt="Arrow down icon">
</div>
<div class="question-body">
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
</div>
<!-- 2 -->
<div class="question">
<div class="question-header active">
<h2>What is the maximum file upload size?</h2>
<img src="./images/icon-arrow-down.svg" alt="Arrow down icon">
</div>
<div class="question-body">
<p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
</div>
<!-- 3 -->
<div class="question">
<div class="question-header">
<h2>How do I reset my password?</h2>
<img src="./images/icon-arrow-down.svg" alt="Arrow down icon">
</div>
<div class="question-body">
<p>Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.</p>
</div>
</div>
<!-- 4 -->
<div class="question">
<div class="question-header">
<h2>Can I cancel my subscription?</h2>
<img src="./images/icon-arrow-down.svg" alt="Arrow down icon">
</div>
<div class="question-body">
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
</div>
<!-- 5 -->
<div class="question">
<div class="question-header">
<h2>Do you provide additional support?</h2>
<img src="./images/icon-arrow-down.svg" alt="Arrow down icon">
</div>
<div class="question-body">
<p>Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
</main>

What is the maximum file upload size?
No more than 2GB. All files in your account must fit your allotted storage space.

How do I reset my password?
Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.

Can I cancel my subscription?
Yes! Send us a message and we’ll process your request no questions asked.

Do you provide additional support?
Chat and email support is available 24/7. Phone lines are open during normal business hours.

<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
<!-- <footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</footer> -->
<script src="app.js"></script>
</body>
</html>
Loading

0 comments on commit 7d33e66

Please sign in to comment.