Let's design with code!
You are supposed to recreate the StyleSheet only given an image. You get a points based on how much your output matches with the target and bonus if it is achieved with the lesser code in comparison.
Try to complete as many images as possible in the given time.
- #1
- #2
- #3
- #4
- #5
- #6
- #7
- #8
- #9
- #10
- #11
- #12
- #13
- #14
- #15
- #16
- #17
- #18
- #19
- #20
- #21
- #22
- #23
- #24
- #25
- #26
- #27
- #28
- #29
- #30
- #31
- #32
- #33
- #34
- #35
- #36
- #37
- #38
- #39
- #40
- #41
- #42
Type your code only inside the body
tag.
For Example -
<!-- Type your code inside here -->
<body>
<div></div>
<style>
* {
margin: 0;
}
body {
background: #5d3a3a;
height: 298px;
width: 398px;
}
div {
width: 200px;
height: 200px;
background: #b5e0ba;
}
</style>
</body>
Save the index.html
as index{id}.html
.
For Example - If your Id is 34, then save your file as index34.html
.
Put all the index.html files into a single folder. In the python file, go to line number 38 and replace the input_path
variable with path to your folder that has all the index.html
files
input_path = "D:/my_folder/subfolder"
For running the python code, open your cmd
terminal,
- Run
pip install -r requirements.txt
- Then run
python Tester.py
This will generate all the output images for you, from the index.html
files.
The output for index13.html
will be out13.png
.
Modify the image path in the img
tag by editing the src
element. Add the path to both the original image and your modified image in
<img src="D:/my_folder/some_sub_folder/1.png" alt="Original Image">
<span class="cd-image-label" data-type="original">Original</span>
<div class="cd-resize-img"> <!-- the resizable image on top -->
<img src="D:/my_folder/some_sub_folder/out1.png" alt="Modified Image">
<span class="cd-image-label" data-type="modified">Modified</span>
</div>
You can slide and check the images to see whether both are matching.