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.